*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0f0600;
  --bg2:#1a0c04;
  --bg3:#251208;
  --bg4:#32180a;
  --bg5:#3e1e0c;
  --gold:#D4AF37;
  --gold2:#b8941e;
  --gold3:rgba(212,175,55,0.12);
  --cream:#F5E6D3;
  --muted:#8a6a50;
  --dim:#4a2810;
  --green:#3a9e4f;
  --orange:#e8861e;
  --red:#c0392b;
  --blue:#4a9fd4;
  --font:'Helvetica Neue',Arial,sans-serif;
  --r:14px;
  --rs:10px;
}
html.light{
  --bg:#FDF6EE;--bg2:#F5E6D3;--bg3:#EDD9C0;--bg4:#E4CBAA;--bg5:#D4B896;
  --gold:#9A6F00;--gold2:#7a5800;--gold3:rgba(154,111,0,0.1);
  --cream:#2a1008;--muted:#6a4a30;--dim:#c4a080;
}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font);
  min-height:100vh;
  overflow:hidden;
  overscroll-behavior:none;
}

/* ── SCREENS ── */
#screen-login{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, #2a1206 0%, #0f0600 70%);
  z-index:100;
  padding:32px 24px;
}
#screen-app{
  display:none;
  position:fixed;
  inset:0;
  width:100%;
  flex-direction:column;
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
}

/* ── OWL ── */
.owl-container{
  position:relative;
  width:120px;height:120px;
  margin-bottom:24px;
}
.owl-glow{
  position:absolute;inset:-20px;
  background:radial-gradient(circle, rgba(212,175,55,0.3) 0%, transparent 70%);
  animation:owlGlow 3s ease-in-out infinite;
}
@keyframes owlGlow{
  0%,100%{opacity:0.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}
.owl-svg{width:120px;height:120px;filter:drop-shadow(0 0 20px rgba(212,175,55,0.5))}
/* Eye animation */
.owl-eye-left, .owl-eye-right{
  transform-origin:center;
  animation:blink 4s ease-in-out infinite;
}
.owl-eye-right{animation-delay:0.08s}
@keyframes blink{
  0%,45%,55%,100%{transform:scaleY(1)}
  50%{transform:scaleY(0.05)}
}
.owl-pupil-left,.owl-pupil-right{
  animation:lookAround 6s ease-in-out infinite;
}
.owl-pupil-right{animation-delay:0.05s}
@keyframes lookAround{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,-1px)}
  40%{transform:translate(3px,-1px)}
  60%{transform:translate(2px,2px)}
  80%{transform:translate(-2px,1px)}
}

/* ── LOGIN ── */
.login-title{
  font-size:36px;font-weight:900;
  letter-spacing:6px;
  color:var(--gold);
  margin-bottom:4px;
}
.login-sub{
  font-size:12px;letter-spacing:3px;
  color:var(--muted);margin-bottom:32px;
  text-transform:uppercase;
}
.cloud-login{
  width:min(300px, 100%);
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:10px;
}
.cloud-input{
  width:100%;
  background:rgba(26,12,4,0.82);
  border:1px solid var(--bg5);
  color:var(--cream);
  border-radius:12px;
  padding:13px 14px;
  font-size:14px;
  font-family:var(--font);
  outline:none;
}
.cloud-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,0.12)}
.cloud-password-wrap{position:relative;width:100%}
.cloud-password-wrap .cloud-input{padding-left:48px}
.password-toggle{
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:var(--gold);
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  opacity:0.9;
  transition:opacity .15s ease, color .15s ease, background .15s ease;
}
.password-toggle:hover{opacity:1;background:rgba(212,175,55,0.1);border-radius:10px}
.password-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.password-icon{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.password-icon-hide{display:none}
.password-toggle.is-visible .password-icon-show{display:none}
.password-toggle.is-visible .password-icon-hide{display:block}
.cloud-btn{
  width:100%;
  border:none;
  border-radius:12px;
  background:var(--gold);
  color:#0f0600;
  font-family:var(--font);
  font-weight:900;
  font-size:14px;
  padding:13px 14px;
  cursor:pointer;
}
.cloud-btn:disabled{opacity:0.6;cursor:wait}
.dev-pin{display:none!important}
.pin-display{
  display:flex;gap:12px;margin-bottom:24px;justify-content:center;
}
.pin-dot{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--gold);
  transition:all 0.2s;
}
.pin-dot.filled{background:var(--gold);transform:scale(1.2)}
.pin-keypad{
  display:grid;grid-template-columns:repeat(3,72px);
  gap:10px;margin-bottom:20px;
}
.pin-key{
  width:72px;height:72px;border-radius:50%;
  border:1px solid var(--bg5);
  background:var(--bg3);
  color:var(--cream);
  font-size:22px;font-weight:700;
  font-family:var(--font);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;
  -webkit-user-select:none;user-select:none;
}
.pin-key:active{background:var(--gold);color:#0f0600;transform:scale(0.92)}
.pin-key.del{font-size:18px;color:var(--muted)}
.pin-key.empty{border:none;background:transparent;pointer-events:none}
.login-err{
  color:var(--red);font-size:13px;text-align:center;
  min-height:20px;margin-top:8px;
  animation:shake 0.4s ease;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-8px)}
  75%{transform:translateX(8px)}
}

/* ── HEADER ── */
#app-header{
  position:relative;
  z-index:80;
  background:linear-gradient(135deg,var(--bg2),var(--bg3));
  border-bottom:1px solid var(--bg5);
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
  padding-top:max(10px, env(safe-area-inset-top));
}
.header-brand{display:flex;align-items:center;gap:10px}
.header-owl{width:32px;height:32px}
.header-title{font-size:18px;font-weight:900;letter-spacing:2px;color:var(--gold)}
.header-sub{font-size:10px;color:var(--muted);letter-spacing:1px}
.header-actions{display:flex;align-items:center;gap:8px}
.hbtn{
  background:var(--bg4);border:1px solid var(--bg5);
  border-radius:20px;padding:6px 12px;
  color:var(--muted);font-size:12px;font-family:var(--font);
  cursor:pointer;transition:all 0.2s;
}
.hbtn:active{background:var(--bg5)}
.hbtn.primary{background:var(--gold);color:#0f0600;font-weight:800;border-color:var(--gold)}
.hbtn.primary:active{background:var(--gold2)}
.role-pill{
  background:rgba(212,175,55,0.15);
  border:1px solid rgba(212,175,55,0.3);
  border-radius:20px;padding:4px 10px;
  color:var(--gold);font-size:11px;font-weight:700;
}

/* ── PAGES ── */
#app-pages{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
body.modal-open #app-pages{overflow:hidden}
.page{display:none;padding:16px;padding-bottom:90px;min-height:100%}

/* ── NAV BAR ── */
#app-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);
  border-top:1px solid var(--bg5);
  display:flex;align-items:stretch;
  padding-bottom:max(8px, env(safe-area-inset-bottom));
  z-index:50;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:8px 4px 4px;cursor:pointer;
  transition:all 0.2s;
  -webkit-user-select:none;user-select:none;
}
.nav-item.hidden{display:none}
.nav-icon{font-size:22px;line-height:1;margin-bottom:3px;transition:transform 0.2s}
.nav-label{font-size:10px;color:var(--muted);transition:color 0.2s;font-weight:600}
.nav-item.active .nav-label{color:var(--gold)}
.nav-item.active .nav-icon{transform:translateY(-2px)}
.nav-indicator{
  width:4px;height:4px;border-radius:50%;
  background:transparent;margin-top:3px;transition:background 0.2s;
}
.nav-item.active .nav-indicator{background:var(--gold)}

/* ── CARDS ── */
.card{
  background:var(--bg2);border:1px solid var(--bg5);
  border-radius:var(--r);padding:14px;margin-bottom:12px;
}
.card-gold{
  background:linear-gradient(135deg,rgba(212,175,55,0.1),rgba(212,175,55,0.05));
  border:1px solid rgba(212,175,55,0.3);
  border-radius:var(--r);padding:14px;margin-bottom:12px;
}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat-card{
  background:var(--bg2);border:1px solid var(--bg5);
  border-radius:var(--rs);padding:12px;
  display:flex;flex-direction:column;gap:4px;
}
.stat-val{font-size:20px;font-weight:900;color:var(--gold)}
.stat-label{font-size:11px;color:var(--muted)}

.dash-panel{
  background:linear-gradient(180deg,rgba(212,175,55,0.07),rgba(212,175,55,0.025));
  border:1px solid var(--bg5);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:16px;
}
.dash-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;
  border-bottom:1px solid var(--bg5);
  color:var(--gold);
  font-size:14px;font-weight:900;
}
.dash-panel-head small{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.dash-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.dash-kpi{
  min-width:0;
  padding:15px 8px;
  text-align:center;
  border-left:1px solid var(--bg5);
}
.dash-kpi:first-child{border-left:none}
.dash-kpi-label{
  min-height:30px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}
.dash-kpi-value{
  margin-top:6px;
  color:var(--gold);
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.dash-kpi-value.positive,.positive{color:var(--green)}
.dash-kpi-value.warning{color:var(--orange)}
.dash-kpi-value.negative,.negative{color:var(--red)}
.dash-strip,.dash-split-strip{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;
  border-top:1px solid var(--bg5);
  color:var(--muted);
  font-size:12px;
}
.dash-strip strong,.dash-split-strip strong{color:var(--orange);font-weight:900}
.dash-strip-red strong{color:var(--red)}
.dash-split-strip{flex-wrap:wrap}
.dash-split-strip span:first-child strong{color:var(--green)}
.dash-details-title{
  padding:13px 14px 4px;
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}
.dash-request-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:11px 14px;
  border-top:1px solid rgba(62,30,12,0.7);
}
.dash-request-row div{min-width:0}
.dash-request-row strong{
  display:block;
  color:var(--cream);
  font-size:13px;
  margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-request-row span{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.dash-request-row>div:last-child{text-align:left;flex-shrink:0}
.dash-request-row>div:last-child strong{font-size:12px;color:var(--gold)}
.dash-request-row>div:last-child strong.positive{color:var(--green)}
.dash-request-row>div:last-child strong.negative{color:var(--red)}
.dash-more-note,.dash-empty-note{
  padding:12px 14px 14px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

/* ── LIST ITEMS ── */
.list-item{
  background:var(--bg2);border:1px solid var(--bg5);
  border-radius:var(--r);padding:14px;margin-bottom:10px;
  transition:border-color 0.2s;
}
.list-item:active{border-color:var(--gold)}
.row{display:flex;align-items:center;justify-content:space-between}
.row-start{display:flex;align-items:center;gap:10px}

/* ── BADGES ── */
.badge{
  font-size:11px;font-weight:700;padding:3px 10px;
  border-radius:20px;white-space:nowrap;
}
.badge-green{background:rgba(58,158,79,0.2);color:#3a9e4f}
.badge-orange{background:rgba(232,134,30,0.2);color:#e8861e}
.badge-red{background:rgba(192,57,43,0.2);color:#c0392b}
.badge-blue{background:rgba(74,159,212,0.2);color:#4a9fd4}
.badge-gold{background:rgba(212,175,55,0.2);color:#D4AF37}
.locked-badge,.settled-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  font-weight:800;
}
.locked-badge{background:rgba(192,57,43,0.16);color:#c0392b}
.settled-badge{background:rgba(74,159,212,0.16);color:#4a9fd4}

/* ── FORMS ── */
.form-group{margin-bottom:14px}
.form-label{
  display:block;font-size:12px;color:var(--muted);
  font-weight:700;margin-bottom:6px;
  text-align:right;
}
.form-input{
  width:100%;background:var(--bg3);
  border:1px solid var(--bg5);border-radius:var(--rs);
  padding:12px 14px;color:var(--cream);
  font-size:15px;font-family:var(--font);
  outline:none;transition:border-color 0.2s;
  text-align:right;
  -webkit-appearance:none;
}
.form-input:focus{border-color:var(--gold)}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-section{
  background:var(--bg2);border:1px solid var(--bg5);
  border-radius:var(--r);padding:14px;margin-bottom:14px;
}
.form-section-title{
  font-size:11px;font-weight:800;color:var(--gold);
  letter-spacing:1px;margin-bottom:12px;
}

/* ── CUSTOM DROPDOWN ── */
.cd-wrap{position:relative;margin-bottom:0}
.cd-btn{
  width:100%;background:var(--bg3);
  border:1px solid var(--bg5);border-radius:var(--rs);
  padding:12px 14px;color:var(--cream);
  font-size:15px;font-family:var(--font);
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  transition:border-color 0.2s;text-align:right;
  -webkit-appearance:none;
}
.cd-btn.open{border-color:var(--gold)}
.cd-arrow{font-size:10px;color:var(--muted);transition:transform 0.2s;flex-shrink:0;margin-right:8px}
.cd-btn.open .cd-arrow{transform:rotate(180deg)}
.cd-list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--bg3);border:1px solid var(--gold);
  border-radius:var(--r);z-index:200;
  max-height:200px;overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  animation:dropIn 0.15s ease;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.cd-item{
  padding:13px 16px;font-size:14px;color:var(--cream);
  font-family:var(--font);cursor:pointer;
  border-bottom:1px solid var(--bg5);transition:background 0.1s;
  text-align:right;
}
.cd-item:last-child{border-bottom:none}
.cd-item:active,.cd-item.sel{background:var(--gold3);color:var(--gold);font-weight:700}
.cd-overlay{position:fixed;inset:0;z-index:199}

/* ── BUTTONS ── */
.btn{
  width:100%;padding:14px;border-radius:var(--r);
  font-size:15px;font-weight:800;font-family:var(--font);
  cursor:pointer;border:none;transition:all 0.2s;
  -webkit-appearance:none;
}
.btn-primary{background:var(--gold);color:#0f0600}
.btn-primary:active{background:var(--gold2);transform:scale(0.98)}
.btn-secondary{
  background:var(--bg3);border:1px solid var(--bg5);
  color:var(--cream);font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:var(--rs);width:auto;
}
.btn-secondary:active{background:var(--bg4)}
.btn-sm{
  padding:5px 12px;border-radius:20px;font-size:12px;
  font-weight:700;font-family:var(--font);cursor:pointer;border:none;
}
.btn-sm-red{background:rgba(192,57,43,0.2);color:#c0392b}
.btn-sm-green{background:rgba(58,158,79,0.2);color:#3a9e4f}
.btn-sm-dim{background:var(--bg4);color:var(--muted)}

/* ── MODAL ── */
#modal-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,0.7);
  display:none;align-items:flex-end;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
#modal-overlay.open{display:flex}
#modal-box{
  width:100%;max-height:92vh;
  background:var(--bg2);
  border-radius:24px 24px 0 0;
  overflow-y:auto;
  padding:16px 20px 40px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  transform:translateY(0);
  transition:transform 0.3s ease;
}
.modal-handle{
  width:40px;height:4px;background:var(--bg5);
  border-radius:2px;margin:0 auto 16px;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.modal-title{font-size:18px;font-weight:900;color:var(--cream)}
.modal-close{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg4);border:none;
  color:var(--muted);font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}

/* ── TOAST ── */
#toast{
  position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);
  background:var(--bg3);border:1px solid var(--gold);
  color:var(--cream);font-size:13px;font-weight:700;
  padding:10px 20px;border-radius:30px;
  z-index:500;opacity:0;transition:all 0.3s;
  white-space:nowrap;pointer-events:none;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── PROGRESS ── */
.progress-wrap{height:4px;background:var(--bg4);border-radius:2px;margin:8px 0}
.progress-bar{height:100%;border-radius:2px;background:var(--gold);transition:width 0.5s}

/* ── SECTION HEADER ── */
.sec-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.sec-title{font-size:18px;font-weight:900;color:var(--cream)}

/* ── EMPTY STATE ── */
.empty{
  text-align:center;padding:48px 24px;
  color:var(--muted);
}
.empty-icon{font-size:48px;margin-bottom:12px}
.empty-text{font-size:14px}

/* ── TOGGLE BTNS ── */
.toggle-group{display:grid;gap:8px;margin-bottom:16px}
.toggle-group.col2{grid-template-columns:1fr 1fr}
.toggle-btn{
  padding:12px;border-radius:var(--rs);
  border:1px solid var(--bg5);background:transparent;
  color:var(--muted);font-weight:800;font-size:13px;
  cursor:pointer;font-family:var(--font);transition:all 0.2s;
}
.toggle-btn.active{
  border:2px solid var(--gold);
  background:rgba(212,175,55,0.12);color:var(--gold);
}

/* ── FILTER TABS ── */
.filter-tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px}
.filter-tab{
  flex-shrink:0;padding:6px 16px;border-radius:20px;
  border:1px solid var(--bg5);background:transparent;
  color:var(--muted);font-size:12px;font-weight:700;
  cursor:pointer;font-family:var(--font);transition:all 0.2s;
  white-space:nowrap;
}
.filter-tab.active{
  background:var(--gold);color:#0f0600;border-color:var(--gold);
}

/* ── REPORTS ── */
.report-tabs{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:0 0 18px;
}
.report-tab{
  min-height:40px;
  padding:8px 18px;
  border-radius:22px;
  border:1px solid var(--bg5);
  background:transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.report-tab.active{
  border-color:rgba(212,175,55,0.45);
  background:rgba(212,175,55,0.12);
  color:var(--gold);
}
.report-control-block{margin-bottom:16px}
.sales-report-card{
  background:linear-gradient(180deg,rgba(212,175,55,0.06),rgba(212,175,55,0.02));
  border:1px solid var(--bg5);
  border-radius:var(--r);
  padding:14px;
  margin-bottom:14px;
}
.sales-report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.sales-name{color:var(--cream);font-size:18px;font-weight:900}
.sales-meta{margin-top:4px;color:var(--muted);font-size:12px}
.sales-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.sales-mini-grid>div,.sales-pay-box{
  background:rgba(0,0,0,0.14);
  border:1px solid rgba(62,30,12,0.75);
  border-radius:var(--rs);
  padding:12px;
}
.sales-mini-grid span,.sales-pay-box span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:6px;
}
.sales-mini-grid strong,.sales-pay-box strong{
  display:block;
  color:var(--gold);
  font-size:15px;
  font-weight:900;
}
.sales-pay-box{margin-bottom:16px}
.sales-pay-box>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
}
.sales-pay-box>div+div{border-top:1px solid rgba(62,30,12,0.7)}
.sales-pay-box span{margin-bottom:0}
.sales-pay-box strong.bonus{color:var(--blue)}
.sales-due strong{color:var(--gold);font-size:18px}
.sales-details-title{
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  margin:4px 0 10px;
}
.sales-request{
  border:1px solid var(--bg5);
  border-radius:var(--rs);
  padding:12px;
  margin-bottom:10px;
}
.sales-request strong{
  display:block;
  color:var(--cream);
  font-size:14px;
  margin-bottom:4px;
}
.sales-request span{display:block;color:var(--muted);font-size:12px}
.sales-request-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}
.sales-request-grid div{min-width:0;text-align:center}
.sales-request-grid strong{font-size:12px;overflow-wrap:anywhere}
.sales-request-grid strong.warning{color:var(--orange)}
@media (max-width:420px){
  .sales-request-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── FINANCIAL TABS ── */
.fin-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.fin-tab{
  padding:8px 4px;border-radius:var(--rs);
  border:1px solid var(--bg5);background:transparent;
  color:var(--muted);font-weight:800;font-size:11px;
  cursor:pointer;font-family:var(--font);transition:all 0.2s;text-align:center;
}
.fin-tab.active{border-color:var(--gold);background:var(--gold3);color:var(--gold)}

/* ── SERIAL DATE PREVIEW ── */
.date-preview{
  background:var(--bg3);border-radius:var(--rs);
  padding:12px;margin-top:10px;
}
.date-preview-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;font-size:12px;
}
.date-preview-row:not(:last-child){border-bottom:1px solid var(--bg5)}
.date-key{color:var(--muted)}
.date-val{color:var(--cream);font-weight:700}

/* ── ITEM ACTIONS ── */
.item-actions{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}

/* ── SETTINGS ── */
.settings-section{
  background:var(--bg2);border:1px solid var(--bg5);
  border-radius:var(--r);padding:14px;margin-bottom:14px;
}
.settings-title{font-size:12px;font-weight:800;color:var(--gold);margin-bottom:12px}

/* ── LIGHT THEME OVERRIDES ── */
html.light #screen-login{background:radial-gradient(ellipse at 50% 30%,#EDD9C0,#FDF6EE 70%)}
html.light #app-header{background:linear-gradient(135deg,var(--bg2),var(--bg3));border-color:var(--bg5)}
html.light #app-nav{background:var(--bg3);border-color:var(--bg5)}
html.light .list-item{background:var(--bg2);border-color:var(--bg5)}
html.light .form-input{background:var(--bg3);border-color:var(--bg5);color:var(--cream)}
html.light #modal-box{background:var(--bg2)}
html.light .card{background:var(--bg2);border-color:var(--bg5)}