/* ——— TOKENS: light (ivory + deep forest + antique gold) ——— */
:root{
  --bg:#F1ECDF !important;
  --s1:#FAF6EB !important;
  --s2:#EDE7D6 !important;
  --s3:#DDD4BC !important;
  --s4:#C8BDA2 !important;
  --border:#C0B59A !important;
  --border2:#9E9274 !important;
  --acc:#0D3B2E !important;
  --acc-dim:rgba(13,59,46,0.08) !important;
  --acc-glow:rgba(13,59,46,0.20) !important;
  --acc-light:#1B5A42 !important;
  --acc-bright:#0D3B2E !important;
  --text:#0A1210 !important;
  --text2:#2E3A33 !important;
  --text3:#6E7A72 !important;
  --shadow:0 1px 2px rgba(20,30,20,0.04),0 4px 14px rgba(20,30,20,0.06) !important;
  --shadow-md:0 10px 34px rgba(20,30,20,0.10),0 4px 14px rgba(20,30,20,0.07) !important;
  --gold:#B68B3C;
  --gold-light:#D4AE5C;
  --gold-dim:rgba(182,139,60,0.12);
  --serif:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
/* ——— TOKENS: dark (midnight forest + bone + bright emerald) ——— */
html.dark{
  --bg:#070B09 !important;
  --s1:#0F1512 !important;
  --s2:#171F1A !important;
  --s3:#202B24 !important;
  --s4:#2B3830 !important;
  --border:#2E3A34 !important;
  --border2:#4A5A52 !important;
  --text:#F1ECDF !important;
  --text2:#C8CEC2 !important;
  --text3:#7C8982 !important;
  --acc:#4ADE80 !important;
  --acc-dim:rgba(74,222,128,0.12) !important;
  --acc-glow:rgba(74,222,128,0.28) !important;
  --acc-light:#6BEF97 !important;
  --acc-bright:#4ADE80 !important;
  --shadow:0 2px 10px rgba(0,0,0,0.55) !important;
  --shadow-md:0 12px 40px rgba(0,0,0,0.65),0 4px 14px rgba(0,0,0,0.4) !important;
  --gold:#D4AE5C;
  --gold-light:#E8C877;
  --gold-dim:rgba(212,174,92,0.14);
}

/* ——— GLOBAL ——— */
html,body{
  font-family:var(--sans) !important;
  font-feature-settings:"ss01","cv11","cv02","cv03";
  letter-spacing:-0.005em;
  color:var(--text);
  background:var(--bg);
}
body{
  background-image:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(13,59,46,0.05) 0%,transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 100%,rgba(182,139,60,0.06) 0%,transparent 50%);
}
html.dark body{
  background-image:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(74,222,128,0.05) 0%,transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 100%,rgba(212,174,92,0.05) 0%,transparent 50%);
}

/* Film-grain overlay: subtle but undeniably premium */
body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9998;
  opacity:0.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
html.dark body::before{opacity:0.07;mix-blend-mode:overlay;}

/* ——— TYPOGRAPHY: editorial display ——— */
.auth-logo-text,
.logo-name{
  font-family:var(--serif) !important;
  font-weight:700 !important;
  font-variation-settings:"opsz" 144,"SOFT" 40 !important;
  letter-spacing:-0.035em !important;
  text-transform:none !important;
  color:var(--text) !important;
}
.auth-logo-text{
  font-size:3.4rem !important;
  line-height:0.92 !important;
  margin-top:4px;
}
.auth-logo-text span{
  color:var(--gold) !important;
  font-style:italic !important;
  font-weight:500 !important;
  font-variation-settings:"opsz" 144 !important;
}
.logo-name{
  font-size:1.55rem !important;
  letter-spacing:-0.025em !important;
  line-height:1 !important;
}
.logo-domain{
  font-family:var(--sans) !important;
  font-weight:600 !important;
  font-size:0.58rem !important;
  letter-spacing:0.22em !important;
  text-transform:uppercase;
  color:var(--text3) !important;
  margin-top:4px !important;
}
.auth-tagline{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-variation-settings:"opsz" 14 !important;
  font-size:0.88rem !important;
  color:var(--text2) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  margin-top:10px !important;
}

/* Modal / section titles: classy serif */
.modal-title{
  font-family:var(--serif) !important;
  font-weight:600 !important;
  font-variation-settings:"opsz" 48 !important;
  letter-spacing:-0.015em !important;
  font-size:1.2rem !important;
}
.ph-title,
.dash-section-title,
.dash-label{
  font-family:var(--sans) !important;
  font-weight:700 !important;
  letter-spacing:0.18em !important;
  font-size:0.64rem !important;
  text-transform:uppercase !important;
  color:var(--text3) !important;
}
.ph-title{color:var(--acc-bright) !important;}

/* KPIs: giant elegant serif numerals */
.dash-kpi{
  font-family:var(--serif) !important;
  font-weight:300 !important;
  font-variation-settings:"opsz" 144 !important;
  font-size:2.9rem !important;
  letter-spacing:-0.045em !important;
  line-height:0.95 !important;
  color:var(--text) !important;
}
.dash-sub{
  font-family:var(--sans) !important;
  font-weight:600 !important;
  color:var(--acc) !important;
  letter-spacing:0.02em;
}

/* Stat box inherits the serif love */
.stat-box .sv,
.safn-stat-v{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-variation-settings:"opsz" 144 !important;
  letter-spacing:-0.03em !important;
  font-size:1.8rem !important;
  color:var(--acc) !important;
}

/* ——— AUTH SCREEN: editorial moment ——— */
.auth-screen{
  background:var(--bg) !important;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% -10%,rgba(13,59,46,0.12) 0%,transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 115%,rgba(182,139,60,0.14) 0%,transparent 55%) !important;
}
html.dark .auth-screen{
  background-image:
    radial-gradient(ellipse 90% 70% at 50% -10%,rgba(74,222,128,0.10) 0%,transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 115%,rgba(212,174,92,0.08) 0%,transparent 55%) !important;
}
.auth-box{
  background:var(--s1) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  padding:52px 44px 44px !important;
  max-width:440px !important;
  box-shadow:0 40px 100px rgba(13,30,22,0.14),0 10px 30px rgba(13,30,22,0.08) !important;
  position:relative;
  overflow:hidden;
}
.auth-box::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--acc) 0%,var(--acc-light) 40%,var(--gold) 100%);
}
.auth-box::after{
  content:'EST. 2024  ·  REYKJAVÍK  ·  MERKID';
  position:absolute;
  bottom:14px;left:0;right:0;
  text-align:center;
  font-family:var(--sans);
  font-size:0.52rem;
  font-weight:600;
  letter-spacing:0.32em;
  color:var(--text3);
  opacity:0.65;
}
.auth-logo{gap:6px !important;margin-bottom:36px !important;}

/* Auth tabs — chip row */
.auth-tabs{
  background:transparent !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0 !important;
  padding:0 !important;
  gap:0 !important;
}
.auth-tab{
  border-radius:0 !important;
  padding:12px 8px !important;
  font-family:var(--sans) !important;
  font-size:0.72rem !important;
  font-weight:600 !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase !important;
  border-bottom:2px solid transparent !important;
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.auth-tab.active{
  background:transparent !important;
  color:var(--acc-bright) !important;
  border-bottom-color:var(--acc) !important;
}

.afield label{
  font-family:var(--sans) !important;
  font-weight:700 !important;
  letter-spacing:0.2em !important;
  font-size:0.62rem !important;
  color:var(--text3) !important;
}
.afield input{
  background:transparent !important;
  border:none !important;
  border-bottom:1.5px solid var(--border2) !important;
  border-radius:0 !important;
  padding:10px 2px !important;
  font-family:var(--sans) !important;
  font-size:0.95rem !important;
  font-weight:500 !important;
  color:var(--text) !important;
  transition:border-color 0.3s ease !important;
}
.afield input:focus{
  border-bottom-color:var(--acc) !important;
  box-shadow:none !important;
}

.auth-btn{
  background:var(--acc) !important;
  color:#FAF6EB !important;
  border-radius:4px !important;
  font-family:var(--sans) !important;
  font-weight:600 !important;
  letter-spacing:0.18em !important;
  text-transform:uppercase !important;
  font-size:0.74rem !important;
  padding:16px !important;
  margin-top:18px !important;
  transition:transform 0.25s cubic-bezier(0.4,0,0.2,1),box-shadow 0.25s,background 0.2s !important;
  position:relative;
  overflow:hidden;
}
.auth-btn::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.18) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform 0.6s ease;
}
.auth-btn:hover{
  background:var(--acc-light) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 30px rgba(13,59,46,0.28) !important;
}
.auth-btn:hover::after{transform:translateX(100%);}

/* ——— TOPBAR: museum plaque ——— */
.topbar{
  background:var(--s1) !important;
  border-bottom:1px solid var(--border) !important;
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 0 var(--border),0 2px 20px rgba(0,0,0,0.03);
}
.tsep{
  background:var(--border) !important;
  opacity:0.7;
}

/* Nav buttons — editorial */
.nb{
  border-radius:3px !important;
  font-family:var(--sans) !important;
  font-weight:500 !important;
  font-size:0.82rem !important;
  letter-spacing:0.01em !important;
  padding:9px 16px !important;
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  position:relative;
  background:transparent !important;
  color:var(--text2) !important;
  border:1px solid transparent !important;
}
.nb:hover{
  background:var(--s2) !important;
  color:var(--text) !important;
  transform:none !important;
  box-shadow:none !important;
}
.nb.active{
  background:var(--acc) !important;
  color:#FAF6EB !important;
  border-color:var(--acc) !important;
  box-shadow:0 6px 18px rgba(13,59,46,0.28),0 1px 3px rgba(13,59,46,0.15) !important;
}
.nb.active:hover{
  background:var(--acc-light) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 24px rgba(13,59,46,0.32) !important;
}

/* User button */
.user-btn{
  border-radius:3px !important;
  border:1px solid var(--border) !important;
  transition:all 0.25s ease !important;
}
.user-btn:hover{
  border-color:var(--acc) !important;
  background:var(--s1) !important;
  box-shadow:0 4px 14px rgba(13,59,46,0.12) !important;
}
.user-av{
  background:linear-gradient(135deg,var(--acc) 0%,var(--acc-light) 100%) !important;
  font-family:var(--serif) !important;
  font-weight:500 !important;
  font-variation-settings:"opsz" 24 !important;
}
.user-nm{
  font-family:var(--sans) !important;
  font-weight:600 !important;
  letter-spacing:-0.005em;
}

/* Chips */
.chip{
  border-radius:3px !important;
  font-family:var(--sans) !important;
  font-weight:600 !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase;
  font-size:0.6rem !important;
  padding:5px 9px !important;
}
.chip.hi{
  background:var(--gold-dim) !important;
  color:var(--gold) !important;
  border:1px solid rgba(182,139,60,0.35) !important;
}

/* Dark-mode toggle buttons */
.dm-toggle{
  border-radius:3px !important;
  border:1px solid var(--border) !important;
  background:transparent !important;
  transition:all 0.25s ease !important;
}
.dm-toggle:hover{
  border-color:var(--acc) !important;
  color:var(--acc) !important;
  background:var(--s1) !important;
}

/* Bell */
.appr-bell{
  border-radius:3px !important;
  border:1px solid var(--border) !important;
  background:transparent !important;
}
.appr-bell:hover{
  border-color:var(--gold) !important;
  color:var(--gold) !important;
}

/* ——— PANELS: gallery rooms ——— */
.p-left{
  background:var(--s1) !important;
  border-right:1px solid var(--border) !important;
}
.p-right{
  background:var(--s1) !important;
  border-left:1px solid var(--border) !important;
}
.p-center{background:var(--bg) !important;}

/* Panel header */
.ph{
  background:var(--s1) !important;
  border-bottom:1px solid var(--border) !important;
  padding:18px 20px !important;
}

/* ——— CARDS: paper ——— */
.dash-card,
.fsec{
  background:var(--s1) !important;
  border:1px solid var(--border) !important;
  border-radius:5px !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.04) !important;
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s,border-color 0.3s !important;
}
.dash-card:hover,
.fsec:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 38px rgba(20,30,20,0.10),0 4px 10px rgba(20,30,20,0.06) !important;
  border-color:var(--border2) !important;
}
.fsec-title{
  font-family:var(--sans) !important;
  font-weight:700 !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase !important;
  font-size:0.72rem !important;
  color:var(--text2) !important;
}

/* ——— FORM FIELDS ——— */
.field label{
  font-family:var(--sans) !important;
  font-weight:600 !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase !important;
  font-size:0.62rem !important;
  color:var(--text3) !important;
}
.fi,.fi-ta,.fi-sel{
  border-radius:3px !important;
  font-family:var(--sans) !important;
  transition:border-color 0.25s,box-shadow 0.25s !important;
}
.fi:focus,.fi-ta:focus,.fi-sel:focus{
  border-color:var(--acc) !important;
  box-shadow:0 0 0 3px var(--acc-glow) !important;
}

/* Toggle switches */
.tog{border-radius:12px !important;}
.tog.on{
  background:var(--acc) !important;
  border-color:var(--acc) !important;
  box-shadow:0 0 0 3px var(--acc-glow) !important;
}

/* ——— BUTTONS ——— */
.btn,
.lp-btn-primary,
.lp-btn-secondary{
  font-family:var(--sans) !important;
  font-weight:600 !important;
  letter-spacing:0.04em !important;
  border-radius:4px !important;
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.lp-btn-primary{
  background:var(--acc) !important;
  color:#FAF6EB !important;
  border-color:var(--acc) !important;
  box-shadow:0 4px 14px rgba(13,59,46,0.20) !important;
}
.lp-btn-primary:hover{
  background:var(--acc-light) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 10px 26px rgba(13,59,46,0.30) !important;
}
.lp-btn-secondary{
  background:transparent !important;
  border:1px solid var(--border) !important;
  color:var(--text2) !important;
}
.lp-btn-secondary:hover{
  border-color:var(--acc) !important;
  color:var(--acc) !important;
  background:var(--s2) !important;
}

/* Segment / type buttons */
.tp-btn,.seg-btn{
  border-radius:3px !important;
  font-family:var(--sans) !important;
  font-weight:600 !important;
  letter-spacing:0.03em !important;
  transition:all 0.2s ease !important;
}
.tp-btn.tp-active,.seg-btn.sa{
  background:var(--acc-dim) !important;
  border-color:var(--acc) !important;
  color:var(--acc-bright) !important;
  box-shadow:0 0 0 2px var(--acc-glow) !important;
}

/* ——— LIVE PILL: gold accent ——— */
.lp-live-pill{
  background:var(--gold-dim) !important;
  border:1px solid rgba(182,139,60,0.35) !important;
  color:var(--gold) !important;
  border-radius:3px !important;
  font-family:var(--sans) !important;
  font-weight:600 !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase;
  font-size:0.6rem !important;
}
.lp-live-dot{background:var(--gold) !important;box-shadow:0 0 8px var(--gold-light);}

/* ——— SCROLLBARS ——— */
.scroll::-webkit-scrollbar-thumb{background:var(--border2) !important;border-radius:2px !important;}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--acc) !important;opacity:0.6;}

/* ——— MODAL ——— */
.umenu,.modal{
  border-radius:6px !important;
  border:1px solid var(--border) !important;
  box-shadow:0 30px 80px rgba(0,0,0,0.18),0 8px 24px rgba(0,0,0,0.10) !important;
}
.umenu-item{
  border-radius:3px !important;
  font-family:var(--sans) !important;
  font-weight:500 !important;
  letter-spacing:0.01em;
  transition:all 0.2s ease !important;
}
.umenu-item:hover{background:var(--s2) !important;color:var(--text) !important;}
.umenu-item.danger:hover{background:rgba(180,65,42,0.10) !important;color:#B4412A !important;}

/* ——— DASHBOARD bars use accent + gold ——— */
.dash-bar{
  background:linear-gradient(180deg,var(--acc) 0%,var(--acc-light) 100%) !important;
  border-radius:2px 2px 0 0 !important;
}
.dash-prod-bar-fill{background:linear-gradient(90deg,var(--acc) 0%,var(--gold) 100%) !important;}

/* Hover cursor on interactive elements (accessibility) */
.nb,.auth-tab,.tp-btn,.seg-btn,.dash-card,.fsec,.safn-doc-tab,.chip,.user-btn,.dm-toggle,.appr-bell,.umenu-item,.mnb,.adm-tab,.lp-btn-primary,.lp-btn-secondary,.lp-btn-ghost,.mbtn,.tog,.img-thumb{cursor:pointer !important;}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}

/* ——— PRINT: keep clean ——— */
@media print{
  body::before{display:none;}
}

/* ——— Responsive fine-tune ——— */
@media (max-width:900px){
  .auth-logo-text{font-size:2.7rem !important;}
  .dash-kpi{font-size:2.2rem !important;}
  .auth-box{padding:38px 26px 38px !important;}
}

/* Kill inherited scale-on-hover layout shifts */
.fsec:hover .fsec-title-icon{transform:none !important;}

/* Focus visibility (a11y critical) */
*:focus-visible{
  outline:2px solid var(--acc) !important;
  outline-offset:2px !important;
  border-radius:3px;
}