/* ============ DASHBOARD : TOKENS ============ */
:root{
  --bg:#0b0a0c;
  --ink:#ece4d6;
  --ink-soft:rgba(236,228,214,.72);
  --ink-faint:rgba(236,228,214,.45);
  --gold:#c9a86a;
  --gold-bright:#e3c489;
  --gold-soft:rgba(201,168,106,.42);
  --line:rgba(201,168,106,.22);
  --sans:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --serif:'Noto Serif SC','Songti SC','STSong',serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bg);
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============ BACKGROUND ============ */
.login-bg{
  position:fixed;inset:0;z-index:0;
  background:url("../../pic/startup.jpg") center/cover no-repeat;
}
.login-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,10,.55),rgba(8,7,10,.82));
  backdrop-filter:blur(2px);
}

/* ============ TOP MENU ============ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;padding:22px 44px;
  background:transparent;
}
.topbar .brand{
  font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:.16em;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;
}
.topbar .brand .dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px rgba(201,168,106,.7);
}
.topbar nav{display:flex;align-items:center;gap:34px}
.topbar nav a{
  font-size:13px;letter-spacing:.14em;color:var(--ink-soft);
  text-decoration:none;position:relative;padding:4px 0;transition:.3s;
}
.topbar nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .35s;
}
.topbar nav a:hover{color:var(--gold-bright)}
.topbar nav a:hover::after,.topbar nav a.active::after{width:100%}
.topbar nav a.active{color:var(--gold-bright)}

/* ============ STAGE ============ */
.stage{
  position:relative;z-index:10;flex:1;
  display:flex;align-items:center;justify-content:center;padding:130px 20px 70px;
}

.panel{
  width:100%;max-width:720px;
  background:rgba(16,14,19,.62);
  border:1px solid var(--line);border-radius:12px;
  padding:44px 40px 34px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
}
.panel .eyebrow{
  font-size:11px;letter-spacing:.46em;text-transform:uppercase;
  color:var(--gold-soft);text-align:center;
}
.panel h1{
  font-family:var(--serif);font-weight:300;font-size:30px;letter-spacing:.08em;
  text-align:center;margin:12px 0 6px;
}
.panel .sub{
  text-align:center;font-size:12.5px;color:var(--ink-faint);
  margin-bottom:32px;letter-spacing:.06em;
}

/* ============ INFO GRID ============ */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.cell{
  background:rgba(12,10,15,.72);padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.cell .k{font-size:11.5px;letter-spacing:.14em;color:var(--ink-faint)}
.cell .v{font-size:14px;font-weight:500;color:var(--ink);word-break:break-all}
.cell.highlight{background:rgba(201,168,106,.09)}
.cell.highlight .v{
  font-family:var(--sans);font-size:20px;letter-spacing:.1em;color:var(--gold-bright);
  font-variant-numeric:tabular-nums;
}

/* ============ ACTIONS ============ */
.actions{display:flex;gap:14px;margin-top:28px}
.btn{
  flex:1;height:46px;border-radius:6px;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.2em;transition:.3s;
}
.btn.ghost{
  background:transparent;color:var(--ink-soft);
  border:1px solid var(--line);
}
.btn.ghost:hover{color:var(--gold-bright);border-color:var(--gold)}
.btn.solid{
  border:none;font-weight:600;color:#2a1f12;
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  box-shadow:0 10px 30px rgba(201,168,106,.3);
}
.btn.solid:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* ============ FOOT ============ */
.foot{
  margin-top:22px;text-align:center;font-size:11.5px;color:var(--ink-faint);
  letter-spacing:.08em;
}
.foot .dot-sep{margin:0 8px;opacity:.5}

/* ============ RESPONSIVE ============ */
@media(max-width:760px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .topbar{padding:18px 20px}
  .topbar nav{gap:16px}
  .topbar nav a{font-size:12px}
  .stage{padding:110px 16px 40px}
  .panel{padding:32px 22px 26px}
  .actions{flex-direction:column}
}