/* ─────────────────────────────────────────────────────────
   Shared UI — theme vars + top header
   Loaded on both /app/ (landing) and /cabinet/.
   ───────────────────────────────────────────────────────── */

/* Single source of truth for theme variables. */
:root,
:root[data-theme="dark"] {
  --bg:        #08080a;
  --surface:   #111114;
  --surface-2: #1a1a1f;
  --surface-3: #22222a;
  --text:      #f0f0f5;
  --text-2:    #9aa0af;
  --text-3:    #5a5f6b;
  --border:    rgba(255, 255, 255, 0.06);
  --border-2:  rgba(255, 255, 255, 0.12);
  --accent:    #3b82f6;
  --accent-2:  #2563eb;
  --accent-fg: #ffffff;
  --nav-bg:    rgba(8, 8, 10, 0.72);
  --ok:        #22c55e;
  --warn:      #f59e0b;
  --err:       #ef4444;
  --ok-bg:     rgba(34, 197, 94, 0.14);
  --warn-bg:   rgba(245, 158, 11, 0.14);
  --err-bg:    rgba(239, 68, 68, 0.14);
  --focus:     #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.15);
  --font:      "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  --bg:        #fafafa;
  --surface:   #ffffff;
  --surface-2: #f4f4f6;
  --surface-3: #eeeef1;
  --text:      #17171a;
  --text-2:    #52525b;
  --text-3:    #8a8a94;
  --border:    #e5e5ea;
  --border-2:  #d4d4d9;
  --accent:    #3b82f6;
  --accent-2:  #2563eb;
  --accent-fg: #ffffff;
  --nav-bg:    rgba(255, 255, 255, 0.82);
  --ok:        #10b981;
  --warn:      #d97706;
  --err:       #dc2626;
  --ok-bg:     #ecfdf5;
  --warn-bg:   #fffbeb;
  --err-bg:    #fef2f2;
  --focus:     #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.10);
}

/* Legacy aliases (landing uses shorter names) */
:root {
  --bg2:     var(--surface);
  --bg3:     var(--surface-2);
  --text2:   var(--text-2);
  --text3:   var(--text-3);
  --accent2: var(--accent-2);
  --green:   var(--ok);
}

/* ── Header ───────────────────────────────────────────── */
.ph-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  padding: 12px 20px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font);
  color: var(--text);
}
.ph-header__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
}
.ph-logo {
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
  flex-shrink: 0;
}
.ph-logo__dot { color: var(--accent); }

.ph-nav {
  display: flex; align-items: center; gap: 22px;
  margin-left: 28px;
}
.ph-nav a {
  font-size: 14px; color: var(--text-2);
  text-decoration: none;
  transition: color .12s;
}
.ph-nav a:hover { color: var(--text); }

.ph-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}

.ph-toggle {
  width: 36px; height: 36px; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ph-toggle:hover {
  background: var(--surface-2); color: var(--text);
  border-color: var(--border-2);
}
.ph-toggle [data-lucide] { width: 16px; height: 16px; }
.ph-toggle .ph-icon-light,
.ph-toggle .ph-icon-dark { display: none; }
:root[data-theme="dark"]  .ph-toggle .ph-icon-dark  { display: inline-flex; }
:root[data-theme="light"] .ph-toggle .ph-icon-light { display: inline-flex; }

.ph-login {
  padding: 8px 16px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 600; font-size: 13px;
  text-decoration: none;
  transition: box-shadow .12s;
}
.ph-login:hover { box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); }

.ph-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ph-user:hover { background: var(--surface); border-color: var(--border-2); }
.ph-user__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.ph-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ph-user__name {
  font-size: 13px; font-weight: 600;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ph-logout {
  width: 36px; height: 36px; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ph-logout:hover { background: var(--surface-2); color: var(--err); border-color: var(--border-2); }
.ph-logout [data-lucide] { width: 16px; height: 16px; }

@media (max-width: 620px) {
  .ph-nav { display: none; }
  .ph-user__name { display: none; }
}

.ph-header-spacer { height: 60px; }