/*
 * Entity Ethereal visual system
 * Premium signal intelligence UI with light and dark themes.
 */

:root,
html[data-theme="light"]{
  color-scheme:light;
  --ee-bg:#f5f6fb;
  --ee-bg-deep:#eef0f8;
  --ee-surface:#ffffff;
  --ee-surface-soft:#fafaff;
  --ee-surface-muted:#f2f3f9;
  --ee-surface-glass:rgba(255,255,255,.82);
  --ee-sidebar:#11112b;
  --ee-sidebar-deep:#090a1d;
  --ee-sidebar-text:#f6f5ff;
  --ee-sidebar-muted:#9ea5c3;
  --ee-ink:#171a3d;
  --ee-ink-soft:#343957;
  --ee-muted:#6c748d;
  --ee-subtle:#959cb0;
  --ee-line:rgba(38,42,89,.10);
  --ee-line-strong:rgba(38,42,89,.16);
  --ee-primary:#5d46d9;
  --ee-primary-strong:#4430ba;
  --ee-violet:#8d70ef;
  --ee-lavender:#b59df7;
  --ee-teal:#1fbbae;
  --ee-teal-soft:#dff8f4;
  --ee-success:#15806f;
  --ee-warning:#a66513;
  --ee-danger:#c13f60;
  --ee-danger-soft:#fff0f4;
  --ee-focus:rgba(93,70,217,.22);
  --ee-shadow-xs:0 1px 2px rgba(20,23,57,.04);
  --ee-shadow-sm:0 8px 24px rgba(20,23,57,.055);
  --ee-shadow-md:0 18px 48px rgba(20,23,57,.075);
  --ee-shadow-lg:0 30px 90px rgba(16,18,49,.13);
  --ee-radius-sm:10px;
  --ee-radius-md:14px;
  --ee-radius-lg:20px;
  --ee-radius-xl:28px;
  --ee-sidebar-width:248px;
  --background:var(--ee-bg);
  --surface:var(--ee-surface);
  --surface-soft:var(--ee-surface-soft);
  --ink:var(--ee-ink);
  --muted:var(--ee-muted);
  --indigo:#2f2b6b;
  --violet:var(--ee-primary);
  --lavender:var(--ee-lavender);
  --lav:var(--ee-lavender);
  --teal:var(--ee-teal);
  --line:var(--ee-line);
  --card:var(--ee-surface);
  --shadow:var(--ee-shadow-sm);
  --ghost:var(--ee-bg);
  --slate:var(--ee-muted);
  --void:var(--ee-sidebar-deep);
  --r:var(--ee-radius-lg);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ee-bg:#101126;
  --ee-bg-deep:#0a0b1b;
  --ee-surface:#181a35;
  --ee-surface-soft:#1d1f3e;
  --ee-surface-muted:#232544;
  --ee-surface-glass:rgba(24,26,53,.84);
  --ee-sidebar:#090a1d;
  --ee-sidebar-deep:#060714;
  --ee-sidebar-text:#faf9ff;
  --ee-sidebar-muted:#939aba;
  --ee-ink:#f4f3ff;
  --ee-ink-soft:#d9dcf1;
  --ee-muted:#a6adc8;
  --ee-subtle:#7d84a3;
  --ee-line:rgba(207,211,248,.10);
  --ee-line-strong:rgba(207,211,248,.18);
  --ee-primary:#8870ef;
  --ee-primary-strong:#a08af7;
  --ee-violet:#aa91f7;
  --ee-lavender:#c8b7ff;
  --ee-teal:#39d5c8;
  --ee-teal-soft:rgba(57,213,200,.13);
  --ee-success:#55d6c3;
  --ee-warning:#f2b45f;
  --ee-danger:#ff7d9b;
  --ee-danger-soft:rgba(255,80,120,.10);
  --ee-focus:rgba(160,138,247,.28);
  --ee-shadow-xs:0 1px 2px rgba(0,0,0,.18);
  --ee-shadow-sm:0 12px 30px rgba(0,0,0,.18);
  --ee-shadow-md:0 22px 60px rgba(0,0,0,.24);
  --ee-shadow-lg:0 34px 100px rgba(0,0,0,.32);
  --background:var(--ee-bg);
  --surface:var(--ee-surface);
  --surface-soft:var(--ee-surface-soft);
  --ink:var(--ee-ink);
  --muted:var(--ee-muted);
  --indigo:#b7a8ff;
  --violet:var(--ee-primary);
  --lavender:var(--ee-lavender);
  --lav:var(--ee-lavender);
  --teal:var(--ee-teal);
  --line:var(--ee-line);
  --card:var(--ee-surface);
  --shadow:var(--ee-shadow-sm);
  --ghost:var(--ee-bg);
  --slate:var(--ee-muted);
  --void:var(--ee-sidebar-deep);
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--ee-bg);scroll-behavior:smooth}
body{
  min-width:320px;
  min-height:100vh;
  margin:0;
  color:var(--ee-ink);
  background:
    radial-gradient(circle at 18% -8%,rgba(181,157,247,.18),transparent 27rem),
    radial-gradient(circle at 104% 18%,rgba(31,187,174,.11),transparent 24rem),
    linear-gradient(180deg,var(--ee-bg),var(--ee-bg-deep));
  background-attachment:fixed;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(141,112,239,.28);color:var(--ee-ink)}
a{text-underline-offset:3px}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ee-focus);
  outline-offset:2px;
}
.ee-icon{display:block;flex:0 0 auto}
.muted{color:var(--ee-muted)!important}

/* Brand signal */
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand strong{display:block;color:inherit;font-size:14px;font-weight:780;letter-spacing:-.025em;line-height:1.05}
.brand small{display:block;margin-top:5px;color:var(--ee-sidebar-muted);font-size:9px;font-weight:600;letter-spacing:.06em}
.mark{
  position:relative;
  display:inline-grid;
  flex:0 0 auto;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:50%;
  background:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(93,70,217,.22);
  isolation:isolate;
}
.mark::before{display:none}
.mark-ring{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:conic-gradient(from 35deg,transparent 0 12%,var(--ee-violet) 24%,var(--ee-lavender) 49%,var(--ee-teal) 71%,transparent 84% 100%);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 58%);
  mask:radial-gradient(circle,transparent 56%,#000 58%);
  filter:drop-shadow(0 0 8px rgba(141,112,239,.48));
}
.mark-core{
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#393762 0,#17182f 55%,#0b0c20 100%);
  box-shadow:inset 0 0 18px rgba(181,157,247,.16);
}
.mark i{
  position:absolute;
  right:1px;
  bottom:8px;
  width:7px;
  height:7px;
  border:2px solid var(--ee-sidebar);
  border-radius:50%;
  background:var(--ee-teal);
  box-shadow:0 0 13px var(--ee-teal);
}