:root{
  /* ICCASS Product UI Tokens — dark default */
  --bg: #070A10;
  --bg-elev: #0B0F19;
  --surface-1: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.085);
  --surface-3: rgba(255,255,255,0.11);
  --stroke: rgba(255,255,255,0.14);
  --stroke-2: rgba(255,255,255,0.14);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.74);
  --muted-2: rgba(255,255,255,0.60);

  --accent: #79B4FF;
  --accent-2: #A58BFF;
  --danger: #FF5A66;
  --warning: #FFCA5C;
  --success: #4CE08A;

  --focus-ring: rgba(110,168,255,0.42);

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow: 0 18px 50px rgba(0,0,0,0.55);
  --shadow-sm: 0 10px 26px rgba(0,0,0,0.45);

  --ease: cubic-bezier(.22,.9,.2,1);
  --dur-1: 140ms;
  --dur-2: 220ms;
}

html[data-theme="light"]{
  color-scheme: light;
  --bg: #EEF3FA;
  --bg-elev: #F7FAFF;
  --surface-1: rgba(255,255,255,0.90);
  --surface-2: rgba(255,255,255,0.96);
  --surface-3: rgba(255,255,255,0.98);
  --stroke: rgba(12,18,34,0.16);
  --stroke-2: rgba(12,18,34,0.16);
  --text: rgba(12,18,34,0.92);
  --muted: rgba(12,18,34,0.72);
  --muted-2: rgba(12,18,34,0.60);

  /* Light mode contrast correction */
  --accent: #2E6DFF;
  --danger: #D92D20;
  --warning: #B54708;
  --success: #027A48;

  --shadow: 0 20px 55px rgba(12,18,34,0.18);
  --shadow-sm: 0 10px 24px rgba(12,18,34,0.12);

  --focus-ring: rgba(46,109,255,0.36);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(1200px 800px at 18% 0%, rgba(110,168,255,0.14), transparent 55%),
    radial-gradient(900px 700px at 85% 10%, rgba(165,139,255,0.12), transparent 55%),
    var(--bg);
  color: var(--text);
  /* Default visible so public pages (e.g. landing) never render blank.
     App pages opt-in to fades via .page-fx added by js/auth.js. */
  opacity: 1;
  transition: opacity 160ms var(--ease);
}
/* App page transitions: content fades upward (opt-in via .page-fx). */
body.page-fx{opacity:1}
body.page-fx .content{opacity:0; transform: translateY(10px)}
body.page-fx.page-ready .content{opacity:1; transform:none; transition: opacity 260ms var(--ease), transform 300ms var(--ease)}
body.page-fx.page-exit .content{opacity:0; transform: translateY(-6px); transition: opacity 140ms var(--ease), transform 180ms var(--ease)}
a{color:inherit;text-decoration:none}
small{color:var(--muted)}

/* Smooth theme switching (applied briefly via js/theme.js) */
html.theme-transition, html.theme-transition *{
  transition:
    background-color 320ms var(--ease),
    color 320ms var(--ease),
    border-color 320ms var(--ease),
    box-shadow 320ms var(--ease),
    opacity 320ms var(--ease),
    filter 320ms var(--ease) !important;
}

/* Layout shell */
.shell{display:block}
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  width: 292px;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
  padding: 18px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
    radial-gradient(900px 500px at 20% 10%, rgba(110,168,255,0.10), transparent 55%),
    rgba(8,10,14,0.35);
  backdrop-filter: saturate(120%) blur(12px);
  border-right: 1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  gap: 14px;
}

html[data-theme="light"] .sidebar{
  /* Light mode: simplify for clarity (avoid low-contrast visual noise) */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,248,255,0.92)),
    rgba(255,255,255,0.74);
  border-right: 1px solid var(--stroke);
}









html[data-sidebar="collapsed"] .sidebar{width: 86px; padding: 18px 12px}
html[data-sidebar="collapsed"] .main{margin-left: 86px}
html[data-sidebar="collapsed"] .brandmark .tag{display:none}
html[data-sidebar="collapsed"] .nav a span:last-child{display:none}
html[data-sidebar="collapsed"] .nav .section{display:none}
html[data-sidebar="collapsed"] .sidebar-actions .btn span:last-child{display:none}
html[data-sidebar="collapsed"] .userchip{display:none}

.brandrow{display:flex;align-items:center;gap:10px}
.iconbtn{padding: 10px; border-radius: 14px}

.main{margin-left:292px;min-width:0;display:flex;flex-direction:column;min-height:100vh}

/* Sidebar collapsed mode */
html[data-sidebar="collapsed"] .sidebar{width: 86px; padding: 18px 12px}
html[data-sidebar="collapsed"] .main{margin-left:86px}
html[data-sidebar="collapsed"] .brandmark .tag{display:none}
html[data-sidebar="collapsed"] .nav a span:nth-child(2){display:none}
html[data-sidebar="collapsed"] .nav .section{display:none}
html[data-sidebar="collapsed"] .userchip .who{display:none}
html[data-sidebar="collapsed"] .sidebar-actions{flex-direction:column; align-items:stretch}
html[data-sidebar="collapsed"] .btn.danger{width:100%}
html[data-sidebar="collapsed"] .btn.ghost{width:100%; justify-content:center}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  height: 66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 22px;
  background: rgba(10,12,18,0.40);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: saturate(120%) blur(10px);
}
html[data-theme="light"] .topbar{ background: rgba(238,243,250,0.72); }

.topbar h2{margin:0;font-size:14px;letter-spacing:0.2px;color:var(--text)}
.content{padding: 22px; overflow:auto; flex:1}

/* Sidebar brand + nav */
.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--surface-1);
}
.brand:hover{background:var(--surface-2);border-color:var(--stroke-2)}
.brandmark{display:flex;flex-direction:column;gap:6px;min-width:0}
.brandmark .word{
  font-weight: 820;
  font-size: 13.5px;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
html[data-theme="light"] .brandmark .word{color:rgba(12,18,34,0.92)}
.brandmark .tag{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;flex-direction:column;gap:8px; padding-top: 6px}
.nav .section{margin-top:10px;color:var(--muted-2);font-size:11px;padding: 8px 10px 2px;letter-spacing:0.8px;text-transform:uppercase}

.nav a{
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--text);
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav a:hover{background:var(--surface-1);border-color:var(--stroke);transform: translateY(-1px)}
.nav a.active{background:rgba(110,168,255,0.14);border-color:rgba(110,168,255,0.22)}
.nav a.active::before{
  content:"";
  position:absolute;
  left:-6px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.nav-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:0.9}
.nav-ico svg{width:18px;height:18px}
.nav-ico path{fill: currentColor; opacity:0.95}

/* Light mode: ensure active nav state remains clearly visible */
html[data-theme="light"] .nav a.active{
  background: rgba(46,109,255,0.10);
  border-color: rgba(46,109,255,0.22);
}

/* Primary CTA nav item */
/* Press shimmer (applied via JS on click only) */
.nav a::after,
.btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-140%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: 0;
}
.press-shimmer::after{
  opacity: 1;
  transition: transform 700ms var(--ease), opacity 120ms var(--ease);
  transform: translateX(140%);
}

.sidebar-footer{
  margin-top:auto;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.userchip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--surface-1);
}
.userchip .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.userchip .who strong{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userchip .who span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar-actions{display:flex;gap:8px;align-items:center;justify-content:space-between}

/* Buttons */
.btn{
  position: relative;
  overflow: hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--surface-1);
  color: var(--text);
  cursor:pointer;
  font-weight: 680;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn:hover{background:var(--surface-2);border-color:var(--stroke-2);transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-1);border-color:var(--stroke)}

.btn.primary{
  background: linear-gradient(135deg, rgba(110,168,255,0.70), rgba(165,139,255,0.55));
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.94);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  overflow:hidden;
}
/* hover shimmer removed; shimmer occurs on press via .press-shimmer */

.btn.danger{background: rgba(255,90,102,0.10); border-color: rgba(255,90,102,0.22); color: rgba(255,90,102,0.92)}
.btn.danger:hover{background: rgba(255,90,102,0.14); border-color: rgba(255,90,102,0.28)}

/* Inputs */
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:var(--muted)}
input,select,textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--surface-1);
  color: var(--text);
  outline:none;
}
input::placeholder,textarea::placeholder{color: var(--muted-2); opacity: 1;}
input:focus,select:focus,textarea:focus,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color: var(--focus-ring);
  /* Fallback first (then enhanced if color-mix is supported) */
  box-shadow: 0 0 0 4px rgba(110,168,255,0.14);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-ring) 35%, transparent);
}

html[data-theme="light"] input:focus,html[data-theme="light"] select:focus,html[data-theme="light"] textarea:focus,
html[data-theme="light"] input:focus-visible,html[data-theme="light"] select:focus-visible,html[data-theme="light"] textarea:focus-visible{
  box-shadow: 0 0 0 4px rgba(46,109,255,0.12);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-ring) 35%, transparent);
}

/* Prefer keyboard-visible focus where supported */
:where(a,button,input,select,textarea,[role="button"]):focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
textarea{resize:vertical;min-height:120px}

/* Surfaces */
.surface{
  border: 1px solid var(--stroke);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card{border: 1px solid var(--stroke); background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px}

.hr{height:1px;background:var(--stroke);margin:14px 0}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--stroke);text-align:left;font-size:13px}
.table th{color:var(--muted);font-weight:750;background: var(--surface-1)}
.table tr:hover td{background: rgba(110,168,255,0.06)}

/* Chips */
.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--stroke);font-size:12px;color:var(--muted);background: var(--surface-1)}
.chip.high{color: rgba(255,202,92,0.96); border-color: rgba(255,202,92,0.24); background: rgba(255,202,92,0.10)}
.chip.critical{color: rgba(255,90,102,0.94); border-color: rgba(255,90,102,0.26); background: rgba(255,90,102,0.10)}
.chip.open{color: rgba(110,168,255,0.95); border-color: rgba(110,168,255,0.24); background: rgba(110,168,255,0.10)}
.chip.closed{color: rgba(76,224,138,0.95); border-color: rgba(76,224,138,0.22); background: rgba(76,224,138,0.10)}

/* Light mode: semantic chips must remain readable (avoid yellow-on-white) */
html[data-theme="light"] .chip.high{color: rgba(181,71,8,0.95); border-color: rgba(181,71,8,0.22); background: rgba(181,71,8,0.08)}
html[data-theme="light"] .chip.critical{color: rgba(217,45,32,0.95); border-color: rgba(217,45,32,0.22); background: rgba(217,45,32,0.08)}
html[data-theme="light"] .chip.open{color: rgba(46,109,255,0.95); border-color: rgba(46,109,255,0.22); background: rgba(46,109,255,0.08)}
html[data-theme="light"] .chip.closed{color: rgba(2,122,72,0.95); border-color: rgba(2,122,72,0.22); background: rgba(2,122,72,0.08)}

/* Responsive */
@media (max-width: 980px){
  .sidebar{display:none}
  .main{margin-left:0}
  .content{padding: 16px}
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .nav a,.btn{transition:none !important}
  .press-shimmer::after{transition:none !important}
}