/* ---------- Design Tokens ---------- */
:root{
  --bg:#0f0f0f; --fg:#fff; --muted:#cfcfcf;
  --card:#141414; --line:#232323; --accent:#f49021;
  --scrim: rgba(0,0,0,.45);
  --radius-lg:20px; --radius-md:12px; --radius-sm:10px;

  /* Layout heights */
  --topbar-h:60px;           /* keep in sync with actual header height */
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  display:flex; min-height:100vh; justify-content:center; align-items:flex-start;
}

/* ---------- App Frame ---------- */
.wrap{
  width:100%; padding:20px 12px; display:flex; justify-content:center;
}
.app{
  width:100%; max-width:960px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  min-height:calc(100dvh - 40px);
  overflow-y:visible;              /* allow drawer to overlay */
  overflow-x:hidden;               /* prevent horizontal scroll */
  position:relative;               /* anchor for absolute children */
}

/* ---------- Sticky Topbar & Nav ---------- */
.topbar{
  position:sticky; top:0; height:var(--topbar-h);
  display:flex; align-items:center;
  padding:12px 18px; border-bottom:1px solid var(--line);
  background:var(--card); backdrop-filter:saturate(120%) blur(2px);
  z-index:900;                     /* below hamburger, above tabs */
}
.nav{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nav-left,.nav-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand-logo img{ height:28px; width:auto; display:block; }
.link{
  color:var(--muted); text-decoration:none; font-size:.95rem; padding:6px 8px; border-radius:8px;
}
.link:hover{ color:var(--accent); background:#1b1b1b; }

/* Username + superscript Sign Out (desktop/tablet) */
.user-block{ color:var(--muted); font-size:.95rem; white-space:nowrap; }
.signout{ font-size:.7rem; color:var(--muted); margin-left:4px; vertical-align:super; padding:0; text-decoration:none; }
.signout:hover{ color:var(--accent); }

/* ---------- Hamburger & Drawer (mobile) ---------- */
.hamburger{
  display:none; background:none; border:0; padding:6px; cursor:pointer; border-radius:8px;
  position:relative; z-index:1000;         /* ALWAYS above everything */
}
.hamburger:focus-visible{ outline:2px solid var(--accent); }
.hamburger .bar{
  display:block; width:22px; height:2px; background:#e9e9e9; margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}

/* Scrim */
.scrim{
  position:absolute; inset:0; background:var(--scrim);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  z-index:940; border-radius:var(--radius-lg);
}
.scrim.open{ opacity:1; pointer-events:auto; }

/* Drawer (compact, anchored to topbar’s right corner) */
.drawer{
  display:none;                     /* fully hidden until opened */
  position:absolute; top:calc(var(--topbar-h) + 0px); right:12px;
  width:220px; background:#171717; border:1px solid var(--line);
  box-shadow:-4px 6px 20px rgba(0,0,0,.35);
  border-radius:var(--radius-md);
  z-index:950;                      /* above scrim and tabs, below hamburger */
}
.drawer.open{ display:block; }

.drawer-header{
  padding:10px 14px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line); position:relative;
}
.drawer-title{ font-weight:700; font-size:.95rem; }
.drawer-close{ background:none; border:0; color:#e9e9e9; font-size:1.2rem; line-height:1; cursor:pointer; }

.mobile-links{ padding:10px 14px; display:flex; flex-direction:column; gap:10px; }
.mobile-links a, .mobile-links span{ color:#e7e7e7; text-decoration:none; font-size:.95rem; }
.mobile-links a:hover{ color:var(--accent); }

/* Optional header accents */
.drawer--rounded-bottom .drawer-header{ border-bottom:none; padding-bottom:18px; }
.drawer--rounded-bottom .drawer-header::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:12px;
  background:#171717; border:1px solid var(--line); border-top:none;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.drawer--accent-top .drawer-header{ border-bottom:1px solid var(--line); }
.drawer--accent-top .drawer-header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent); border-top-left-radius:12px; border-top-right-radius:12px;
}

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding:0 0 8px;
  position:relative; z-index:500;          /* below topbar/drawer/scrim */
}
.tabs-sticky{ position:sticky; top:var(--topbar-h); z-index:500; } /* sits under header */

.tab{
  appearance:none; background:#1d1d1d; color:#eee; border:1px solid #2a2a2a;
  padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer;
}
.tab[aria-selected="true"]{
  background:var(--accent); color:#111; border-color:transparent;
}
.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tab-panels{ margin-top:14px; position:relative; z-index:500; }
.tab-panel{ display:none; position:relative; z-index:500; }
.tab-panel.active{ display:block; }

/* ---------- Main ---------- */
main{ padding:20px 18px; flex:1; }
.page{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
h1{ margin:0; font-size:1.5rem; }
h2{ margin:.25rem 0 1rem; font-size:1.2rem; }
p{ color:#e1e1e1; line-height:1.55; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid #2a2a2a;
  font-weight:700; text-align:center; cursor:pointer; text-decoration:none; user-select:none;
}
.btn-primary{ background:var(--accent); color:#111; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-secondary{ background:#1f1f1f; color:#fff; }
.btn-secondary:hover{ filter:brightness(1.1); }

/* ---------- Forms (shared) ---------- */
.form{
  width:100%;
  max-width:440px;                  /* keeps fields tidy on laptops */
  display:grid; gap:0;              /* spacing via .field / .form-actions */
  margin:8px 0 0;
}
.field{ margin-top:16px; }
.field:first-child{ margin-top:0; }

.field label{
  display:block; margin:0 0 8px; color:var(--muted); font-weight:600;
}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a2a2a;
  background:#1a1a1a; color:#fff; font-size:.95rem; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:#4b4f58; box-shadow:0 0 0 3px rgba(244,144,33,.15);
}

/* Buttons block after fields */
.form-actions{
  margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}

/* Verification / info panels */
.msg{ margin-top:8px; padding:12px; border-radius:10px; }
.err{ background:#1a0c0c; border:1px solid #7a1f1f; color:#f3baba; }
.ok{  background:#0c1a12; border:1px solid #1f7a3a; color:#baf3c0; }
.info{ background:#0c141a; border:1px solid #1f4e7a; color:#bad7f3; }

.verify-panel .row{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; align-items:center;
}
.verify-panel input{
  padding:10px 12px; border-radius:10px; border:1px solid #2a2a2a;
  background:#1a1a1a; color:#fff; min-width:240px;
}

/* ---------- Cards / sections ---------- */
.card{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.35); margin:0 0 18px;
}

table{ width:100%; border-collapse:collapse; margin-top:10px; }
td,th{ padding:8px 6px; border-bottom:1px solid #262626; color:#ddd; text-align:left; }
th{ color:#9a9a9a; font-weight:600; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:12px 18px; color:var(--muted); font-size:.9rem; }
.footlinks{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.footlinks a{ color:var(--muted); text-decoration:none; }
.footlinks a:hover{ color:var(--accent); }

/* ---------- Responsive ---------- */
@media (min-width:721px){
  .nav-left .link, .nav-right .link, .user-block { display:inline; }
  .hamburger, .drawer, .scrim { display:none; }
}
@media (max-width:720px){
  .hamburger{ display:inline-block; }
  .nav-left .link{ display:none; }
  .user-block{ display:none; }             /* username shown in drawer */
  .nav-right .link{ display:inline-block; }/* keep Sign In/Register visible when logged out */
  .card{ padding:18px; }
}
@media (max-width:480px){
  .form{ max-width:100%; }
}