:root {
  --tp-black:      #07080B;
  --tp-navy-950:   #060B1A;
  --tp-navy-900:   #0A1430;
  --tp-navy-800:   #101D45;
  --tp-gold:       #D4AF37;
  --tp-gold-light: #F0D67A;
  --tp-gold-deep:  #A8842A;
  --tp-emerald:    #1FCB94;
  --tp-emerald-d:  #0B7F5E;
  --tp-brown:      #4A3322;
  --tp-bronze:     #B07A45;
  --tp-ivory:      #F6F3EA;
  --tp-ease:       cubic-bezier(.22, .8, .26, 1);
}


body {
  --brand:        #9A7A20;
  --brand-light:  #F5EDD3;
  --brand-dark:   #7A6018;
  --ink-on-brand: #0A1430;
  --emerald:      #0B7F5E;
  --emerald-dark: #086348;
  --emerald-bg:   #E0F3EC;
  --success:      #0B7F5E;
  --success-bg:   #E0F3EC;
  --danger:       #B23A48;
  --danger-bg:    #FBEAEC;
  --warn:         #A66A2C;
  --warn-bg:      #F8ECDD;
  --txt-1:        #0A1430;
  --txt-2:        #44506B;
  --txt-3:        #7C859A;
  --border:       #E2DDCE;
  --bg:           #F4F2EC;
  --surface:      #FFFFFF;
  --radius:       10px;
  --shadow:       0 1px 2px rgba(10,20,48,.05), 0 12px 32px -12px rgba(10,20,48,.14);
}


body.dark-theme {
  --brand:        #D4AF37;
  --brand-light:  rgba(212,175,55,.10);
  --brand-dark:   #B8942B;
  --ink-on-brand: #0A0D18;
  --emerald:      #1FCB94;
  --emerald-dark: #17A579;
  --emerald-bg:   rgba(31,203,148,.10);
  --success:      #1FCB94;
  --success-bg:   rgba(31,203,148,.10);
  --danger:       #F0616D;
  --danger-bg:    rgba(240,97,109,.10);
  --warn:         #E0A84A;
  --warn-bg:      rgba(224,168,74,.10);
  --txt-1:        #F3EFE3;
  --txt-2:        #A9B0C4;
  --txt-3:        #6D7590;
  --border:       rgba(212,175,55,.16);
  --bg:           #060811;
  --surface:      #0C1226;
  --shadow:       0 1px 2px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.65);
}

::selection { background: rgba(212,175,55,.32); }
* { scrollbar-width: thin; scrollbar-color: rgba(212,175,55,.35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,.3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,.55); }


.main-content {
  background:
    radial-gradient(900px 500px at 92% -8%, rgba(16,29,69,.10), transparent 60%),
    radial-gradient(700px 420px at -6% 108%, rgba(212,175,55,.07), transparent 60%),
    var(--bg);
}
body.dark-theme .main-content {
  background:
    radial-gradient(900px 500px at 92% -8%, rgba(16,29,69,.75), transparent 60%),
    radial-gradient(700px 420px at -6% 108%, rgba(74,51,34,.32), transparent 60%),
    var(--bg);
}


#loading-overlay {
  background: radial-gradient(70% 60% at 50% 40%, #101D45 0%, #060B1A 55%, #07080B 100%);
}
.loading-logo-icon {
  background: linear-gradient(135deg, #F0D67A, #D4AF37 55%, #A8842A);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(240,214,122,.4), 0 0 42px rgba(212,175,55,.35);
}
.loading-logo-icon svg { stroke: #0A1430; }
.loading-logo-text strong { color: #F6F3EA; letter-spacing: .04em; }
.loading-logo-text span { color: var(--tp-gold-light); }
.loading-bar-track { background: rgba(255,255,255,.08); }
.loading-bar-fill { background: linear-gradient(90deg, #A8842A, #F0D67A, #1FCB94); }
.loading-msg { font-family: 'Work Sans', sans-serif; color: rgba(246,243,234,.45); }


.sidebar {
  --txt-1: #F6F3EA;
  --txt-2: #AEB6CC;
  --txt-3: #6F7893;
  --bg: rgba(255,255,255,.05);
  --border: rgba(212,175,55,.16);
  --brand: #D4AF37;
  --brand-light: rgba(212,175,55,.12);
  --emerald: #2BD3A0;
  --emerald-bg: rgba(43,211,160,.12);
  background: linear-gradient(185deg, #0A1430 0%, #060B1A 58%, #07080B 100%);
  border-right: 1px solid rgba(212,175,55,.22);
  box-shadow: 8px 0 40px -18px rgba(0,0,0,.7);
}
.sidebar-brand {
  background: linear-gradient(180deg, rgba(7,8,11,.55), rgba(7,8,11,0));
  border-bottom: 1px solid rgba(212,175,55,.18);
}
.brand-icon {
  background: linear-gradient(135deg, #F0D67A, #D4AF37 55%, #A8842A);
  border: none;
  border-radius: 9px;
  box-shadow: 0 0 22px rgba(212,175,55,.28);
}
.brand-icon svg { stroke: #0A1430; color: #0A1430; }
.brand-name { font-size: 1rem; letter-spacing: .03em; color: #F6F3EA; }
.brand-sub { color: var(--tp-gold); opacity: .85; }

.sidebar-label {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  padding: 6px 8px; margin-bottom: 2px; border-radius: 6px;
  font-size: .7rem; letter-spacing: .08em; color: rgba(212,175,55,.65);
  transition: color .2s, background .2s;
}
.sidebar-label:hover { color: var(--tp-gold-light); background: rgba(212,175,55,.06); }
.sidebar-label::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--tp-ease);
}
.sidebar-section.tp-collapsed .sidebar-label::after { transform: rotate(-45deg); }
.sidebar-section.tp-collapsed .nav-item:not(.active) { display: none; }
.sidebar-section:not(.tp-collapsed) .nav-item { animation: tpNavIn .22s var(--tp-ease) both; }
@keyframes tpNavIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.nav-item {
  border-radius: 10px; padding: 9px 12px;
  transition: background .2s, color .2s, transform .2s var(--tp-ease);
}
.nav-item:hover { background: rgba(212,175,55,.08); color: #F6F3EA; transform: translateX(3px); }
.nav-item:hover .nav-icon { color: var(--tp-gold); opacity: 1; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(212,175,55,.20), rgba(212,175,55,.03));
  color: var(--tp-gold-light);
  box-shadow: inset 2px 0 0 var(--tp-gold);
}
.nav-item.active .nav-icon { color: var(--tp-gold); filter: drop-shadow(0 0 6px rgba(212,175,55,.55)); }
.nav-item-ai { color: var(--tp-emerald) !important; }
.nav-item-ai.active {
  background: linear-gradient(90deg, rgba(31,203,148,.20), rgba(31,203,148,.03)) !important;
  box-shadow: inset 2px 0 0 var(--tp-emerald) !important;
}
.nav-item-predict { color: var(--tp-gold) !important; }
.nav-item-predict.active {
  background: linear-gradient(90deg, rgba(212,175,55,.22), rgba(212,175,55,.03)) !important;
  box-shadow: inset 2px 0 0 var(--tp-gold) !important;
}

.sidebar-footer { border-top: 1px solid rgba(212,175,55,.16); background: linear-gradient(0deg, rgba(74,51,34,.22), transparent); }
.user-chip { background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.14); border-radius: 12px; }
.user-avatar { background: linear-gradient(135deg, #F0D67A, #D4AF37 60%, #A8842A); color: #0A1430; }
.user-name { color: #F6F3EA; }
.btn-logout { border-color: rgba(240,97,109,.35); color: #F0616D; border-radius: 10px; }
.btn-logout:hover { background: rgba(240,97,109,.10); border-color: #F0616D; }


.topbar {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.65), transparent);
  opacity: 0; transition: opacity .3s;
}
.topbar.tp-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
.topbar.tp-scrolled::after { opacity: 1; }
.page-title { font-size: 1.12rem; letter-spacing: .01em; }
.sync-badge { border-radius: 999px; }
.sync-badge.ok .sync-dot { animation: tpPulse 2.4s ease-in-out infinite; }
@keyframes tpPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(31,203,148,.55); } 50% { box-shadow: 0 0 0 5px rgba(31,203,148,0); } }
#theme-toggle, #lang-toggle { border-radius: 10px !important; transition: all .2s var(--tp-ease) !important; }
#theme-toggle:hover, #lang-toggle:hover { border-color: var(--brand) !important; color: var(--brand) !important; transform: translateY(-1px); }


.section-header h1 { font-size: 1.6rem; letter-spacing: -.005em; }
.section-header p { font-size: .86rem; }
.page.active .section-header h1::after {
  content: ""; display: block; height: 2px; width: 0; margin-top: 12px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tp-gold), rgba(212,175,55,0));
  animation: tpRule .9s .1s var(--tp-ease) forwards;
}
@keyframes tpRule { to { width: 96px; } }


.card, .stat-card, .predict-metric, .tax-row {
  --mx: -999px; --my: -999px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--tp-ease);
}
.card {
  position: relative;
  border-radius: var(--radius);
  background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(212,175,55,.075), transparent 62%);
}
.card:hover { border-color: rgba(212,175,55,.32); }
.card-header { border-bottom-color: var(--border); }
.card-title { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 600; letter-spacing: .005em; }

.stat-card,
.stat-card.accent-blue, .stat-card.accent-green, .stat-card.accent-red,
.stat-card.accent-warn, .stat-card.accent-purple {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  background-image: radial-gradient(260px circle at var(--mx) var(--my), rgba(212,175,55,.14), transparent 65%);
}
.stat-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 42%;
  background: linear-gradient(90deg, var(--ac, var(--brand)), transparent);
  transition: width .5s var(--tp-ease);
}
.stat-card:hover { transform: translateY(-3px); border-color: rgba(212,175,55,.4); box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); }
.stat-card:hover::before { width: 100%; }
.stat-card.accent-blue   { --ac: var(--tp-gold); }
.stat-card.accent-green  { --ac: var(--tp-emerald); }
.stat-card.accent-red    { --ac: var(--danger); }
.stat-card.accent-warn   { --ac: var(--tp-bronze); }
.stat-card.accent-purple { --ac: var(--tp-brown); }
.stat-label { text-transform: none; letter-spacing: .01em; font-size: .8rem; font-weight: 600; }
.stat-value { font-size: 1.9rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.stat-value.blue, .stat-value.purple { color: var(--brand); }
.stat-value.orange { color: var(--tp-bronze); }
.tp-flash { animation: tpFlash 1.1s ease; }
@keyframes tpFlash { 0% { text-shadow: 0 0 0 rgba(212,175,55,0); } 30% { text-shadow: 0 0 20px rgba(212,175,55,.75); } 100% { text-shadow: 0 0 0 rgba(212,175,55,0); } }


.sales-hero {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 40px 32px;
  background:
    radial-gradient(120% 150% at 82% -25%, rgba(212,175,55,.26), transparent 55%),
    linear-gradient(160deg, #060B1A 0%, #0A1430 55%, #101D45 100%);
  border: 1px solid rgba(212,175,55,.30);
  box-shadow: 0 24px 60px -28px rgba(6,11,26,.9), inset 0 1px 0 rgba(240,214,122,.18);
}
.sales-hero small { color: var(--tp-gold-light); opacity: .8; letter-spacing: .06em; text-transform: none; font-size: .82rem; font-weight: 600; }
.sales-hero h1 {
  font-size: 3.4rem; font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(180deg, #FFF3C4 0%, #F0D67A 40%, #C9A227 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sales-hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,243,196,.13), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.page.active .sales-hero::after { animation: tpSheen 1.6s .25s var(--tp-ease) 1 both; }
@keyframes tpSheen { from { left: -40%; } to { left: 130%; } }


.btn, .btn-save, .config-btn { position: relative; overflow: hidden; border-radius: 9px; }
.btn { transition: transform .2s var(--tp-ease), box-shadow .2s, filter .2s, background .2s, border-color .2s; }
.btn:active, .btn-save:active, .config-btn:active { transform: translateY(0) scale(.985); }

.btn-primary, .config-btn, .config-btn.purple {
  background: linear-gradient(135deg, #F0D67A 0%, #D4AF37 52%, #A8842A 100%);
  color: #0A1430;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -10px rgba(212,175,55,.7);
}
.btn-primary:hover, .config-btn:hover, .config-btn.purple:hover {
  background: linear-gradient(135deg, #F7E39A 0%, #DDB840 52%, #B58F2E 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px -10px rgba(212,175,55,.85);
}
.btn-success, .btn-save, .config-btn.green {
  background: linear-gradient(135deg, #17B583 0%, #0B7F5E 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px -10px rgba(11,127,94,.8);
}
.btn-success:hover, .btn-save:hover, .config-btn.green:hover {
  background: linear-gradient(135deg, #1FCB94 0%, #0E9270 100%);
  opacity: 1; transform: translateY(-1px);
}
.btn-danger, .config-btn.red { background: linear-gradient(135deg, #C9485A 0%, #9E2F3E 100%); color: #fff; }
.btn-danger:hover, .config-btn.red:hover { background: linear-gradient(135deg, #D95568 0%, #AC3646 100%); transform: translateY(-1px); }
.btn-outline { border-width: 1px; border-color: var(--border); color: var(--txt-1); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); transform: translateY(-1px); }
.btn-purple {
  background: linear-gradient(135deg, #7A5636 0%, #4A3322 100%);
  color: #F6F3EA;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px -10px rgba(74,51,34,.9);
}
.btn-purple:hover { background: linear-gradient(135deg, #8A6340 0%, #573B27 100%); transform: translateY(-1px); }
.tp-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.4); transform: scale(0);
  animation: tpRipple .6s ease-out forwards;
}
@keyframes tpRipple { to { transform: scale(1); opacity: 0; } }


input[type=text], input[type=number], input[type=email], input[type=date], input[type=password], select, textarea {
  border-width: 1px; border-radius: 9px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}
body.dark-theme input:not([type=checkbox]):not([type=radio]), body.dark-theme select, body.dark-theme textarea {
  background: rgba(255,255,255,.035);
}
label.field-label { font-weight: 600; color: var(--txt-2); }

thead tr { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
th { text-transform: none; letter-spacing: .01em; font-size: .78rem; font-weight: 600; color: var(--txt-2); border-bottom: 1px solid var(--border); }
tbody tr { transition: background .18s; }
tbody tr:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--brand); }
.sede-header td {
  background: linear-gradient(90deg, rgba(122,86,54,.30), rgba(122,86,54,.06));
  color: var(--brand); letter-spacing: .04em;
}


.badge { border-radius: 999px; padding: 3px 10px; }
.badge-purple { background: rgba(176,122,69,.16); color: #7A5636; }
body.dark-theme .badge-purple { color: #D9A56C; }
.role-admin { color: #F0616D; }
.role-normal { background: rgba(212,175,55,.14); color: var(--tp-gold); border-color: rgba(212,175,55,.35); }


.ai-terminal-wrapper {
  background: #060B1A; border: 1px solid rgba(212,175,55,.24);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
}
.terminal-header, .terminal-input-row { background: #0A1430; border-color: rgba(212,175,55,.12); }
.terminal-title, .ai-msg, .msg .meta { font-family: 'Work Sans', sans-serif; }
.terminal-input-row button { background: linear-gradient(135deg, #F0D67A, #C9A227); color: #0A1430; }
.msg.user .body { background: rgba(212,175,55,.16); }
.term-prompt, .term-prompt-input { color: var(--tp-emerald); }

.predict-card { background: linear-gradient(160deg, #060B1A, #0A1430); border: 1px solid rgba(212,175,55,.2); }
.predict-card::before { height: 2px; background: linear-gradient(90deg, #A8842A, #F0D67A, #1FCB94); }
.predict-metric { border: 1px solid rgba(212,175,55,.16); border-radius: 10px; background-image: radial-gradient(240px circle at var(--mx) var(--my), rgba(212,175,55,.12), transparent 65%); }
.predict-metric:hover { border-color: rgba(212,175,55,.4); transform: translateY(-2px); }
.trend-up { color: #1FCB94; }
.trend-down { color: #F0616D; }

body .config-section-card, body.dark-theme .config-section-card {
  background: linear-gradient(160deg, #0A1430 0%, #070A16 100%);
  border: 1px solid rgba(212,175,55,.18);
  border-radius: 12px;
  transition: border-color .25s, box-shadow .25s;
}
.config-section-card:hover { border-color: rgba(212,175,55,.38); box-shadow: 0 18px 44px -24px rgba(0,0,0,.8); }
.config-section-title { color: var(--tp-gold-light); border-bottom-color: rgba(212,175,55,.14); font-family: 'Fraunces', serif; font-size: .95rem; }
.config-label { color: #AEB6CC; }
.config-input, .config-select { background: #060B1A; border-color: rgba(212,175,55,.2); color: #F6F3EA; }
.config-input:focus, .config-select:focus { border-color: var(--tp-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.16); }
.user-slot { background: rgba(255,255,255,.03); border-color: rgba(212,175,55,.14); transition: border-color .2s, transform .2s var(--tp-ease); }
.user-slot:hover { border-color: rgba(212,175,55,.4); transform: translateX(2px); }
.slot-limit-badge { background: rgba(212,175,55,.10); border-color: rgba(212,175,55,.35); color: var(--tp-gold-light); }

.security-hub-preview { background: linear-gradient(135deg, #060B1A 0%, #0A1430 100%); border: 1px solid rgba(31,203,148,.28); }
.security-metric { background: rgba(255,255,255,.04); border-color: rgba(212,175,55,.12); }
.device-row { background: rgba(255,255,255,.035); border-color: rgba(212,175,55,.10); }
.status-online { background: #1FCB94; box-shadow: 0 0 8px #1FCB94; }
.status-idle { background: #E0A84A; }

.insight-card-item { border-radius: 10px; border-left: 2px solid var(--brand); }
.tax-row { border-radius: 10px; }
.tax-row:hover { border-color: rgba(212,175,55,.35); }
.danger-zone { border-radius: 12px; }


button:focus-visible, .nav-item:focus-visible, a:focus-visible {
  outline: 2px solid var(--tp-gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}