:root{
  --bg:#0C1013;
  --surface:#141A1F;
  --surface-raised:#1B232A;
  --line: #263038;
  --text:#E7EDF1;
  --muted:#7C8A94;
  --amber:#FFB454;
  --wire:#5FD4C4;
  --danger:#FF6B6B;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Inter', sans-serif;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased;}
::selection{ background:var(--amber); color:#0C1013; }
code{ font-family:var(--mono); }

.wrap{ max-width:960px; margin:0 auto; padding:0 24px 120px; }

.hero{ padding:64px 0 40px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--wire); text-transform:uppercase; margin:0 0 14px; }
.eyebrow::before{ content:"● "; color:var(--amber); }
h1{ font-family:var(--mono); font-weight:700; font-size:clamp(34px,5vw,54px); letter-spacing:-0.02em; margin:0 0 14px; line-height:1.02;}
h1 span{ color:var(--amber); }
.sub{ color:var(--muted); font-size:16px; line-height:1.6; max-width:600px; margin:0 0 36px;}

.console{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; margin-top:16px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; }
.field{ flex:1 1 320px; }
label{ display:block; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:7px; }
input[type=text], input[type=url], input[type=password]{
  width:100%; background:#0F1418; border:1px solid var(--line); color:var(--text);
  padding:12px 14px; border-radius:7px; font-family:var(--mono); font-size:14px; outline:none;
  transition:border-color .15s;
}
input::placeholder{ color:#4B565F; }
input:focus{ border-color:var(--wire); }
.field.narrow{ flex:0 1 200px; }
.btn{
  font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:.03em;
  border:none; border-radius:7px; padding:12px 20px; cursor:pointer; transition:transform .1s, opacity .15s;
  text-transform:uppercase;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--amber); color:#1A1000; }
.btn-primary:hover{ opacity:.9; }
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--wire); color:var(--wire); }
.btn-row{ margin-top:14px; display:flex; align-items:center; gap:12px; }
.err{ color:var(--danger); font-family:var(--mono); font-size:12px; }

.result{ margin-top:18px; padding-top:18px; border-top:1px dashed var(--line); display:none; }
.result.show{ display:block; }
.result-url{ display:flex; align-items:center; gap:10px; background:#0F1418; border:1px solid var(--wire); border-radius:7px; padding:12px 14px; }
.result-url code{ color:var(--wire); font-size:14px; flex:1; overflow-x:auto; white-space:nowrap; }
.copy-btn{ background:transparent; border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:11px; padding:7px 10px; border-radius:5px; cursor:pointer; text-transform:uppercase; }
.copy-btn:hover{ color:var(--text); border-color:var(--text); }
.section-head{ display:flex; justify-content:space-between; align-items:baseline; margin:56px 0 18px; }
.section-head h2{ font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; margin:0;}
.section-head .count{ color:var(--amber); }
.search{ font-family:var(--mono); font-size:12px; background:#0F1418; border:1px solid var(--line); color:var(--text); padding:8px 10px; border-radius:6px; width:180px; }

.empty{ border:1px dashed var(--line); border-radius:10px; padding:40px 20px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px; }

.link-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:10px; cursor:pointer; transition:border-color .15s, background .15s; }
.link-card:hover{ border-color:var(--wire); background:var(--surface-raised); }
.link-top{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.link-code{ font-family:var(--mono); color:var(--amber); font-size:15px; font-weight:600; }
.link-orig{ font-family:var(--mono); color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:380px; }
.link-stats{ display:flex; gap:14px; align-items:center; }
.card-copy-btn{ flex-shrink:0; }
.copy-btn.copied{ color:var(--wire); border-color:var(--wire); }
.stat-mini{ text-align:right; }
.stat-mini .n{ font-family:var(--mono); font-size:18px; font-weight:700; color:var(--text); }
.stat-mini .l{ font-family:var(--mono); font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.spark{ opacity:.9; }

.overlay{ position:fixed; inset:0; background:rgba(6,8,10,.7); backdrop-filter: blur(2px); display:none; align-items:flex-start; justify-content:center; padding:40px 20px; z-index:50; overflow-y:auto; }
.overlay.show{ display:flex; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:12px; max-width:720px; width:100%; padding:28px; margin-bottom:40px; }
.panel-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.panel-head h3{ font-family:var(--mono); color:var(--amber); margin:0; font-size:20px; }
.close-btn{ background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; }
.close-btn:hover{ color:var(--text); }
.panel-url{ font-family:var(--mono); color:var(--muted); font-size:12px; word-break:break-all; margin-bottom:12px; }
.panel-url a{ color:var(--wire); }
.panel-short{ display:flex; align-items:center; gap:10px; background:#0F1418; border:1px solid var(--line); border-radius:7px; padding:10px 12px; margin-bottom:22px; }
.panel-short code{ color:var(--amber); font-size:13px; flex:1; overflow-x:auto; white-space:nowrap; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:26px; }
.stat-box{ background:#0F1418; border:1px solid var(--line); border-radius:8px; padding:12px; }
.stat-box .n{ font-family:var(--mono); font-size:22px; font-weight:700; color:var(--text); }
.stat-box .l{ font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; margin-top:2px; }

.subhead{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:22px 0 10px; }
.bars{ display:flex; align-items:flex-end; gap:4px; height:80px; margin-bottom:6px; }
.bar{ flex:1; background:var(--wire); border-radius:2px 2px 0 0; min-height:2px; opacity:.85; }
.bar-labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; color:var(--muted); }

.breakdown-row{ display:flex; align-items:center; gap:10px; margin-bottom:7px; font-family:var(--mono); font-size:12px;}
.breakdown-label{ width:110px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.breakdown-bar-bg{ flex:1; height:8px; background:#0F1418; border-radius:4px; overflow:hidden;}
.breakdown-bar{ height:100%; background:var(--amber); }
.breakdown-pct{ width:40px; text-align:right; color:var(--muted); }

table.log{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11.5px; }
table.log th{ text-align:left; color:var(--muted); font-weight:500; padding:6px 8px; border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:.05em; font-size:10px;}
table.log td{ padding:7px 8px; border-bottom:1px solid var(--line); color:var(--text); }
table.log tr:last-child td{ border-bottom:none; }
.log-wrap{ max-height:200px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; }

.panel-actions{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.panel-actions form{ display:inline; }
.edit-box{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); }
.edit-box label{ margin-bottom:7px; }

footer{ text-align:center; padding:40px 0; color:var(--muted); font-family:var(--mono); font-size:11px; border-top:1px solid var(--line); margin-top:56px;}
footer code{ color:var(--wire); }

@media (max-width:600px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .link-orig{ max-width:160px; }
}