/* Donut Cash admin — "Console". Same look as Tinbox Mail: a slim top bar, an
   icon rail, flat compact panels, mono for numbers. Loaded after style.css and
   only overrides it. Colours still come from --bg / --frost / --royal, so the
   holiday presets (holidays.css) and Halloween (halloween.css) keep working. */

:root:root {
  --r: 7px;
  --r-lg: 9px;
  --r-xl: 11px;
  --radius: 9px;
  --blur: none;
  --display: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --brand: var(--frost);
  --on-brand: #fff;
  --shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.8);
  --panel: color-mix(in srgb, var(--bg) 82%, #1b2233);
  --panel-2: color-mix(in srgb, var(--bg) 70%, #232c42);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --glass: var(--panel);
  --glass-2: var(--panel-2);
  --glass-3: color-mix(in srgb, var(--bg) 60%, #2c3650);
  --glass-strong: var(--panel);
  --edge: var(--line);
  --edge-2: var(--line-2);
  --top-h: 52px;
  --rail-w: 188px;
  --fx-accent: var(--frost);
  --fx-accent-2: var(--frost);
}

body { font-size: 13px; letter-spacing: 0; background: var(--bg); }
h1, h2, h3 { font-family: var(--font); letter-spacing: -0.01em; }
h1 { font-size: 20px; font-weight: 650; }
h2 { font-size: 14px !important; font-weight: 600; }
svg { stroke-linecap: round; stroke-linejoin: round; }

/* nothing glows, blurs, tilts or floats */
.backdrop,
.aur,
.grid-dots,
.island-glow,
.island-spin,
.acct-glow,
.spark { display: none !important; }
*,
*::before,
*::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
[data-tilt] { transform: none !important; }
.btn.primary::after { display: none; }
.content > * { animation: none; }
.content.is-leaving { transform: none; filter: none; }

/* ---------- top bar ---------- */
.cx-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--top-h);
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg) 90%, #10151f);
  border-bottom: 1px solid var(--line);
}
.cx-grow { flex: 1; }
.cx-menu { display: none; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--text-2); }
.cx-menu svg,
.cx-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.cx-logo { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none !important; }
.cx-logo img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.cx-logo span { font-weight: 700; font-size: 15px; }
.cx-logo b { margin-left: 6px; color: var(--text-3); font: 500 13px var(--mono); }
.cx-me { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); }
.cx-me .avatar { width: 24px; height: 24px; border-radius: 6px; font-size: 10px; }
.cx-me .avatar img { border-radius: 6px; }
.cx-me span { display: flex; flex-direction: column; line-height: 1.1; }
.cx-me strong { font-size: 12.5px; }
.cx-me small { color: var(--text-3); font-size: 10.5px; text-transform: capitalize; }
.cx-signout { min-height: 32px !important; height: 32px; padding: 0 12px !important; }
.island-live { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--text); font: 600 12px var(--mono); cursor: pointer; }
.island-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: none; }
.island-live.warn .dot,
.island-live .dot.off { background: var(--amber); }
.island-live.off .dot { background: var(--red); }

/* ---------- icon rail ---------- */
.cx-rail {
  position: fixed;
  top: var(--top-h);
  bottom: 0;
  left: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: var(--rail-w);
  padding: 10px 10px 12px;
  background: color-mix(in srgb, var(--bg) 94%, #10151f);
  border-right: 1px solid var(--line);
}
.cx-rail-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.cx-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  text-align: left;
  background: none;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.cx-nav:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.cx-nav.active { background: color-mix(in srgb, var(--frost) 16%, transparent); color: var(--frost); }
.cx-nav.active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--frost); }
.cx-nav .nav-icon { display: grid; place-items: center; }
.cx-nav .nav-text { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-nav .nav-badge { position: static; margin-left: auto; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 5px; background: var(--red); color: #fff; font: 700 9px/15px var(--mono); text-align: center; }
.side-state { display: flex; align-items: center; gap: 9px; height: 26px; margin: 4px 0 0 6px; color: var(--text-2); font-size: 12px; }
.side-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: none; }
.side-state.off .dot { background: var(--red); }
.control-scrim { display: none; }

/* ---------- page area ---------- */
.main { margin-left: var(--rail-w); padding-top: var(--top-h); }
.content { width: min(100%, 1320px); padding: 22px 26px 60px; }
.page-heading { align-items: center; margin-bottom: 18px; gap: 14px; }
.page-heading h1 { margin: 0 0 2px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); font-size: 19px; }
.page-heading p { font-size: 12.5px; }
.hero-num,
.metric-num { font-family: var(--mono) !important; font-weight: 650; letter-spacing: -0.02em; }

/* panels */
.card,
.tile,
.table-wrap,
.wallet-card,
.acct-card,
.afk-card,
.metric,
.st-card,
.dc-card,
.fund-split,
.alert-bar,
.callout,
.set-group {
  border-radius: var(--r-lg) !important;
  background: var(--panel) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
.wallet-card { background: var(--panel-2) !important; }
.card,
.tile { padding: 16px; }
.bento,
.grid { gap: 12px; }
.tile-head { font-size: 12px; color: var(--text-2); }
.alert-bar { border: 0; color: var(--text); }
.callout.warn,
.alert-bar { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent), inset 3px 0 0 var(--amber) !important; }
.callout.bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 45%, transparent), inset 3px 0 0 var(--red) !important; }

/* buttons and inputs: flat, square-ish */
.btn { min-height: 32px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); transition: background 0.15s, filter 0.15s; }
.btn:hover:not(:disabled) { transform: none; translate: none; }
.btn.primary { background: var(--frost) !important; color: var(--on-brand); box-shadow: none !important; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.danger { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 50%, transparent); color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.btn.small { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn svg { width: 15px; height: 15px; }
.chip,
.pill,
.run-chip,
.wc-chip,
.set-chip { border-radius: 5px !important; }
.pill { padding: 2px 7px; font-size: 11px; }
input,
select,
textarea { min-height: 34px; padding: 7px 11px; border-radius: 7px; font-size: 13px; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important; -webkit-text-fill-color: var(--text) !important; }
.custom-select-button { border-radius: 7px !important; min-height: 34px; }
.custom-select-menu { border-radius: 8px !important; }
.custom-select-option { border-radius: 5px !important; }
.field label { font-size: 12px; }
.amount-input { border-radius: 7px !important; }

/* tables */
table { font-size: 12.5px; }
th { font-size: 10.5px; letter-spacing: 0.08em; }
td,
th { padding: 9px 12px; }
td.num,
.table-secondary,
.mono,
code { font-family: var(--mono); }

/* minecraft heads and avatars: squarer */
.mc-head,
.avatar,
.acct-skin,
.story-ring { border-radius: 6px !important; }

/* popups */
.modal-backdrop { background: rgba(2, 4, 10, 0.7); }
.modal { border-radius: 10px !important; background: var(--panel) !important; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px -30px #000 !important; padding: 18px; }
.modal-head h2 { font-size: 15px !important; }
.palette-box { border-radius: 10px !important; background: var(--panel) !important; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px -30px #000 !important; }
.palette-input kbd { display: none; }
.pal-item { border-radius: 6px !important; }
.toast { border-radius: 7px !important; background: var(--panel) !important; box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -14px #000 !important; font-size: 12.5px; }
.preview-card { border-radius: 9px !important; background: var(--panel) !important; }
.tip { border-radius: 5px !important; font-size: 11.5px; }
.hol { border-radius: 9px !important; }
.hol-art,
.hol-art img { border-radius: 7px !important; }

/* ---------- sign in ---------- */
.cx-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.cx-auth-wrap { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cx-auth .auth-box { width: 100%; padding: 24px 24px 20px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px -30px #000; text-align: left; }
.cx-auth-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cx-eyebrow { color: var(--text-3); font: 600 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.cx-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 12px; font-weight: 600; }
.cx-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.cx-auth h2 { margin: 0; font-size: 21px !important; font-weight: 700; }
.cx-auth p { margin: 6px 0 18px; color: var(--text-2); font-size: 13px; }
.cx-auth .field { margin-bottom: 12px; }
.cx-auth .btn.full { width: 100%; min-height: 40px; margin-top: 4px; }

/* ---------- phones: rail becomes a drawer ---------- */
@media (max-width: 860px) {
  .cx-menu { display: grid; }
  .cx-me span,
  .cx-signout { display: none; }
  .cx-me { padding: 0 4px; }
  .main { margin-left: 0; }
  .content { padding: 16px 12px 90px; }
  .cx-rail { width: 240px; align-items: stretch; padding: 10px; transform: translateX(-100%); transition: transform 0.22s var(--ease); box-shadow: var(--shadow); }
  .cx-rail.open { transform: none; }
  .cx-rail.open ~ .control-scrim { display: block; position: fixed; inset: 0; z-index: 30; border: 0; background: rgba(0, 0, 0, 0.5); }
  .cx-rail-nav { align-items: stretch; }
  .cx-nav { display: flex; justify-content: flex-start; gap: 12px; width: 100%; padding: 0 10px; }
  .cx-nav .nav-text { display: block; font-size: 13.5px; font-weight: 500; }
  .cx-nav .nav-badge { position: static; margin-left: auto; }
  .cx-nav.active::before { display: none; }
  .side-state { width: auto; justify-content: start; padding-left: 12px; }
}
.side-state { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0; }
.cx-auth h2, .cx-auth p { text-align: left; } .cx-auth .login-error:empty { display: none; }

/* ---------- one corner scale everywhere (owner: "edges are wonky") ----------
   Outer panels 9px, things inside them 7px, small controls 6px, so an inner
   box never has rounder corners than the card it sits in. Toggle switches and
   status dots stay fully round on purpose. */
.alert-bar, .preview-card, .callout, .review-strip, .wallet-card, .dc, .brand-ctl, .hol,
.afk-card, .afk-chat, .st-card, .st-thumb, .stage-screen, .stage-chat, .set-group, .acct-live,
.acct-stats, .afk-signin, .feed-row, .cc-tile, .side-review, .drop-pt, .st-pop, .control,
.stage-dock, .custom-select-menu, .auth-box, .palette-box { border-radius: 9px !important; }
.acct-skin, .pv-skin, .afk-bar, .afk-toggle, .afk-ph, .mc-row, .proxy-icon, .proxy-icon.big,
.head, .amount-input, .deposit-strip code, .address code, .pal-item, .cc-link, .dc-mark,
.afk-head .mc-head, .set-hero .mc-head, .set-num, .set-xyz input, .set-row .set-text,
input, select, textarea, .custom-select-button, .chat-send input, .tabs, .btn { border-radius: 7px !important; }
.stage-say button, .st-pop button, .custom-select-option, .tab, .chip, .pill, .toast, .user-chip,
.bal-delta, .st-chip, .set-chip, .afkv-hint, .tile-head .run-chip, .pal-ic, .activity-icon,
.brand-thumb.wide, .tip, .btn.small, .nav-badge { border-radius: 6px !important; }
.saved-addr .chip { border-radius: 6px 0 0 6px !important; }
.saved-x { border-radius: 0 6px 6px 0 !important; }
.modal { border-radius: 10px !important; }
.table-card .table-wrap { border-radius: 0 0 9px 9px !important; }
.acct-bar, .afk-bar i, .acct-bar i { border-radius: 3px !important; }
/* a card's first full-bleed child follows the card's own corners */
.st-card > :first-child, .afk-card > :first-child { border-top-left-radius: 9px; border-top-right-radius: 9px; }

/* ---------- motion: short, smooth, no bounce ---------- */
:root:root { --spring: cubic-bezier(.2, .8, .2, 1); --ease: cubic-bezier(.2, .8, .2, 1); }
@keyframes cxIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cxBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cxDrop { 0% { transform: translateY(0); } 40% { transform: translateY(2px); } 100% { transform: translateY(0); } }
.content { transition: opacity .16s ease; }
.content.is-leaving { opacity: 0; }
.content > * { animation: cxIn .26s var(--ease) both; }
.content > :nth-child(2) { animation-delay: .03s; }
.content > :nth-child(3) { animation-delay: .06s; }
.content > :nth-child(n+4) { animation-delay: .08s; }
.nav:active,
.btn:active:not(:disabled),
.chip:active,
.tab:active { transform: none; scale: 1; }
.nav.active .nav-icon,
.nav-badge { animation: none !important; }
/* rail: the accent bar slides in beside the page you pick, the icon drops in like a coin */
.cx-nav.active::before { transform-origin: center; animation: cxBar .22s var(--ease) both; }
.cx-nav.active .nav-icon { animation: cxDrop .3s var(--ease) both !important; }
.cx-nav { transition: background .18s ease, color .18s ease; }
.modal-backdrop:not(.hidden) { animation: cxFade .16s ease both; }
.modal { animation: cxIn .2s var(--ease) both !important; }
.palette:not(.hidden) .palette-box { animation: cxIn .18s var(--ease) both !important; }
.toast { animation: cxIn .22s var(--ease) both !important; }
.toast.leaving { opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; animation: none !important; }
.preview-card.in { animation: cxFade .14s ease both !important; }
.metric-num,
.hero-num { transition: none; }
.day-chart .bar { animation-duration: .5s !important; animation-timing-function: var(--ease) !important; }
.card,
.tile,
.acct-card,
.afk-card,
.feed-row,
.mc-row,
.click-row { transition: background .15s ease, box-shadow .15s ease !important; }
.card:hover,
.tile:hover,
.acct-card:hover,
.afk-card:hover { transform: none !important; }

/* ---------- no decorative motion loops (owner: "wtf is this animation") ---------- */
.button-ripple { display: none !important; }
.wallet-card::before { animation: none !important; opacity: 0 !important; }
.dot,
.run-chip i,
.mc-row.on .mc-state i,
.afk-card.online .afk-dot { animation: none !important; box-shadow: none !important; }
/* live-chat account picker: a plain square head with a status outline */
.chat-acct.story:hover { transform: none; }
.story-ring { width: 62px; height: 62px; padding: 3px; border-radius: 9px !important; background: var(--panel-2) !important; box-shadow: inset 0 0 0 1px var(--line-2); animation: none !important; transition: box-shadow .18s ease; }
.story-ring img { padding: 0; border-radius: 6px !important; background: none; animation: none !important; }
.chat-acct.on .story-ring { box-shadow: inset 0 0 0 2px var(--green); }
.chat-acct.active .story-ring { box-shadow: inset 0 0 0 2px var(--frost); }
.chat-acct.active { color: var(--text); }
/* buttons: quiet press feedback instead of a ripple */
.btn:active:not(:disabled) { filter: brightness(.92); }
.cx-nav:active .nav-icon { transform: translateY(1px); }
.cx-auth .ts-wrap { min-height: 65px; margin: 4px 0 12px; }
.cx-auth .ts-wrap:empty { display: none; }
.cx-auth .ts-wrap > div { width: 100%; }

/* ---------- inputs: a real border (autofill can't paint over it), clearly visible ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,
textarea,
.custom-select-button,
.amount-input {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
  background-color: color-mix(in srgb, var(--bg) 70%, #161c2a) !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,
select:hover,
textarea:hover,
.custom-select-button:hover { border-color: rgba(255, 255, 255, 0.26) !important; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
select:focus,
textarea:focus,
.custom-select-button:focus-visible {
  border-color: var(--frost) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--frost) 20%, transparent) !important;
}
.amount-input input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.amount-input:focus-within { border-color: var(--frost) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--frost) 20%, transparent) !important; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--bg) 70%, #161c2a) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 99999s ease-out 0s;
}
input::placeholder,
textarea::placeholder { color: var(--text-3); }

/* sign-in form: even spacing */
.cx-auth form { display: flex; flex-direction: column; gap: 12px; }
.cx-auth .field { margin: 0; gap: 6px; }
.cx-auth .field label { color: var(--text-2); font-size: 12px; font-weight: 500; }
.cx-auth .field label .muted { color: var(--text-3); }
.cx-auth input { height: 38px; min-height: 38px; }
.cx-auth .ts-wrap { margin: 2px 0 0; }
.cx-auth .btn.full { margin-top: 2px; }
.cx-auth .auth-box { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 50px -30px #000; }
.amount-input input:not([type=checkbox]):not([type=radio]):not([type=range]),
.amount-input input:not([type=checkbox]):not([type=radio]):not([type=range]):focus { border: 0 !important; background: transparent !important; box-shadow: none !important; }