@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0E1116;
  --panel:#161B22;
  --panel-2:#1C232D;
  --border:#232B36;
  --text:#E6EDF3;
  --muted:#8B96A3;
  --accent:#5FF39B;
  --accent-dim:rgba(95,243,155,.14);
  --amber:#FFB454;
  --danger:#FF6B6B;
  --radius:14px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.5;
}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- ad slots ---------- */
.ad-slot{
  display:flex;align-items:center;justify-content:center;
  position:relative;
  margin:28px auto;
  background:var(--panel);
  border:1px dashed var(--border);
  border-radius:10px;
  color:var(--muted);
  font-size:12px;
}
.ad-slot__label{
  position:absolute;top:6px;left:10px;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  opacity:.7;
}
.ad-slot--leaderboard{width:100%;max-width:728px;min-height:90px}
.ad-slot--rectangle{width:300px;min-height:250px}
.ad-slot--skyscraper{width:100%;min-height:600px;margin:0 0 20px}
.ad-slot--native{
  min-height:64px;margin:6px 0;border-style:solid;
}

/* ---------- header / footer ---------- */
.site-header{border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--text)}
.logo span{color:var(--accent)}
.site-nav a{margin-left:22px;color:var(--muted);font-size:14px}
.site-nav a:hover{color:var(--text)}

.site-footer{border-top:1px solid var(--border);margin-top:40px}
.site-footer .wrap{display:flex;justify-content:space-between;padding:24px 20px;font-size:13px;color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding:56px 0 8px;text-align:center}
.eyebrow{font-family:var(--mono);color:var(--accent);font-size:13px;margin:0 0 14px}
.hero h1{font-size:clamp(28px,4.4vw,44px);line-height:1.15;margin:0 0 34px;font-weight:700}
.hero h1 .accent{color:var(--accent)}
.hero__hint{color:var(--muted);font-size:14px;margin-top:18px}

/* ---------- ticket (signature element) ---------- */
.ticket{
  position:relative;
  max-width:620px;margin:0 auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 26px 20px;
  text-align:left;
}
.ticket::before,.ticket::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:20px;height:20px;background:var(--bg);border-radius:50%;
}
.ticket::before{left:-10px}
.ticket::after{right:-10px}
.ticket__row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ticket__address{
  font-family:var(--mono);font-size:clamp(16px,3.2vw,22px);font-weight:500;
  color:var(--text);word-break:break-all;
}
.ticket__cursor{color:var(--accent);animation:blink 1s step-start infinite}
@keyframes blink{50%{opacity:0}}

.ticket__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{
  font-family:var(--sans);font-size:14px;font-weight:600;
  border-radius:8px;border:1px solid var(--border);
  padding:10px 16px;cursor:pointer;background:var(--panel-2);color:var(--text);
}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#06110A}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost:hover{border-color:var(--accent)}
select.btn{appearance:none}

.ticket__timer{display:flex;align-items:center;gap:10px;margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.ticket__bar{flex:1;height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.ticket__bar-fill{height:100%;width:100%;background:var(--accent);transition:width 1s linear}
.link-btn{background:none;border:none;color:var(--amber);font-family:var(--mono);font-size:12px;cursor:pointer;padding:0}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:1fr 300px;gap:28px;margin-top:8px}
@media (max-width:860px){.layout{grid-template-columns:1fr}.ad-slot--skyscraper{display:none}}

.inbox{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.inbox__header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.inbox__header h2{margin:0;font-size:16px}
.inbox__status{font-family:var(--mono);font-size:11px;color:var(--muted)}
.inbox__list{list-style:none;margin:0;padding:0}
.inbox__empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}

.msg-row{display:flex;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer}
.msg-row:hover{background:var(--panel-2)}
.msg-row__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.msg-row.is-read .msg-row__dot{background:transparent}
.msg-row__main{flex:1;min-width:0}
.msg-row__from{font-size:13px;color:var(--muted);font-family:var(--mono)}
.msg-row__subject{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-row__time{font-size:12px;color:var(--muted);flex:none}
.msg-row__del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px}
.msg-row__del:hover{color:var(--danger)}

.native-ad-row{display:flex;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--panel-2)}
.native-ad-row__tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:2px 6px}

/* ---------- sidebar panels ---------- */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.panel--tips h3{margin:0 0 10px;font-size:14px}
.panel--tips ul{margin:0;padding-left:18px;color:var(--muted);font-size:13px}
.panel--tips li{margin-bottom:6px}

.panel--info{margin:28px 0}
.panel--info h2{font-size:18px;margin-top:0}
.panel--info ol{color:var(--muted);font-size:14px}
.panel--info details{border-top:1px solid var(--border);padding:12px 0}
.panel--info summary{cursor:pointer;font-weight:600;font-size:14px}
.panel--info p{color:var(--muted);font-size:13px;margin:8px 0 0}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal__panel{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);max-width:680px;width:92%;max-height:82vh;overflow:auto;padding:28px}
.modal__close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
.msg-detail__subject{font-size:18px;margin:0 0 6px}
.msg-detail__meta{color:var(--muted);font-size:13px;margin-bottom:18px;font-family:var(--mono)}
.msg-detail__body{border-top:1px solid var(--border);padding-top:16px;font-size:14px}
.msg-detail__attachments{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.attachment-chip{font-family:var(--mono);font-size:12px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text)}