/* Kafree black canvas. Shared by the site, administration and checkout. */
:root {
  --ink:#000000; --ink-2:#080808;
  --deck:#111111; --deck-2:#191919; --deck-3:#242424;
  --line:#343434; --line-2:#6C6C6C;
  --fg:#F5F5F5; --fg-2:#D2D2D2; --mute:#A6A6A6;
  --bg:var(--ink); --txt:var(--fg);
  --espresso:#181818; --cocoa:#414141; --mocha:#626262;
  --caramel:#E6A867; --latte:#E3CDB2; --cream:#F4EADC;
  color-scheme:dark;
  accent-color:var(--caramel);
}
html,body { background:var(--ink); color:var(--fg); }
body::before { background-image:none; }
::selection { background:#56402C; color:#FFFFFF; }
* { scrollbar-color:#707070 #080808; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:#080808; }
::-webkit-scrollbar-thumb { background:#707070; border:3px solid #080808; border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#929292; }
.nav,.topbar { background:rgba(0,0,0,.96); }
.aside,.a-side,.foot,.pay-header { background:var(--ink); }
.scrim,.modal-overlay { background:rgba(0,0,0,.82); }
.notice,.coffee-counter,.note { background:var(--deck); }
.coffee-counter { border-color:var(--line); }
.cta { background:var(--deck-2); color:var(--fg); border-color:var(--line); }
.cta h2,.cta p { color:var(--fg); }
.input,.textarea,.select,.dropdown-search,.select-trigger {
  background-color:var(--ink-2); border-color:var(--line-2); caret-color:var(--caramel);
}
input::placeholder,textarea::placeholder,.input::placeholder,.textarea::placeholder {
  color:var(--mute); opacity:1;
}
.input:focus,.textarea:focus,.select:focus { border-color:var(--caramel); box-shadow:none; }
:focus-visible { outline:2px solid var(--caramel); outline-offset:3px; }
.opt[aria-pressed="true"] { background:var(--deck-3); border-color:var(--caramel); }
.t tbody tr:hover td { background:var(--deck-2); }
.cafe-portrait,.auth-cafe-picture { background:var(--ink-2); }
.stage { background:var(--deck); }
.comic,.sticker { background:var(--deck-2); color:var(--fg); border:1px solid var(--line); }
.comic figcaption,.sticker .tag { color:var(--fg-2); }
.sticker .bubble { background:var(--deck-3); color:var(--fg); border-color:var(--line-2); }
.sticker .bubble::after { background:var(--deck-3); border-color:var(--line-2); }
#terminal-screen,.xterm,.xt-in { background:#080808; }
.terminal-modal .xterm-viewport { scrollbar-color:#707070 #080808; }
.terminal-modal .xterm-viewport::-webkit-scrollbar-track { background:#080808; }
.terminal-modal .xterm-viewport::-webkit-scrollbar-thumb { background:#707070; border-color:#080808; }
.terminal-modal .xterm-viewport::-webkit-scrollbar-thumb:hover { background:#929292; }
/* Checkout keeps high-contrast QR codes and all existing network/status colors. */
.kafree-checkout { background:var(--ink); --shadow-card:0 6px 20px rgba(0,0,0,.35); }
.kafree-checkout .select-trigger,.kafree-checkout .dropdown-search,
.kafree-checkout .address-box,.kafree-checkout .address-card { border-color:var(--line-2); }
.kafree-checkout .payment-network-warning { background:var(--deck-2); }
.kafree-checkout .payment-network-warning.erc20 { background:#251311; }
.kafree-checkout .qr-box { background:#FFFFFF; }
/* Keep the account and language controls available on small screens. */
@media (max-width:560px) {
  .nav .nav-in { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; height:auto; min-height:96px; padding-block:8px; align-items:center; }
  .nav .nav-in>.brand { grid-column:1; grid-row:1; min-width:0; }
  .nav .nav-r { display:contents; }
  .nav .nav-r>.menu-btn { grid-column:2; grid-row:1; justify-self:end; }
  .nav .nav-r>.bal-chip { grid-column:1; grid-row:2; justify-self:start; min-width:0; max-width:100%; }
  .nav .nav-r>.kafree-language { grid-column:2; grid-row:2; justify-self:end; margin:0; }
}

/* Mounted-volume form and explicit destructive option. */
.volume-field-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:9px;flex-wrap:wrap}
.volume-field-heading label{margin:0}
.volume-delete-option{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:16px;background:var(--deck);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.volume-delete-option input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:var(--caramel)}
.volume-delete-option span{min-width:0}.volume-delete-option b,.volume-delete-option small{display:block}
.volume-delete-option small{margin-top:7px;color:var(--mute);line-height:1.65;overflow-wrap:anywhere}
.volume-delete-option:has(input:focus-visible){outline:2px solid var(--caramel);outline-offset:3px}
.volume-row{align-items:flex-start;gap:16px}.volume-row .cell2{min-width:0;flex:1;overflow-wrap:anywhere}
.volume-row .ops{flex-shrink:0}.volume-row .err{white-space:normal;max-width:65ch}
@media(max-width:560px){.volume-row{flex-wrap:wrap}.volume-row .ops{width:100%;justify-content:flex-end}.volume-field-heading .btn{min-height:40px}}