/* ═══════════════════════════════════════════════════════════════════
   BILLIE / FINANCIAL ORACLE — JEMKE 2030
   Visual-only layer: celestial finance, precision ledger, AI intelligence.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --void: #07080c;
  --ink: #0a0b10;
  --ink1: #0e1017;
  --ink2: #13151d;
  --rim: rgba(247, 208, 130, .11);
  --rim2: rgba(247, 208, 130, .28);
  --fg: #f4f0e8;
  --fg2: rgba(235, 230, 220, .61);
  --fg3: rgba(235, 230, 220, .34);
  --bg: #07080c;
  --bg1: #0a0b10;
  --bg2: #0e1017;
  --surface: rgba(255, 248, 232, .025);
  --surface2: rgba(255, 248, 232, .05);
  --border: rgba(247, 208, 130, .11);
  --border2: rgba(247, 208, 130, .27);
  --accent: #f1c979;
  --accent2: #bc7b34;
  --indigo: #f1c979;
  --amber: #f3bd61;
  --red: #ff7593;
  --blue: #61d8dc;
  --green: #65d9ae;
  --r: 4px;
  --r-sm: 3px;
  --sidebar: 232px;
  --topbar: 58px;
}

body {
  background:
    radial-gradient(ellipse 65% 42% at 12% -10%, rgba(217, 155, 69, .14), transparent 58%),
    radial-gradient(ellipse 50% 40% at 96% 104%, rgba(208, 91, 115, .09), transparent 55%),
    radial-gradient(ellipse 38% 48% at 55% 38%, rgba(46, 142, 145, .04), transparent 66%),
    linear-gradient(145deg, #07080c 0%, #0b0c12 46%, #07080b 100%);
}
body::before {
  background:
    radial-gradient(circle at 83% 12%, rgba(241,201,121,.12), transparent 22%),
    radial-gradient(circle at 15% 88%, rgba(97,216,220,.055), transparent 25%),
    linear-gradient(rgba(247,208,130,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,208,130,.018) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}
body::after {
  opacity: .48;
  background-image:
    radial-gradient(circle, rgba(255,224,161,.25) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(97,216,220,.13) 0 1px, transparent 1.3px);
  background-size: 113px 113px, 173px 173px;
  background-position: 0 0, 43px 61px;
  -webkit-mask-image: radial-gradient(ellipse 82% 76% at 52% 38%, #000 16%, transparent 84%);
  mask-image: radial-gradient(ellipse 82% 76% at 52% 38%, #000 16%, transparent 84%);
}

/* Authentication portal */
#billieGate {
  background:
    radial-gradient(circle at 50% 42%, rgba(189,122,52,.12), transparent 28%),
    radial-gradient(circle at 78% 15%, rgba(208,91,115,.07), transparent 22%),
    #07080c !important;
  font-family: var(--font-b) !important;
}
#billieGate::before,
#billieGate::after {
  content: ''; position: absolute; width: min(72vw,760px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(241,201,121,.08);
  box-shadow: 0 0 0 62px rgba(241,201,121,.012), 0 0 0 124px rgba(97,216,220,.008);
  animation: billie-orbit 80s linear infinite; pointer-events: none;
}
#billieGate::after {
  width: min(42vw,480px); border-color: rgba(208,91,115,.075);
  animation-direction: reverse; animation-duration: 58s;
}
#billieGate > div {
  position: relative; width: min(390px,calc(100vw - 32px)) !important;
  padding: 47px 39px 36px !important; overflow: hidden;
  background: linear-gradient(145deg,rgba(22,21,24,.97),rgba(10,10,14,.96)) !important;
  border: 1px solid rgba(241,201,121,.23) !important; border-radius: 5px !important;
  box-shadow: 0 38px 100px rgba(0,0,0,.72), inset 0 1px rgba(255,244,218,.035) !important;
}
#billieGate > div::before {
  content: ''; position: absolute; left: -1px; top: 26px; width: 1px; height: 86px;
  background: linear-gradient(var(--accent),#d45d76,var(--blue)); box-shadow: 0 0 17px rgba(241,201,121,.5);
}
#billieGate > div::after {
  content: 'JEMKE / FINANCIAL ORACLE / AUTH 01'; position: absolute; right: 17px; top: 15px;
  color: rgba(235,230,220,.32); font: 600 7px/1 var(--font-h); letter-spacing: .16em;
}
#billieGate img {
  width: 76px !important; height: 76px !important; padding: 3px; margin-bottom: 17px !important;
  border: 1px solid rgba(241,201,121,.35); border-radius: 50% !important;
  box-shadow: 0 0 0 8px rgba(241,201,121,.025), 0 0 34px -10px rgba(241,201,121,.65);
}
#billieGate > div > div:nth-of-type(1) {
  color: #fff8ea !important; font-family: var(--font-h); font-size: 29px !important;
  letter-spacing: .12em !important;
}
#billieGate > div > div:nth-of-type(2) {
  color: rgba(235,230,220,.52) !important; font-size: 10px !important;
  letter-spacing: .11em; text-transform: uppercase;
}
#billieGate input {
  min-height: 46px; padding: 12px 13px !important; text-align: left;
  color: var(--fg) !important; background: rgba(4,5,7,.7) !important;
  border: 1px solid rgba(247,208,130,.13) !important; border-radius: 3px !important;
  font-family: var(--font-b); font-size: 12px !important;
}
#billieGate input:focus {
  border-color: rgba(241,201,121,.62) !important;
  box-shadow: inset 3px 0 var(--accent), 0 0 0 3px rgba(241,201,121,.06);
}
#billieGate #bgBtn {
  min-height: 47px; border-radius: 3px !important;
  color: #171006 !important; background: linear-gradient(105deg,#f4d38b,#d99a4a 62%,#ec8a98) !important;
  font-family: var(--font-h); font-size: 11px !important; letter-spacing: .08em;
  box-shadow: 0 14px 32px -15px rgba(241,201,121,.65);
}
#billieLogout {
  color: var(--fg2) !important; background: rgba(14,15,20,.94) !important;
  border-color: var(--border2) !important; border-radius: 3px !important;
  font-family: var(--font-b) !important;
}

/* Top command bar */
.topbar {
  min-height: var(--topbar); height: var(--topbar); padding: 0 1.25rem;
  background: rgba(8,9,13,.9); border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 46px rgba(0,0,0,.44); backdrop-filter: blur(34px) saturate(140%);
}
.topbar::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 84px; height: 1px;
  background: linear-gradient(90deg,var(--accent),#dd7387); box-shadow: 0 0 12px rgba(241,201,121,.45);
}
.tb-logo { gap: .65rem; }
.tb-mark {
  width: 38px; height: 38px; padding: 2px; overflow: visible; border-radius: 50%;
  background: rgba(16,15,18,.95); border: 1px solid rgba(241,201,121,.34);
  animation: none; box-shadow: 0 0 0 5px rgba(241,201,121,.02), 0 0 24px -7px rgba(241,201,121,.55);
}
.tb-mark img { border-radius: 50%; }
.tb-mark::before,
.tb-mark::after {
  content: ''; position: absolute; inset: -5px; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(241,201,121,.1); border-left-color: transparent; border-bottom-color: transparent;
  background: none; filter: none; opacity: 1; animation: billie-orbit 15s linear infinite;
}
.tb-mark::after { inset: -9px; border-color: rgba(97,216,220,.065); border-right-color: transparent; animation-direction: reverse; animation-duration: 23s; }
.tb-name {
  color: #fff8eb; background: none; -webkit-text-fill-color: currentColor;
  font-size: 16px; font-weight: 700; letter-spacing: .1em;
}
.tb-badge {
  color: var(--accent); background: transparent; border: 0; border-left: 1px solid rgba(241,201,121,.25);
  padding: 3px 0 3px 11px; border-radius: 0; font-size: 7.5px; letter-spacing: .16em;
}
.tb-pills { gap: .35rem; margin-left: .7rem; }
.tb-pill {
  min-height: 28px; padding: 4px 10px; border-radius: 3px;
  color: var(--fg2); background: rgba(255,248,232,.018); border-color: rgba(247,208,130,.075);
  font-size: .64rem;
}
.tb-pill .dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.tb-account,
.tb-hamburger {
  min-height: 37px; padding: 6px 12px; border-radius: 3px;
  color: var(--fg2); background: rgba(255,248,232,.02); border: 1px solid var(--border);
  font-family: var(--font-h); font-size: 10px; letter-spacing: .04em;
}
.tb-account:hover,
.tb-hamburger:hover {
  color: #fff; background: rgba(241,201,121,.07); border-color: rgba(241,201,121,.38);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}

/* Ledger navigation */
.sidebar {
  width: var(--sidebar); padding: .8rem .6rem;
  background: linear-gradient(180deg,rgba(10,11,15,.9),rgba(7,8,11,.82));
  border-right: 1px solid var(--border); backdrop-filter: blur(30px);
}
.sidebar::before {
  content: 'BILLIE / LEDGER NODE 01'; padding: .55rem .9rem .9rem;
  color: rgba(241,201,121,.3); font: 600 7.5px/1 var(--font-h); letter-spacing: .15em;
}
.nav-section {
  color: rgba(241,201,121,.35); padding: .82rem .85rem .3rem;
  font-size: 8px; letter-spacing: .18em;
}
.nav-item {
  min-height: 40px; gap: .68rem; margin: 1px 4px; padding: 9px 11px;
  color: var(--fg2); border-radius: 3px; font-size: .76rem;
}
.nav-item:hover {
  color: var(--fg); background: rgba(241,201,121,.045); border-color: rgba(241,201,121,.11);
}
.nav-item.active {
  color: #fff7e7; background: linear-gradient(105deg,rgba(241,201,121,.13),rgba(208,91,115,.035));
  border-color: rgba(241,201,121,.28); box-shadow: inset 2px 0 var(--accent), 0 10px 28px rgba(0,0,0,.16);
}
.nav-item.active::after {
  content: ''; position: absolute; right: 10px; width: 4px; height: 4px;
  transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 7px var(--accent);
}
.nav-icon {
  color: #dfbd79; font-family: var(--font-h); font-size: 16px; text-shadow: 0 0 12px rgba(241,201,121,.22);
}
.nav-sep { background: rgba(247,208,130,.055); }
.nav-badge { border-radius: 2px; }

/* Work surface */
.view { padding: 1.7rem 2rem; gap: 1.05rem; }
.view::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb { background: rgba(241,201,121,.18); border-radius: 0; }
.view::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover { background: rgba(241,201,121,.34); }
.page-hd { position: relative; padding-bottom: .25rem; }
.page-hd::before {
  content: 'FINANCIAL INTELLIGENCE / LIVE'; position: absolute; right: 0; top: -2px;
  color: rgba(241,201,121,.22); font: 600 7px/1 var(--font-h); letter-spacing: .17em;
}
.page-hd h1 {
  color: #fff9ed; background: none; -webkit-text-fill-color: currentColor;
  font-size: 1.72rem; font-weight: 650; letter-spacing: -.035em;
}
.page-hd h1::before { content: '◇'; color: var(--accent); margin-right: .55rem; font-size: .75em; }
.page-hd p { color: var(--fg3); font-size: .72rem; }

.card,
.stat,
.doc-row,
.bank-card,
.tx-row,
.match-card,
.art-card {
  background: linear-gradient(145deg,rgba(19,20,26,.86),rgba(10,11,15,.78));
  border-color: var(--border); border-radius: var(--r); backdrop-filter: blur(16px);
}
.card {
  position: relative; overflow: hidden; padding: 1.15rem 1.3rem;
  box-shadow: 0 15px 42px rgba(0,0,0,.22), inset 0 1px rgba(255,246,224,.025);
}
.card::before {
  content: ''; position: absolute; left: -1px; top: 18px; width: 1px; height: 46px;
  background: linear-gradient(var(--accent),#d55d77); box-shadow: 0 0 12px rgba(241,201,121,.35);
}
.card:hover,
.stat:hover,
.doc-row:hover,
.bank-card:hover,
.tx-row:hover,
.match-card:hover,
.art-card:hover {
  border-color: rgba(241,201,121,.28);
  box-shadow: 0 14px 34px rgba(0,0,0,.3), inset 0 0 42px rgba(241,201,121,.018);
}
.card-title {
  color: rgba(241,201,121,.58); font-size: .59rem; letter-spacing: .17em;
}
.card-title::before { content: '//'; margin-right: .5rem; color: rgba(97,216,220,.65); }

.stats { gap: .65rem; }
.stat {
  min-height: 108px; padding: 1rem 1.05rem;
  box-shadow: inset 0 1px rgba(255,246,224,.025);
}
.stat::before {
  left: 0; top: auto; right: auto; bottom: 0; width: 38px; height: 1px;
  background: var(--stat-color,var(--accent)); box-shadow: 0 0 10px var(--stat-color,var(--accent));
}
.stat::after {
  content: ''; position: absolute; width: 105px; height: 105px; right: -58px; top: -62px;
  border: 1px solid rgba(241,201,121,.06); border-radius: 50%; box-shadow: 0 0 0 15px rgba(241,201,121,.009);
}
.stat:hover { transform: translateY(-2px); }
.stat-num { font-size: 2.08rem; font-weight: 650; color: var(--stat-color,var(--fg)); }
.stat-label { color: var(--fg3); font-size: .61rem; letter-spacing: .11em; }
.stat-sub { color: var(--fg3); }

/* Lists and documents */
.doc-list { gap: .34rem; }
.doc-row { position: relative; padding: .72rem .9rem; }
.doc-row::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: linear-gradient(90deg,var(--accent),transparent); transition: width .25s;
}
.doc-row:hover { background: rgba(241,201,121,.025); }
.doc-row:hover::after { width: 100%; }
.doc-icon {
  width: 37px; height: 37px; border-radius: 50%; color: var(--accent);
  background: rgba(241,201,121,.055) !important; border: 1px solid rgba(241,201,121,.12);
}
.doc-name { color: #f4f0e8; font-weight: 650; }
.doc-meta { color: var(--fg2); }
.doc-amt { color: #f5d495; font-weight: 650; }
.badge { border-radius: 2px; letter-spacing: .045em; }
.badge-paid,
.badge-accepted { color: var(--green); background: rgba(101,217,174,.07); border-color: rgba(101,217,174,.22); }
.badge-sent { color: var(--blue); background: rgba(97,216,220,.07); border-color: rgba(97,216,220,.2); }

/* Precision controls */
.btn {
  position: relative; min-height: 36px; overflow: hidden; padding: .4rem .85rem;
  border-radius: 3px; font-size: .68rem; letter-spacing: .035em;
}
.btn::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--accent); transition: width .22s;
}
.btn:hover::after { width: 100%; }
.btn-primary {
  color: #1a1106; background: linear-gradient(105deg,#f4d48e,#d89847 62%,#e57c90);
  box-shadow: 0 10px 28px -13px rgba(241,201,121,.66);
}
.btn-primary:hover { box-shadow: 0 13px 32px -10px rgba(241,201,121,.72); }
.btn-success {
  color: #071711; background: linear-gradient(105deg,#73e1b8,#5acbd3);
  box-shadow: 0 10px 28px -13px rgba(101,217,174,.6);
}
.btn-ghost {
  color: var(--fg2); background: rgba(255,248,232,.018); border-color: var(--border);
}
.btn-ghost:hover {
  color: #fff; background: rgba(241,201,121,.055); border-color: rgba(241,201,121,.3);
}
.btn-danger { color: #ff9bb1; background: rgba(255,117,147,.06); border-color: rgba(255,117,147,.22); }
.btn-sm { min-height: 31px; padding: .27rem .63rem; font-size: .64rem; }

input:not([type="file"]),
select,
textarea {
  color: var(--fg) !important; background: rgba(7,8,11,.66) !important;
  border-color: rgba(247,208,130,.15) !important; border-radius: 3px !important;
}
input:not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: rgba(241,201,121,.55) !important;
  box-shadow: inset 2px 0 var(--accent), 0 0 0 3px rgba(241,201,121,.055);
}

/* Billie core / AI chat */
.chat-shell { position: relative; }
.chat-shell::before,
.chat-shell::after {
  content: ''; position: absolute; width: min(48vw,620px); aspect-ratio: 1; border-radius: 50%;
  left: 50%; top: 43%; transform: translate(-50%,-50%); pointer-events: none; z-index: -1;
  border: 1px solid rgba(241,201,121,.045);
  box-shadow: 0 0 0 48px rgba(241,201,121,.006), 0 0 0 96px rgba(97,216,220,.004);
}
.chat-shell::after {
  width: min(26vw,330px); border-color: rgba(208,91,115,.045); box-shadow: none;
  animation: billie-orbit-centered 55s linear infinite;
}
.chat-messages { padding: 1.8rem 1.5rem; }
.chat-welcome { max-width: 650px; margin-top: 6%; gap: .8rem; }
.chat-welcome::before {
  content: 'BILLIE / ORACLE CORE 01'; color: rgba(241,201,121,.3);
  font: 600 7px/1 var(--font-h); letter-spacing: .18em; order: -2;
}
.chat-welcome-mark {
  width: 94px; height: 94px; margin: 1rem 0 .9rem; border-radius: 50%;
  color: #1a1107; background: radial-gradient(circle at 38% 32%,#fff0bd,#e8ad55 52%,#bd6f37 100%);
  font-size: 36px; font-weight: 700; animation: billie-core 5s ease-in-out infinite;
  box-shadow: 0 0 0 9px rgba(241,201,121,.025), 0 0 46px -12px rgba(241,201,121,.7);
}
.chat-welcome-mark::before,
.chat-welcome-mark::after {
  content: ''; position: absolute; inset: -15px; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(241,201,121,.17); background: none; filter: none;
  animation: billie-orbit 18s linear infinite;
}
.chat-welcome-mark::after {
  inset: -27px; border-color: rgba(97,216,220,.08); border-left-color: transparent;
  animation-direction: reverse; animation-duration: 29s;
}
.chat-welcome h2 {
  color: #fff8ea; background: none; -webkit-text-fill-color: currentColor;
  font-size: 2.15rem; font-weight: 650;
}
.chat-welcome p { color: var(--fg2); }
.chat-chips { gap: .42rem; }
.chat-chip {
  padding: 7px 14px; color: var(--fg2); background: rgba(241,201,121,.035);
  border-color: rgba(241,201,121,.13); border-radius: 3px; font-size: .7rem;
}
.chat-chip:hover {
  color: #fff; background: rgba(241,201,121,.09); border-color: rgba(241,201,121,.38);
  box-shadow: 0 12px 28px rgba(0,0,0,.22); transform: translateY(-1px);
}
.msg-avatar { border-radius: 50%; }
.msg.user .msg-avatar {
  color: var(--blue); background: rgba(97,216,220,.08); border-color: rgba(97,216,220,.2);
}
.msg.assistant .msg-avatar {
  color: #211506; background: var(--accent); box-shadow: 0 0 18px rgba(241,201,121,.28);
}
.msg-bubble { border-radius: 4px; }
.msg.user .msg-bubble {
  background: rgba(97,216,220,.055); border-color: rgba(97,216,220,.16); border-radius: 4px 0 4px 4px;
}
.msg.assistant .msg-bubble {
  background: rgba(17,18,23,.92); border-color: var(--border); border-radius: 0 4px 4px 4px;
  box-shadow: inset 2px 0 rgba(241,201,121,.45), 0 10px 25px rgba(0,0,0,.2);
}
.tool-chip {
  color: var(--accent); background: rgba(241,201,121,.045); border-color: rgba(241,201,121,.18);
  border-radius: 3px;
}
.tool-chip .spinner { border-color: rgba(241,201,121,.2); border-top-color: var(--accent); }
.tool-chip .done-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.action-card { border-radius: 3px; }
.action-card.invoice { background: rgba(241,201,121,.045); border-color: rgba(241,201,121,.16); }
.action-card.offer { background: rgba(101,217,174,.04); border-color: rgba(101,217,174,.15); }
.action-card.invoice .action-card-hd { color: var(--accent); }
.action-card.offer .action-card-hd { color: var(--green); }

.chat-input-wrap {
  background: linear-gradient(transparent,rgba(7,8,12,.94) 25%); border-top-color: transparent;
}
.chat-input-row {
  max-width: 900px; margin: 0 auto; padding: .62rem .62rem .62rem 1rem;
  background: rgba(13,14,19,.95); border-color: rgba(241,201,121,.2); border-radius: 4px;
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}
.chat-input-row:focus-within {
  border-color: rgba(241,201,121,.55);
  box-shadow: inset 2px 0 var(--accent), 0 0 0 4px rgba(241,201,121,.055), 0 20px 46px rgba(0,0,0,.33);
}
.chat-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg,#f2d187,#d99446,#df7087); animation: none;
  box-shadow: 0 8px 22px -8px rgba(241,201,121,.72);
}
.chat-send:hover { box-shadow: 0 10px 28px -6px rgba(241,201,121,.78); }
.chat-send svg { stroke: #1a1107; }
.chat-hint { color: rgba(235,230,220,.26); }

/* Finance surfaces */
.bank-accounts { gap: .65rem; }
.bank-card { position: relative; overflow: hidden; }
.bank-card::after {
  content: ''; position: absolute; width: 120px; height: 120px; right: -65px; bottom: -72px;
  border: 1px solid rgba(241,201,121,.055); border-radius: 50%;
}
.bank-card.selected {
  border-color: rgba(101,217,174,.38); background: linear-gradient(145deg,rgba(18,27,25,.82),rgba(10,12,14,.78));
  box-shadow: inset 2px 0 var(--green), 0 14px 34px rgba(0,0,0,.25);
}
.bank-card-name { color: var(--fg); font-weight: 650; }
.bank-card-iban { color: var(--fg3); }
.bank-card-balance { color: #f5d491; font-weight: 650; }
.bank-card-balance.pos,
.tx-amt.pos,
.match-tx-amt.pos { color: var(--green); }
.tx-row { border-radius: 3px; }
.tx-date { color: var(--fg3); }
.tx-payee { color: var(--fg2); }
.match-card { position: relative; }
.match-card.auto {
  border-color: rgba(101,217,174,.3); box-shadow: inset 2px 0 var(--green);
}
.match-cand {
  background: rgba(241,201,121,.035); border-color: rgba(241,201,121,.12); border-radius: 3px;
}
.match-cand:hover { background: rgba(241,201,121,.07); border-color: rgba(241,201,121,.28); }
.match-cand.selected {
  background: rgba(101,217,174,.055); border-color: rgba(101,217,174,.35); box-shadow: inset 2px 0 var(--green);
}
.match-cand-score.high { background: var(--green); }
.match-badge { border-radius: 2px; }
.match-badge.auto { color: var(--green); background: rgba(101,217,174,.07); border-color: rgba(101,217,174,.22); }
.match-summary {
  background: rgba(101,217,174,.045); border-color: rgba(101,217,174,.16); border-radius: 3px;
}
.match-summary-num { color: var(--green); }

.art-card { position: relative; overflow: hidden; }
.art-card::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: linear-gradient(90deg,var(--accent),#d45f7b); transition: width .25s;
}
.art-card:hover::after { width: 100%; }
.art-price { color: #f2cc82; }

.loading-spin {
  border-width: 1px; border-color: rgba(241,201,121,.17); border-top-color: var(--accent);
  box-shadow: 0 0 12px rgba(241,201,121,.16);
}
.empty-icon { filter: grayscale(.25) sepia(.25); }

/* Inline-heavy operational panels */
#erUploadZone {
  position: relative; overflow: hidden;
  border-color: rgba(241,201,121,.28) !important; border-radius: 4px !important;
  background: linear-gradient(135deg,rgba(241,201,121,.045),rgba(97,216,220,.02)) !important;
}
#erUploadZone::before {
  content: 'AI DOCUMENT EXTRACTION'; position: absolute; right: 15px; top: 12px;
  color: rgba(241,201,121,.24); font: 600 7px/1 var(--font-h); letter-spacing: .16em;
}
#erUploadZone:hover {
  border-color: rgba(241,201,121,.58) !important;
  box-shadow: inset 0 0 55px rgba(241,201,121,.03);
}
#erResult > div,
#billieHistoryPanel,
#sendHistoryPanel,
#view-eingangsrechnungen > div[style*="background:var(--surface)"] {
  background: linear-gradient(145deg,rgba(19,20,26,.84),rgba(10,11,15,.78)) !important;
  border-color: var(--border) !important; border-radius: 4px !important;
}

/* Mobile command deck */
.mobile-bottom-nav {
  background: rgba(8,9,13,.96); border-top-color: var(--border);
  box-shadow: 0 -14px 40px rgba(0,0,0,.32);
}
.mbn-item { color: var(--fg3); }
.mbn-item.active { color: var(--accent); }
.mbn-icon { color: currentColor; font-family: var(--font-h); font-size: 1.18rem; }
.mobile-drawer {
  background:
    radial-gradient(circle at 100% 0%,rgba(241,201,121,.09),transparent 28%),
    rgba(8,9,13,.98);
}
.drawer-close {
  color: var(--fg2); border-color: var(--border); border-radius: 3px;
}

@keyframes billie-orbit { to { transform: rotate(360deg); } }
@keyframes billie-orbit-centered {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes billie-core {
  0%,100% { box-shadow: 0 0 0 9px rgba(241,201,121,.025),0 0 42px -12px rgba(241,201,121,.62); }
  50% { box-shadow: 0 0 0 13px rgba(241,201,121,.02),0 0 58px -8px rgba(241,201,121,.82); }
}

@media (prefers-reduced-motion: reduce) {
  #billieGate::before,#billieGate::after,.tb-mark::before,.tb-mark::after,
  .chat-welcome-mark::before,.chat-welcome-mark::after,.chat-shell::after { animation: none !important; }
}
@media (max-width: 900px) {
  .page-hd::before { display: none; }
}
@media (max-width: 768px) {
  :root { --topbar: 55px; }
  .topbar { padding: 0 .85rem; }
  .tb-mark { width: 35px; height: 35px; }
  .tb-name { font-size: 14px; }
  .tb-badge { font-size: 6.5px; max-width: 105px; }
  .view { padding: .95rem .75rem; }
  .page-hd h1 { font-size: 1.45rem; }
  .stats { gap: .5rem; }
  .stat { min-height: 92px; padding: .85rem; }
  .stat-num { font-size: 1.72rem; }
  .chat-welcome { margin-top: 8%; padding: 1rem; }
  .chat-welcome-mark { width: 76px; height: 76px; font-size: 29px; }
  .chat-welcome h2 { font-size: 1.55rem; }
  .chat-welcome p { font-size: .8rem; }
  .chat-input-wrap { padding: .5rem .65rem .55rem; }
  .chat-input-row { border-radius: 3px; }
  .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom,0); }
  .mbn-item { padding-top: .48rem; }
}