/* ============================================================
   TOOLS HUB — THEME: STUDIO (Indigo / Purple)
   Link AFTER the inline <style> block to override variables.
   Add Syne font: &family=Syne:wght@400;600;700;800 to Google Fonts link
   ============================================================ */

/* ── Dark theme overrides ──────────── */
body {
  --bg:           #0c0c14;
  --bg-elevated:  #12121e;
  --bg-hover:     #1a1a2e;
  --text-primary: #e8e8f4;
  --text-secondary: #8888a8;
  --accent:       #6C63FF;
  --accent-hover: #5B52E8;
  --border:       rgba(108,99,255,0.12);
  --input-bg:     #0c0c14;
  --input-border: rgba(108,99,255,0.18);
  --logo-filter:  none;
}

/* ── Light theme overrides ─────────── */
body.light-mode,
html.light-mode body {
  --bg:           #f5f5f7;
  --bg-elevated:  #ffffff;
  --bg-hover:     #f0f0f5;
  --text-primary: #1a1a2e;
  --text-secondary: #6b6b80;
  --accent:       #5B52E8;
  --accent-hover: #4F46E5;
  --border:       rgba(91,82,232,0.1);
  --input-bg:     #ffffff;
  --input-border: rgba(91,82,232,0.15);
  --logo-filter:  brightness(0) saturate(100%);
}

/* ── Font alignment ────────────────── */
.hub-logo { height: 22px; }
.tab {
  font-family: 'DM Mono', 'DM Sans', monospace;
  letter-spacing: 0.02em;
}
.login-title,
.login-field label,
.user-info {
  font-family: 'DM Mono', monospace;
}
.login-box {
  border-radius: 12px;
  border-color: var(--border);
}
.login-btn {
  border-radius: 10px;
  font-family: 'DM Mono', monospace;
  background: var(--accent);
}
.login-btn:hover {
  background: var(--accent-hover);
}
.login-field input[type="text"],
.login-field input[type="password"] {
  border-radius: 8px;
}

/* ── Tab bar alignment ─────────────── */
.tab-bar {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.tab.active {
  border-bottom-color: var(--accent);
}
.edit-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(108,99,255,0.08);
}
body.edit-mode .tab.active {
  border-bottom-color: var(--accent);
}
.tab.drag-over {
  border-color: var(--accent) !important;
  background: rgba(108,99,255,0.06);
}

/* ── Grid background ───────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(108,99,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: -1;
}
body.light-mode::after {
  background-image: radial-gradient(rgba(91,82,232,.03) 1px, transparent 1px);
}

/* ── Login error ───────────────────── */
.login-error {
  background: rgba(248,113,113,0.1);
  border-color: rgba(248,113,113,0.3);
  color: #F87171;
}
body.light-mode .login-error {
  background: rgba(91,82,232,0.06);
  border-color: rgba(91,82,232,0.2);
  color: #5B52E8;
}

/* ── Light-mode external link hover ── */
body.light-mode .external-link:hover {
  background: rgba(91,82,232,0.06);
}

/* ── Theme button hover ────────────── */
.theme-btn:hover {
  color: var(--accent);
  background: rgba(108,99,255,0.08);
}

/* ── Login remember checkbox ───────── */
.login-remember input[type="checkbox"] {
  accent-color: var(--accent);
}