/* ============================================================
   $SILK dashboard — modern, dark, deliberately nothing like the
   period site it sits behind.
   ============================================================ */

:root{
  --bg:#0b0e14;
  --surface:#121722;
  --surface-2:#171d2a;
  --line:#232b3b;
  --line-soft:#1b2231;
  --text:#e7eaf1;
  --muted:#8b93a7;
  --dim:#606a80;
  --green:#3ddc84;
  --green-dim:#1f7a4a;
  --red:#f2555a;
  --btc:#f7931a;
  --violet:#a78bfa;
  --r:14px;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(61,220,132,.10), transparent 62%),
    radial-gradient(760px 460px at 92% -4%, rgba(247,147,26,.09), transparent 60%);
  background-repeat:no-repeat;
}
a{color:inherit; text-decoration:none}
h1,h2{margin:0; font-weight:650; letter-spacing:-.01em}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace}
[hidden]{display:none !important}

/* ------------------------------------------------------------ topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:22px;
  padding:12px 26px;
  background:rgba(11,14,20,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:34px; height:34px; object-fit:contain}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-txt b{font-size:15px; letter-spacing:-.01em}
.brand-txt i{font-style:normal; font-size:11px; color:var(--muted); letter-spacing:.06em}

.topnav{display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap}
.topnav a{
  padding:7px 13px; border-radius:9px; font-size:13.5px; color:var(--muted);
  transition:background .15s, color .15s;
}
.topnav a:hover{background:var(--surface-2); color:var(--text)}
.topnav a.ghost{border:1px solid var(--line); color:var(--muted)}
.topnav a.ghost:hover{border-color:var(--green-dim); color:var(--green)}

.mode-switch{
  display:inline-flex; margin-left:6px; padding:3px;
  background:#0d121b; border:1px solid var(--line); border-radius:10px;
}
.mode-switch a,
.mode-switch .ms-on{
  padding:5px 13px; border-radius:7px; font-size:13px; font-weight:500; white-space:nowrap;
}
.mode-switch .ms-on{background:var(--surface-2); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.35)}
.mode-switch a{color:var(--muted)}
.mode-switch a:hover{color:var(--text); background:rgba(255,255,255,.04)}

.buy{
  padding:9px 18px; border:0; border-radius:10px; cursor:pointer;
  font:600 13.5px ui-sans-serif, system-ui, -apple-system, sans-serif;
  color:#06210f; background:linear-gradient(180deg,#5bf0a0,#31c473);
  box-shadow:0 5px 18px rgba(61,220,132,.24);
}
.buy:hover{filter:brightness(1.07)}

/* -------------------------------------------------------------- wrap */
.wrap{max-width:1180px; margin:0 auto; padding:26px 26px 60px}

/* -------------------------------------------------------------- hero */
.hero{
  display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:center;
  padding:28px 30px; margin-bottom:22px;
  background:linear-gradient(160deg, var(--surface) 0%, #0f141d 100%);
  border:1px solid var(--line); border-radius:var(--r);
}
.hero-label{font-size:12px; color:var(--dim); letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px}
.hero-price{font:650 46px/1.05 ui-sans-serif, system-ui, sans-serif; letter-spacing:-.025em}
.hero-row{display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap}
.hero-btc{font-family:ui-monospace, Menlo, monospace; font-size:14px; color:var(--btc)}
.chip{
  display:inline-block; padding:4px 11px; border-radius:999px;
  font-size:13px; font-weight:600; background:rgba(61,220,132,.13); color:var(--green);
}
.chip.down{background:rgba(242,85,90,.13); color:var(--red)}
.hero-note{margin:16px 0 0; font-size:13.5px; color:var(--muted); max-width:46ch}
.hero-note a{color:var(--green)}

.hero-side{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mini{
  padding:13px 15px; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:11px;
}
.mini span{display:block; font-size:11.5px; color:var(--dim); margin-bottom:4px}
.mini b{font-size:19px; font-weight:600; letter-spacing:-.015em}

/* ------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:12px; margin-bottom:22px}
.card{
  padding:17px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); transition:border-color .15s, transform .15s;
}
.card:hover{border-color:#2f3a4f; transform:translateY(-1px)}
.card-k{font-size:11.5px; color:var(--dim); letter-spacing:.05em; text-transform:uppercase}
.card-v{margin-top:7px; font-size:25px; font-weight:650; letter-spacing:-.02em}
.card-v.btc{color:var(--btc)}
.card-v.green{color:var(--green)}
.card-v.red{color:var(--red)}
.card-v.violet{color:var(--violet)}
.card-s{margin-top:5px; font-size:12.5px; color:var(--muted)}

/* ------------------------------------------------------------ panels */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px; margin-bottom:22px;
}
.panel-h{display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.panel-h h2{font-size:16.5px}
.panel-sub{font-size:12.5px; color:var(--dim)}
.panel-link{margin-left:auto; font-size:13px; color:var(--green)}
.panel-link:hover{text-decoration:underline}

.split{display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:start}
.stack{display:flex; flex-direction:column}

/* ------------------------------------------------------------- table */
.table-wrap{overflow-x:auto; margin:0 -6px}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{
  padding:8px 10px; text-align:left; font-size:11px; font-weight:600; color:var(--dim);
  letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--line);
}
.tbl td{padding:9px 10px; border-bottom:1px solid var(--line-soft)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:rgba(255,255,255,.018)}
.tbl .r{text-align:right}
.tbl .num{text-align:right; font-family:ui-monospace, Menlo, monospace; font-size:12.5px; white-space:nowrap}
.tbl .empty{color:var(--dim); text-align:center; padding:26px; font-style:italic}
.tbl a{color:var(--green)}
.tbl a:hover{text-decoration:underline}
.burnt{color:var(--red)}

.pill{
  display:inline-block; padding:1px 7px; margin-left:6px; border-radius:999px;
  font-size:10.5px; font-weight:600; white-space:nowrap;
  background:rgba(61,220,132,.13); color:var(--green);
}
.pill.dpr{background:rgba(167,139,250,.15); color:var(--violet)}
.pill.treasury{background:rgba(247,147,26,.13); color:var(--btc)}

/* --------------------------------------------------------- big stat */
.big-stat{margin-bottom:14px}
.big-v{display:block; font-size:33px; font-weight:650; letter-spacing:-.025em}
.big-v.btc{color:var(--btc)}
.big-k{display:block; font-size:12.5px; color:var(--muted); margin-top:3px}

.kv{margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; text-align:right; font-family:ui-monospace, Menlo, monospace; font-size:12.5px}

/* ------------------------------------------------------------- bars */
.bars{display:flex; flex-direction:column; gap:9px; margin-bottom:16px}
.bar-row{font-size:12.5px}
.bar-top{display:flex; justify-content:space-between; margin-bottom:5px; color:var(--muted)}
.bar-top b{color:var(--text); font-family:ui-monospace, Menlo, monospace; font-size:12px}
.bar-track{height:7px; border-radius:999px; background:#1b2231; overflow:hidden}
.bar-fill{height:100%; border-radius:999px}
.bar-fill.circ{background:linear-gradient(90deg,#3ddc84,#2aa866)}
.bar-fill.vault{background:linear-gradient(90deg,#f7931a,#c9740f)}
.bar-fill.dpr{background:linear-gradient(90deg,#a78bfa,#7c5ddb)}
.bar-fill.burn{background:linear-gradient(90deg,#f2555a,#b93940)}

/* ------------------------------------------------------------ chart */
.chart-wrap{height:460px; border-radius:11px; overflow:hidden; border:1px solid var(--line-soft); background:#0d1117}
.chart-wrap iframe{width:100%; height:100%; border:0; display:block}

/* ------------------------------------------------------- lookup */
.lk-form{display:flex; gap:10px; flex-wrap:wrap}
.lk-form input{
  flex:1; min-width:240px; padding:11px 14px; border-radius:10px;
  background:#0d121b; border:1px solid var(--line); color:var(--text);
  font:13px ui-monospace, Menlo, monospace;
}
.lk-form input:focus{outline:none; border-color:var(--green-dim); box-shadow:0 0 0 3px rgba(61,220,132,.1)}
.lk-form button{
  padding:11px 22px; border-radius:10px; border:0; cursor:pointer; font-size:13.5px; font-weight:600;
  background:linear-gradient(180deg,#5bf0a0,#31c473); color:#06210f;
}
.lk-form button:disabled{opacity:.5; cursor:default}

.lk-out{margin-top:16px; padding:16px 18px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line)}
.lk-out.err{border-color:#5d2b30; background:rgba(242,85,90,.06)}
.lk-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; font-size:13.5px; color:var(--muted)}
.lk-head a{color:var(--green); font-family:ui-monospace, Menlo, monospace}
.lk-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.lk-cell{padding:11px 13px; border-radius:10px; background:#0f141d; border:1px solid var(--line-soft)}
.lk-cell .k{display:block; font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em}
.lk-cell .v{display:block; margin-top:5px; font-size:18px; font-weight:600; letter-spacing:-.015em}
.lk-cell .v.btc{color:var(--btc)}
.lk-msg{margin:14px 0 0; padding:10px 13px; border-radius:9px; font-size:13px}
.lk-msg.ok{background:rgba(61,220,132,.08); border:1px solid rgba(61,220,132,.22); color:#9ff0c4}
.lk-msg.no{background:rgba(247,147,26,.07); border:1px solid rgba(247,147,26,.2); color:#f0c48a}
.lk-msg a{color:inherit; text-decoration:underline}
.lk-fine{margin:11px 0 0; font-size:11.5px; color:var(--dim); line-height:1.6}

/* ------------------------------------------------ the allocation */
.dpr-panel{
  display:grid; grid-template-columns:270px 1fr; gap:26px; align-items:start;
  border-color:rgba(167,139,250,.28);
  background:linear-gradient(150deg, rgba(167,139,250,.07) 0%, var(--surface) 55%);
}
.dpr-art{border-radius:11px; overflow:hidden; border:1px solid var(--line); background:#0d1117}
.dpr-art svg{display:block; width:100%; height:auto}
.dpr-art img{display:block; width:100%; height:auto}
.dpr-body .panel-h h2{color:var(--violet)}
.dpr-lead{margin:0 0 12px; font-size:14px; color:var(--muted); line-height:1.7; max-width:62ch}
.dpr-lead b{color:var(--text); font-weight:600}
.dpr-panel .kv{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); max-width:420px}
.dpr-links{margin:16px 0 0; display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px}
.dpr-links a{color:var(--violet)}
.dpr-links a:hover{text-decoration:underline}

@media (max-width:760px){
  .dpr-panel{grid-template-columns:1fr}
  .dpr-art{max-width:260px}
}

/* --------------------------------------------------------- checkout */
.ck-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,6,10,.72); backdrop-filter:blur(3px); overflow:auto;
}
.ck-panel{
  width:100%; max-width:430px; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  font:14px/1.6 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.ck-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line-soft); font-weight:600; font-size:15px;
}
.ck-x{background:none; border:0; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; padding:0 4px}
.ck-x:hover{color:var(--text)}
.ck-body{padding:18px}

.ck-wallet{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 13px; margin-bottom:16px; border-radius:10px; font-size:13px;
  background:#0f141d; border:1px solid var(--line-soft); color:var(--muted);
}
.ck-wallet.is-on{border-color:rgba(61,220,132,.28); background:rgba(61,220,132,.05)}
.ck-wallet b{color:var(--text); font-family:ui-monospace, Menlo, monospace; font-size:12.5px}
.ck-wallet button{
  margin-left:auto; padding:5px 11px; border-radius:8px; cursor:pointer; font-size:12.5px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
}
.ck-wallet button:hover{color:var(--text)}
.ck-conn{margin-left:0 !important; color:var(--text) !important; border-color:var(--green-dim) !important}
.ck-nowallet{color:#f0c48a; line-height:1.6}
.ck-nowallet a{color:var(--green); text-decoration:underline}

.ck-row{margin-bottom:14px}
.ck-row label{display:block; margin-bottom:7px; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em}
.ck-input{display:flex; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#0d121b}
.ck-input input{
  flex:1; min-width:0; padding:13px 14px; border:0; outline:none; background:transparent;
  color:var(--text); font:20px ui-monospace, Menlo, monospace;
}
.ck-input input:focus{background:rgba(61,220,132,.03)}
.ck-input select{
  border:0; border-left:1px solid var(--line); background:var(--surface-2);
  color:var(--text); padding:0 12px; font-size:13.5px; cursor:pointer;
}

.ck-quote{min-height:22px; margin-bottom:16px}
.ck-wait{padding:11px 0; color:var(--dim); font-style:italic; font-size:13px}
.ck-tbl{width:100%; border-collapse:collapse}
.ck-tbl td{padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13px; color:var(--muted)}
.ck-tbl td.v{text-align:right; font-family:ui-monospace, Menlo, monospace; color:var(--text); font-size:12.5px}
.ck-tbl td.v.big{font-size:17px; font-weight:600; color:var(--green)}
.ck-tbl td.v.small{font-size:11px; color:var(--dim)}
.ck-tbl tr:last-child td{border-bottom:0}

.ck-warn{margin-top:11px; padding:10px 12px; border-radius:9px; font-size:12.5px;
  background:rgba(247,147,26,.08); border:1px solid rgba(247,147,26,.25); color:#f0c48a}
.ck-err{margin-top:11px; padding:10px 12px; border-radius:9px; font-size:12.5px;
  background:rgba(242,85,90,.08); border:1px solid rgba(242,85,90,.25); color:#f4a0a3}

.ck-go{
  width:100%; padding:14px; border:0; border-radius:10px; cursor:pointer;
  font:600 15px ui-sans-serif, system-ui, sans-serif;
  color:#06210f; background:linear-gradient(180deg,#5bf0a0,#31c473);
}
.ck-go:hover:not(:disabled){filter:brightness(1.07)}
.ck-go:disabled{background:#1d2431; color:var(--dim); cursor:default}

.ck-status{margin-top:12px; font-size:13px; line-height:1.6; min-height:1em}
.ck-status.ok{color:#9ff0c4}
.ck-status.ok a{color:var(--green); text-decoration:underline}
.ck-status.err{color:#f4a0a3}
.ck-fine{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:11.5px; line-height:1.65; color:var(--dim);
}
.ck-fine b{color:var(--muted)}

/* ----------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line-soft); padding:26px}
.foot-in{max-width:1180px; margin:0 auto; font-size:13px; color:var(--muted)}
.foot-in .mono{font-size:11.5px; color:var(--dim)}
.copy{
  margin-left:8px; padding:3px 9px; border-radius:7px; cursor:pointer; font-size:11px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
}
.copy:hover{color:var(--text)}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px}
.foot-links a:hover{color:var(--green)}
.disclaim{margin:14px 0 0; font-size:11.5px; color:var(--dim); max-width:70ch}

/* ------------------------------------------------------- responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .chart-wrap{height:340px}
}
@media (max-width:620px){
  .wrap{padding:18px 15px 44px}
  .topbar{padding:11px 15px; gap:12px}
  .topnav{order:3; width:100%; margin-left:0}
  .hero{padding:20px}
  .hero-price{font-size:35px}
  .hero-side{grid-template-columns:1fr 1fr}
}