/* ============ hui · 辉 个人主页 ============ */
:root{
  --glass-bg: rgba(20, 22, 34, 0.32);
  --glass-bg-strong: rgba(20, 22, 34, 0.46);
  --glass-border: rgba(255,255,255,0.16);
  --glass-hi: rgba(255,255,255,0.28);
  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.72);
  --text-faint: rgba(255,255,255,0.5);
  --accent: #ffd166;
  --accent-2: #7ee8fa;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 32px rgba(0,0,0,0.28);
  --blur: 18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  overflow:hidden;
  position:relative;
  background:#0b0d16;
}
/* ---------- 背景 ---------- */
.bg-layer{
  position:fixed;inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  transition:background-image .8s ease;
  z-index:-3;
}
.bg-overlay{
  position:fixed;inset:0;
  background:
    radial-gradient(120% 90% at 12% 18%, rgba(255,138,76,0.28), transparent 55%),
    radial-gradient(110% 80% at 88% 82%, rgba(58,110,180,0.30), transparent 58%),
    linear-gradient(180deg, rgba(6,8,16,0.34) 0%, rgba(6,8,16,0.52) 100%);
  z-index:-2;
  pointer-events:none;
}
/* ---------- 布局 ---------- */
.stage{
  height:100vh;
  display:grid;
  grid-template-columns: minmax(280px, 360px) minmax(520px, 1fr);
  gap:clamp(20px, 3vw, 56px);
  align-items:center;
  padding:clamp(24px, 4vw, 64px) clamp(24px, 5vw, 80px) 84px;
  max-width:1500px;
  margin:0 auto;
}
/* ---------- 毛玻璃通用 ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
}
/* ---------- 左侧个人信息 ---------- */
.profile{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;text-align:center;
  animation: fadeUp .9s cubic-bezier(.2,.7,.3,1) both;
}
.avatar-wrap{position:relative;width:104px;height:104px}
.avatar{
  width:104px;height:104px;border-radius:50%;
  display:grid;place-items:center;
  font-family:"Caveat",cursive;font-size:46px;font-weight:700;
  color:#1a1c28;
  background:linear-gradient(135deg,#ffd166,#7ee8fa);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.5);
  position:relative;z-index:1;
}
.avatar-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.35);
  animation: spin 24s linear infinite;
}
.brand{
  font-family:"Caveat",cursive;
  font-size:clamp(40px,4.4vw,58px);
  font-weight:700;line-height:1;
  letter-spacing:1px;
  text-shadow:0 4px 24px rgba(0,0,0,.45);
}
.brand .dot{color:var(--accent)}
.brand-cn{
  font-size:13px;letter-spacing:6px;color:var(--text-dim);
  margin-top:-6px;
}
.quote-card{
  border-radius:var(--radius);
  padding:18px 20px;position:relative;
  max-width:340px;
}
.quote-mark{
  font-family:"Caveat",cursive;font-size:42px;line-height:0;
  color:var(--accent);opacity:.85;display:block;
}
.quote-mark.end{text-align:right;transform:translateY(6px)}
.quote-text{
  font-size:17px;font-weight:500;letter-spacing:.5px;
  margin:2px 0 8px;
}
.quote-sub{
  font-size:12.5px;color:var(--text-faint);line-height:1.6;
}
.socials{display:flex;gap:14px;margin-top:4px}
.social-btn{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--text);text-decoration:none;
  background:rgba(255,255,255,.10);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  transition:transform .25s, background .25s, color .25s;
}
.social-btn:hover{
  transform:translateY(-4px) scale(1.06);
  background:rgba(255,255,255,.22);
  color:var(--accent);
}
/* ---------- 右侧面板 ---------- */
.panels{
  display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);
  animation: fadeUp .9s .12s cubic-bezier(.2,.7,.3,1) both;
}
.panel-row{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap:clamp(16px,2vw,24px);
}
.card{border-radius:var(--radius);padding:18px 20px}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.card-title{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:500;color:var(--text-dim);
  letter-spacing:.5px;
}
.pill-btn{
  font-family:inherit;font-size:12px;
  padding:6px 14px;border-radius:999px;cursor:pointer;
  color:var(--text);background:rgba(255,255,255,.12);
  border:1px solid var(--glass-border);
  transition:background .2s, transform .2s;
}
.pill-btn:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.pill-btn.primary{background:linear-gradient(135deg,#ffd166,#f4a259);color:#1a1c28;border:none;font-weight:600}
.pill-btn.ghost{background:transparent}
/* 音乐卡片 */
.music-body{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cover{
  width:64px;height:64px;border-radius:14px;flex:0 0 auto;
  background:linear-gradient(135deg,#2b2f45,#151827);
  display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--glass-border);
}
.cover-disc{
  width:38px;height:38px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #ffd166 0 18%, #1a1c28 19% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.cover.playing .cover-disc{animation: spin 3.6s linear infinite}
.music-info{min-width:0;flex:1}
.song-title{
  font-size:15px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.song-artist{
  font-size:12px;color:var(--text-faint);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.music-controls{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-bottom:14px;
}
.ctrl-btn{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--text);
  background:rgba(255,255,255,.10);
  border:1px solid var(--glass-border);
  transition:transform .2s, background .2s;
}
.ctrl-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.08)}
.ctrl-btn.main{
  width:50px;height:50px;
  background:linear-gradient(135deg,#ffd166,#f4a259);
  color:#1a1c28;border:none;
  box-shadow:0 6px 18px rgba(255,209,102,.35);
}
.progress-wrap{display:flex;align-items:center;gap:10px}
.time-now,.time-total{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums;min-width:34px}
.time-total{text-align:right}
.progress-bar{
  flex:1;height:5px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.16);overflow:hidden;
}
.progress-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,#7ee8fa,#ffd166);
  transition:width .15s linear;
}
/* 时钟卡片 */
.clock-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:22px 20px;
}
.date-line{font-size:12.5px;color:var(--text-dim);letter-spacing:.6px}
.clock{
  font-family:"Orbitron",monospace;
  font-size:clamp(34px,3.4vw,46px);
  font-weight:700;letter-spacing:2px;
  text-shadow:0 0 22px rgba(126,232,250,.45), 0 4px 18px rgba(0,0,0,.4);
  font-variant-numeric:tabular-nums;
}
.weather-line{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text-dim);
  padding:6px 16px;border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid var(--glass-border);
}
.weather-icon{font-size:16px}
/* 网站列表 */
.sites-card{flex:1}
.sites-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.site-item{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;border-radius:var(--radius-sm);
  text-decoration:none;color:var(--text);
  background:rgba(255,255,255,.08);
  border:1px solid var(--glass-border);
  transition:transform .22s, background .22s, box-shadow .22s;
  overflow:hidden;
}
.site-item:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.site-ico{
  width:32px;height:32px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;font-size:15px;font-weight:600;
  background:linear-gradient(135deg,rgba(255,209,102,.9),rgba(126,232,250,.9));
  color:#1a1c28;
}
.site-name{
  font-size:13.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ---------- 底部歌词 ---------- */
.lyric-bar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  padding:9px 26px;border-radius:999px;
  font-size:12.5px;color:var(--text-dim);
  white-space:nowrap;max-width:80vw;overflow:hidden;text-overflow:ellipsis;
  animation: fadeUp 1s .3s both;
}
/* ---------- 侧边 AI 标签 ---------- */
.side-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:8px;
  padding:14px 12px 14px 16px;
  border-radius:14px 0 0 14px;
  text-decoration:none;color:var(--text);
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);border-right:none;
  backdrop-filter:blur(var(--blur));
  writing-mode:vertical-rl;
  font-size:12.5px;letter-spacing:2px;
  transition:padding-right .25s, background .25s;
}
.side-tab:hover{padding-right:20px;background:rgba(255,209,102,.28)}
.side-icon{writing-mode:horizontal-tb;color:var(--accent);font-size:14px}
/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed;inset:0;z-index:50;
  display:none;place-items:center;
  background:rgba(6,8,16,.55);
  backdrop-filter:blur(4px);
}
.modal-mask.show{display:grid}
.modal{
  width:min(460px,90vw);border-radius:var(--radius);
  padding:22px 24px;
}
.modal h3{font-size:16px;font-weight:600;margin-bottom:6px}
.modal-tip{font-size:12px;color:var(--text-faint);margin-bottom:12px}
#sitesInput{
  width:100%;height:190px;resize:vertical;
  padding:12px;border-radius:var(--radius-sm);
  font-family:ui-monospace,Consolas,monospace;font-size:13px;line-height:1.7;
  color:var(--text);background:rgba(0,0,0,.28);
  border:1px solid var(--glass-border);outline:none;
}
#sitesInput:focus{border-color:rgba(255,209,102,.6)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
/* ---------- 动画 ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  body{overflow:auto}
  .stage{grid-template-columns:1fr;height:auto;min-height:100vh;padding-bottom:96px}
  .profile{order:-1}
  .panel-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sites-grid{grid-template-columns:repeat(2,1fr)}
  .side-tab{display:none}
}