/* ═══════════════════════════════════════════════════════════
   187 DARK KNIGHTS — THE DECK
   Shared social-side language. Applies the Forge Floor grammar
   to every app-shell page: Recon, Crews, Comms, Vault, Signals,
   Muster, Dossier, Workbench.

   Loads AFTER keep.css. Restyles the SHARED components rather
   than rewriting each page — same markup, new language.

   THE GRAMMAR (from the design notes):
   · square corners, plates not bubbles — 3px max
   · crimson light from beneath, never painted on
   · a vertical rule with things hanging off it
   · hide zero counts; absent is neutral, "0" is a statement
   · empty states are the NORMAL state — design for quiet first
   ═══════════════════════════════════════════════════════════ */

/* ═══ PAGE HEADER ═══
   Was a rounded hero card on every page — a big box repeating the
   page title you just clicked. Now a header: kicker, forged title,
   a rule. It states where you are and gets out of the way. */
.div-hero{
  position:relative;isolation:isolate;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 0 20px !important;
  margin:0 0 26px !important;
  border-bottom:1px solid rgba(154,154,159,.1) !important;
}
.div-hero::before,.div-hero::after{display:none !important}
.div-hero-glow{display:none}

.div-hero-inner{
  display:flex;align-items:baseline;gap:14px;margin:0;padding:0;
  background:none;border:none}
.div-hero-icon{
  font-family:'Share Tech Mono',monospace;font-size:22px;
  color:var(--fx-blood);line-height:1;
  text-shadow:0 0 18px rgba(224,32,32,.5)}
.div-hero-eyebrow{
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:3px;
  text-transform:uppercase;color:#3a3f47;margin-bottom:5px}
.div-hero-name{
  font-family:'Oswald',sans-serif !important;
  font-weight:700 !important;
  font-size:clamp(26px,3.4vw,38px) !important;
  text-transform:uppercase;letter-spacing:-.3px;line-height:1;margin:0}
.div-hero-tagline{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2.4px;
  text-transform:uppercase;color:#B22222;margin-top:6px}
.div-hero-blurb{
  font-family:'Rajdhani',sans-serif;font-size:15px;line-height:1.65;
  color:#6b7280;max-width:640px;margin:16px 0 0}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ═══ TOOLBAR ═══ */
.admin-toolbar{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  margin-bottom:20px;padding:0;background:none;border:none}
.admin-input{
  background:rgba(0,0,0,.4);
  border:1px solid rgba(154,154,159,.13);
  border-radius:3px;padding:10px 13px;outline:none;
  color:#e2e8f0;font-family:'Rajdhani',sans-serif;font-weight:500;font-size:14.5px;
  transition:border-color .16s, background .16s}
.admin-input:focus{
  border-color:rgba(255,91,74,.45);background:rgba(0,0,0,.55)}
.admin-input::placeholder{color:#3a3f47}
.discover-search,.w-full{flex:1;min-width:200px}
select.admin-input{cursor:pointer}

/* ═══ THE PLATE — every card on the social side ═══
   One rule for all of them. A page that invents its own card is a
   page that looks bolted on. */
.group-card,.discover-card,.work-card,.srv-card,.mu-card,.saved-item,
.krow,.signal,.thread,.contract,.gp-card,.tier-card{
  position:relative;isolation:isolate;
  background:linear-gradient(172deg,#141619 0%,#0d0f12 60%,#08090b 100%) !important;
  border:1px solid rgba(154,154,159,.09) !important;
  border-left:2px solid rgba(139,26,26,.3) !important;
  border-radius:3px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.5) !important;
  backdrop-filter:none !important;
  margin-bottom:9px;
  transition:border-color .2s, transform .2s cubic-bezier(.22,1,.36,1),
             box-shadow .2s;
}
.group-card::before,.discover-card::before,.work-card::before,.saved-item::before,
.krow::before,.signal::before,.thread::before,.contract::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tex-url);background-size:340px;
  opacity:.24;filter:invert(1) grayscale(1) contrast(1.8) brightness(.3);
  mix-blend-mode:overlay}
.group-card > *,.discover-card > *,.work-card > *,.saved-item > *,
.krow > *,.signal > *,.thread > *,.contract > *{position:relative;z-index:1}

.group-card:hover,.discover-card:hover,.work-card:hover,.saved-item:hover,
.krow:hover,.thread:hover,.contract:hover{
  transform:translateX(3px);
  border-left-color:var(--fx-glow) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.6),0 0 20px rgba(224,32,32,.1) !important}

/* Unread / pending states earn the heat */
.signal.unread,.thread.unread,.krow-pending{
  border-left-color:var(--fx-hot) !important;
  background:
    radial-gradient(ellipse 80% 60% at 10% 120%,rgba(224,32,32,.16),transparent 70%),
    linear-gradient(172deg,#191c21 0%,#101215 60%,#08090b 100%) !important}

/* ═══ FORM PANELS ═══ */
.admin-form{
  position:relative;isolation:isolate;
  padding:20px 22px;margin-bottom:20px;
  background:
    radial-gradient(ellipse 70% 60% at 10% 125%,rgba(224,32,32,.13),transparent 70%),
    linear-gradient(172deg,#17191d 0%,#0f1114 60%,#08090b 100%) !important;
  border:1px solid rgba(154,154,159,.1) !important;
  border-left:2px solid var(--fx-blood) !important;
  border-radius:3px !important;
  box-shadow:0 8px 26px rgba(0,0,0,.55) !important;
  backdrop-filter:none !important}
.admin-form::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tex-url);background-size:360px;
  opacity:.26;filter:invert(1) grayscale(1) contrast(1.8) brightness(.3);
  mix-blend-mode:overlay}
.admin-form > *{position:relative;z-index:1}
.co-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.co-row > *{flex:1;min-width:150px}
.admin-check{display:flex;align-items:center;gap:8px;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;color:#6b7280;cursor:pointer}
.wb-hint{
  font-family:'Rajdhani',sans-serif;font-size:13px;color:#545c68;
  line-height:1.6;margin:0 0 14px}

/* ═══ THE WORKBENCH ═══ */
.wb-card{
  position:relative;isolation:isolate;
  padding:20px 22px;margin-bottom:14px;
  background:linear-gradient(172deg,#141619 0%,#0d0f12 60%,#08090b 100%) !important;
  border:1px solid rgba(154,154,159,.09) !important;
  border-left:2px solid rgba(139,26,26,.3) !important;
  border-radius:3px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.5) !important;
  backdrop-filter:none !important}
.wb-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tex-url);background-size:340px;
  opacity:.24;filter:invert(1) grayscale(1) contrast(1.8) brightness(.3);
  mix-blend-mode:overlay}
.wb-card > *{position:relative;z-index:1}

/* ═══ SECTION HEADS ═══ */
.rr-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid rgba(154,154,159,.09);
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2.6px;
  text-transform:uppercase;color:#B22222}

/* ═══ BUTTONS ═══ */
.btn-ghost{
  padding:10px 20px;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(154,154,159,.16);
  color:#8e96a1;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;transition:.16s}
.btn-ghost:hover{
  background:rgba(139,26,26,.14);border-color:rgba(224,32,32,.4);color:#e2e8f0}
.btn-mini{
  padding:5px 11px;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.02);border:1px solid rgba(154,154,159,.14);
  color:#6b7280;font-family:'Share Tech Mono',monospace;font-size:10px;
  letter-spacing:1px;transition:.15s}
.btn-mini:hover{background:rgba(139,26,26,.18);
  border-color:rgba(224,32,32,.4);color:#e2e8f0}
.btn-mini.kdanger:hover{background:rgba(139,26,26,.3);color:#ffb3a8}
.btn-blood{border-radius:3px !important}

/* ═══ COMMS ═══ */
.messages-wrap{
  display:grid;grid-template-columns:280px 1fr;gap:14px;
  height:calc(100vh - 260px);min-height:440px}
.messages-list{
  overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(139,26,26,.4) transparent}
.messages-list::-webkit-scrollbar{width:5px}
.messages-list::-webkit-scrollbar-thumb{background:rgba(139,26,26,.4)}
.messages-thread{
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(172deg,#111316 0%,#0a0b0d 100%);
  border:1px solid rgba(154,154,159,.09);border-radius:3px}
.messages-head{padding:14px 18px;border-bottom:1px solid rgba(139,26,26,.22);
  flex-shrink:0}
.messages-log{flex:1;overflow-y:auto;padding:18px;display:flex;
  flex-direction:column;gap:10px}
.messages-foot{display:flex;gap:9px;padding:13px 16px;flex-shrink:0;
  border-top:1px solid rgba(154,154,159,.09)}

@media(max-width:900px){
  .messages-wrap{grid-template-columns:1fr;height:auto}
  .messages-list{max-height:220px}
  .messages-thread{min-height:380px}
}

/* ═══ TABS on deck pages ═══ */
.center .feed-tabs,main.deck .feed-tabs{
  display:inline-flex !important;width:auto !important;
  gap:3px !important;padding:3px !important;margin:0 0 20px !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,rgba(10,11,13,.9),rgba(5,5,6,.7)) !important;
  border:1px solid rgba(154,154,159,.11) !important;
  backdrop-filter:none !important}
.center .feed-tab{
  flex-grow:0 !important;flex-shrink:0 !important;flex-basis:auto !important;
  padding:8px 20px !important;border-radius:6px !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;font-size:12px !important;
  letter-spacing:2px !important;color:#5c636d !important;
  background:none !important;cursor:pointer;transition:.16s}
.center .feed-tab:hover{color:#c8cdd4 !important;
  background:rgba(255,255,255,.03) !important}
.center .feed-tab.active{
  color:#fff2f0 !important;
  background:linear-gradient(180deg,#9e2222,#6b1313) !important;
  box-shadow:0 1px 0 rgba(255,210,205,.24) inset,
             0 2px 6px rgba(0,0,0,.5) !important}

/* ═══ QUIET STATES ═══
   Every social page will spend most of its life empty right now.
   These carry more weight than the full states. */
.center .feed-empty,.center .reply-empty{
  padding:44px 24px;text-align:center;border-radius:3px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%,rgba(139,26,26,.06),transparent 70%),
    linear-gradient(172deg,rgba(18,20,23,.5),rgba(8,9,11,.3));
  border:1px dashed rgba(154,154,159,.12);
  font-family:'Rajdhani',sans-serif;font-size:14.5px;color:#4a5058;
  line-height:1.65}
.center .feed-empty::before{
  content:'\2620';display:block;font-size:28px;
  color:rgba(178,34,34,.3);margin-bottom:10px}
.center .feed-empty b{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;
  color:#8e96a1;margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.center .feed-empty a{color:#ff8a70;text-decoration:none}

/* ═══ DOSSIER ═══ */
.profile-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.profile-av{
  width:88px;height:88px;border-radius:50%;flex-shrink:0;
  background-size:cover;background-position:center;background-color:#141619;
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:28px;
  color:var(--fx-blood);
  border:2px solid rgba(178,34,34,.45);
  box-shadow:0 0 0 4px #000, 0 0 28px rgba(224,32,32,.28)}
.profile-id{min-width:0}
.verified{color:#5ba3d0;font-size:.7em;margin-left:5px}

/* ═══ LABEL / VALUE PAIRS ═══ */
.wb-label{
  display:block;margin-bottom:4px;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:2px;
  text-transform:uppercase;color:#3a3f47}
.wb-value{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:15px;color:#c8cdd4}

/* Email card flags gold when there is no address on file —
   without one there is no way back into the account. */
#wb-email-card.wb-danger{
  border-left-color:#b08a1b !important;
  background:
    radial-gradient(ellipse 70% 60% at 10% 125%,rgba(176,138,27,.12),transparent 70%),
    linear-gradient(172deg,#191a17 0%,#0f100d 60%,#08090b 100%) !important}
.ostat-pending{
  border:1px solid rgba(176,138,27,.5);color:#d8b34a;
  background:rgba(176,138,27,.1)}
.ostat{
  padding:2px 8px;border-radius:3px;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:1.2px;
  text-transform:uppercase}
.ostat-active{border:1px solid rgba(63,168,106,.45);color:#6fce97;
  background:rgba(63,168,106,.1)}
.ostat-hidden{border:1px solid rgba(154,154,159,.2);color:#6b7280;
  background:rgba(255,255,255,.02)}

/* ═══ TEXTAREA ═══ */
textarea.admin-input{resize:vertical;min-height:80px;
  font-family:'Rajdhani',sans-serif;line-height:1.6}

/* ═══ AUTOFILL ═══
   Chrome paints its own near-white background on autofilled fields,
   which blows a hole in any dark form. There is no property to turn
   it off, so the trick is a very long inset shadow covering the
   painted background plus text-fill-color for the value.

   This lives in deck.css so it applies EVERYWHERE, not just the
   login page — any form on any page can be autofilled. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#e2e8f0 !important;
  -webkit-box-shadow:0 0 0 1000px #0d0f12 inset !important;
  box-shadow:0 0 0 1000px #0d0f12 inset !important;
  caret-color:#e2e8f0;
  border:1px solid rgba(154,154,159,.13);
  transition:background-color 9999s ease-in-out 0s}
input:-webkit-autofill:focus{border-color:rgba(255,91,74,.45)}

/* ═══ COMMAND ═══ */
.cmd-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;margin-bottom:22px;
  background:rgba(154,154,159,.08);
  border:1px solid rgba(154,154,159,.08)}
.cmd-stat{
  padding:16px 18px;
  background:linear-gradient(172deg,#141619 0%,#0b0c0f 100%)}
.cmd-stat b{
  display:block;font-family:'Oswald',sans-serif;font-weight:700;font-size:26px;
  line-height:1;
  background:linear-gradient(177deg,#fff 0%,#cfd6de 30%,#6b7280 70%,#2b2f36 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.cmd-stat small{
  display:block;margin-top:5px;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:#3a3f47}
/* Money reads GREEN, not crimson — a different scan purpose from
   everything else on the page. */
.astat-money b{
  background:linear-gradient(177deg,#eaffef 0%,#8fe0ab 30%,#3fa86a 70%,#1f7a46 100%);
  -webkit-background-clip:text;background-clip:text}

/* 11 tabs will not fit on one line — let them wrap rather than
   scroll horizontally, which hides half of them on a laptop. */
.cmd-tabs{flex-wrap:wrap;max-width:100%}
.command .feed-tab{padding:7px 15px !important;font-size:11px !important;
  letter-spacing:1.4px !important}

.admin-panel{margin-top:4px}

/* Rows */
.krow{
  display:flex;align-items:center;gap:12px;padding:13px 16px;flex-wrap:wrap}
.kinfo{flex:1;min-width:180px}
.kinfo b{display:block;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:14px;color:#e2e8f0}
.kinfo small{display:block;margin-top:2px;
  font-family:'Share Tech Mono',monospace;font-size:9px;color:#454b54}
.kmini{padding:5px 9px !important;font-size:10px !important;
  min-width:auto;flex:0 0 auto}

/* Pending rows earn the heat — same language as unread everywhere else */
.krow-pending{border-left-color:var(--fx-hot) !important}

#a-leaddot{
  display:none;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  align-items:center;justify-content:center;margin-left:5px;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;color:#fff2f0;
  background:linear-gradient(180deg,#c92b2b,#7f1616)}
#a-leaddot.on{display:inline-flex}

/* ═══ RIGHT RAIL — On Air / From The Crypts ═══
   Morticia's old slot. She is in the dock now; this space points
   at things that earn: live streamers and the store. */
.rr-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background-size:cover;background-position:center;background-color:#141619;
  border:1px solid rgba(178,34,34,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:11px;
  color:var(--fx-blood)}

.mu-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--fx-hot);margin-right:5px;
  box-shadow:0 0 9px rgba(255,91,74,.9);
  animation:muBlink 2.2s ease-in-out infinite}
@keyframes muBlink{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.mu-dot{animation:none}}

/* Store card — one product, shown properly. A rail is not a
   catalogue; three tiny thumbnails sell less than one clear item. */
.rr-shop{display:block;text-decoration:none;margin:0 -4px}
.rr-shop-img{
  height:110px;border-radius:3px;margin-bottom:10px;
  background-size:cover;background-position:center;background-color:#0a0b0d;
  border:1px solid rgba(154,154,159,.1)}
.rr-shop b{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;
  color:#e2e8f0;line-height:1.3;transition:color .16s}
.rr-shop:hover b{color:#ff8a70}
.rr-shop small{
  display:block;margin-top:4px;
  font-family:'Rajdhani',sans-serif;font-size:12.5px;color:#5c636d;
  line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.rr-shop-price{
  display:inline-block;margin-top:9px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;
  background:linear-gradient(177deg,#eaffef 0%,#8fe0ab 35%,#3fa86a 75%,#1f7a46 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ═══ THE RECEIPTS — rotating client work ═══
   Replaced the sponsors card. Each client gets the whole card, and
   the portfolio works on every page instead of one division page. */
.rr-work-item{display:block;text-decoration:none;margin:0 -4px}
.rr-work-item.in{animation:rrFade .4s ease}
@keyframes rrFade{from{opacity:0;transform:translateY(6px)}
                  to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.rr-work-item.in{animation:none}}

/* Work image.
   ⚠️ `contain`, not `cover`. This slot holds two very different
   shapes: wide site screenshots AND square client logos. `cover`
   on a 1:1 logo in a wide box crops to a strip of empty background
   and looks broken. `contain` fits either honestly.

   The inset padding + dark plate frames a logo that has its own
   light background, so it reads as a framed mark rather than a
   white box someone forgot to cut out. A transparent PNG still
   looks better — this just stops an opaque one looking like a bug. */
.rr-work-img{
  height:110px;border-radius:3px;margin-bottom:10px;
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#0f1114;
  border:1px solid rgba(154,154,159,.1);
  transition:border-color .2s}
.rr-work-item:hover .rr-work-img{border-color:rgba(255,91,74,.4)}
.rr-work-blank{
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(139,26,26,.14),#08090b 70%)}
.rr-work-blank span{font-size:26px;color:rgba(178,34,34,.4)}

.rr-work-item b{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;
  color:#e2e8f0;line-height:1.3;transition:color .16s}
.rr-work-item:hover b{color:#ff8a70}
.rr-work-item small{
  display:block;margin-top:3px;
  font-family:'Rajdhani',sans-serif;font-size:12.5px;color:#5c636d;
  line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

.rr-dots{display:flex;gap:5px;justify-content:center;margin-top:12px}
.rr-dot{
  width:5px;height:5px;border-radius:50%;cursor:pointer;
  background:#2b2f36;transition:.2s}
.rr-dot:hover{background:#5c636d}
.rr-dot.on{
  background:var(--fx-glow);width:14px;border-radius:3px;
  box-shadow:0 0 8px rgba(224,32,32,.6)}

/* Sponsors — kept for later, if a paid slot ever makes sense */
.rr-sponsor{
  display:flex;align-items:center;gap:11px;padding:8px 0;
  text-decoration:none;transition:.15s}
.rr-sponsor img{
  width:34px;height:34px;object-fit:contain;flex-shrink:0;opacity:.85}
.rr-sponsor b{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;color:#c8cdd4}
.rr-sponsor:hover b{color:#ff8a70}

/* ═══ WORK IMAGE UPLOAD (Command) ═══ */
.dw-imgrow{display:flex;gap:14px;align-items:flex-start;margin:12px 0}
.dw-preview{
  width:150px;height:100px;flex-shrink:0;border-radius:3px;
  background:#0f1114;background-size:contain;background-position:center;
  background-repeat:no-repeat;
  border:1px dashed rgba(154,154,159,.18);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s}
.dw-preview.has{border-style:solid;border-color:rgba(154,154,159,.16)}
.dw-preview:not(.has)::after{
  content:'no image';
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;
  text-transform:uppercase;color:#2b2f36}
.dw-imgctl{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.dw-imgctl > label{align-self:flex-start;cursor:pointer}
.dw-imgctl .btn-mini{align-self:flex-start}
.dw-imgctl .admin-input[readonly]{
  opacity:.65;cursor:default;font-family:'Share Tech Mono',monospace;
  font-size:10.5px}

/* ═══ LICENCES (Command) ═══ */
.admin-subtabs{margin-bottom:16px !important}

.lic-row{cursor:default}
.lic-unset{
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:#7a6a2a;
  padding:2px 7px;border-radius:3px;
  background:rgba(176,138,27,.12);border:1px solid rgba(176,138,27,.3)}

.lic-seats{
  flex:0 0 auto;text-align:center;min-width:68px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;color:#c8cdd4}
.lic-seats small{
  display:block;font-family:'Share Tech Mono',monospace;font-size:8px;
  letter-spacing:1.4px;text-transform:uppercase;color:#3a3f47;
  font-weight:400;margin-top:1px}
/* Over the seat limit — the signal that a key is being shared */
.lic-seats.over{color:#ff8a70}
.lic-seats.over small{color:#8e5050}

.lic-seen{flex:0 0 auto;min-width:80px;text-align:right}
.lic-seen small{
  font-family:'Share Tech Mono',monospace;font-size:9px;color:#454b54;
  line-height:1.5}

.lic-detail{
  margin:-6px 0 12px;padding:14px 16px;border-radius:0 0 3px 3px;
  background:linear-gradient(172deg,#0f1114,#0a0b0d);
  border:1px solid rgba(154,154,159,.09);border-top:none;
  border-left:2px solid rgba(139,26,26,.3)}

.lic-srv{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid rgba(154,154,159,.07)}
.lic-srv:last-child{border-bottom:none}
.lic-srv.blocked{opacity:.5}
.lic-srv.blocked .lic-srv-id b{text-decoration:line-through}
.lic-srv-id{flex:1;min-width:180px}
.lic-srv-id b{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:13.5px;
  color:#c8cdd4}
.lic-srv-id small{
  display:block;margin-top:2px;
  font-family:'Share Tech Mono',monospace;font-size:9px;color:#454b54}
.lic-srv-seen{flex:0 0 auto;text-align:right}
.lic-srv-seen small{
  font-family:'Share Tech Mono',monospace;font-size:8.5px;color:#3a3f47;
  line-height:1.6}

.lic-none{
  padding:14px 0;font-family:'Rajdhani',sans-serif;font-size:13.5px;
  color:#454b54}
.lic-edit-form .co-row{margin-bottom:10px}

/* Mail log error text — full width, monospace, readable.
   This IS the diagnostic; truncating it would defeat the purpose. */
.mail-err{
  margin-top:7px;padding:8px 10px;border-radius:3px;
  background:rgba(139,26,26,.14);border-left:2px solid var(--fx-glow);
  font-family:'Share Tech Mono',monospace;font-size:10.5px;line-height:1.6;
  color:#ffb3a8;word-break:break-word}

/* ═══ KEY AGE ═══ */
.ka-row{align-items:center}
.ka-dot{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  margin-left:auto;background:#2b2f36}
.ka-green .ka-dot{background:#3fa86a;box-shadow:0 0 9px rgba(63,168,106,.6)}
.ka-amber .ka-dot{background:#c9a227;box-shadow:0 0 9px rgba(201,162,39,.6)}
.ka-red   .ka-dot{background:var(--fx-glow);box-shadow:0 0 11px rgba(224,32,32,.8)}
.ka-grey  .ka-dot{background:#3a3f47}

.ka-red{border-left-color:var(--fx-glow) !important}
.ka-amber{border-left-color:rgba(201,162,39,.6) !important}
/* Not set is a different problem from old — a missing key means the
   thing is DOWN, not overdue. Gold, not crimson. */
.ka-grey small{color:#7a6a2a !important}

/* ═══ NO RIGHT RAIL ═══
   Command sets $NO_RAIL. Without this the grid keeps its third
   column reserved (style.css: 260px minmax(0,1fr) 320px) and the
   centre stays narrow — the rail vanishes but the 320px it held
   does not, which is the worst of both.

   :has() targets "a layout containing no right rail" without needing
   a class on the wrapper. The data-page rule below is the fallback. */
.layout:not(:has(.right-rail)),
body[data-page="command"] .layout{
  grid-template-columns:260px minmax(0,1fr) !important;
}

/* Command's tables want every pixel. */
main.command{max-width:none !important;width:100% !important}
.layout:not(:has(.right-rail)) .center{max-width:none !important}

/* ═══════════════════════════════════════════════════════════
   DK SECURITY — WATCH
   The actor table. Five columns that matter, scannable at a glance:
   location · address · attempts · vpn · signature
   ═══════════════════════════════════════════════════════════ */
.w-head, .w-row{
  display:grid;
  grid-template-columns:1.4fr 1.4fr 70px 60px 1.3fr 90px auto;
  gap:12px;align-items:center;padding:11px 14px}

.w-head{
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:2px;
  text-transform:uppercase;color:#3a3f47;
  border-bottom:1px solid rgba(154,154,159,.1);padding-bottom:9px}

.w-row{
  background:linear-gradient(172deg,#141619 0%,#0b0c0f 100%);
  border:1px solid rgba(154,154,159,.08);
  border-left:2px solid rgba(154,154,159,.14);
  border-radius:3px;margin-bottom:6px;
  transition:border-color .18s, transform .18s}
.w-row:hover{transform:translateX(2px);border-left-color:var(--fx-glow)}

/* Severity drives the left edge. The eye should land on the worst
   row without reading anything. */
.sev-3{border-left-color:rgba(201,162,39,.7) !important}
.sev-4{border-left-color:rgba(224,120,32,.8) !important}
.sev-5{border-left-color:var(--fx-glow) !important;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%,rgba(224,32,32,.14),transparent 70%),
    linear-gradient(172deg,#191c21,#0b0c0f) !important}

.w-where, .w-ip, .w-sig{min-width:0}
.w-where, .w-sig{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:13.5px;color:#c8cdd4}
.w-ip{
  font-family:'Share Tech Mono',monospace;font-size:12px;color:#e2e8f0}
.w-where small, .w-ip small, .w-sig small{
  display:block;margin-top:2px;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;color:#454b54;
  font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.w-attempts{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;
  color:#c8cdd4;text-align:center}

/* ⚠️ THREE STATES. `?` is not `no`.
   An unchecked address rendered as a confident "clean" would be a lie
   on a product called Dark Knight Security. */
.w-yes{
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;
  color:#ffb3a8;text-align:center;
  padding:3px 0;border-radius:3px;
  background:rgba(139,26,26,.22);border:1px solid rgba(224,32,32,.4)}
.w-no{
  font-family:'Share Tech Mono',monospace;font-size:10px;
  color:#4a5058;text-align:center}
.w-unknown{
  font-family:'Share Tech Mono',monospace;font-size:11px;
  color:#3a3f47;text-align:center}

.w-seen{
  font-family:'Share Tech Mono',monospace;font-size:9px;color:#454b54}
.w-act{display:flex;gap:5px;justify-content:flex-end}

.w-sev{
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:#8e5050;margin-left:6px}
.w-detail{
  margin-top:6px;padding:7px 10px;border-radius:3px;
  background:rgba(0,0,0,.35);border-left:2px solid rgba(154,154,159,.16);
  font-family:'Share Tech Mono',monospace;font-size:10px;line-height:1.6;
  color:#8e96a1;word-break:break-word}

/* ── The token, shown once ── */
.w-token-box{
  margin-top:14px;padding:16px;border-radius:3px;
  background:
    radial-gradient(ellipse 70% 90% at 6% 130%,rgba(224,32,32,.2),transparent 70%),
    linear-gradient(172deg,#1a1d21,#0b0c0f);
  border:1px solid rgba(224,32,32,.35);border-left:3px solid var(--fx-glow)}
.w-token-warn{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:1.6px;text-transform:uppercase;color:#ffb3a8;margin-bottom:10px}
.w-token-val{
  display:block;padding:10px 12px;border-radius:3px;margin-bottom:10px;
  background:rgba(0,0,0,.5);border:1px solid rgba(154,154,159,.14);
  font-family:'Share Tech Mono',monospace;font-size:13px;color:#e2e8f0;
  word-break:break-all;user-select:all}
.w-token-cfg{
  font-family:'Share Tech Mono',monospace;font-size:11px;color:#6b7280;
  word-break:break-all;user-select:all}

@media(max-width:1200px){
  .w-head{display:none}
  .w-row{grid-template-columns:1fr 1fr;gap:8px}
  .w-act{grid-column:1/-1;justify-content:flex-start}
}

/* ═══════════════════════════════════════════════════════════
   ADMIN RAIL — Command's own navigation
   The site nav is replaced, not supplemented. Two menus doing
   different jobs is what made Command read as a page pretending to
   be an admin panel.
   ═══════════════════════════════════════════════════════════ */

/* ── Return to Site ──
   Sits ABOVE everything, visually separate. Somebody deep in Command
   should never have to think about how to get back out. */
/* ⚠️ A LINK, NOT A BUTTON — AND THAT IS A SPACE DECISION, NOT A TASTE
   ONE. This was a bordered, padded slab ~60px tall including its
   margin, sitting at the top of a rail that could not fit its own last
   two items on a 806px laptop. It is the one thing in that column you
   press once per visit, and it was outweighing three navigation items.
   Slimmed, Settings and Config come back above the fold. */
.rail-back{
  display:block;margin:0 0 14px;padding:2px 0 2px 20px;
  text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:1.8px;text-transform:uppercase;color:#545c68;
  transition:.16s}
.rail-back:hover{color:#ff8a70;transform:translateX(2px)}

/* ── The admin rail keeps The Rack's grammar, tighter ──
   Same vertical rule and connector language as the site nav, so
   Command still feels like part of the same building. */
.admin-rail{padding-top:26px}
.admin-rail .rail-group{margin:0 !important}

.admin-rail .rail-label{
  margin-top:20px !important;
  padding-left:20px !important;
  font-size:8.5px !important;letter-spacing:2.8px !important;
  /* Brighter than the site rail's labels ON PURPOSE. Grouping only
     helps if you can SEE the groups — at #2f343b they were invisible
     and the rail read as thirteen flat items again, which was the
     thing this change was meant to fix. */
  color:#5c636d !important}
.admin-rail .rail-label:first-child{margin-top:0 !important}

/* ⚠️ SPACE, NOT A HAIRLINE — AND FULL SIZE, NOT SQUEEZED.
   This was briefly 4px items with a rule above each group, to force
   fifteen sections into one 806px screen. Knox's call, and the right
   one: *"instead of cramming everything into a fake helix why not make
   the menu scrollable... this way it can be stretched out and keep the
   site's look"*. Compressing the pitch to fit makes the rope a
   different rope — the helix ends up drawn at a density the site rail
   never uses, so the two menus stop matching at exactly the moment
   they were supposed to become one.
   The rail already scrolls with no scrollbar. Let it. */
.admin-rail .rail-item + .rail-label{
  margin-top:20px !important;padding-top:0 !important;border-top:none}

/* Same 8px as the site rail. Measured, not matched by eye — the two
   have to share a pitch or the strand is drawn at two densities. */
.admin-rail .rail-item{
  cursor:pointer;font-size:13px;padding:8px 12px 8px 20px;
  display:flex;align-items:center;gap:7px}

/* ═══ COMMAND RUNS THE STRAND TOO — 2026-09-12 ═══
   Knox: "should we run one style of menu instead of two ?? I love the
   new one". One grammar, both sides.

   ⚠️ EVERY RULE IN THIS BLOCK EXISTS BECAUSE deck.css LOADS AFTER
   rack.css. rack.css already dresses `.left-rail.has-strand` correctly
   — 54px of room for the spine, items pulled in to 2px — and the
   `.admin-rail` rules ABOVE would otherwise win on load order and shove
   Command's items back out over the helix. Same class, same numbers,
   restated where they can survive.
   If rack.css's strand numbers ever change, these change with them. */
.admin-rail.has-strand{ padding-left:54px }
.admin-rail.has-strand .rail-item{ padding-left:2px !important }
.admin-rail.has-strand .rail-label{ padding-left:0 !important }
.admin-rail.has-strand .rail-back{ padding-left:0 }

/* The group hairline starts past the spine — a rule drawn through a
   rope reads as a cut, not a divider. */
.admin-rail.has-strand .rail-item + .rail-label{
  border-top-color:rgba(154,154,159,.07)}

/* The rail is MEANT to run past the bottom on a short window, and it
   hides its scrollbar — so without this the bottom edge looks like the
   end of the list rather than the top of more. The fade is the honest
   signal: it says "there is more" without putting chrome on a rail
   whose whole design is that it has none. */
.admin-rail{
  padding-bottom:14px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent 100%)}

/* Seventeen sections need to fit WITHOUT scrolling on a laptop — the
   rail has hidden scrollbars, so anything past the bottom edge is not
   merely awkward to reach, it is invisible. Measure after changing
   any of the numbers above:
     railContent must stay <= railBox at 806px tall. */
.admin-rail .rail-item{margin-bottom:0}

/* The active section is where you ARE, not a link you might follow —
   give it more weight than a hover state. */
.admin-rail .rail-item.active{
  color:#fff2f0;font-weight:700;transform:translateX(6px)}

/* Unread markers sit inline with the label. */
#a-leaddot, #a-watchdot{
  display:none;min-width:16px;height:16px;padding:0 5px;border-radius:8px;
  align-items:center;justify-content:center;margin-left:auto;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;color:#fff2f0;
  background:linear-gradient(180deg,#c92b2b,#7f1616);
  border:1px solid rgba(255,120,100,.5)}
#a-leaddot.on, #a-watchdot.on{display:inline-flex}

/* The old horizontal tab bar is gone from Command. This kills any
   stragglers rather than leaving a stray empty strip. */
.command .cmd-tabs{display:none}

/* ═══════════════════════════════════════════════════════════
   COMMAND DASHBOARD
   Attention first, charts second.
   ═══════════════════════════════════════════════════════════ */
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;
  align-items:start}

/* ── Dashboard sits above the group labels, on its own ── */
.admin-rail .rail-dash{
  margin-bottom:18px;font-weight:700;font-size:13.5px}

/* ── NEEDS ATTENTION ── */
.dash-att{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;margin-bottom:8px;border-radius:3px;
  text-decoration:none;cursor:pointer;
  background:linear-gradient(172deg,#141619 0%,#0b0c0f 100%);
  border:1px solid rgba(154,154,159,.09);
  border-left:2px solid rgba(154,154,159,.2);
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s}
.dash-att:hover{transform:translateX(3px)}

.da-count{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;
  line-height:1;min-width:34px;text-align:center;color:#c8cdd4}
.da-label{
  flex:1;font-family:'Rajdhani',sans-serif;font-weight:500;font-size:15px;
  color:#a8b0ba}
.da-go{color:#3a3f47;font-size:15px;transition:.18s}
.dash-att:hover .da-go{color:#ff8a70;transform:translateX(3px)}

/* Level drives the edge. The eye should find the worst one without
   reading anything. */
.lvl-bad{border-left-color:var(--fx-glow) !important}
.lvl-bad .da-count{color:#ff8a70}
.lvl-warn{border-left-color:rgba(201,162,39,.7) !important}
.lvl-warn .da-count{color:#d8b34a}
.lvl-good{border-left-color:rgba(63,168,106,.7) !important}
.lvl-good .da-count{color:#6fce97}
.lvl-info{border-left-color:rgba(120,140,170,.5) !important}

/* ⚠️ THE QUIET STATE IS THE GOOD STATE HERE.
   Everywhere else an empty panel means "nothing has happened yet".
   On a dashboard it means "nothing needs you" — say it warmly, not
   apologetically. */
.dash-clear{
  padding:34px 24px;text-align:center;border-radius:3px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%,rgba(63,168,106,.07),transparent 70%),
    linear-gradient(172deg,rgba(18,20,23,.6),rgba(8,9,11,.4));
  border:1px dashed rgba(63,168,106,.2);
  font-family:'Rajdhani',sans-serif;font-size:14.5px;color:#5c636d;
  line-height:1.65}
.dash-clear span{display:block;font-size:30px;color:#3fa86a;margin-bottom:10px}
.dash-clear b{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;
  color:#8fe0ab;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}

/* ── CHARTS ── */
.dash-charts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dash-chart{
  padding:14px 16px;border-radius:3px;
  background:linear-gradient(172deg,#141619 0%,#0b0c0f 100%);
  border:1px solid rgba(154,154,159,.09)}
.dc-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:2px;
  text-transform:uppercase;color:#3a3f47}
.dc-head b{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;
  letter-spacing:0;color:#c8cdd4}
.dc-plot{height:44px}
.dc-plot svg{width:100%;height:100%;display:block;overflow:visible}

/* ── WHAT JUST HAPPENED ── */
.dash-side .rr-head{margin-bottom:12px}
.dash-rec{
  display:flex;align-items:flex-start;gap:11px;padding:9px 0;
  border-bottom:1px solid rgba(154,154,159,.06)}
.dash-rec:last-child{border-bottom:none}
.dr-ico{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  color:var(--fx-blood);
  background:rgba(139,26,26,.14);border:1px solid rgba(139,26,26,.26)}
.dr-text{
  flex:1;min-width:0;
  font-family:'Rajdhani',sans-serif;font-size:13.5px;color:#a8b0ba;
  line-height:1.4}
.dr-text small{
  display:block;margin-top:2px;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;color:#3a3f47}

@media(max-width:1100px){
  .dash-grid{grid-template-columns:1fr}
  .dash-charts{grid-template-columns:1fr}
}

/* ═══ ORDER LINE EDITOR ═══ */
.oi-host{
  margin:-6px 0 10px;padding:14px 16px;border-radius:0 0 3px 3px;
  background:linear-gradient(172deg,#0f1114,#0a0b0d);
  border:1px solid rgba(154,154,159,.09);border-top:none;
  border-left:2px solid rgba(139,26,26,.3)}
.oi-row{
  padding:12px 0;border-bottom:1px solid rgba(154,154,159,.07)}
.oi-row:last-child{border-bottom:none}
.oi-row .co-row{margin-bottom:8px}
.oi-was{
  margin-bottom:9px;
  font-family:'Share Tech Mono',monospace;font-size:10px;color:#454b54}
.oi-was b{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;color:#c8cdd4}

/* Mismatch warning on the order line editor.
   Loud on purpose — saving a line here can destroy recorded revenue,
   and that is not recoverable from the UI. */
.oi-warn{
  padding:14px 16px;margin-bottom:14px;border-radius:3px;
  background:
    radial-gradient(ellipse 70% 90% at 6% 130%,rgba(224,32,32,.2),transparent 70%),
    linear-gradient(172deg,#1a1214,#0b0c0f);
  border:1px solid rgba(224,32,32,.35);
  border-left:3px solid var(--fx-glow);
  font-family:'Rajdhani',sans-serif;font-size:14px;line-height:1.6;
  color:#c8cdd4}
.oi-warn > b:first-child{
  display:block;margin-bottom:8px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:1.4px;text-transform:uppercase;color:#ffb3a8}
.oi-warn b{color:#fff}

/* ═══ PRODUCT FILE UPLOAD ═══ */
.vf-uprow{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.vf-pick{cursor:pointer;flex:0 0 auto}
.vf-upinfo{
  flex:1;min-width:0;
  font-family:'Share Tech Mono',monospace;font-size:11px;color:#6b7280;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Progress. A large upload with no feedback is indistinguishable
   from a frozen page, and people close the tab. */
.vf-bar{
  height:4px;border-radius:2px;overflow:hidden;margin-bottom:10px;
  background:rgba(0,0,0,.5);border:1px solid rgba(154,154,159,.1)}
.vf-bar span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#7f1616,#e02020);
  box-shadow:0 0 10px rgba(224,32,32,.6);
  transition:width .2s ease}

/* Amber for "this worked, but you should know something". Not an
   error — the upload succeeded — but not a clean OK either. */
.auth-msg.warn{color:#d8b34a}

/* ═══════════════════════════════════════════════════════════
   REPORTS — the moderation queue
   ═══════════════════════════════════════════════════════════ */
.rp-card{
  padding:14px 16px;margin-bottom:10px;border-radius:3px;
  background:linear-gradient(172deg,#141619 0%,#0b0c0f 100%);
  border:1px solid rgba(154,154,159,.09);
  border-left:2px solid rgba(201,162,39,.6)}

/* Several people reporting the same thing is the strongest signal in
   the queue. It should look different, not just carry a number. */
.rp-many{
  border-left-color:var(--fx-glow) !important;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%,rgba(224,32,32,.14),transparent 70%),
    linear-gradient(172deg,#191c21,#0b0c0f)}

.rp-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.rp-head b{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;color:#e2e8f0}
.rp-kind, .rp-when{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:#454b54}
.rp-when{margin-left:auto}
.rp-times{
  padding:2px 8px;border-radius:3px;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:#ffb3a8;
  background:rgba(139,26,26,.25);border:1px solid rgba(224,32,32,.4)}

.rp-by{
  font-family:'Share Tech Mono',monospace;font-size:9.5px;color:#3a3f47;
  margin-bottom:8px}
.rp-detail{
  font-family:'Rajdhani',sans-serif;font-size:14px;color:#a8b0ba;
  line-height:1.6;margin-bottom:10px}

/* The snapshot. Monospace and boxed so it reads as EVIDENCE — a
   quotation of what was there, not something staff wrote. */
.rp-snap{
  padding:10px 12px;margin-bottom:12px;border-radius:3px;
  background:rgba(0,0,0,.45);
  border-left:2px solid rgba(154,154,159,.2);
  font-family:'Share Tech Mono',monospace;font-size:11px;line-height:1.7;
  color:#8e96a1;white-space:pre-wrap;word-break:break-word;
  max-height:200px;overflow-y:auto}

.rp-act{margin:0}
.rp-done{
  font-family:'Share Tech Mono',monospace;font-size:10px;color:#454b54;
  padding-top:6px;border-top:1px solid rgba(154,154,159,.07)}

#a-repdot{
  display:none;min-width:16px;height:16px;padding:0 5px;border-radius:8px;
  align-items:center;justify-content:center;margin-left:auto;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;color:#fff2f0;
  background:linear-gradient(180deg,#c92b2b,#7f1616);
  border:1px solid rgba(255,120,100,.5)}
#a-repdot.on{display:inline-flex}

/* ═══ THE ⋯ MENU ═══ */
.post-head{position:relative}
/* ═══ THE ⋯ MENU ═══
   ⚠️ The menu is appended to <body> and positioned with fixed
   coordinates by app.js. It is NOT inside .post-head, because
   .post-plate sets isolation:isolate and traps any z-index within it.
   Do not "simplify" this back to position:absolute inside the card —
   it renders fine and becomes completely unclickable. */
.post-menu{
  position:fixed;z-index:560;
  min-width:150px;padding:5px;border-radius:3px;
  background:linear-gradient(172deg,#1a1d21,#0b0c0f);
  border:1px solid rgba(154,154,159,.16);
  box-shadow:0 12px 34px rgba(0,0,0,.85);

  /* Visible by default; the animation only moves it. An earlier
     version animated opacity from 0 with no `forwards` and the menu
     snapped back to invisible the moment it finished. */
  opacity:1;
  animation:pmIn .14s ease}
@keyframes pmIn{
  from{transform:translateY(-5px)}
  to{transform:none}}

/* A menu you cannot see is worse than no menu. If animations are off,
   it must still be visible. */
@media(prefers-reduced-motion:reduce){
  .post-menu{animation:none;opacity:1;transform:none}
}

.pm-opt{
  display:block;width:100%;text-align:left;
  padding:9px 12px;border:none;border-radius:2px;cursor:pointer;
  background:transparent;color:#a8b0ba;
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13.5px;
  transition:.14s}
.pm-opt:hover{background:rgba(154,154,159,.09);color:#e2e8f0}
.pm-opt.pm-danger:hover{background:rgba(139,26,26,.28);color:#ffb3a8}

/* ═══ REPORT DIALOG ═══ */
.rpt-scrim{
  position:fixed;inset:0;z-index:520;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rpt-box{width:100%;max-width:440px;border-radius:3px;overflow:hidden}
.rpt-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid rgba(154,154,159,.1)}
.rpt-head b{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;
  color:#e2e8f0;text-transform:capitalize}
.rpt-head small{
  display:block;margin-top:2px;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.4px;
  text-transform:uppercase;color:#3a3f47}
.rpt-body{padding:16px}

.rpt-reasons{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.rpt-r{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:3px;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-size:14.5px;color:#a8b0ba;
  transition:.14s}
.rpt-r:hover{background:rgba(154,154,159,.06);color:#e2e8f0}
.rpt-r input{accent-color:#B22222;cursor:pointer}
.rpt-detail{margin-bottom:10px}

/* ═══ DANGER ZONE ═══
   Visually apart from the rest of the Workbench. Irreversible actions
   should not look like "save your bio". */
.wb-danger{
  border-color:rgba(139,26,26,.35) !important;
  border-left:2px solid var(--fx-blood) !important;
  background:
    radial-gradient(ellipse 70% 60% at 8% 120%,rgba(224,32,32,.09),transparent 70%),
    linear-gradient(172deg,#16181c,#0b0c0f) !important}
.wb-danger .rr-head span{color:#ffb3a8}

/* ═══ @MENTIONS ═══
   Crimson and slightly heavier, so a tagged name reads as a person
   rather than punctuation. No underline — the feed already has enough
   lines in it. */
.mention{
  color:#ff8a70;font-weight:600;text-decoration:none;
  transition:color .14s}
.mention:hover{color:#fff2f0;text-decoration:underline}

/* ═══ NEW DROPS PILL ═══
   Floats at the top of the viewport, offering — never inserting.
   Sits above the feed but below the toasts, which are more urgent. */
.new-pill{
  position:fixed;top:calc(var(--topnav-h, 62px) + 14px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  z-index:400;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:20px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:#fff2f0;
  background:
    linear-gradient(180deg,rgba(255,240,238,.24) 0%,rgba(255,255,255,0) 52%),
    linear-gradient(180deg,#c92b2b 0%,#7f1616 100%);
  border:1px solid rgba(255,120,100,.5);
  box-shadow:0 1px 0 rgba(255,220,210,.4) inset,
             0 10px 30px rgba(0,0,0,.7),
             0 0 26px rgba(224,32,32,.4);
  opacity:0;
  animation:pillIn .32s cubic-bezier(.22,1,.36,1) forwards}
@keyframes pillIn{to{opacity:1;transform:translateX(-50%) translateY(0)}}
.new-pill:hover{filter:brightness(1.1)}
.new-pill b{font-size:14px;line-height:1}

@media(prefers-reduced-motion:reduce){
  .new-pill{animation:none;opacity:1;transform:translateX(-50%)}
}

/* ═══ dkConfirm ═══
   Replaces native confirm(), which Chrome silently suppresses after
   the first use — and which looks like a Windows dialog dropped onto
   the Forge Floor. */
.dkc-scrim{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:dkcIn .16s ease}
@keyframes dkcIn{from{opacity:0}to{opacity:1}}

.dkc-box{
  width:100%;max-width:400px;padding:22px;border-radius:3px;
  border-left:3px solid var(--fx-glow)}
.dkc-title{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;
  text-transform:uppercase;letter-spacing:.5px;color:#e2e8f0;
  margin-bottom:9px}
.dkc-text{
  font-family:'Rajdhani',sans-serif;font-size:14.5px;line-height:1.65;
  color:#8e96a1;margin-bottom:20px}

/* dkPrompt's text field — same dark-form look as the autofill fix
   above (#0d0f12 fill, rgba(255,91,74,.45) focus ring) so it reads
   as part of this theme, not a native form control. */
.dkc-input{
  width:100%;box-sizing:border-box;padding:10px 12px;margin-bottom:20px;
  background:#0d0f12;border:1px solid rgba(154,154,159,.22);border-radius:3px;
  font-family:'Rajdhani',sans-serif;font-size:15px;color:#e2e8f0;
  outline:none;transition:border-color .15s}
.dkc-input::placeholder{color:#5c636d}
.dkc-input:focus{border-color:rgba(255,91,74,.45)}

.dkc-acts{display:flex;gap:9px;justify-content:flex-end}
.dkc-acts button{min-width:104px}

@media(max-width:480px){
  /* Thumbs, not mice. Full width and the safe option first. */
  .dkc-acts{flex-direction:column-reverse}
  .dkc-acts button{width:100%}
}

/* ═══ HASHTAGS ═══
   Cooler than a mention on purpose. A tag is a topic; a mention is a
   person. If both were crimson the eye could not tell them apart. */
.hashtag{
  color:#7d94b8;font-weight:600;text-decoration:none;
  transition:color .14s}
.hashtag:hover{color:#c8d8f0;text-decoration:underline}

/* ── The "showing #tag" bar ── */
.tag-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;margin-bottom:14px;border-radius:3px;
  background:linear-gradient(172deg,#141619,#0b0c0f);
  border:1px solid rgba(154,154,159,.1);
  border-left:2px solid #7d94b8;
  font-family:'Rajdhani',sans-serif;font-size:14px;color:#8e96a1}
.tag-bar b{color:#c8d8f0;font-weight:700}
.tag-bar a{
  font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:#6b7280;text-decoration:none;
  transition:color .14s}
.tag-bar a:hover{color:#ff8a70}

/* ── Trending in the rail ── */
.rr-tag{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:3px;text-decoration:none;
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13.5px;
  color:#8e96a1;transition:.14s}
.rr-tag:hover{background:rgba(125,148,184,.09);color:#c8d8f0;transform:translateX(2px)}
.rr-tag b{
  font-family:'Share Tech Mono',monospace;font-size:9px;font-weight:400;
  color:#3a3f47}

/* ═══ THANKS PAGE ═══ */
.thanks-wrap{
  max-width:520px;margin:60px auto;padding:36px 30px;text-align:center;
  border-radius:3px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 120%,rgba(224,32,32,.1),transparent 70%),
    linear-gradient(172deg,#16181c,#0b0c0f);
  border:1px solid rgba(154,154,159,.1);
  border-left:2px solid var(--fx-glow)}
.thanks-mark{font-size:44px;margin-bottom:14px;line-height:1}

/* The mark carries the state as much as the words do. Green tick for
   done, amber for waiting, crimson skull for something wrong. */
.thanks-good .thanks-mark{color:#3fa86a}
.thanks-wait .thanks-mark{color:#c9a227}
.thanks-bad  .thanks-mark{color:var(--fx-glow)}
.thanks-good{border-left-color:#3fa86a !important}
.thanks-wait{border-left-color:#c9a227 !important}
.thanks-h{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:30px;
  text-transform:uppercase;letter-spacing:1px;color:#e2e8f0;margin:0 0 14px}
.thanks-p{
  font-family:'Rajdhani',sans-serif;font-size:15.5px;line-height:1.7;
  color:#8e96a1;margin:0 0 14px}
.thanks-p b{color:#e2e8f0}
.thanks-quiet{font-size:13px;color:#454b54}
.thanks-btn{
  display:inline-block;margin-top:10px;text-decoration:none;padding:12px 26px}

/* Stripe live-mode warning. Not clickable — it is a state, not a task,
   so no arrow and no hover shift. */
.stripe-mode{cursor:default}
.stripe-mode:hover{transform:none}
.stripe-mode .da-count{
  font-family:'Oswald',sans-serif;font-weight:700;color:#ff8a70}
.stripe-mode .da-label b{color:#ffb3a8}

/* ═══════════════════════════════════════════════════════════
   THE EMOJI PICKER — assets/js/emoji.js

   Knox: "most sites give you a little happy face and when you click on
   it you have all of them to pick from not having to remember all of
   them by heart." That is the whole brief, and the button is the half
   that matters — nobody knows the picker exists until they see a face.

   ⚠️ THE PANEL IS position:fixed AND LIVES ON <body>. It is anchored
   to the button in JS rather than nested beside it, because every
   composer on this site sits inside something with overflow or its own
   stacking context — the strike plate has isolation:isolate, the
   messages thread scrolls, and a reply box is inside a post. A panel
   parented to any of those gets clipped or buried. The dock already
   cost this project an afternoon over exactly that; see
   187DK_STACKING_TRAP.md.
   ═══════════════════════════════════════════════════════════ */
.emoji-btn{
  background:none;border:0;cursor:pointer;padding:0 2px;line-height:1;
  font-size:15px;opacity:.62;transition:opacity .15s,transform .15s}
.emoji-btn:hover{opacity:1;transform:translateY(-1px)}
.emoji-btn:focus-visible{outline:1px solid var(--fx-blood);outline-offset:2px}

.emoji-panel{
  position:fixed;z-index:9000;display:none;
  width:322px;padding:10px 10px 8px;border-radius:4px;
  background:linear-gradient(172deg,#191c21 0%,#101215 55%,#08090b 100%);
  border:1px solid rgba(226,232,240,.09);
  border-left:3px solid var(--fx-blood);
  box-shadow:0 18px 48px rgba(0,0,0,.72)}
.emoji-panel.open{display:block}

.emoji-search-row{margin-bottom:8px}
.emoji-search{
  width:100%;box-sizing:border-box;padding:7px 10px;border-radius:3px;
  background:rgba(0,0,0,.45);border:1px solid rgba(226,232,240,.09);
  color:#cbd2da;font-family:'Rajdhani',sans-serif;font-size:14px}
.emoji-search::placeholder{color:#4d545d}
.emoji-search:focus{outline:none;border-color:rgba(224,32,32,.5)}

.emoji-tabs{
  display:flex;gap:2px;padding-bottom:7px;margin-bottom:6px;
  border-bottom:1px solid rgba(226,232,240,.07)}
.emoji-tab{
  flex:1 1 0;background:none;border:0;cursor:pointer;
  padding:5px 0;border-radius:3px;font-size:15px;line-height:1;
  opacity:.45;transition:opacity .15s,background .15s}
.emoji-tab:hover{opacity:.9;background:rgba(226,232,240,.05)}
.emoji-tab.on{opacity:1;background:rgba(139,26,26,.26)}

/* 8 across at 34px + gaps = the 322px panel above. Change one and the
   other has to move with it. */
.emoji-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:1px;
  max-height:212px;overflow-y:auto;overscroll-behavior:contain}
.emoji-grid::-webkit-scrollbar{width:6px}
.emoji-grid::-webkit-scrollbar-track{background:transparent}
.emoji-grid::-webkit-scrollbar-thumb{
  background:rgba(226,232,240,.12);border-radius:3px}

.emoji-cell{
  background:none;border:0;cursor:pointer;border-radius:3px;
  height:34px;font-size:20px;line-height:1;padding:0;
  transition:background .12s,transform .12s}
.emoji-cell:hover{background:rgba(139,26,26,.3);transform:scale(1.18)}

.emoji-none{
  grid-column:1/-1;padding:26px 8px;text-align:center;
  font-family:'Rajdhani',sans-serif;font-size:13px;color:#4d545d}

@media(max-width:760px){
  .emoji-panel{width:min(322px,calc(100vw - 16px))}
}

/* ═══ THE WALLET ═══ pages/wallet.php + assets/js/wallet.js */
.wallet-balance-card{text-align:center}
.wallet-balance{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:56px;line-height:1;
  color:#ff8a70;letter-spacing:-1px;margin:6px 0 8px;
  text-shadow:0 0 28px rgba(224,32,32,.32)}

.wallet-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.wallet-pack{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:16px 12px;border-radius:3px;text-align:center;
  background:rgba(0,0,0,.34);border:1px solid rgba(226,232,240,.08);
  border-left:2px solid var(--fx-blood);
  transition:background .15s,transform .15s,border-color .15s}
.wallet-pack:hover{background:rgba(139,26,26,.2);transform:translateY(-2px)}
.wp-credits{font-family:'Oswald',sans-serif;font-weight:700;font-size:26px;color:#ff8a70}
.wp-name{font-family:'Rajdhani',sans-serif;font-size:13px;color:#8e96a1}
.wp-price{
  font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;color:#5d646d}
/* Two ways to pay per pack, added alongside PayPal — the card used to
   be one big clickable button (Stripe only); now it holds two small
   ones, same .btn-mini language used everywhere else in the wallet. */
.wp-pay-row{display:flex;gap:6px;margin-top:6px}
.wp-pay-row .btn-mini:disabled{opacity:.5;cursor:default}

.wallet-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(226,232,240,.05)}
.wallet-item:last-child{border-bottom:0}
.wi-id{flex:1 1 auto;min-width:0;line-height:1.35}
.wi-id b{
  display:block;font-family:'Oswald',sans-serif;font-weight:500;font-size:15px;color:#cbd2da}
.wi-id small{
  display:block;font-family:'Rajdhani',sans-serif;font-size:12px;color:#5d646d}
.wi-cost{
  flex:0 0 auto;font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;color:#ff8a70}
.wi-owned{
  flex:0 0 auto;font-family:'Share Tech Mono',monospace;font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;color:#4d545d}
.wallet-item .wi-buy{flex:0 0 auto;min-width:74px}

.wallet-row{
  display:flex;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px solid rgba(226,232,240,.05)}
.wallet-row:last-child{border-bottom:0}
.wallet-row-delta{
  flex:0 0 74px;text-align:right;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px}
.wallet-row-delta.up{color:#5fcf80}
.wallet-row-delta.down{color:#8e96a1}
.wallet-row-note{
  flex:1 1 auto;min-width:0;font-family:'Rajdhani',sans-serif;font-size:14px;color:#8e96a1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-row-when{
  flex:0 0 auto;font-family:'Share Tech Mono',monospace;font-size:10px;
  letter-spacing:1px;color:#3d434b}

@media(max-width:760px){
  .wallet-balance{font-size:44px}
  .wallet-item{flex-wrap:wrap}
  .wi-id{flex:1 1 100%}
}