/* The [hidden] attribute loses to any author rule that sets display, and this
   app sets display on img, button and flex children all over the place. It has
   already produced two visible bugs: an empty screenshot preview box that
   would not stay hidden, and an admin tab shown to an admin without that
   scope. Make the attribute mean what it says, everywhere. */
[hidden]{ display:none !important; }

/* ---------- self-hosted faces (latin subset only) ----------
   Never Google Fonts: fonts.googleapis.com is blocked in mainland China.
   DM Sans is variable on this subset, so one file covers 400-700.
   unicode-range keeps CJK on the system stack at zero byte cost. */
@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:800;
  font-display:swap; src:url('fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   NIWO Studio — shared app shell
   ============================================================ */
:root{
  --bg:        #0e0f2d;
  --panel:     #23272a;
  --elev:      #2c2f33;
  --elev-2:    #2c2f33;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);

  --text:      #ffffff;
  --muted:     #babcd9;
  --muted-2:   #99aab5;

  /* NIWO light-blue accent */
  --blue:       #5865f2;
  --blue-deep:  #3442d9;
  --blue-ink:   #ffffff;
  --blue-soft:  rgba(88,101,242,.12);
  --glow:       rgba(88,101,242,.30);

  --green:  #57f287;
  --green-soft: rgba(34,197,94,.15);
  --amber:  #fda220;
  --amber-soft: rgba(240,180,41,.14);
  --red:    #de2761;

  --sidebar: 252px;
  --r-sm: 12px;
  --r:    12px;
  --r-lg: 16px;
  --ease: cubic-bezier(.16,1,.3,1);

  --dim:#50555f;
  --font-display:'Poppins',-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#2a2a30; border-radius:20px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#35353d; }

/* ============================================================
   Brand mark
   ============================================================ */
.niwo{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:900; font-size:20px; letter-spacing:-.05em;
}
/* The logo's own black-and-red badge, not the app's blurple: a brand mark
   keeps its own colour even inside an otherwise blurple-only UI. */
.niwo-mark{
  width:28px; height:28px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:#000;
}
.niwo-mark svg{ width:16px; height:16px; }

/* ============================================================
   App layout
   ============================================================ */
.app{ display:flex; min-height:100vh; align-items:stretch; }

/* The sidebar is taller than the viewport on long nav lists, so it has to
   scroll on its own — otherwise its last items sit below the fold with no way
   to reach them, and the body's colour shows through beneath it. */
.side{
  width:var(--sidebar); flex:none; position:sticky; top:0;
  height:100vh; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; padding:26px 14px 14px;
  background:var(--panel);
}
.side::-webkit-scrollbar{ width:8px; }
.side::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }
.side-logo{ padding:0 10px 30px; }
.side-sec{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); padding:0 12px; margin:0 0 8px;
}
.side-sec + .side-sec, .side-nav + .side-sec{ margin-top:22px; }
.side-nav{ list-style:none; margin:0 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.side-nav a{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--r);
  font-size:14.5px; font-weight:500; color:var(--muted);
  border:1px solid transparent;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.side-nav a:hover{ color:var(--text); background:var(--elev); }
.side-nav a.on{ color:var(--text); font-weight:600; background:var(--elev); border-color:var(--line); }
.side-nav svg{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; }
/* Something is waiting. Pushed to the far edge so it reads as a status on the
   row rather than part of the label. */
.side-nav a .dot{
  margin-left:auto; width:8px; height:8px; border-radius:50%;
  background:var(--red); flex:none;
}

/* nested "Manage Campaign" header */
.side-camp{
  display:flex; align-items:center; gap:8px; margin-top:22px;
  padding:9px 12px; border-radius:var(--r); cursor:pointer;
  transition:background .2s var(--ease);
}
.side-camp:hover{ background:var(--elev); }
.side-camp .nm{
  flex:1; min-width:0; font-size:14px; font-weight:700; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.side-camp .cv{ color:var(--muted-2); display:grid; place-items:center; }
.side-camp .cv svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

.side-user{
  margin-top:auto; display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r); cursor:pointer;
  transition:background .2s var(--ease);
}
.side-user:hover{ background:var(--elev); }
.side-user .ava{
  width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:#fff; color:#111; font-size:11px; font-weight:800;
}
.side-user .who{ min-width:0; flex:1; }
.side-user .nm{ font-size:13.5px; font-weight:700; line-height:1.25; }
.side-user .em{ font-size:11.5px; color:var(--blue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-user .chev{ color:var(--muted-2); flex:none; }

/* main panel */
.main{
  flex:1; min-width:0; background:var(--panel);
  border:1px solid var(--line-soft); border-right:0; border-bottom:0;
  border-radius:18px 0 0 0; padding:36px 40px 60px;
}
/* A short page left the body's navy showing below the panel, so the screen
   was grey on top and blue underneath. One surface, top to bottom. */
body:has(.app){ background:var(--panel); }
.page-head{ display:flex; align-items:flex-start; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.page-head .t{ flex:1; min-width:220px; }
h1.page-t{ margin:0 0 4px; font-size:29px; font-weight:800; letter-spacing:-.03em; }
.page-sub{ margin:0; color:var(--muted); font-size:15px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.btn-light{ background:#e9ecf1; color:#0e0e10; }
.btn-light:hover{ background:#fff; }
.btn-blue{
  background:linear-gradient(180deg,#8891f2,var(--blue));
  color:var(--blue-ink); box-shadow:0 4px 18px -6px var(--glow);
}
.btn-blue:hover{ box-shadow:0 8px 26px -8px var(--glow); }
.btn-ghost{ background:var(--elev); border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ background:var(--elev-2); border-color:#33333a; }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn-block{ width:100%; }

/* ============================================================
   Tabs / filters / search
   ============================================================ */
.tabs{
  display:inline-flex; gap:4px; padding:5px;
  background:var(--elev); border:1px solid var(--line); border-radius:var(--r);
  max-width:100%; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:var(--r-sm); border:1px solid transparent;
  background:none; cursor:pointer; font-size:14px; font-weight:500; color:var(--muted);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover{ color:var(--text); }
.tab.on{ background:var(--bg); border-color:var(--line); color:var(--text); font-weight:600; }
.tab .cnt{
  min-width:20px; padding:1px 6px; border-radius:20px;
  background:var(--elev-2); font-size:11.5px; font-weight:700; color:var(--muted);
}
.tab.on .cnt{ background:var(--blue-soft); color:var(--blue); }

.search{
  display:flex; align-items:center; gap:10px;
  background:var(--elev); border:1px solid var(--line); border-radius:var(--r);
  padding:0 14px; height:42px; min-width:230px;
}
.search svg{ width:15px; height:15px; stroke:var(--muted-2); fill:none; stroke-width:2; flex:none; }
.search .div{ width:1px; height:16px; background:var(--line); flex:none; }
.search input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--text); font-size:14px;
}
.search input::placeholder{ color:var(--muted-2); }

.filter{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 14px;
  background:var(--elev); border:1px solid var(--line); border-radius:var(--r);
  font-size:14px; color:var(--muted); cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.filter:hover{ border-color:#33333a; color:var(--text); }
.filter .plus{ color:var(--muted-2); font-weight:600; }
.filter svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2; }

.bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.bar .grow{ flex:1; }

/* ============================================================
   Badges
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px;
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
  border:1px solid var(--line);
}
.badge-outline{ color:var(--muted); }
.badge-green{ background:var(--green-soft); color:#57f287; border-color:rgba(34,197,94,.3); }
.badge-blue{ background:var(--blue-soft); color:var(--blue); border-color:rgba(142,214,255,.3); }
.badge-amber{ background:var(--amber-soft); color:var(--amber); border-color:rgba(240,180,41,.3); }

/* ============================================================
   Cards / tables
   ============================================================ */
.card{ background:var(--elev); border:1px solid var(--line); border-radius:var(--r-lg); }

.tbl-wrap{ background:var(--elev); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
table.tbl{ width:100%; border-collapse:collapse; }
table.tbl th{
  text-align:left; padding:13px 18px; font-size:12.5px; font-weight:600; color:var(--muted);
  background:var(--elev-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl td{ padding:14px 18px; border-bottom:1px solid var(--line-soft); font-size:14px; vertical-align:middle; }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tbody tr{ transition:background .18s var(--ease); }
table.tbl tbody tr:hover{ background:rgba(255,255,255,.02); }
.tbl-empty{ padding:56px 20px; text-align:center; color:var(--amber); font-size:14px; }

.ava-c{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:11px; font-weight:800; color:var(--blue-ink);
}
.u-cell{ display:flex; align-items:center; gap:11px; }
.u-cell .nm{ font-weight:600; font-size:14px; line-height:1.3; }
.u-cell .hd{ font-size:12px; color:var(--muted-2); }

.pager{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:18px; }
.pager button{
  min-width:30px; height:30px; padding:0 8px; border-radius:var(--r-sm);
  background:none; border:1px solid transparent; color:var(--muted);
  font-size:13px; cursor:pointer; transition:all .18s var(--ease);
}
.pager button:hover{ color:var(--text); border-color:var(--line); }
.pager button.on{ background:var(--elev); border-color:var(--line); color:var(--text); font-weight:600; }

/* ============================================================
   Empty states
   ============================================================ */
.empty{
  background:var(--elev); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:76px 24px; text-align:center;
}
.empty h3{ margin:0 0 6px; font-size:19px; font-weight:700; letter-spacing:-.02em; }
.empty p{ margin:0 0 22px; color:var(--muted); font-size:14.5px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .side{ position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:transform .3s var(--ease); border-right:1px solid var(--line); }
  .side.open{ transform:none; }
  .main{ border-radius:0; padding:24px 18px 48px; }
  .app{ display:block; }
  .m-bar{ display:flex !important; }
}
.m-bar{
  display:none; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:50;
}
.m-bar .burger{
  width:38px; height:38px; border-radius:var(--r-sm); background:var(--elev);
  border:1px solid var(--line); display:grid; place-items:center; cursor:pointer;
}
.m-bar .burger svg{ width:17px; height:17px; stroke:var(--text); fill:none; stroke-width:2; }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:55; display:none; }
.scrim.on{ display:block; }

@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms !important; animation:none !important; } }


/* ============================================================
   DISCORD SYSTEM OVERRIDES
   Appended last so it wins the cascade. The token remap above
   handled colour; this carries typography, flat blurple CTAs,
   zero elevation, and the 12px minimum radius.
   ============================================================ */
body{ font-family:var(--font-body); letter-spacing:.014em; color:var(--muted); }

h1,h2,h3,h4,.page-head h1,.niwo,.side-logo{
  font-family:var(--font-display); font-weight:800;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--text);
}
/* leading stays >=1.05: full-height CJK glyph boxes collide below 1.0 */
h1,h2,h3,h4{ line-height:1.1; }

.btn{ font-family:var(--font-body); font-weight:500; letter-spacing:.016em;
      border-radius:12px; border:0; }
.btn-blue,.btn-light{ background:var(--blue); color:#fff; box-shadow:none; }
.btn-blue:hover,.btn-light:hover{ background:var(--blue-deep); transform:none; box-shadow:none; }
.btn-ghost{ background:var(--elev); color:var(--text); border:1px solid var(--line); box-shadow:none; }
.btn-ghost:hover{ background:var(--elev-2); }

/* the reference uses no elevation — depth comes from surface contrast */
.card,.side,.tbl-wrap,.badge,.tab,.search,.filter,.side-camp,.niwo-mark,.u-cell{
  box-shadow:none !important;
}
.card,.tbl-wrap,.side-camp{ border-radius:16px; }
.badge,.tab,.pill{ border-radius:104px; }
/* .niwo-mark is the only span inside .side-logo, and its colour belongs
   to the logo (see the rule above), not to this reset. */

input,select,textarea{
  font-family:var(--font-body); background:var(--elev); color:var(--text);
  border:1px solid var(--dim,#50555f); border-radius:12px;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(88,101,242,.3);
}

/* Surface levels per the reference's table:
     0 Cosmic Page  #0e0f2d — the page itself
     1 App Chrome   #23272a — product sidebar / panels
     2 App Surface  #2c2f33 — the main content area
   The original sheet had the sidebar on the page colour and the content
   on chrome, which put indigo directly against neutral grey. */
.side{ background:var(--panel); }
.main{ background:var(--elev); border-color:var(--line-soft); }