/* ── CSS Variables ───────────────────────────────────────────────────────── */
:root {
  --bg:        #040a12;
  --bg2:       rgba(9,23,36,.62);
  --bg3:       rgba(13,32,49,.55);
  --border:    rgba(46,230,255,.16);
  --border2:   rgba(46,230,255,.28);
  --accent:    #2ee6ff;
  --accent2:   #0d94b8;
  --accent3:   #9ff6ff;
  --warn:      #ffb020;
  --danger:    #ff3d5e;
  --text:      #d7eef8;
  --text2:     #6f9bb0;
  --text3:     #3a5a6e;
  --success:   #35f0b4;
  --font-ui:   'Rajdhani', Bahnschrift, 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Orbitron', Bahnschrift, 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace;
  --radius:    2px;
  --shadow:    0 4px 28px rgba(0,0,0,.55);
  --glow:      0 0 24px rgba(46,230,255,.18);
  --glass-blur: blur(16px) saturate(150%);
  /* Structural knobs the 4 named themes below (see [data-theme-name])
     override, this is what makes a theme change more than a recolor:
     headings switch between tracked all-caps (the sci-fi HUD look) and
     plain sentence case, not just which color they render in. */
  --heading-transform: uppercase;
  --heading-tracking-scale: 1;
  /* The two "atmospheric" flourishes (background glow, scanline texture)
     that most define the sci-fi HUD look, professional themes turn these
     off entirely (see [data-theme-name] below) rather than just recolor
     them, since a subtler cyan glow would still read as the same design. */
  --bg-glow-1: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(46,230,255,.07) 0%, transparent 60%);
  --bg-glow-2: radial-gradient(ellipse 700px 500px at 100% 110%, rgba(46,230,255,.05) 0%, transparent 55%);
  --scanline-opacity: .025;
}
[data-theme="light"] {
  /* A real light palette: cool paper-white surfaces, ink-coloured text, and a deeper teal accent that stays
     readable on white (the dark theme's bright cyan is only legible on dark). */
  --bg:      #eef1f5;
  --bg2:     #ffffff;
  --bg3:     #f4f6f9;
  --border:  #d9e0e8;
  --border2: #bcc8d6;
  --accent:  #0b7a96;
  --accent2: #075f77;
  --accent3: #0e7490;
  --text:    #16222f;
  --text2:   #46576a;
  --text3:   #5f7185;
  --success: #08784f;
  --warn:    #b45309;
  --danger:  #c8223f;
  --shadow:  0 1px 2px rgba(16,32,48,.06), 0 4px 14px rgba(16,32,48,.06);
  --glow:    none;
}

/* ── Colour palettes ─────────────────────────────────────────────────────────
   Admin-selectable in Config → Branding & Theme. Each palette is a FULL theme
   background/surface/border/text colours as well as accents, for both
   dark and light mode, not just an accent-colour swap. Font is a separate,
   independently selectable control (see [data-font] below). */

/* Cyan (default), same as the base :root / [data-theme="light"] above, no override needed */

[data-palette="crimson"] {
  --accent: #e60000; --accent2: #b30000; --accent3: #ff4d4d;
  --glow: 0 0 20px rgba(230,0,0,0.15);
}
[data-theme="dark"][data-palette="crimson"] {
  --bg: #120505; --bg2: #1a0808; --bg3: #220a0a; --border: #3a1414; --border2: #4a1a1a;
}
[data-theme="light"][data-palette="crimson"] {
  --bg: #fff5f5; --bg2: #ffffff; --bg3: #ffe8e8; --border: #f0c8c8; --border2: #e0a8a8;
  --text: #2a0a0a; --text2: #6b3030; --text3: #a06060; --glow: 0 0 20px rgba(230,0,0,0.1);
}

[data-palette="emerald"] {
  --accent: #00c977; --accent2: #00a862; --accent3: #6effc0;
  --glow: 0 0 20px rgba(0,201,119,0.15);
}
[data-theme="dark"][data-palette="emerald"] {
  --bg: #04120b; --bg2: #071a10; --bg3: #0a2216; --border: #143a28; --border2: #1a4a32;
}
[data-theme="light"][data-palette="emerald"] {
  --bg: #f2fbf6; --bg2: #ffffff; --bg3: #e3f7ea; --border: #c2e8d0; --border2: #a0d8b5;
  --text: #06301c; --text2: #35634a; --text3: #66907a; --glow: 0 0 20px rgba(0,201,119,0.1);
}

[data-palette="violet"] {
  --accent: #a855f7; --accent2: #7e22ce; --accent3: #d8b4fe;
  --glow: 0 0 20px rgba(168,85,247,0.15);
}
[data-theme="dark"][data-palette="violet"] {
  --bg: #0d0714; --bg2: #130a1e; --bg3: #190d28; --border: #2e1a45; --border2: #3c2258;
}
[data-theme="light"][data-palette="violet"] {
  --bg: #faf5ff; --bg2: #ffffff; --bg3: #f0e4fb; --border: #ddc6f2; --border2: #c8a5e8;
  --text: #26123d; --text2: #5a3d76; --text3: #8a70a3; --glow: 0 0 20px rgba(168,85,247,0.1);
}

[data-palette="slate"] {
  --accent: #64748b; --accent2: #475569; --accent3: #cbd5e1;
  --glow: 0 0 20px rgba(100,116,139,0.15);
}
[data-theme="dark"][data-palette="slate"] {
  --bg: #0b0e13; --bg2: #10141b; --bg3: #161b24; --border: #263041; --border2: #303c50;
}
[data-theme="light"][data-palette="slate"] {
  --bg: #f4f6f9; --bg2: #ffffff; --bg3: #e9edf3; --border: #cdd6e2; --border2: #b3c0d1;
  --text: #1a2230; --text2: #4b5b70; --text3: #7a8ba0; --glow: 0 0 20px rgba(100,116,139,0.1);
}

/* ── Fonts ────────────────────────────────────────────────────────────────
   Independently selectable from the colour palette in Config → Branding. */
[data-font="syne"]         { --font-ui: 'Syne', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; }
[data-font="inter"]        { --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; }
[data-font="ibm_plex"]     { --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; }
[data-font="space_grotesk"]{ --font-ui: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; }
[data-font="mono"]         { --font-ui: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace; }

/* ── Named themes ─────────────────────────────────────────────────────────
   Admin-selectable in Config → Branding & Theme (one choice, not a
   combinable palette/font grid), each is a complete, coherent design:
   typography, corner radius, shadow/glow treatment, background texture and
   colour together, not a recolor of the same sci-fi-HUD skeleton. Dark/
   light mode (see [data-theme] above) stays an independent, per-user
   choice on top of whichever of these an admin picks, so each theme
   defines both a dark and a light variant of its own palette.

   "cyberpunk" is the original look and needs no block here, it's exactly
   what :root / [data-theme="light"] above already describe, so an
   existing install's appearance is completely unchanged unless an admin
   actively picks a different theme. */

/* Corporate: clean enterprise SaaS: rounded, flat, quiet. Inter
   throughout, no glow/blur/scanline, sentence-case headings. */
[data-theme-name="corporate"] {
  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace;
  --radius: 10px;
  --heading-transform: none; --heading-tracking-scale: 0;
  --glass-blur: blur(0px);
  --bg-glow-1: none; --bg-glow-2: none; --login-glow-1: none; --login-glow-2: none;
  --scanline-opacity: 0;
}
[data-theme="dark"][data-theme-name="corporate"] {
  --bg: #0f1420; --bg2: #161d2b; --bg3: #1c2434;
  --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.14);
  --accent: #3b82f6; --accent2: #2563eb; --accent3: #93c5fd;
  --text: #e5e9f0; --text2: #8b93a3; --text3: #5b6272;
  --shadow: 0 2px 12px rgba(0,0,0,.35); --glow: 0 0 0 rgba(0,0,0,0);
}
[data-theme="light"][data-theme-name="corporate"] {
  --bg: #f7f8fa; --bg2: #ffffff; --bg3: #eef1f5;
  --border: #e1e5ea; --border2: #cdd4dd;
  --accent: #2563eb; --accent2: #1d4ed8; --accent3: #60a5fa;
  --text: #161b26; --text2: #4b5468; --text3: #7c8494;
  --shadow: 0 2px 12px rgba(15,23,42,.08); --glow: 0 0 0 rgba(0,0,0,0);
}

/* Midnight: a refined, premium dark theme (still selectable in light
   mode, but designed dark-first): warm charcoal, muted gold accent,
   Space Grotesk headings, gentle depth instead of neon glow. */
[data-theme-name="midnight"] {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace;
  --radius: 6px;
  --heading-transform: none; --heading-tracking-scale: 1;
  --glass-blur: blur(8px) saturate(120%);
  --bg-glow-1: none; --bg-glow-2: none; --login-glow-1: none; --login-glow-2: none;
  --scanline-opacity: 0;
}
[data-theme="dark"][data-theme-name="midnight"] {
  --bg: #0a0a0d; --bg2: #141419; --bg3: #1c1c24;
  --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.14);
  --accent: #d4a94a; --accent2: #a8822f; --accent3: #e8c97a;
  --text: #eae6da; --text2: #9b9488; --text3: #5c574d;
  --shadow: 0 8px 32px rgba(0,0,0,.5); --glow: 0 0 16px rgba(212,169,74,.1);
}
[data-theme="light"][data-theme-name="midnight"] {
  --bg: #faf9f6; --bg2: #ffffff; --bg3: #f0ede5;
  --border: #e0dccf; --border2: #cdc6b3;
  --accent: #a8822f; --accent2: #8a6a22; --accent3: #d4a94a;
  --text: #2a2620; --text2: #5c5648; --text3: #8a8373;
  --shadow: 0 4px 20px rgba(0,0,0,.08); --glow: 0 0 14px rgba(168,130,47,.08);
}

/* Daylight: warm, approachable, light-first SaaS: soft rounded corners,
   Syne display headings over Inter body text, teal accent. */
[data-theme-name="daylight"] {
  --font-display: 'Syne', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace;
  --radius: 14px;
  --heading-transform: none; --heading-tracking-scale: .5;
  --glass-blur: blur(6px) saturate(130%);
  --bg-glow-1: none; --bg-glow-2: none; --login-glow-1: none; --login-glow-2: none;
  --scanline-opacity: 0;
}
[data-theme="light"][data-theme-name="daylight"] {
  --bg: #fffaf3; --bg2: #ffffff; --bg3: #fef3e7;
  --border: #f0dfc8; --border2: #e2cba8;
  --accent: #0d9488; --accent2: #0b7a70; --accent3: #5eead4;
  --text: #2b2620; --text2: #6b5d4f; --text3: #a3927e;
  --shadow: 0 4px 20px rgba(120,90,40,.08); --glow: 0 0 0 rgba(0,0,0,0);
}
[data-theme="dark"][data-theme-name="daylight"] {
  --bg: #14110d; --bg2: #1c1812; --bg3: #241f17;
  --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.14);
  --accent: #2dd4bf; --accent2: #14b8a6; --accent3: #99f6e4;
  --text: #f2ece2; --text2: #b3a996; --text3: #6e6656;
  --shadow: 0 4px 20px rgba(0,0,0,.4); --glow: 0 0 0 rgba(0,0,0,0);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:13.5px;font-weight:500;
  transition:background .3s,color .3s;
  background-image: var(--bg-glow-1), var(--bg-glow-2);
}
body::before{
  /* Faint scanline texture over the whole app, the one atmospheric flourish,
     kept subtle enough not to fight legibility. Opacity is themed via
     --scanline-opacity (professional themes set this to 0) rather than
     display:none, so the [data-theme="light"] rule below still applies on
     top of whatever the active theme already set. */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(180deg,rgba(46,230,255,var(--scanline-opacity)) 0px,rgba(46,230,255,var(--scanline-opacity)) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:screen;
}
[data-theme="light"] body::before{display:none}
button{cursor:pointer;font-family:inherit;font-size:inherit;border:none;outline:none;background:none;color:inherit;text-align:left}
input,textarea,select{font-family:var(--font-mono);outline:none;border:none;background:transparent}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{font-family:var(--font-display)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}

/* ── Mobile nav (hamburger + drawer + backdrop) ─────────────────────────────
   Hidden/inert on desktop by default; the @media block near the bottom of
   this stylesheet is what actually turns the sidebar into an off-canvas
   drawer below 768px. Kept as its own block (rather than inline in the
   .sidebar rule) so the desktop layout above is untouched. */
.hamburger-btn{
  display:none;
  align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius);
  background:transparent;color:var(--text);
  font-size:20px;line-height:1;
}
.hamburger-btn:hover{background:var(--bg3)}
.sidebar-backdrop{
  display:none;
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.5);
  z-index:99;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar{
  width:220px;min-width:220px;
  background:var(--bg2);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--border);
  box-shadow:inset -1px 0 0 rgba(46,230,255,.06);
  display:flex;flex-direction:column;
  transition:width .3s;
  z-index:100;
}
.sidebar-logo{
  padding:22px 20px 18px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.sidebar-logo::after{
  content:'';position:absolute;left:20px;right:20px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 70%);
  box-shadow:0 0 6px var(--accent);
}
.logo-title{
  font-family:var(--font-display);
  font-size:17px;font-weight:900;letter-spacing:calc(1px * var(--heading-tracking-scale,1));text-transform:var(--heading-transform,uppercase);
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.logo-sub{font-size:9px;color:var(--text3);letter-spacing:calc(3px * var(--heading-tracking-scale,1));text-transform:var(--heading-transform,uppercase);margin-top:4px;font-family:var(--font-mono)}

.nav{flex:1;padding:12px 0;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 20px;margin:0 8px;
  color:var(--text2);font-size:12px;font-weight:600;text-transform:var(--heading-transform,uppercase);
  cursor:pointer;transition:all .2s;
  border-left:2px solid transparent;
  letter-spacing:1px;
  position:relative;
}
.nav-item:hover{color:var(--text);background:var(--bg3)}
.nav-item.active{
  color:var(--accent);background:var(--bg3);
  border-left-color:var(--accent);
  box-shadow:inset 0 0 12px rgba(46,230,255,.08);
}
.nav-item.active::before{
  /* corner-bracket tick, the app's recurring HUD-frame motif, echoed here
     at nav-item scale */
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:2px;
  box-shadow:0 -7px 0 var(--accent), 0 7px 0 var(--accent);
}
.nav-icon{display:none;font-size:16px;width:20px;text-align:center;filter:none;align-items:center;justify-content:center}
.nav-icon svg{display:block}
/* The open menu is text only; the icons appear only when it is collapsed to a narrow strip */
.nav-collapse{
  display:flex;align-items:center;gap:8px;margin:0 8px 8px;padding:8px 20px;
  color:var(--text3);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:var(--heading-transform,uppercase);
  background:transparent;cursor:pointer;border-left:2px solid transparent;
}
.nav-collapse:hover{color:var(--text);background:var(--bg3)}
.nav-tip{
  position:fixed;transform:translateY(-50%);z-index:10000;pointer-events:none;white-space:nowrap;
  background:var(--bg3);color:var(--text);border:1px solid var(--border2);border-radius:var(--radius);
  padding:6px 10px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:var(--heading-transform,uppercase);
  font-family:var(--font-mono);box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.sidebar.collapsed{width:64px;min-width:64px}
.sidebar.collapsed .sidebar-logo{padding:18px 0 14px;display:flex;justify-content:center}
.sidebar.collapsed .sidebar-logo::after{left:12px;right:12px}
.sidebar.collapsed .nav-item{justify-content:center;padding:8px 0;margin:1px 8px}
.sidebar.collapsed .nav-item .nav-icon{display:inline-flex}
.sidebar.collapsed .nav-item .nav-label{display:none}
.sidebar.collapsed .nav-collapse{justify-content:center;padding:8px 0}
.sidebar.collapsed .sidebar-footer{padding:12px 0;align-items:center}
.sidebar.collapsed .user-info{justify-content:center}
.nav-badge{
  margin-left:auto;background:var(--danger);
  color:#fff;font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:2px;
}

.sidebar-footer{
  padding:16px 20px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
}
.user-info{display:flex;align-items:center;gap:8px}
.user-avatar{
  width:32px;height:32px;border-radius:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  display:flex;align-items:flex-start;justify-content:center;
  font-size:13px;font-weight:700;color:#000;
  box-shadow:0 0 10px rgba(46,230,255,.35);
}
.user-name{font-size:13px;font-weight:600}
.user-role{font-size:10px;color:var(--accent);text-transform:var(--heading-transform,uppercase);letter-spacing:calc(1px * var(--heading-tracking-scale,1));font-family:var(--font-mono)}

/* ── Main content ────────────────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{
  height:52px;min-height:52px;
  background:var(--bg2);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(46,230,255,.08);
  display:flex;align-items:center;padding:0 24px;gap:16px;
}
.topbar-title{font-size:14px;font-weight:700;flex:1;font-family:var(--font-display);text-transform:var(--heading-transform,uppercase);letter-spacing:calc(1.5px * var(--heading-tracking-scale,1))}
.topbar-actions{display:flex;align-items:center;gap:8px}

.content{flex:1;overflow-y:auto;padding:24px}

/* ── Cards ───────────────────────────────────────────────────────────────── */
/* Signature element: a viewfinder/HUD-panel corner frame, echoed at every
   scale in this theme (cards, stat-cards, the modal). Two small L-brackets
   pinned to the top corners, drawn with box-shadow rather than extra
   elements so it stays cheap on pages with many cards. */
.card{
  background:linear-gradient(135deg,rgba(255,255,255,.045) 0%,transparent 35%),var(--bg2);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow);
  position:relative;
}
.card::before,.card::after{
  content:'';position:absolute;top:-1px;width:14px;height:14px;
  border-top:2px solid var(--accent);pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(46,230,255,.5));
}
.card::before{left:-1px;border-left:2px solid var(--accent)}
.card::after{right:-1px;border-right:2px solid var(--accent)}
.card-title{
  font-size:10.5px;font-weight:700;text-transform:var(--heading-transform,uppercase);letter-spacing:calc(2px * var(--heading-tracking-scale,1));color:var(--accent3);
  margin-bottom:16px;font-family:var(--font-mono);
  opacity:.85;
}

/* ── Stat grid ───────────────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
  background:linear-gradient(135deg,rgba(255,255,255,.045) 0%,transparent 35%),var(--bg2);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent-color, var(--accent));
  box-shadow:0 0 8px var(--accent-color, var(--accent));
}
.stat-value{font-size:28px;font-weight:800;font-family:var(--font-mono);line-height:1;text-shadow:0 0 12px rgba(46,230,255,.2)}
.stat-label{font-size:10px;color:var(--text3);text-transform:var(--heading-transform,uppercase);letter-spacing:calc(1.5px * var(--heading-tracking-scale,1));margin-top:6px;font-family:var(--font-mono)}
.stat-delta{font-size:11px;margin-top:4px}

/* ── Table ───────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;padding:9px 14px;
  font-size:9.5px;font-weight:700;letter-spacing:calc(2px * var(--heading-tracking-scale,1));text-transform:var(--heading-transform,uppercase);
  color:var(--accent3);border-bottom:1px solid var(--border);
  background:var(--bg3);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  font-family:var(--font-mono);opacity:.85;
}
td{
  padding:11px 14px;font-size:12.5px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
tr:hover td{background:var(--bg3)}

/* ── Status badges ───────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:2px;
  font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:var(--heading-transform,uppercase);font-family:var(--font-mono);
  border:1px solid currentColor;
}
.badge::before{content:'';width:5px;height:5px;background:currentColor;transform:rotate(45deg);flex-shrink:0}
.badge-done{background:rgba(53,240,180,.1);color:var(--success)}
.badge-loop{background:rgba(255,176,32,.1);color:var(--warn)}
.badge-blocked{background:rgba(255,61,94,.1);color:var(--danger)}
.badge-max_steps{background:rgba(255,61,94,.1);color:var(--danger)}
.badge-running{background:rgba(46,230,255,.1);color:var(--accent)}
.badge-declined{background:rgba(255,176,32,.1);color:var(--warn)}
.badge-info{background:rgba(46,230,255,.08);color:var(--text2)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 15px;border-radius:var(--radius);
  font-size:12px;font-weight:700;text-transform:var(--heading-transform,uppercase);
  transition:all .2s;letter-spacing:1px;font-family:var(--font-ui);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{background:var(--accent2);box-shadow:0 0 18px rgba(46,230,255,.4)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px rgba(46,230,255,.15)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{opacity:.85}
.btn-sm{padding:4px 9px;font-size:11px}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:10px;font-weight:700;color:var(--accent3);text-transform:var(--heading-transform,uppercase);letter-spacing:calc(1.5px * var(--heading-tracking-scale,1));margin-bottom:6px;font-family:var(--font-mono);opacity:.85}
.form-input{
  width:100%;padding:9px 12px;
  background:var(--bg3);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  font-family:var(--font-mono);font-size:12.5px;
  transition:border .2s,box-shadow .2s;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,230,255,.12),0 0 16px rgba(46,230,255,.1)}
.form-select{appearance:none;cursor:pointer}
.form-textarea{resize:vertical;min-height:120px;line-height:1.6}

/* ── Code editor ─────────────────────────────────────────────────────────── */
.code-editor{
  width:100%;min-height:400px;
  background:var(--bg3);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  color:var(--text);font-family:var(--font-mono);font-size:12.5px;
  line-height:1.7;resize:vertical;
}
.code-editor:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,230,255,.12)}

/* ── Console ─────────────────────────────────────────────────────────────── */
.console{
  background:var(--bg3);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.8;
  height:400px;overflow-y:auto;
  box-shadow:inset 0 0 30px rgba(46,230,255,.03);
}
.log-info{color:var(--text2)}
.log-success{color:var(--success)}
.log-warn{color:var(--warn)}
.log-error{color:var(--danger)}
.log-accent{color:var(--accent)}
.log-ts{color:var(--text3);margin-right:8px}

/* ── Chat ────────────────────────────────────────────────────────────────── */
.chat-msg{display:flex;gap:10px;max-width:78%;animation:fadeIn .25s ease forwards}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse}
.chat-msg.assistant{align-self:flex-start}
.chat-avatar{
  width:28px;height:28px;border-radius:2px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  box-shadow:0 0 10px rgba(46,230,255,.15);
}
.chat-msg.user .chat-avatar{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#000}
.chat-msg.assistant .chat-avatar{background:var(--bg3);border:1px solid var(--border2);color:var(--accent)}
.chat-bubble{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 14px;font-size:13.5px;line-height:1.6;word-break:break-word;
}
.chat-msg.user .chat-bubble{background:rgba(46,230,255,.08);border-color:var(--border2)}
.chat-bubble strong{font-weight:800;color:var(--text)}
.chat-bubble em{font-style:italic}
.chat-bubble ul,.chat-bubble ol{line-height:1.55}
.chat-drop-active{border-color:var(--accent)!important;box-shadow:0 0 18px rgba(46,230,255,.12)}
.chat-file-chip{display:flex;align-items:center;gap:6px;max-width:260px;padding:5px 8px;border:1px solid var(--border);background:var(--bg2);border-radius:4px;font-size:11px}
.chat-file-chip span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-file-chip button{border:0;background:transparent;color:var(--text2);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.chat-msg.assistant .chat-bubble{background:var(--bg3)}
.chat-ts{font-size:10px;color:var(--text3);margin-top:4px;font-family:var(--font-mono)}
.chat-typing span{
  display:inline-block;width:5px;height:5px;margin:0 1px;border-radius:50%;
  background:var(--accent);animation:pulse 1s ease-in-out infinite;
}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(2,6,12,.82);
  display:flex;align-items:flex-start;justify-content:center;
  z-index:9999;backdrop-filter:blur(4px);
  overflow-y:auto;
  padding:40px 20px;
}
.modal{
  background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 30%),var(--bg2);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;
  width:540px;max-width:calc(100vw - 40px);
  max-height:85vh;max-height:85dvh;overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 40px rgba(46,230,255,.08);
  position:relative;flex-shrink:0;
  margin:0 auto;
}
.modal::before,.modal::after{
  content:'';position:absolute;top:-1px;width:18px;height:18px;pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(46,230,255,.5));
}
.modal::before{left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.modal::after{right:-1px;border-top:2px solid var(--accent);border-right:2px solid var(--accent)}
.modal-title{font-size:15px;font-weight:700;margin-bottom:20px;font-family:var(--font-display);text-transform:var(--heading-transform,uppercase);letter-spacing:calc(1.5px * var(--heading-tracking-scale,1))}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}

/* ── Toggle ──────────────────────────────────────────────────────────────── */
.toggle{
  width:40px;height:22px;border-radius:11px;
  background:var(--border2);position:relative;cursor:pointer;
  transition:background .2s;
}
.toggle.on{background:var(--accent)}
.toggle::after{
  content:'';position:absolute;
  width:16px;height:16px;border-radius:50%;
  background:#fff;top:3px;left:3px;
  transition:transform .2s;
}
.toggle.on::after{transform:translateX(18px)}

/* ── Login screen ────────────────────────────────────────────────────────── */
.login-screen{
  /* Centered both axes, at all viewport sizes, was align-items:flex-start,
     which only centered horizontally and pinned the box to the top of the
     page. padding + min-height (not height) means a viewport too short to
     center the box still just scrolls instead of clipping it. */
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;box-sizing:border-box;
  background:var(--bg);
  background-image: var(--login-glow-1, radial-gradient(ellipse at 20% 50%,rgba(46,230,255,.08) 0%,transparent 60%)),
                     var(--login-glow-2, radial-gradient(ellipse at 80% 20%,rgba(53,240,180,.05) 0%,transparent 50%));
}
.login-box{
  width:380px;
  max-width:100%;
  margin:auto;
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 30%),rgba(9,23,36,.16);
  backdrop-filter:blur(4px) saturate(150%);-webkit-backdrop-filter:blur(4px) saturate(150%);
  border:1px solid var(--border);
  border-radius:var(--radius);padding:40px;box-shadow:var(--shadow),var(--glow);
  position:relative;
  transition: background .35s ease, backdrop-filter .35s ease;
}
/* DEMO BUILD: the box defaults to a light, mostly-see-through glass pane so
   the AI face animation reads clearly behind it, and firms up to the
   original, more opaque/blurred treatment on hover or while actually
   filling in a field, :focus-within (not just :hover) so this still
   works on touch devices with no real hover state, tapping into a field
   is enough to get comfortable contrast for typing. */
.login-box:hover, .login-box:focus-within{
  background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 30%),rgba(9,23,36,.62);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
}
.login-box::before,.login-box::after{
  content:'';position:absolute;top:-1px;width:20px;height:20px;pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(46,230,255,.5));
}
.login-box::before{left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.login-box::after{right:-1px;border-top:2px solid var(--accent);border-right:2px solid var(--accent)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo h1{font-family:var(--font-display);font-size:27px;font-weight:900;text-transform:var(--heading-transform,uppercase);letter-spacing:calc(1px * var(--heading-tracking-scale,1));background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-logo p{color:var(--text3);font-size:11px;margin-top:6px;letter-spacing:calc(2px * var(--heading-tracking-scale,1));font-family:var(--font-mono);text-transform:var(--heading-transform,uppercase)}
.login-error{background:rgba(255,61,94,.1);border:1px solid var(--danger);border-radius:var(--radius);padding:10px 14px;color:var(--danger);font-size:13px;margin-bottom:16px}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.animate-in{animation:fadeIn .3s ease forwards}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
.pulse{animation:pulse 2s ease-in-out infinite}

/* ── Misc ────────────────────────────────────────────────────────────────── */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.text-accent{color:var(--accent)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warn{color:var(--warn)}.text-muted{color:var(--text3)}
.mono{font-family:var(--font-mono)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.divider{border:none;border-top:1px solid var(--border);margin:20px 0;box-shadow:0 1px 0 rgba(46,230,255,.05)}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.agent-dot{width:8px;height:8px;background:var(--success);box-shadow:0 0 8px var(--success);display:inline-block;transform:rotate(45deg)}

/* ── Mobile layout (phones/small tablets) ────────────────────────────────── */
@media (max-width: 768px){
  .hamburger-btn{display:flex}

  /* Sidebar becomes an off-canvas drawer instead of a permanent column */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:80vw;max-width:300px;min-width:0;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:100;
    box-shadow:none;
  }
  .sidebar.mobile-open{
    transform:translateX(0);
    box-shadow:8px 0 32px rgba(0,0,0,.5);
  }
  .sidebar-backdrop.mobile-open{display:block}

  .main{width:100%}
  .topbar{padding:0 14px;gap:10px}
  .topbar-title{font-size:15px}
  /* Hide the "Agent Online" text label on very small screens, keep the dot */
  .topbar-actions span:not(.agent-dot){display:none}

  .content{padding:14px}

  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
  .stat-value{font-size:24px}

  .card{padding:14px}

  .modal-overlay{padding:0}
  .modal{
    width:100%;max-width:100%;height:100%;max-height:100%;
    border-radius:0;padding:20px;
  }

  /* Bigger tap targets for touch */
  .nav-item{padding:14px 20px;font-size:14px}
  .btn{padding:10px 16px}
  .btn-sm{padding:8px 12px}

  table{font-size:12px}
  th,td{padding:8px 10px}
}

@media (min-width: 769px){
  /* Never let the mobile drawer state leak onto desktop, e.g. after
     resizing a window down and back up without a reload. */
  .sidebar-backdrop{display:none !important}
}

/* ── Chat sessions panel (per-conversation history sidebar) ──────────────── */
.chat-sessions-backdrop{
  position:fixed; inset:0; background:rgba(2,6,10,.6); z-index:150;
}
.chat-sessions-panel{
  position:fixed; top:0; left:0; bottom:0; width:280px; max-width:85vw;
  background:var(--bg2); backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--border); z-index:151;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.chat-sessions-header{
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex:none;
}
.chat-sessions-title{
  font-family:var(--font-display); font-size:12px; font-weight:700;
  text-transform:var(--heading-transform,uppercase); letter-spacing:calc(1.5px * var(--heading-tracking-scale,1)); color:var(--accent3);
}
.chat-sessions-list{ flex:1; overflow-y:auto; padding:8px; }
.chat-session-item{
  display:flex; align-items:center; gap:8px; padding:10px 10px;
  border-radius:var(--radius); cursor:pointer; margin-bottom:4px;
  border:1px solid transparent; transition:background .15s, border-color .15s;
}
.chat-session-item:hover{ background:var(--bg3); border-color:var(--border); }
.chat-session-item.active{ background:var(--bg3); border-color:var(--border2); }
.chat-session-item-title{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:13px; color:var(--text);
}
.chat-session-item-meta{ font-size:10px; color:var(--text3); margin-top:2px; }
.chat-session-delete{
  opacity:0; flex:none; background:none; border:none; color:var(--text2);
  cursor:pointer; padding:4px; line-height:1; transition:opacity .15s, color .15s;
}
.chat-session-item:hover .chat-session-delete{ opacity:1; }
.chat-session-delete:hover{ color:var(--danger); }
.chat-sessions-empty{ padding:20px 12px; text-align:center; color:var(--text3); font-size:12px; }

/* ── AI Face login background (DEMO BUILD ONLY) ─────────────────────────────
   Everything below is scoped under .ai-face-bg specifically so these
   deliberately generic names (.ring, .eye, .hud, .corner, .facet...)
   can never collide with anything added elsewhere in the app later,
   regardless of whether this stays experimental or becomes permanent. */
.ai-face-bg{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  background: radial-gradient(ellipse at 50% 40%, #071018 0%, #03060a 60%, #010203 100%);
  font-family:'Share Tech Mono', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace;
  color: #4ff0ff;
  --cyan: #4ff0ff; --cyan-glow: rgba(79,240,255,0.55); --red: #ff4a4a; --green: #57ffb0;
  --panel: rgba(10,22,28,0.55);
}
.ai-face-bg canvas.aiface-particles{ position:absolute; inset:0; width:100%; height:100%; }
.ai-face-bg .aiface-scan-sweep{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 0%, rgba(79,240,255,0.05) 48%, rgba(79,240,255,0.10) 50%, rgba(79,240,255,0.05) 52%, transparent 100%);
  background-size: 100% 260%;
  animation: aiface-sweepMove 6s linear infinite;
  mix-blend-mode: screen;
}
@keyframes aiface-sweepMove{ 0%{ background-position: 0 -160%; } 100%{ background-position: 0 160%; } }
.ai-face-bg .aiface-vignette{ position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 180px 60px #000; }
.ai-face-bg .aiface-noise-lines{
  position:absolute; inset:0; pointer-events:none; opacity:0.05;
  background: repeating-linear-gradient(0deg, #fff 0px, transparent 1px, transparent 3px);
}
.ai-face-bg .aiface-core-wrap{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(60vmin, 520px); height:min(60vmin, 520px);
}
.ai-face-bg svg.aiface-face{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ai-face-bg .aiface-ring{ transform-origin:50% 50%; }
.ai-face-bg .aiface-ring--outer{ animation: aiface-spin 34s linear infinite; }
.ai-face-bg .aiface-ring--mid{ animation: aiface-spin 22s linear infinite reverse; }
.ai-face-bg .aiface-ring--inner{ animation: aiface-spin 14s linear infinite; }
@keyframes aiface-spin{ to{ transform: rotate(360deg); } }
.ai-face-bg .aiface-glow-line{ filter: drop-shadow(0 0 3px var(--cyan-glow)) drop-shadow(0 0 8px var(--cyan-glow)); }
.ai-face-bg .aiface-glow-strong{ filter: drop-shadow(0 0 4px var(--cyan-glow)) drop-shadow(0 0 14px var(--cyan-glow)) drop-shadow(0 0 26px var(--cyan-glow)); }
.ai-face-bg .aiface-eye{ transform-origin:center; animation: aiface-eyePulse 3.4s ease-in-out infinite; }
.ai-face-bg .aiface-eye--r{ animation-delay:.15s; }
@keyframes aiface-eyePulse{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
.ai-face-bg .aiface-iris{ animation: aiface-irisSpin 5s linear infinite; transform-origin:center; }
@keyframes aiface-irisSpin{ to{ transform: rotate(360deg); } }
.ai-face-bg .aiface-facet{ opacity:.55; }
.ai-face-bg .aiface-facet-flicker{ animation: aiface-flicker 3.6s ease-in-out infinite; }
.ai-face-bg .aiface-facet-flicker:nth-child(odd){ animation-delay: 1.1s; }
.ai-face-bg .aiface-facet-flicker:nth-child(3n){ animation-delay: 2.1s; }
@keyframes aiface-flicker{ 0%,100%{ opacity:.35; } 45%{ opacity:.85; } 55%{ opacity:.3; } }
.ai-face-bg .aiface-core-wrap.alert .aiface-glow-line, .ai-face-bg .aiface-core-wrap.alert .aiface-glow-strong{
  filter: drop-shadow(0 0 4px rgba(255,74,74,.7)) drop-shadow(0 0 14px rgba(255,74,74,.6)) drop-shadow(0 0 26px rgba(255,74,74,.4));
}
.ai-face-bg .aiface-core-wrap.alert{ --cyan: var(--red); }
.ai-face-bg .aiface-core-wrap.verified{ --cyan: var(--green); }
.ai-face-bg .aiface-hud-panel{
  position:absolute; padding:10px 14px; background: var(--panel);
  border:1px solid rgba(79,240,255,0.25); border-radius:2px;
  backdrop-filter: blur(2px); min-width:150px;
  color: var(--cyan); font-size:11px; letter-spacing:.14em; text-shadow: 0 0 6px var(--cyan-glow); opacity:.85;
}
.ai-face-bg .aiface-hud-panel .aiface-label{ opacity:.55; font-size:10px; }
.ai-face-bg .aiface-hud-panel .aiface-value{ font-size:13px; margin-top:2px; }
.ai-face-bg .aiface-status-readout{ position:absolute; bottom:8%; left:50%; transform:translateX(-50%); text-align:center; }
.ai-face-bg .aiface-status-readout .aiface-phase{
  font-family:'Orbitron', Bahnschrift, 'Arial Narrow', 'Segoe UI', system-ui, sans-serif; font-weight:700; font-size:20px;
  letter-spacing:.35em; padding-left:.35em; color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow), 0 0 24px var(--cyan-glow);
  transition: color .4s ease;
}
.ai-face-bg .aiface-status-readout .aiface-sub{ margin-top:6px; font-size:11px; letter-spacing:.2em; opacity:.6; color: var(--cyan); }
.ai-face-bg .aiface-progress-track{ width:220px; height:2px; background:rgba(255,255,255,0.08); margin:10px auto 0; position:relative; overflow:hidden; }
.ai-face-bg .aiface-progress-fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background: var(--cyan); box-shadow:0 0 8px var(--cyan-glow);
  transition: width .25s linear, background-color .3s ease;
}
.ai-face-bg .aiface-mouth-wrap{ position:absolute; left:50%; bottom:26%; transform:translateX(-50%); display:flex; align-items:flex-end; gap:3px; height:34px; }
.ai-face-bg .aiface-mouth-wrap .aiface-bar{ width:4px; background:var(--cyan); border-radius:2px; box-shadow:0 0 6px var(--cyan-glow); height:4px; }
.ai-face-bg .aiface-click-hint{
  position:absolute; bottom:4%; left:50%; transform:translateX(-50%);
  font-size:10px; opacity:.35; letter-spacing:.2em; cursor:pointer; user-select:none; color: var(--cyan);
}
@media (max-width: 768px){
  .ai-face-bg .aiface-hud-panel{ display:none; }
  .ai-face-bg .aiface-core-wrap{ width:min(75vmin, 420px); height:min(75vmin, 420px); }
}

/* Workflows page: chip text boxes (js/workflow_builder.js) */
[contenteditable][data-placeholder]:empty:before { content: attr(data-placeholder); color: var(--text3); pointer-events: none; }
.wb-chip { cursor: default; }

/* Tables in chat answers (js/markdown.js). Colours come from the theme, so every theme and Studio fit. */
.md-table-wrap { max-width: 100%; overflow-x: auto; margin: 8px 0 4px; border: 1px solid var(--border); border-radius: 6px; }
.md-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12.5px; line-height: 1.4; }
.md-table th, .md-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
.md-table th { background: var(--bg3, rgba(0,0,0,.25)); color: var(--text2); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; }
.md-table tbody tr:nth-child(even) td { background: rgba(127,127,127,.06); }
.md-table tbody tr:hover td { background: rgba(127,127,127,.12); }
.md-table tbody tr:last-child td { border-bottom: 0; }

.chat-chart .chart-menu-item:hover, .chat-chart .chart-menu-item:focus { background: var(--bg3, rgba(127,127,127,.15)); outline: none; }
.chat-msg.has-chart{width:min(780px,96%);max-width:96%}
.chat-msg.has-chart > div:last-child{flex:1;min-width:0}

/* Light mode: the logo is cyan/white, so it sits on the same dark colour it has in dark mode (the logo file itself is unchanged) */
[data-theme="light"] .sidebar-logo img,
[data-theme="light"] .login-logo img {
  background: #071420;
  padding: 6px 8px;
  border-radius: 8px;
  box-sizing: content-box;
}

/* ── Eye login background (js/shell.js EyeBackground) ──────────────────────
   The logo's eye, animated. Scoped under .eye-bg / .eye-login so nothing
   else in the app is affected. The background stays dark in every theme,
   like the logo. Studio has its own logon look, so the eye is hidden there. */
.login-screen.eye-login{background:#040a12;overflow:hidden}
.eye-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,#08202e 0%,#040a12 55%,#010306 100%)}
.eye-bg::before{content:'';position:absolute;inset:0;opacity:.05;
  background:repeating-linear-gradient(0deg,#9ff6ff 0 1px,transparent 1px 4px)}
.eye-bg .eye-sweep{position:absolute;inset:0;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent 0%,rgba(46,230,255,.04) 48%,rgba(46,230,255,.09) 50%,rgba(46,230,255,.04) 52%,transparent 100%);
  background-size:100% 260%;animation:eye-sweep 7s linear infinite}
@keyframes eye-sweep{0%{background-position:0 -160%}100%{background-position:0 160%}}
.eye-bg .eye-vignette{position:absolute;inset:0;box-shadow:inset 0 0 200px 80px #000}
/* Sized to sit just behind the logon box (380px wide), always centred on it */
.eye-bg .eye-wrap{position:absolute;top:50%;left:50%;width:min(360px,88vw);height:min(360px,88vw);
  transform:translate(-50%,-50%)}
.eye-bg svg.eye-svg{width:100%;height:100%;overflow:visible}
/* Failed logon: the eye turns red (colours set directly, so it is a true red in every browser) */
.eye-bg .eye-svg stop{transition:stop-color .4s ease}
.eye-bg .eye-svg path,.eye-bg .eye-svg line,.eye-bg .eye-line{transition:stroke .4s ease}
.eye-bg .eye-wrap.alert .eye-is0{stop-color:#2a0206}
.eye-bg .eye-wrap.alert .eye-is1{stop-color:#b80f1f}
.eye-bg .eye-wrap.alert .eye-is2{stop-color:#ff4646}
.eye-bg .eye-wrap.alert .eye-is3{stop-color:#a00c1e}
.eye-bg .eye-wrap.alert .eye-is4{stop-color:#38040c}
.eye-bg .eye-wrap.alert .eye-seg,.eye-bg .eye-wrap.alert .eye-seg-teal{stroke:#ff7a7a}
.eye-bg .eye-wrap.alert .eye-seg-in,.eye-bg .eye-wrap.alert .eye-line{stroke:#ff3d5e}
.eye-bg .eye-wrap.alert .eye-fl{stroke:#ffc8c8}
.eye-bg .eye-wrap.alert .eye-fd{stroke:#5a0812}
.eye-bg .eye-wrap.alert .eye-glow{filter:drop-shadow(0 0 4px rgba(255,61,94,.75)) drop-shadow(0 0 16px rgba(255,61,94,.5))}
.eye-bg .eye-ring-outer{transform-origin:200px 200px;animation:eye-spin 40s linear infinite}
.eye-bg .eye-ring-inner{transform-origin:200px 200px;animation:eye-spin 26s linear infinite reverse}
.eye-bg .eye-ring-dash{transform-origin:200px 200px;animation:eye-spin 70s linear infinite}
@keyframes eye-spin{to{transform:rotate(360deg)}}
.eye-bg .eye-glow{filter:drop-shadow(0 0 4px rgba(46,230,255,.7)) drop-shadow(0 0 16px rgba(46,230,255,.45))}
.eye-bg .eye-fibres{transform-origin:200px 200px;animation:eye-shimmer 9s ease-in-out infinite}
@keyframes eye-shimmer{0%,100%{opacity:.75;transform:rotate(0)}50%{opacity:1;transform:rotate(4deg)}}
/* The logon box stays see-through at all times (no firming up on hover or while typing) */
.login-screen.eye-login .login-box,
.login-screen.eye-login .login-box:hover,
.login-screen.eye-login .login-box:focus-within{
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 30%),rgba(9,23,36,.16);
  backdrop-filter:blur(4px) saturate(150%);-webkit-backdrop-filter:blur(4px) saturate(150%)}
/* Light theme: the box keeps its dark glass over the dark eye background */
[data-theme="light"] .login-screen.eye-login{
  --bg:#040a12;--bg2:rgba(9,23,36,.62);--bg3:rgba(13,32,49,.55);
  --border:rgba(46,230,255,.16);--border2:rgba(46,230,255,.28);
  --text:#d7eef8;--text2:#6f9bb0;--text3:#3a5a6e;
  --shadow:0 4px 28px rgba(0,0,0,.55);--glow:0 0 24px rgba(46,230,255,.18)}
@media (prefers-reduced-motion:reduce){
  .eye-bg .eye-ring-outer,.eye-bg .eye-ring-inner,.eye-bg .eye-ring-dash,.eye-bg .eye-fibres,.eye-bg .eye-sweep{animation:none}
}
html[data-shell="studio"] .login-screen .eye-bg{display:none}
html[data-shell="studio"] .login-screen.eye-login{background:var(--bg)}


/* ── LIGHT THEME (designed for light, not an inverted dark) ── */
/* The dark theme's neon effects (glows, glass blur, scanlines, light-on-dark text shadows) do not belong on a
   light surface; turn them off and use plain, quiet, high-contrast styling instead. */
[data-theme="light"] .sidebar{box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="light"] .topbar{box-shadow:0 1px 0 rgba(16,32,48,.04);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="light"] .sidebar-logo::after{box-shadow:none;background:linear-gradient(90deg,var(--accent),transparent 70%);opacity:.5}
[data-theme="light"] .card,
[data-theme="light"] .stat-card{background:var(--bg2);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:6px}
[data-theme="light"] .card::before,
[data-theme="light"] .card::after{filter:none;opacity:.55;width:12px;height:12px}
[data-theme="light"] .stat-card::before{box-shadow:none;height:3px}
[data-theme="light"] .stat-value{text-shadow:none}
[data-theme="light"] .card-title{color:var(--text2);opacity:1}
[data-theme="light"] th{color:var(--text2);opacity:1;background:var(--bg3);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="light"] tr:hover td{background:#f1f6f9}
[data-theme="light"] .form-label{color:var(--text2)}
[data-theme="light"] .form-input,
[data-theme="light"] .code-editor,
[data-theme="light"] .console{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .code-editor:focus{box-shadow:0 0 0 3px rgba(11,122,150,.16)}
[data-theme="light"] .nav-item.active{color:var(--accent2);background:rgba(11,122,150,.09);box-shadow:none}
[data-theme="light"] .nav-item:hover{background:#f1f4f8}
[data-theme="light"] .nav-item.active::before{box-shadow:0 -7px 0 var(--accent), 0 7px 0 var(--accent)}
[data-theme="light"] .user-avatar{color:#fff;box-shadow:none;background:linear-gradient(135deg,var(--accent),var(--accent2))}
[data-theme="light"] .user-role{color:var(--accent2)}
[data-theme="light"] .btn-primary{color:#fff}
[data-theme="light"] .btn-primary:hover{background:var(--accent2);box-shadow:none}
[data-theme="light"] .btn-ghost{border-color:var(--border2);color:var(--text)}
[data-theme="light"] .btn-ghost:hover{border-color:var(--accent);color:var(--accent2);background:rgba(11,122,150,.06);box-shadow:none}
[data-theme="light"] .badge-done{background:rgba(8,120,79,.10)}
[data-theme="light"] .badge-loop,
[data-theme="light"] .badge-declined{background:rgba(180,83,9,.10)}
[data-theme="light"] .badge-blocked,
[data-theme="light"] .badge-max_steps{background:rgba(200,34,63,.09)}
[data-theme="light"] .badge-running{background:rgba(11,122,150,.10)}
[data-theme="light"] .badge-info{background:#eef1f5}
[data-theme="light"] .chat-avatar{box-shadow:none}
[data-theme="light"] .chat-msg.user .chat-avatar{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
[data-theme="light"] .chat-msg.user .chat-bubble{background:rgba(11,122,150,.08);border-color:rgba(11,122,150,.3)}
[data-theme="light"] .chat-drop-active{box-shadow:none}
[data-theme="light"] .divider{box-shadow:none}
[data-theme="light"] .nav-tip{box-shadow:0 6px 20px rgba(16,32,48,.16)}
[data-theme="light"] .pill{background:rgba(11,122,150,.09)!important;color:var(--accent2)!important}