/* ═══════════════════════════════════════════════════════════════════
   OraTek OS — Shared Design System
   Dark-first glass dashboard aesthetic.
   Pages opt in by linking this stylesheet + adding class="ot-os" to body.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Oswald:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root, body.ot-os, html.ot-os {
  /* Primary brand */
  --ot-blue:#6FA0E8;
  --ot-cyan:#8FC4ED;
  --ot-amber:#B8D4F0;           /* powder-blue accent (cool emphasis) */
  --ot-amber-deep:#8EB6E0;
  --ot-pop:#FF9F5D;             /* warm orange — reserved for italic emphasis + pop */
  --ot-orange:#FF9851;          /* true urgency only */

  /* Surfaces */
  --ot-navy:#060C17;
  --ot-bg:#0A121E;
  --ot-bg2:#0F1927;
  --ot-surface:#121C2E;
  --ot-surface2:#1B2A42;

  /* Text */
  --ot-text:#ECF1F8;
  --ot-text2:#B8C4D4;
  --ot-muted:#7A8899;

  /* Borders & lines */
  --ot-border:rgba(255,255,255,.06);
  --ot-border2:rgba(255,255,255,.11);
  --ot-border3:rgba(255,255,255,.18);

  /* Status */
  --ot-green:#34D399;
  --ot-red:#F87171;
  --ot-yellow:#FBBF24;
  --ot-purple:#A78BFA;
  --ot-gold:#E8C788;
  --ot-silver:#C7D0DB;
  --ot-bronze:#C99466;

  /* Glows */
  --ot-glow-blue:rgba(111,160,232,.18);
  --ot-glow-accent:rgba(184,212,240,.18);
  --ot-glow-pop:rgba(255,159,93,.22);

  /* Gradients */
  --ot-grad-hero:linear-gradient(135deg,rgba(111,160,232,.20),rgba(143,196,237,.06) 40%,transparent 70%);
  --ot-grad-pop:linear-gradient(135deg,rgba(255,159,93,.20),rgba(255,152,81,.04));

  /* Motion */
  --ot-ease:cubic-bezier(0.22,1,0.36,1);
  --ot-ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

/* ── BASE (scoped via body.ot-os) ── */
body.ot-os {
  font-family:'Poppins', system-ui, sans-serif;
  background: var(--ot-navy);
  color: var(--ot-text);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

body.ot-os::before {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(111,160,232,.08), transparent 60%),
    radial-gradient(900px 600px at 105% 100%, rgba(143,196,237,.06), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(184,212,240,.03), transparent 70%);
}

/* ── TYPOGRAPHY ── */
.ot-display, body.ot-os h1, body.ot-os h2, body.ot-os h3, body.ot-os .ot-display {
  font-family:'Oswald', sans-serif; font-weight:500; letter-spacing:-.01em;
}
.ot-display em, body.ot-os h1 em, body.ot-os h2 em, body.ot-os h3 em {
  font-style: italic; font-weight: 400; color: var(--ot-pop);  /* italic = pop orange */
}
.ot-mono, body.ot-os .ot-mono {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  letter-spacing:.15em; text-transform:uppercase; font-weight:500;
}

/* ── STATUS BAR ── */
.ot-statusbar {
  position: sticky; top: 0; z-index: 40;
  height: 36px; display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: .15em;
  color: var(--ot-muted); text-transform: uppercase;
  border-bottom: 1px solid var(--ot-border);
  background: rgba(10,18,28,.75);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.ot-statusbar .ot-brand { display: flex; align-items: center; gap: 10px; color: var(--ot-text); }
.ot-statusbar .ot-brand img.nameplate { height: 20px; width: auto; filter: drop-shadow(0 0 10px rgba(111,160,232,.25)); }
.ot-statusbar .ot-brand .divider { width: 1px; height: 14px; background: var(--ot-border2); }
.ot-statusbar .ot-brand strong { font-family: inherit; font-weight: 600; letter-spacing: .22em; font-size: 10px; color: var(--ot-text2); }
.ot-statusbar .ot-brand .v { color: var(--ot-muted); font-weight: 400; }
.ot-statusbar .ot-spacer { flex: 1; }
.ot-statusbar .ot-chip { display: flex; align-items: center; gap: 6px; }
.ot-statusbar .ot-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ot-green); box-shadow: 0 0 8px var(--ot-green); animation: ot-pulse 2s infinite; }
.ot-statusbar .ot-chip.warn .dot { background: var(--ot-pop); box-shadow: 0 0 8px var(--ot-pop); }

@keyframes ot-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes ot-blink { 50% { opacity:.3; } }

/* ── WIDGET / CARD ── */
.ot-card, .ot-widget {
  position: relative;
  background: var(--ot-surface);
  border: 1px solid var(--ot-border);
  border-radius: 14px;
  padding: 14px 18px;
  overflow: hidden;
  transition: border-color .3s var(--ot-ease), box-shadow .3s var(--ot-ease);
}
.ot-card:hover, .ot-widget:hover {
  border-color: var(--ot-border2);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}

/* Numbered widget label — the "01 // OPERATOR" pattern */
.ot-w-label {
  display: flex; align-items: center; justify-content: space-between;
  font-family:'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600; letter-spacing: .18em;
  color: var(--ot-muted); text-transform: uppercase;
  margin-bottom: 10px;
}
.ot-w-label .tag { color: var(--ot-text2); }
.ot-w-label .r { color: var(--ot-muted); font-weight: 400; }

/* ── BUTTONS ── */
.ot-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family:'Poppins', sans-serif; font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--ot-border2);
  background: transparent; color: var(--ot-text2);
  cursor: pointer; transition: all .15s var(--ot-ease);
}
.ot-btn:hover { border-color: var(--ot-amber); color: var(--ot-amber); background: var(--ot-glow-accent); }
.ot-btn-primary {
  background: linear-gradient(135deg, var(--ot-amber), var(--ot-amber-deep));
  color: #0A1422; border: none;
}
.ot-btn-primary:hover { box-shadow: 0 0 24px var(--ot-glow-accent); transform: translateY(-1px); }
.ot-btn-pop {
  background: linear-gradient(135deg, var(--ot-pop), var(--ot-orange));
  color: #1A0A00; border: none;
}
.ot-btn-pop:hover { box-shadow: 0 0 24px var(--ot-glow-pop); transform: translateY(-1px); }
.ot-btn-ghost { background: var(--ot-bg2); }

/* ── PILLS / CHIPS ── */
.ot-pill {
  font-family:'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: .1em; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase;
}
.ot-pill.urgent { background: var(--ot-orange); color: #1a0a00; }
.ot-pill.reply  { background: rgba(167,139,250,.2); color: var(--ot-purple); }
.ot-pill.follow { background: rgba(143,196,237,.2); color: var(--ot-cyan); }
.ot-pill.ok     { background: rgba(52,211,153,.15); color: var(--ot-green); }

.ot-stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ot-bg2); border: 1px solid var(--ot-border);
  border-radius: 20px; padding: 3px 12px;
  font-size: 11px; font-weight: 600; color: var(--ot-text2);
}
.ot-stat-pill .dot { width: 7px; height: 7px; border-radius: 50%; }

/* ── INPUTS ── */
.ot-input, body.ot-os input[type="text"], body.ot-os input[type="search"], body.ot-os textarea, body.ot-os select {
  font-family:'Poppins', sans-serif; font-size: 13px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--ot-border2);
  border-radius: 10px; padding: 8px 12px;
  color: var(--ot-text); outline: none;
  transition: border-color .15s var(--ot-ease);
}
.ot-input:focus, body.ot-os input:focus, body.ot-os textarea:focus, body.ot-os select:focus {
  border-color: var(--ot-amber);
}

/* ── KPI TILE ── */
.ot-kpi-num {
  font-family:'Oswald', sans-serif; font-size: 40px; font-weight: 500;
  line-height: 1; color: var(--ot-text); letter-spacing: -.02em;
}
.ot-kpi-num .unit { font-size: 18px; color: var(--ot-text2); margin-left: 2px; }
.ot-kpi-num .emph { color: var(--ot-amber); }
.ot-kpi-sub {
  font-family:'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .14em; color: var(--ot-muted); text-transform: uppercase;
  margin-top: 4px;
}
.ot-kpi-delta {
  font-family:'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; padding: 2px 6px; border-radius: 4px;
}
.ot-kpi-delta.up { color: var(--ot-green); background: rgba(52,211,153,.1); }
.ot-kpi-delta.down { color: var(--ot-red); background: rgba(248,113,113,.1); }

/* ── SCROLLBAR ── */
body.ot-os *::-webkit-scrollbar { width: 4px; height: 4px; }
body.ot-os *::-webkit-scrollbar-thumb { background: var(--ot-border2); border-radius: 4px; }
body.ot-os *::-webkit-scrollbar-thumb:hover { background: var(--ot-border3); }
body.ot-os { scrollbar-width: thin; scrollbar-color: var(--ot-border2) transparent; }

/* ── PREVIEW BANNER ── */
.ot-preview-banner {
  position: fixed; top: 46px; left: 50%; transform: translateX(-50%); z-index: 35;
  background: linear-gradient(135deg, rgba(111,160,232,.25), rgba(255,159,93,.2));
  border: 1px solid var(--ot-border2);
  backdrop-filter: blur(16px);
  padding: 5px 13px; border-radius: 20px;
  font-family:'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .15em;
  color: var(--ot-text); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}

/* ── UTILITY ── */
.ot-glass { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(18,28,46,.6); }
.ot-divider { height: 1px; background: var(--ot-border); }
.ot-hide { display: none; }