/* SixSX Designer - 6sx look.
   Silver on near-black, liquid chrome background, Instrument Sans + DM Mono,
   glass panels and translucent borders. Shared by index.html (sign-in) and
   app.html. Loaded last so it overrides the app's inline style blocks. */

:root {
  --void: #080808;
  --panel: transparent;
  --surface: rgba(255, 255, 255, 0.02);
  --raised: rgba(87, 87, 87, 0.18);
  --lifted: rgba(95, 95, 95, 0.22);

  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.12);
  --line3: rgba(255, 255, 255, 0.2);

  --t1: #ffffff;
  --t2: #c7c7c7;
  --t3: #aeaeae;
  --t4: #8a8a8a;

  --signal: #c0c0c0;
  --signal-dim: rgba(192, 192, 192, 0.14);
  --accent: #f5f5f5;
  --accent2: #a8a8a8;
  --accent-grad: linear-gradient(180deg, #ffffff, #c0c0c0);
  --flat-accent-strong: #6e6e6e;

  --ok: #9fe3b8;
  --err: #ff8a8a;
  --yellow: #c7c7c7;

  --ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

@keyframes sxSheen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[hidden] { display: none !important; }

html, html body, html body[class] {
  background: var(--void) !important;
  background-image: none !important;
  color: var(--t1);
}
/* Home/welcome views carry their own blue-tinted gradients; keep them clear. */
#sx-home-view, #sx-home-view.sx-anim-in, .sx-home-view, #main-content, .body {
  background: transparent !important;
  background-image: none !important;
}
body { font-family: var(--ui); }

/* ---------- Liquid chrome background ---------- */
.sx-liquid {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--void);
  pointer-events: none;
}
.sx-liquid canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0.78) contrast(1.08);
}
.sx-liquid::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.55) 0%, rgba(10, 14, 20, 0.22) 50%, rgba(10, 14, 20, 0.6) 100%),
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---------- Sign-in page (index.html) ---------- */
.sx-auth-page { min-height: 100vh; min-height: 100dvh; margin: 0; }
.sx-auth-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.sx-auth-card {
  width: min(420px, 100%);
  padding: 36px 32px 30px;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: sxRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sxRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sx-brand { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.sx-wordmark {
  font: 800 30px/1 var(--ui);
  letter-spacing: 0.14em;
  background: linear-gradient(-45deg, #c0c0c0, #ffffff, #f5f5f5, #ffffff, #c0c0c0);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sxSheen 6s linear infinite;
}
.sx-brand-sub {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.32em;
  color: var(--t3);
}
.sx-auth-title {
  margin: 26px 0 18px;
  text-align: center;
  font: 600 16px/1.3 var(--ui);
  color: var(--t2);
}
.sx-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sx-tab {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--t3);
  font: 600 13px/1 var(--ui);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.sx-tab:hover { color: #ffffff; background: rgba(192, 192, 192, 0.12); }
.sx-tab.active {
  background: #6e6e6e;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(192, 192, 192, 0.35);
}
.sx-form { margin-top: 4px; }
.sx-label {
  display: block;
  margin: 16px 0 7px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
}
.sx-input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font: 400 15px/1.2 var(--ui);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.sx-input::placeholder { color: #6f6f6f; }
.sx-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.14);
}
.sx-mono { font-family: var(--mono); letter-spacing: 0.04em; }
.sx-btn {
  width: 100%;
  margin-top: 22px;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: #6e6e6e;
  color: #ffffff;
  font: 600 15px/1 var(--ui);
  cursor: pointer;
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.sx-btn:hover:not(:disabled) {
  background: #bfbfbf;
  color: #0a0a0a;
  box-shadow: 0 0 30px rgba(192, 192, 192, 0.6);
  transform: translateY(-2px);
}
.sx-btn:disabled { opacity: 0.55; cursor: wait; }
.sx-status {
  min-height: 20px;
  margin: 14px 0 0;
  font: 500 13px/1.4 var(--ui);
  color: var(--t2);
  text-align: center;
}
.sx-status.err { color: var(--err); }
.sx-status.ok { color: var(--ok); }
.sx-hint {
  margin: 14px 0 0;
  font: 400 12px/1.55 var(--ui);
  color: var(--t4);
  text-align: center;
}

/* ---------- Application (app.html) ---------- */
/* The sign-in overlay and splash belong to index.html now. */
#splash, #login-overlay { display: none !important; }

/* Ambient fog from the old theme is replaced by the liquid background. */
.fog-cloud, .fog-haze, .fog-c, .fog-ambient { display: none !important; }

/* Browser tabs do not need minimize/close controls. Fullscreen stays. */
#window-minimize, #window-close { display: none !important; }

#app, .app {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

/* Typography: Instrument Sans for UI text, DM Mono for technical labels.
   The character grid and preview keep their monospace fonts. */
#app button, #app label, #app h1, #app h2, #app h3, #app h4,
.sx-modal, .sx-modal *:not(pre):not(code):not(.mono),
.sheet, .sheet *:not(pre):not(code):not(.mono) {
  font-family: var(--ui) !important;
}
.mono, .sx-mono { font-family: var(--mono) !important; }

.sheet-title, .sx-modal-title, .sx-welcome-title, .sx-admin-card h3 {
  background: linear-gradient(-45deg, #c0c0c0, #ffffff, #f5f5f5, #ffffff, #c0c0c0);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sxSheen 6s linear infinite;
}

/* Glass panels: transparent fill, blur, translucent border. */
.topbar,
.sheet,
.sx-modal,
.sx-admin-card,
.sx-tutorial-card,
.sx-welcome,
.set-group,
.setting-row,
.user-card,
.sx-global-search,
.sx-search-results,
.gif-workspace,
.gif-preview-shell,
.sx-dd-menu,
.sixsx-toast,
.sx-v2-toast,
.sixsx-confirm,
.sx-confirm {
  background: rgba(10, 10, 10, 0.55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}
.topbar {
  border-width: 0 0 1px 0 !important;
  border-style: solid !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Every border is translucent white, not the old coloured strokes. */
#app *, .sx-modal *, .sheet * {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Navigation */
.nav-item {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--t3) !important;
  background: transparent !important;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav-item:hover { background: rgba(192, 192, 192, 0.1) !important; color: #ffffff !important; }
.nav-item.active, .nav-item[aria-current="page"] {
  background: rgba(192, 192, 192, 0.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Buttons: 6sx primary (#6e6e6e, hover #bfbfbf) and glass secondary. */
.login-btn,
.sx-modal-btn.primary,
.sheet-footer-btn.primary,
.sx-admin-btn,
.sx-confirm-btn.primary {
  background: #6e6e6e !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.35) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.login-btn:hover,
.sx-modal-btn.primary:hover,
.sheet-footer-btn.primary:hover,
.sx-admin-btn:hover,
.sx-confirm-btn.primary:hover {
  background: #bfbfbf !important;
  color: #0a0a0a !important;
  box-shadow: 0 0 30px rgba(192, 192, 192, 0.6) !important;
  transform: translateY(-2px) !important;
}
.sx-modal-btn,
.sheet-footer-btn,
.output-action,
.pill,
.sx-dd-btn,
.sx-dd-opt {
  background: var(--raised) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
.sx-modal-btn:hover,
.sheet-footer-btn:hover,
.output-action:hover,
.pill:hover,
.sx-dd-btn:hover,
.sx-dd-opt:hover {
  background: rgba(192, 192, 192, 0.32) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Inputs, selects and text areas */
#app input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
#app select,
#app textarea,
.sx-modal input:not([type="checkbox"]),
.sx-modal textarea,
.login-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  outline: none !important;
}
#app input:focus,
#app select:focus,
#app textarea:focus,
.login-input:focus {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.14) !important;
}

/* Toast and confirm surfaces follow the glass style. */
.sixsx-toast-title, .sx-v2-toast strong { color: #ffffff !important; }
.sixsx-toast-message, .sx-v2-toast span { color: var(--t2) !important; }

/* Screen preview surface: the old teal gradient becomes smoked glass. */
#terminal, #terminal-wrap, #terminal-wrap.sx-anim-in {
  background: rgba(8, 8, 8, 0.55) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
}
#terminal::before, #terminal::after, #terminal-wrap::before, #terminal-wrap::after {
  background-image: none !important;
}
.sx-wordmark-small { font-size: 18px; letter-spacing: 0.12em; display: inline-block; margin: 6px 0 0 4px; }