/* NFX - licensing panel design preview (mock-up, no live data) */
:root{
  --bg:#000000;
  --ink:#E9EEF8;
  --dim:#7F8AA3;
  --line:rgba(255,255,255,.08);
  --panel:rgba(255,255,255,.035);
  --cyan:#2CD8F5;
  --purple:#A855F7;
  --grad:linear-gradient(90deg,#2CD8F5 0%,#7C6BF8 52%,#C026D3 100%);
  --green:#22E08A;
  --red:#FF4D6A;
  --amber:#FFB020;

  /* The browser draws dropdown lists, number steppers, date pickers and
     scrollbars itself, in its own light palette. This tells it the page is
     dark, so it draws them dark too. Without it an open <select> is a white
     box on a black page. */
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Segoe UI',Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 420px at 16% -6%, rgba(44,216,245,.16), transparent 62%),
    radial-gradient(820px 520px at 96% 8%, rgba(192,38,211,.15), transparent 60%),
    radial-gradient(900px 600px at 50% 112%, rgba(124,107,248,.10), transparent 60%);
}

/* ---------- shell ---------- */
.shell{display:flex;position:relative;z-index:1;min-height:100vh}
/* The sidebar is its own column, the same on every page. It used to inherit
   its height from the page beside it, so a short page (Login Logs) squeezed
   the menu and showed a scrollbar while a long page did not. Pinning it to
   the viewport makes every page identical. */
.side{
  width:258px;flex:none;background:#000;
  border-right:1px solid var(--line);
  padding:26px 16px 20px;position:sticky;top:0;align-self:flex-start;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
}
.side::after{content:"";position:absolute;top:0;right:-1px;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(44,216,245,.55),rgba(192,38,211,.55),transparent)}
.side .brandlink{display:block;text-decoration:none;color:inherit;cursor:pointer;
  border-radius:12px;transition:opacity .15s}
.side .brandlink:hover{opacity:.82}
.side .logo{display:block;width:168px;margin:0 auto 6px}
.side .brandsub{text-align:center;font-size:10.5px;letter-spacing:2.4px;color:var(--dim);
  text-transform:uppercase;margin-bottom:18px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 14px;margin:4px 0;border-radius:10px;
  color:#C7D0E2;text-decoration:none;font-size:14.5px;border:1px solid transparent;
}
.nav a .ic{width:18px;text-align:center;opacity:.9;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.05)}
.nav a.on{
  background:linear-gradient(90deg,rgba(44,216,245,.16),rgba(192,38,211,.10));
  border-color:rgba(44,216,245,.35);color:#fff;font-weight:600;
}
.nav .sep{height:1px;background:var(--line);margin:11px 4px}
.nav a.out{color:#FF8098}
.side .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.side .navout{flex:none;overflow:visible;margin:0}
.side .navout .sep{margin:10px 4px}
/* it still scrolls on a short window, it just never draws a bar, so the
   menu looks the same whatever page you are on */
.side .nav{scrollbar-width:none;-ms-overflow-style:none}
.side .nav::-webkit-scrollbar{width:0;height:0}
.side .foot{margin-top:14px;padding-top:4px;font-size:11px;color:#4D5668;text-align:center;flex:none}

.main{flex:1;padding:26px 32px 40px;min-width:0}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.h1{font-size:25px;font-weight:700;margin:0;letter-spacing:-.2px}
.h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--dim);font-size:13.5px;margin-top:5px}
.who{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  cursor:pointer;padding:6px 9px;border-radius:12px;border:1px solid transparent;
  transition:background .15s,border-color .15s}
.who:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.who .av{width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
  justify-content:center;font-weight:700;color:#06070C;font-size:14px}
.who b{display:block;font-size:13.5px}
.who i{display:block;font-size:11.5px;color:var(--dim);font-style:normal}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 19px;
  position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--grad);opacity:.85}
.card.g::before{background:var(--green)} .card.r::before{background:var(--red)} .card.a::before{background:var(--amber)}
.card .lab{font-size:12px;color:var(--dim);letter-spacing:.3px}
.card .num{font-size:30px;font-weight:700;margin-top:8px;letter-spacing:-.5px}
.card .num.cy{color:var(--cyan)} .card .num.gr{color:var(--green)} .card .num.rd{color:var(--red)}
.card .num.am{color:var(--amber)}
.card .note{font-size:11.5px;color:#5E6882;margin-top:6px}

/* ---------- box / table ---------- */
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-top:22px;overflow:hidden}
.box .hd{display:flex;align-items:center;justify-content:space-between;padding:15px 19px;border-bottom:1px solid var(--line)}
.box .hd h3{margin:0;font-size:15px;font-weight:600}
.box .hd .mini{font-size:12px;color:var(--dim)}
/* the bulk action that sits in a box header, beside the title */
.box .hd .bulkbar{display:flex;align-items:center;gap:11px;flex:none}
.box .hd .bulkbar .btn:disabled{opacity:.42;cursor:not-allowed}
.box .hd .bulkbar .pickall{display:flex;align-items:center;gap:6px;font-size:12px;
  color:#8A94A8;cursor:pointer;user-select:none}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);text-align:left;
  padding:12px 19px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:13px 19px;border-bottom:1px solid rgba(255,255,255,.045);font-size:13.5px}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}
.mono{font-family:Consolas,monospace;font-size:12.5px;color:#AFBBD3}
.nm{font-weight:600}
.dimtx{color:var(--dim)}

.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  border:1px solid transparent}
.p-g{background:rgba(34,224,138,.12);color:var(--green);border-color:rgba(34,224,138,.3)}
.p-r{background:rgba(255,77,106,.12);color:var(--red);border-color:rgba(255,77,106,.3)}
.p-a{background:rgba(255,176,32,.12);color:var(--amber);border-color:rgba(255,176,32,.3)}
.p-d{background:rgba(255,255,255,.06);color:var(--dim);border-color:var(--line)}
.p-c{background:rgba(44,216,245,.12);color:var(--cyan);border-color:rgba(44,216,245,.32)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:1px}
.dot.on{background:var(--green);box-shadow:0 0 9px var(--green)}
.dot.off{background:#51596C}

.btn{display:inline-block;padding:7px 14px;border-radius:9px;font-size:12.5px;font-weight:600;
  text-decoration:none;border:1px solid var(--line);color:#D7DEEC;background:rgba(255,255,255,.05);cursor:pointer}
.btn.pri{background:var(--grad);color:#05070D;border:none}
.btn.cy{background:rgba(44,216,245,.14);color:var(--cyan);border-color:rgba(44,216,245,.35)}
.btn.dg{background:rgba(255,77,106,.14);color:var(--red);border-color:rgba(255,77,106,.35)}
.btn.gr{background:rgba(34,224,138,.14);color:var(--green);border-color:rgba(34,224,138,.35)}
.btn.sm{padding:5px 10px;font-size:11.5px}

/* ---------- watermark ---------- */
.wm{
  position:fixed;right:18px;bottom:16px;z-index:40;display:flex;align-items:center;gap:9px;
  padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid rgba(44,216,245,.3);
  font-size:11px;letter-spacing:1.3px;color:#9AA6BF;text-transform:uppercase;backdrop-filter:blur(6px)
}
.wm b{color:var(--cyan);font-weight:700;letter-spacing:1.3px}

/* =========================================================================
   LIVE additions - the design is a desktop picture; these rules only cover
   what a picture does not: small screens, forms, and flash messages.
   No colour or spacing above this line was changed.
   ========================================================================= */

/* ---- forms, reusing the panel's own look ---- */
.frm{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* type-to-find box that stands in for a long <select>  —  app_notices.php
   The select keeps the value and does the posting; this is only the way in.
   Two stacked boxes read as two questions, so only one is ever on screen. */
.cbx{position:relative}
.cbx-in{cursor:text}
.cbx-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  max-height:264px;overflow-y:auto;background:#0A0D14;border:1px solid var(--line);
  border-radius:12px;padding:5px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.cbx-opt{padding:10px 12px;border-radius:9px;font-size:13.5px;color:var(--ink);cursor:pointer}
.cbx-opt:hover,.cbx-opt.on{background:rgba(44,216,245,.14)}
.cbx-opt.all{color:var(--cyan);font-weight:600}
.cbx-none{padding:14px 12px;font-size:12.5px;color:var(--dim);text-align:center}
.cbx-head{padding:7px 12px 6px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:1px;color:#5A6378}
.frm .full{grid-column:1 / -1}
.f label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--dim);margin-bottom:7px;font-weight:600}
.f input,.f select,.f textarea{width:100%;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink);
  font-size:14px;font-family:inherit;outline:none}
.f input:focus,.f select:focus,.f textarea:focus{border-color:rgba(44,216,245,.5);
  box-shadow:0 0 0 3px rgba(44,216,245,.09)}
.f select option{background:#0A0D14;color:var(--ink)}
.f textarea{min-height:92px;resize:vertical}
.f .hint{font-size:11px;color:#5E6882;margin-top:6px}
.f input[type=checkbox]{width:auto;margin-right:8px;accent-color:var(--cyan)}
.actions{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap}

/* ---- number fields ----
   The default up/down arrows sit outside the field's rounded corner. These
   keep them, but inside the field and in the panel's own colours. */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]:hover,
input[type=number]:focus{appearance:auto;-moz-appearance:number-input}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;appearance:none;margin:0;
}
.f input[type=number],.inp[type=number]{padding-right:40px}
.numwrap{position:relative;display:block}
.numwrap .steps{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:2px}
.numwrap .steps button{width:22px;height:15px;padding:0;line-height:1;font-size:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:#AFBBD3;
  border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.numwrap .steps button:hover{background:rgba(44,216,245,.16);color:var(--cyan);
  border-color:rgba(44,216,245,.35)}

/* ---- the browser's own autofill paint ----
   Chrome fills a saved login with a white box and black text. background-color
   is ignored on an autofilled field, so an inset shadow is what repaints it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink) !important;
  caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #11151F inset !important;
  box-shadow:0 0 0 1000px #11151F inset !important;
  transition:background-color 9999s ease-in-out 0s;
}

/* ---- flash messages ---- */
.flash{border-radius:12px;padding:13px 16px;font-size:13.5px;margin-bottom:18px;
  border:1px solid var(--line);background:var(--panel)}
.flash.ok{border-color:rgba(34,224,138,.35);color:var(--green);background:rgba(34,224,138,.08)}
.flash.bad{border-color:rgba(255,77,106,.35);color:var(--red);background:rgba(255,77,106,.08)}


/* =========================================================================
   Page styles, copied from the design pages 03-07 exactly as they were.
   ========================================================================= */

/* ---- 03 clients: filter bar + tabs + row actions ---- */
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.bar input,.bar select{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;color:var(--ink);font-size:13px;font-family:inherit;outline:none}
.bar input{width:300px;max-width:100%}
.bar input::placeholder{color:#5B657C}
.bar select option{background:#0A0D14;color:var(--ink)}
.tabs{display:flex;gap:8px;margin:18px 0 0;flex-wrap:wrap}
.tabs a,.tabs span{padding:7px 15px;border-radius:999px;font-size:12.5px;border:1px solid var(--line);
  color:var(--dim);background:rgba(255,255,255,.03);text-decoration:none}
.tabs a.on,.tabs span.on{background:linear-gradient(90deg,rgba(44,216,245,.18),rgba(192,38,211,.12));
  border-color:rgba(44,216,245,.4);color:#fff;font-weight:600}
.acts{display:flex;gap:6px;flex-wrap:wrap}

/* ---- 04 view client ---- */
.grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;margin-top:22px;align-items:start}
.kv{display:grid;grid-template-columns:150px 1fr;gap:11px 16px;padding:19px}
.kv .k{color:var(--dim);font-size:12.5px}
.kv .v{font-size:13.5px;word-break:break-word}
.ctl{padding:19px;display:flex;flex-direction:column;gap:11px}
.ctl .big{display:flex;gap:10px;flex-wrap:wrap}
.ctl .big .btn{flex:1;text-align:center;padding:12px 10px;font-size:13px}
.lock{display:flex;align-items:center;gap:12px;background:rgba(44,216,245,.07);
  border:1px solid rgba(44,216,245,.25);border-radius:12px;padding:14px 16px;margin:0 19px 19px}
.lock .ic{font-size:20px}
.lock b{display:block;font-size:13px}
.lock span{font-size:11.5px;color:var(--dim)}
.hero{display:flex;align-items:center;gap:16px}
.hero .av{width:54px;height:54px;border-radius:14px;background:var(--grad);display:flex;
  align-items:center;justify-content:center;font-weight:700;color:#06070C;font-size:20px}

/* ---- 05 add client ---- */
.grid2{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-top:22px;align-items:start}
.form{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.lbl{font-size:11.5px;color:var(--dim);letter-spacing:.4px;margin-bottom:6px;display:block;
  text-transform:uppercase}
.inp{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:13.5px;color:var(--ink);width:100%;font-family:inherit;outline:none}
.inp::placeholder{color:#5B657C}
.inp:focus{border-color:rgba(44,216,245,.45);box-shadow:0 0 0 3px rgba(44,216,245,.08)}
.inp option{background:#0A0D14;color:var(--ink)}
textarea.inp{min-height:84px;resize:vertical}
.issued{padding:20px}
.issued .k{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.key{font-family:Consolas,monospace;font-size:18px;letter-spacing:2px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(90deg,rgba(44,216,245,.12),rgba(192,38,211,.1));
  border:1px solid rgba(44,216,245,.35);text-align:center;margin-bottom:18px;word-break:break-all}
.cred{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  margin-bottom:18px;font-size:13.5px;line-height:1.95;word-break:break-word}
.cred span{color:var(--dim)}

/* a labelled value with its own Copy button — partials/ui.php
   The field is the source of truth for the button next to it, so the value
   is never written into the page twice and cannot drift. */
.cprow{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.cprow:last-child{margin-bottom:0}

/* The result of issuing logins in bulk: one row per client, each with the
   password that is only ever shown here and the message ready to send. The
   flash box it sits in is green, so the rows carry their own surface to be
   readable against it. */
.credtbl{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:11px}
.credrow{display:grid;grid-template-columns:1fr 150px auto;gap:14px;align-items:center;
  padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.25)}
.credrow:last-child{border-bottom:none}
.credwho{display:flex;flex-direction:column;gap:2px;min-width:0}
.credwho b{font-size:13.5px;color:var(--ink)}
.credwho .mono{font-size:11.5px;color:var(--dim);font-family:Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis}
.credpw{font-family:Consolas,monospace;font-size:14px;color:var(--cyan);
  letter-spacing:.5px;user-select:all}
@media(max-width:760px){
  .credrow{grid-template-columns:1fr;gap:7px}
}
.cplbl{width:92px;flex:none;font-size:11.5px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.5px}
.cpval{flex:1;min-width:180px;font-family:Consolas,monospace;font-size:13px;
  color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;outline:none}
.cpval:focus{border-color:rgba(44,216,245,.45)}
.cpbtn{flex:none}
.cpbtn.done{border-color:rgba(34,224,138,.5);color:var(--green)}
.cpnote{width:100%;padding-left:101px;font-size:11px;color:#5E6882}
@media(max-width:620px){
  .cplbl{width:100%}
  .cpnote{padding-left:0}
}
.steps{list-style:none;padding:0;margin:0;font-size:12.8px;line-height:1.6}
.steps li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.steps li:last-child{border:none}
.steps .n{width:21px;height:21px;flex:none;border-radius:50%;background:rgba(44,216,245,.14);
  color:var(--cyan);font-size:11.5px;display:flex;align-items:center;justify-content:center;font-weight:700}
.note2{font-size:11.5px;color:#5E6882;line-height:1.7;margin-top:14px}

/* ---- 06 copy guard ---- */
.master{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(90deg,rgba(44,216,245,.09),rgba(192,38,211,.07));
  border:1px solid rgba(44,216,245,.3);border-radius:14px;padding:18px 20px;margin-top:4px}
.master b{font-size:14.5px;display:block;margin-bottom:4px}
.master span{font-size:12.5px;color:var(--dim)}
.sw{width:56px;height:30px;border-radius:999px;background:var(--grad);position:relative;flex:none;
  cursor:pointer;border:none}
.sw::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;
  top:3px;right:3px;transition:right .18s,left .18s}
.sw.off{background:rgba(255,255,255,.14)}
.sw.off::after{right:auto;left:3px}
.alert{display:grid;grid-template-columns:1.1fr 1.5fr 1fr auto;gap:22px;padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.05);align-items:start}
.alert:last-child{border-bottom:none}
.alert.new{background:rgba(255,77,106,.045);box-shadow:inset 3px 0 0 var(--red)}
.alert .k{font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;color:#59627A;margin-bottom:7px}
.cn{font-weight:600;font-size:14px}
.meta{font-size:11.5px;color:var(--dim);margin-top:3px}
.detail{font-size:13px;line-height:1.55;margin-top:9px;color:#C3CCDE;word-break:break-word}
.aacts{display:flex;flex-direction:column;gap:7px;min-width:130px}

/* ---- 07 sub traders ---- */
.trow{display:grid;grid-template-columns:22px 1.2fr .8fr .8fr .9fr auto;gap:20px;padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.05);align-items:center}
/* the tick cell is drawn on every row, with or without a box in it, so the
   columns line up whether a trader can be deleted or not */
.trow .tpick{display:flex;align-items:center;justify-content:center;min-height:18px}
.trow:last-child{border-bottom:none}
.who2{display:flex;align-items:center;gap:13px}
.who2 .av{width:42px;height:42px;border-radius:12px;background:var(--grad);display:flex;
  align-items:center;justify-content:center;font-weight:700;color:#06070C;font-size:15px}
.who2 b{display:block;font-size:14px}
.who2 span{font-size:11.5px;color:var(--dim)}
.mini2{font-size:11px;color:#59627A;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}
.val{font-size:15px;font-weight:600}
.expl{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin-top:22px;font-size:13px;line-height:1.75;color:#B9C3D6}
.expl b{color:#fff}

/* ---- phone ---- */
.menu-toggle{display:none;position:fixed;top:14px;left:14px;z-index:60;width:42px;height:42px;
  border-radius:11px;border:1px solid var(--line);background:rgba(10,13,20,.92);color:var(--ink);
  font-size:17px;cursor:pointer;backdrop-filter:blur(6px)}
.side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40}
.side-overlay.on{display:block}

@media(max-width:900px){
  .menu-toggle{display:block}
  .grid,.grid2{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .alert{grid-template-columns:1fr;gap:12px}
  .trow{grid-template-columns:22px 1fr;gap:12px}
  .trow .tpick{grid-row:span 5;align-items:flex-start;padding-top:14px}
  .aacts{flex-direction:row;min-width:0}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);
    transition:transform .22s ease;overflow-y:auto}
  .side.open{transform:none}
  .main{padding:70px 16px 32px}
  .top{flex-direction:column;align-items:flex-start;gap:12px}
  .cards,.cards.c3{grid-template-columns:1fr 1fr}
  .frm{grid-template-columns:1fr}
  .box{overflow-x:auto}
  table{min-width:640px}
}
@media(max-width:560px){
  .cards,.cards.c3{grid-template-columns:1fr}
  .wm{display:none}
}

/* ===========================================================================
   Log pages (view_account_logs / view_single_log)
   ---------------------------------------------------------------------------
   These two were the last pages still carrying their own markup and inline
   colours. They now use the shell and the classes below, so they read as part
   of the same product.
   =========================================================================== */
.tblwrap{overflow-x:auto;margin:0 -4px}
.tbl{width:100%;border-collapse:collapse;min-width:720px;font-size:13px}
.tbl thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  color:var(--dim);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.045);white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:rgba(255,255,255,.028)}
.tbl .r,.tbl td.r{text-align:right}
.tbl .g{color:var(--green)} .tbl .rd{color:var(--red)} .tbl .cy{color:var(--cyan)}
.tbl .mut{color:var(--dim)}
.tbl .empty{text-align:center;color:var(--dim);padding:26px 12px}

.sumrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line)}
.sumrow .lbl{margin:0;font-size:11px}
.sumrow b{font-size:15px;margin-right:18px}

.logrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.055);flex-wrap:wrap}
.logrow:last-child{border-bottom:none}
.logrow .nm{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.logrow .actions{margin-top:0}

.chkline{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;
  color:var(--ink);user-select:none}
.chkline input{width:17px;height:17px;accent-color:var(--cyan);cursor:pointer;margin:0}

/* the report itself */
.rpt-kv{display:grid;grid-template-columns:minmax(120px,210px) 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rpt-kv .k,.rpt-kv .v{background:#07090F;padding:12px 15px;font-size:13px}
.rpt-kv .k{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  display:flex;align-items:center}
.rpt-kv .v{font-weight:600;word-break:break-word}

.money3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 6px}
.money3 .b{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel)}
.money3 .b .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.money3 .b .num{font-size:22px;font-weight:700;margin-top:6px;letter-spacing:-.4px}
.money3 .b.g{border-color:rgba(34,224,138,.3)} .money3 .b.g .num{color:var(--green)}
.money3 .b.r{border-color:rgba(255,77,106,.3)} .money3 .b.r .num{color:var(--red)}
.money3 .b.c{border-color:rgba(44,216,245,.3)} .money3 .b.c .num{color:var(--cyan)}

@media(max-width:720px){
  .money3{grid-template-columns:1fr}
  .rpt-kv{grid-template-columns:1fr}
  .rpt-kv .k{padding-bottom:0;background:#07090F}
}

.sec-h{display:flex;align-items:baseline;gap:10px;font-size:11px;text-transform:uppercase;
  letter-spacing:1.4px;color:var(--dim);font-weight:600;margin:26px 2px 11px}
.sec-h span{font-size:11px;letter-spacing:.3px;text-transform:none;color:#5E6882}
.tbl tfoot .totrow td{border-top:1px solid var(--line);padding-top:13px;font-weight:700;
  color:var(--cyan)}
.tbl tfoot .totrow td:last-child{font-size:14px}

/* the copy-ready block on a client's page */
.packbox{margin:0;padding:15px 17px;border-radius:13px;background:#07090F;
  border:1px solid var(--line);font-family:Consolas,monospace;font-size:12.5px;
  line-height:1.8;color:#C3CBDC;white-space:pre-wrap;word-break:break-word;
  overflow-x:auto;user-select:all}

/* The "viewing as ADMIN" banner on the sub trader pages.
   It used to be an inline block spanning the full width, which ran under the
   floating guard bell at the top left and sat tight against the heading. */
.imp-bar{background:linear-gradient(90deg,rgba(44,216,245,.18),rgba(192,38,211,.14));
  border:1px solid rgba(44,216,245,.4);color:var(--cyan);
  padding:11px 18px;border-radius:12px;margin:0 0 22px;
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
  display:flex;align-items:center;gap:9px}
.imp-bar::before{content:"\1F441";font-size:14px;line-height:1}

/* the guard page's empty state was one run-on sentence */
.empty b{display:block;margin-bottom:5px;color:var(--ink)}

/* ===========================================================================
   Toolbar above a log table
   ---------------------------------------------------------------------------
   Destructive actions on a page you visit to READ something should be quiet.
   Full-size buttons with red borders shout at you every time you open the
   page, so these are smaller, flatter, and only colour up on hover.
   =========================================================================== */
.tbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.tbar .sep{flex:1}

.tbar .tb{display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:8px;font-size:11.5px;font-weight:600;
  font-family:inherit;line-height:1.4;cursor:pointer;
  background:rgba(255,255,255,.04);color:#9AA6BF;
  border:1px solid rgba(255,255,255,.09);
  transition:background .14s,color .14s,border-color .14s}
.tbar .tb:hover:not(:disabled){background:rgba(255,255,255,.09);color:var(--ink)}
.tbar .tb:disabled{opacity:.4;cursor:default}

/* the dangerous ones stay grey until you reach for them */
.tbar .tb.dgr:hover:not(:disabled){background:rgba(255,77,106,.14);
  color:var(--red);border-color:rgba(255,77,106,.4)}
.tbar .tb.on{background:rgba(255,77,106,.14);color:var(--red);
  border-color:rgba(255,77,106,.4)}

/* "older than [ 90 ] days" reads as one control, so it looks like one */
.tbar .num{display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:8px;font-size:11.5px;color:#7F8AA3;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.tbar .num input{width:46px;background:transparent;border:none;outline:none;
  color:var(--ink);font-family:inherit;font-size:11.5px;font-weight:600;
  text-align:right;padding:0}
.tbar .num input::-webkit-outer-spin-button,
.tbar .num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tbar .num input{-moz-appearance:textfield}