/* ════════════════════════════════════════════════════════════════════════
   workspace.css — Clid Workspace SPA styles (Phase 2a)
   ════════════════════════════════════════════════════════════════════════
   Built on the Apple Liquid UI system (alui/tokens.css + clid-theme.css).
   Strict 8px spacing grid. 2 font weights (400 + 600). Spring motion.

   Sections:
     1. Page base + layout
     2. Top menu bar (wordmark, search, user pill)
     3. Universal search results dropdown
     4. User pill + dropdown menu
     5. Bottom pill nav (5 pinned apps)
     6. Main view container
     7. Dashboard widgets + graphs
     8. Drive page (file browser)
     9. Settings page (nav-pill editor)
    10. Auth gate (sign-in prompt)
    11. Friday/IRIS overlay overrides
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Page base ─────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  background: var(--system-background);
}

body {
  font-family: var(--font-text);
  background: var(--system-background);
  color: var(--label-primary);
  overflow-x: hidden;
  min-height: 100dvh;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ambient background — same as landing page */
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%,
      rgba(0, 232, 138, 0.08) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 110%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 60%);
}

/* ── 2. Top menu bar ──────────────────────────────────────────────────────── */
.ws-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  /* glass-chrome class handles the background + blur */
}

.ws-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--label-primary);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-out-quick);
}
.ws-topbar-brand:hover { opacity: 0.7; }
.ws-topbar-brand img { width: 24px; height: 24px; }

/* ── 3. Universal search bar ──────────────────────────────────────────────── */
.ws-search-wrap {
  position: relative;
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
}

.ws-search-input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-primary);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 400;
  transition: border-color var(--duration-fast) var(--ease-out-quick),
              box-shadow var(--duration-fast) var(--ease-out-quick),
              background var(--duration-fast) var(--ease-out-quick);
}
.ws-search-input::placeholder { color: var(--label-tertiary); }
.ws-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--fill-tertiary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

.ws-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--label-tertiary);
  font-size: 14px;
  pointer-events: none;
}

.ws-search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--fill-tertiary);
  border: 1px solid var(--separator);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--label-secondary);
  pointer-events: none;
}

.ws-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 48px var(--glass-shadow);
  z-index: var(--z-nav);
}
.ws-search-results::-webkit-scrollbar { width: 4px; }
.ws-search-results::-webkit-scrollbar-thumb {
  background: var(--separator);
  border-radius: var(--radius-full);
}

.ws-search-section {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  padding: 8px 12px 4px;
}

.ws-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  color: var(--label-primary);
  transition: background var(--duration-fast) var(--ease-out-quick);
}
.ws-search-item:hover, .ws-search-item.selected {
  background: var(--fill-tertiary);
}
.ws-search-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--glass-brand-tint);
  color: var(--accent-bright);
  flex-shrink: 0;
}
.ws-search-item-icon i { font-size: 14px; }
.ws-search-item-text {
  flex: 1;
  min-width: 0;
}
.ws-search-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--label-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-search-item-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--label-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 4. User pill + dropdown ──────────────────────────────────────────────── */
.ws-topbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ws-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--label-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quick),
              color var(--duration-fast) var(--ease-out-quick);
}
.ws-icon-btn:hover {
  background: var(--fill-tertiary);
  color: var(--label-primary);
}
.ws-icon-btn i { font-size: 15px; }
.ws-notif-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--system-red);
  border: 2px solid var(--system-background);
}

.ws-user-pill-wrap {
  position: relative;
}

.ws-user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-full);
  background: var(--fill-tertiary);
  border: 1px solid var(--separator);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quick);
}
.ws-user-pill:hover { background: var(--fill-secondary); }

.ws-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--clid-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--system-background);
  flex-shrink: 0;
}

.ws-user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--label-primary);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-user-chevron {
  font-size: 10px;
  color: var(--label-secondary);
  transition: transform var(--duration-fast) var(--ease-spring-snappy);
}
.ws-user-pill[aria-expanded="true"] .ws-user-chevron { transform: rotate(180deg); }

.ws-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 48px var(--glass-shadow);
  z-index: var(--z-nav);
}

.ws-user-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 16px;
}

.ws-user-menu-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clid-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--system-background);
}

.ws-user-menu-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--label-primary);
}

.ws-user-menu-email {
  font-size: 13px;
  color: var(--label-secondary);
}

.ws-user-menu-divider {
  height: 1px;
  background: var(--separator);
  margin: 4px 0;
}

.ws-user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 400;
  color: var(--label-primary);
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  transition: background var(--duration-fast) var(--ease-out-quick);
}
.ws-user-menu-item:hover { background: var(--fill-tertiary); }
.ws-user-menu-item i { width: 16px; text-align: center; color: var(--label-secondary); }
.ws-user-menu-item.ws-signout { color: var(--system-red); }
.ws-user-menu-item.ws-signout i { color: var(--system-red); }

/* ── 5. Bottom pill nav ───────────────────────────────────────────────────── */
.ws-pillnav {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  padding: 8px;
  border-radius: var(--radius-full);
}

.ws-pillnav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ws-pillnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out-quick),
              transform var(--duration-fast) var(--ease-spring-snappy);
  position: relative;
}
.ws-pillnav-item:hover { background: var(--fill-tertiary); }
.ws-pillnav-item:active { transform: scale(0.95); }

.ws-pillnav-item.active {
  background: var(--glass-brand-tint-hover);
}
.ws-pillnav-item.active .ws-pillnav-icon {
  color: var(--accent-bright);
}

.ws-pillnav-icon {
  font-size: 20px;
  color: var(--label-secondary);
  transition: color var(--duration-fast) var(--ease-out-quick);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-pillnav-icon img { width: 22px; height: 22px; }

.ws-pillnav-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--label-secondary);
  white-space: nowrap;
}
.ws-pillnav-item.active .ws-pillnav-label {
  color: var(--accent-bright);
}

/* ── 6. Main view container ───────────────────────────────────────────────── */
.ws-view {
  padding-top: 72px; /* top bar height + breathing room */
  padding-bottom: 120px; /* pill nav height + breathing room */
  padding-left: 48px;
  padding-right: 48px;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100dvh;
}
@media (max-width: 960px) {
  .ws-view { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 560px) {
  .ws-view { padding-left: 16px; padding-right: 16px; padding-bottom: 100px; }
}

/* ── 7. Dashboard ───────────────────────────────────────────────────────────
   Base dashboard tokens. The dashboard container itself, hero, apps grid,
   and section heads are defined in section 7b below. */
.dashboard-hero {
  /* Legacy — replaced by .dash-hero in section 7b. Kept for backward compat. */
  display: none;
}

/* Dashboard grid layout */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Widget base */
.dash-widget {
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.45);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px var(--glass-shadow);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.dash-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-widget-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--label-primary);
}
.dash-widget-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-bright);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-spring-snappy);
}
.dash-widget-link:hover { transform: translateX(4px); }

/* Widget spans */
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 960px) {
  .col-12, .col-8, .col-6, .col-4, .col-3 { grid-column: span 12; }
}

/* IRIS proactive card */
.dash-iris-card {
  background: linear-gradient(135deg, rgba(0,217,126,0.12), rgba(59,130,246,0.08));
  border: 1px solid var(--glass-border);
}
.dash-iris-card .dash-widget-head {
  margin-bottom: 12px;
}
.dash-iris-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--glass-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-iris-icon img { width: 28px; height: 28px; }
.dash-iris-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--label-primary);
}
.dash-iris-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.dash-iris-btn {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring-snappy);
}
.dash-iris-btn:active { transform: scale(0.96); }
.dash-iris-btn.primary {
  background: var(--accent);
  color: var(--system-background);
}
.dash-iris-btn.ghost {
  background: transparent;
  color: var(--label-secondary);
  border: 1px solid var(--separator);
}

/* Quick actions */
.dash-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 560px) {
  .dash-quick-actions { grid-template-columns: repeat(2, 1fr); }
}
.dash-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-spring-snappy),
              background var(--duration-fast) var(--ease-out-quick);
}
.dash-quick-action:hover {
  transform: translateY(-2px);
  background: var(--fill-tertiary);
}
.dash-quick-action:active { transform: scale(0.96); }
.dash-quick-action-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--glass-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-bright);
}
.dash-quick-action-icon i { font-size: 16px; }
.dash-quick-action-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--label-primary);
}

/* Recent files */
.dash-files-list {
  display: grid;
  gap: 8px;
}
.dash-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out-quick);
}
.dash-file-row:hover { background: var(--fill-quaternary); }
.dash-file-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.dash-file-icon.sheets { background: rgba(48,209,88,0.18); color: #30D158; }
.dash-file-icon.docs { background: rgba(10,132,255,0.18); color: #0A84FF; }
.dash-file-icon.slides { background: rgba(255,159,10,0.18); color: #FF9F0A; }
.dash-file-icon.tasks { background: rgba(191,90,242,0.18); color: #BF5AF2; }
.dash-file-icon.notes { background: rgba(255,55,95,0.18); color: #FF375F; }
.dash-file-icon.calendar { background: rgba(64,200,224,0.18); color: #40C8E0; }
.dash-file-icon.drive { background: rgba(245,158,11,0.18); color: #FF9F0A; }
.dash-file-icon.default { background: var(--fill-tertiary); color: var(--label-secondary); }

.dash-file-info { flex: 1; min-width: 0; }
.dash-file-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--label-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-file-meta {
  font-size: 12px;
  color: var(--label-secondary);
}

/* Stats strip */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dash-stat {
  text-align: center;
}
.dash-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: var(--clid-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash-stat-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--label-secondary);
  margin-top: 4px;
}

/* Graphs */
.dash-graph {
  width: 100%;
  height: 200px;
}
.dash-graph-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Workspace cards */
.dash-workspaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.dash-workspace-card {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring-snappy),
              background var(--duration-fast) var(--ease-out-quick);
}
.dash-workspace-card:hover {
  transform: translateY(-2px);
  background: var(--fill-tertiary);
}
.dash-workspace-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--system-background);
  margin-bottom: 8px;
}
.dash-workspace-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--label-primary);
}
.dash-workspace-meta {
  font-size: 12px;
  color: var(--label-secondary);
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   7b. DASHBOARD HERO + APPS GRID + INSIGHTS (Rev 4 — beautiful multi-color)
   ════════════════════════════════════════════════════════════════════════ */

/* Hero — premium gradient banner with stats */
.dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  margin-bottom: 8px;
  background: linear-gradient(135deg,
    rgba(0, 217, 126, 0.15) 0%,
    rgba(59, 130, 246, 0.10) 50%,
    rgba(191, 90, 242, 0.08) 100%);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}
.dash-hero-glow {
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 232, 138, 0.25), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}
.dash-hero-content { flex: 1; min-width: 320px; position: relative; z-index: 1; }
.dash-hero-greeting {
  font-size: 14px; font-weight: 600;
  color: var(--accent-bright);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.dash-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 12px 0;
  color: var(--label-primary);
}
.dash-hero-grad {
  background: var(--clid-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash-hero-sub {
  font-size: 16px;
  color: var(--label-secondary);
  margin: 0 0 20px 0;
  max-width: 540px;
  line-height: 1.5;
}
.dash-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-hero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-spring-snappy),
              background var(--duration-fast) var(--ease-out-quick),
              box-shadow var(--duration-fast) var(--ease-out-quick);
}
.dash-hero-btn:active { transform: scale(0.97); }
.dash-hero-btn.primary {
  background: var(--clid-grad);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 217, 126, 0.35);
}
.dash-hero-btn.primary:hover {
  box-shadow: 0 12px 32px rgba(0, 217, 126, 0.45);
  transform: translateY(-1px);
}
.dash-hero-btn.ghost {
  background: rgba(var(--glass-tint), 0.55);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  color: var(--label-primary);
  border-color: var(--glass-border);
}
.dash-hero-btn.ghost:hover {
  background: rgba(var(--glass-tint), 0.75);
  border-color: var(--accent-bright);
}

/* Hero stats strip */
.dash-hero-stats {
  display: flex; gap: 28px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  position: relative; z-index: 1;
}
.dash-hero-stat { text-align: center; }
.dash-hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--clid-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.dash-hero-stat span {
  font-size: 11px;
  color: var(--label-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Section headings */
.dash-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 8px 0 -4px 0;
}
.dash-section-head h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--label-primary);
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.dash-section-head h2 i {
  color: var(--accent-bright);
  font-size: 16px;
}
.dash-section-sub {
  font-size: 13px;
  color: var(--label-secondary);
}

/* Apps grid — multi-color cards with per-card --app-color */
.dash-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}
.dash-app-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  color: var(--label-primary);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-spring-snappy),
              border-color var(--duration-fast) var(--ease-out-quick),
              box-shadow var(--duration-fast) var(--ease-out-quick);
}
.dash-app-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--app-color) 18%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.dash-app-card:hover {
  transform: translateY(-3px);
  border-color: var(--app-color);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--app-color) 25%, transparent);
}
.dash-app-card:hover::before { opacity: 1; }
.dash-app-card:active { transform: scale(0.98); }

.dash-app-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  background: color-mix(in srgb, var(--app-color) 22%, transparent);
  color: var(--app-color);
  position: relative; z-index: 1;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--app-color) 25%, transparent);
}
.dash-app-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--label-primary);
  position: relative; z-index: 1;
}
.dash-app-desc {
  font-size: 12px;
  color: var(--label-secondary);
  position: relative; z-index: 1;
}

/* Stat icons in the stats strip */
.dash-stat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: background 200ms ease;
}
.dash-stat:hover { background: var(--fill-quaternary); }
.dash-stat-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  margin-bottom: 4px;
}

/* File rows — add chevron */
.dash-file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  color: var(--label-primary);
  transition: background var(--duration-fast) var(--ease-out-quick),
              transform var(--duration-fast) var(--ease-spring-snappy);
}
.dash-file-row:hover {
  background: var(--fill-quaternary);
  transform: translateX(2px);
}
.dash-file-info { flex: 1; min-width: 0; }
.dash-file-name {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-file-meta {
  font-size: 12px;
  color: var(--label-secondary);
  margin-top: 2px;
}
.dash-file-chevron {
  color: var(--label-tertiary);
  font-size: 11px;
  transition: transform 200ms ease;
}
.dash-file-row:hover .dash-file-chevron {
  color: var(--accent-bright);
  transform: translateX(2px);
}

/* Graph loading state */
.dash-graph-loading {
  color: var(--label-secondary);
  font-size: 14px;
  padding: 48px 0;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.dash-graph-loading i { color: var(--accent-bright); }

/* Section divider helper */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
/* The dashboard container itself is a 12-col grid */
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 24px 0;
  align-items: start;
}
/* Full-width hero, IRIS card, section heads, apps grid span 12 cols */
.dashboard > .dash-hero,
.dashboard > .dash-iris-card,
.dashboard > .dash-section-head,
.dashboard > .dash-apps-grid,
.dashboard > .dash-widget.col-12 { grid-column: span 12; }
.dashboard > .dash-widget.col-8 { grid-column: span 8; }
.dashboard > .dash-widget.col-6 { grid-column: span 6; }
.dashboard > .dash-widget.col-4 { grid-column: span 4; }
@media (max-width: 960px) {
  .dashboard > .dash-hero,
  .dashboard > .dash-iris-card,
  .dashboard > .dash-section-head,
  .dashboard > .dash-apps-grid,
  .dashboard > .dash-widget.col-12,
  .dashboard > .dash-widget.col-8,
  .dashboard > .dash-widget.col-6,
  .dashboard > .dash-widget.col-4 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .dash-hero { padding: 24px 20px; gap: 16px; }
  .dash-hero-stats { gap: 16px; padding: 14px 16px; }
  .dash-hero-stat strong { font-size: 20px; }
  .dash-apps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════ */

/* ── 8. Drive page ────────────────────────────────────────────────────────── */
.drive-page {
  padding: 24px 0;
}
.drive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.drive-header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}
.drive-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--system-background);
  background: var(--accent);
  cursor: pointer;
  border: none;
  transition: transform var(--duration-fast) var(--ease-spring-snappy);
}
.drive-new-btn:active { transform: scale(0.96); }

.drive-new-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 48px var(--glass-shadow);
  z-index: var(--z-nav);
  display: none;
}
.drive-new-menu.show { display: block; }
.drive-new-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  color: var(--label-primary);
  transition: background var(--duration-fast) var(--ease-out-quick);
}
.drive-new-item:hover { background: var(--fill-tertiary); }
.drive-new-item i { width: 16px; text-align: center; }

.drive-list {
  display: grid;
  gap: 4px;
}
.drive-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out-quick);
}
.drive-file-row:hover { background: var(--fill-quaternary); }
.drive-file-row .dash-file-icon { width: 36px; height: 36px; }
.drive-file-name { font-size: 15px; }
.drive-file-meta { font-size: 13px; }
.drive-file-size {
  font-size: 13px;
  color: var(--label-secondary);
  flex-shrink: 0;
}

/* ── 9. Settings page ─────────────────────────────────────────────────────── */
.settings-page {
  padding: 24px 0;
  max-width: 720px;
  margin: 0 auto;
}
.settings-page h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}

.settings-section {
  margin-bottom: 32px;
}
.settings-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Nav-pill editor */
.pill-editor {
  display: grid;
  gap: 8px;
}
.pill-editor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
}
.pill-editor-slot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--system-background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.pill-editor-select {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
  background: var(--fill-tertiary);
  color: var(--label-primary);
  font-family: var(--font-text);
  font-size: 14px;
  cursor: pointer;
}
.pill-editor-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── 10. Auth gate ────────────────────────────────────────────────────────── */
.auth-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 24px;
}
.auth-gate h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}
.auth-gate p {
  font-size: 15px;
  color: var(--label-secondary);
  max-width: 400px;
  margin: 0;
}
.auth-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 600;
  color: var(--system-background);
  background: var(--accent);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-spring-snappy);
}
.auth-gate-btn:active { transform: scale(0.96); }

/* ── 11. Friday/IRIS overlay overrides ────────────────────────────────────── */
/* The existing friday.css isn't loaded in workspace.html, so we inline
   the essential Friday overlay styles here, with IRIS branding. */
.friday {
  position: fixed;
  right: 24px;
  bottom: 96px; /* Above the pill nav */
  z-index: 100000;
}
.friday-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: rgba(var(--glass-tint), 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px var(--glass-shadow);
  color: var(--label-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring-snappy);
}
.friday-toggle:hover { transform: translateY(-2px); }
.friday-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: friday-pulse 2s ease-in-out infinite;
}
@keyframes friday-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.friday-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(440px, calc(100vw - 48px));
  height: min(600px, calc(100vh - 200px));
  border-radius: var(--radius-xl);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 32px 64px var(--glass-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The hidden attribute must override display:flex */
.friday-panel[hidden] {
  display: none !important;
}

.friday-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--separator);
  background: var(--glass-brand-tint);
}
.friday-head-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.friday-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.friday-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--label-primary);
}
.friday-sub {
  font-size: 12px;
  color: var(--label-secondary);
}
.friday-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  color: var(--label-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quick);
}
.friday-icon-btn:hover { background: var(--fill-tertiary); }

.friday-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.friday-messages::-webkit-scrollbar { width: 4px; }
.friday-messages::-webkit-scrollbar-thumb {
  background: var(--separator);
  border-radius: var(--radius-full);
}

.friday-msg {
  max-width: 85%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--radius-lg);
  word-wrap: break-word;
}
.friday-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--system-background);
  border-bottom-right-radius: 4px;
}
.friday-msg.assistant {
  align-self: flex-start;
  background: var(--fill-tertiary);
  color: var(--label-primary);
  border-bottom-left-radius: 4px;
}

.friday-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--separator);
  background: var(--glass-brand-tint);
}
.friday-form input {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-primary);
  font-family: var(--font-text);
  font-size: 14px;
}
.friday-form input:focus { outline: none; border-color: var(--accent); }
.friday-form button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--accent);
  color: var(--system-background);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.friday-form button:active { transform: scale(0.92); }

/* ── Mascot (existing mascot.js) ──────────────────────────────────────────── */
.clid-mascot {
  z-index: 99998; /* Below Friday overlay, above content */
}

/* ── Mobile adjustments ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ws-topbar {
    padding: 8px 12px;
    gap: 8px;
  }
  .ws-topbar-brand span { display: none; }
  .ws-search-kbd { display: none; }
  .ws-user-name { display: none; }
  .ws-pillnav-item { padding: 8px 12px; }
  .ws-pillnav-label { display: none; }
  .friday { right: 16px; bottom: 88px; }
}

/* ════════════════════════════════════════════════════════════════════════
   12. Auth page — sign in / sign up
   ════════════════════════════════════════════════════════════════════════ */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 48px 0;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  border-radius: var(--radius-xl);
  position: relative;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}

.auth-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--label-primary);
  margin: 0 0 4px;
}

.auth-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--label-secondary);
  margin: 0;
}

/* Tabs — Sign in | Sign up */
.auth-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: 24px;
  background: var(--fill-quaternary);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
}

.auth-tab {
  flex: 1;
  padding: 10px 16px;
  border-radius: calc(var(--radius-md) - 4px);
  background: none;
  border: none;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--label-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quick),
              color var(--duration-fast) var(--ease-out-quick);
}

.auth-tab.active {
  background: var(--fill-tertiary);
  color: var(--label-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Method tabs — Magic link | Password */
.auth-method-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 20px;
  background: var(--fill-quaternary);
  border-radius: var(--radius-sm);
}

.auth-method-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: calc(var(--radius-sm) - 2px);
  background: none;
  border: none;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--label-tertiary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quick),
              color var(--duration-fast) var(--ease-out-quick);
}

.auth-method-tab.active {
  background: var(--fill-tertiary);
  color: var(--label-primary);
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--label-secondary);
}

.auth-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-primary);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 400;
  transition: border-color var(--duration-fast) var(--ease-out-quick),
              box-shadow var(--duration-fast) var(--ease-out-quick);
}

.auth-input::placeholder { color: var(--label-tertiary); }

.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Submit button */
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent);
  color: var(--system-background);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring-snappy),
              opacity var(--duration-fast) var(--ease-out-quick);
  margin-top: 8px;
}

.auth-submit:hover { opacity: 0.9; }
.auth-submit:active { transform: scale(0.98); }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-submit i { font-size: 14px; }

/* Messages */
.auth-message {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  padding: 0;
  min-height: 0;
  transition: all var(--duration-base) var(--ease-out-quick);
}

.auth-message:empty { padding: 0; min-height: 0; }

.auth-message.success {
  color: var(--accent-bright);
  padding: 12px 14px;
  background: var(--glass-brand-tint);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
}

.auth-message.error {
  color: var(--system-red);
  padding: 12px 14px;
  background: rgba(255, 69, 58, 0.08);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 69, 58, 0.2);
}

.auth-message.info {
  color: var(--label-primary);
  padding: 12px 14px;
  background: var(--fill-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
}

.auth-message i {
  margin-right: 6px;
}

/* Footer */
.auth-footer {
  margin-top: 32px;
  text-align: center;
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--label-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quick);
}

.auth-back:hover { color: var(--label-primary); }
.auth-back i { font-size: 11px; }

/* Hide pill nav + top bar search on auth page for a cleaner focus */
.ws-view:has(.auth-page) {
  max-width: 480px;
}

@media (max-width: 560px) {
  .auth-card { padding: 32px 24px; }
  .auth-title { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════════
   13. Clid Auth — passkey-first auth UI (Phase 3)
   Frontend rules: 150-250ms ease transitions, 8px grid, FA icons only.
   ════════════════════════════════════════════════════════════════════════ */
.clid-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 48px 0;
}

.clid-auth-card {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  border-radius: var(--radius-xl);
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Entry screen — one button, nothing else ──────────────────────────────── */
.auth-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.auth-entry-logo {
  width: 48px;
  height: 48px;
}

.auth-entry-hint {
  font-size: 13px;
  color: var(--label-tertiary);
  margin: 0;
}

.clid-entry-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 48px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--accent);
  color: var(--system-background);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease;
}

.clid-entry-btn:hover { opacity: 0.9; }
.clid-entry-btn:active { transform: scale(0.96); }
.clid-entry-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.clid-entry-btn i { font-size: 16px; }

/* ── Choice screen — Sign in / Create account ─────────────────────────────── */
.auth-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.auth-choice-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}

.auth-choice-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--label-primary);
  margin: 0;
}

.auth-choice-sub {
  font-size: 14px;
  color: var(--label-secondary);
  margin: 0 0 16px;
}

.clid-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease, background 150ms ease;
  border: none;
}

.clid-choice-btn.primary {
  background: var(--accent);
  color: var(--system-background);
}
.clid-choice-btn.primary:hover { opacity: 0.9; }

.clid-choice-btn.secondary {
  background: var(--fill-tertiary);
  color: var(--label-primary);
  border: 1px solid var(--separator);
}
.clid-choice-btn.secondary:hover { background: var(--fill-secondary); }

.clid-choice-btn:active { transform: scale(0.98); }
.clid-choice-btn i { font-size: 14px; }

/* ── Form screens (sign in, magic code, create account) ──────────────────── */
.auth-form-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-screen-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--label-primary);
  margin: 0;
  text-align: center;
}

.auth-screen-sub {
  font-size: 14px;
  color: var(--label-secondary);
  margin: 0 0 8px;
  text-align: center;
  line-height: 1.4;
}

/* ── Step indicator (create account flow) ─────────────────────────────────── */
.auth-stepper {
  text-align: center;
}

.auth-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.auth-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--fill-quaternary);
  color: var(--label-tertiary);
  border: 1px solid var(--separator);
  transition: background 200ms ease, color 200ms ease;
}

.auth-step.active {
  background: var(--accent);
  color: var(--system-background);
  border-color: var(--accent);
}

.auth-step.done {
  background: var(--accent);
  color: var(--system-background);
  border-color: var(--accent);
}

.auth-step i { font-size: 10px; }

/* ── Sex selection buttons ───────────────────────────────────────────────── */
.auth-sex-options {
  display: flex;
  gap: 16px;
  margin: 8px 0;
}

.auth-sex-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  color: var(--label-primary);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.auth-sex-btn:hover {
  background: var(--fill-tertiary);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.auth-sex-btn:active { transform: scale(0.97); }
.auth-sex-btn i { font-size: 28px; color: var(--accent); }

/* ── Email field with domain suffix ───────────────────────────────────────── */
.auth-email-field {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  transition: border-color 200ms ease;
}

.auth-email-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

.auth-email-input {
  flex: 1;
  border: none;
  background: none;
  padding: 12px 16px;
  color: var(--label-primary);
  font-family: var(--font-text);
  font-size: 15px;
}

.auth-email-input:focus { outline: none; }

.auth-domain-select {
  border: none;
  border-left: 1px solid var(--separator);
  background: var(--fill-tertiary);
  padding: 0 16px;
  color: var(--label-secondary);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* ── Submit button ───────────────────────────────────────────────────────── */
.clid-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent);
  color: var(--system-background);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease;
  margin-top: 8px;
}

.clid-submit-btn:hover { opacity: 0.9; }
.clid-submit-btn:active { transform: scale(0.98); }
.clid-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.clid-submit-btn i { font-size: 14px; }

/* ── Link button (secondary action) ──────────────────────────────────────── */
.clid-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  color: var(--accent-bright);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}

.clid-link-btn:hover { background: var(--glass-brand-tint); }
.clid-link-btn i { font-size: 13px; }

/* ── Passkey prompt ──────────────────────────────────────────────────────── */
.auth-passkey-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.auth-passkey-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--glass-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.auth-passkey-icon i {
  font-size: 28px;
  color: var(--accent);
}

/* ── Code input ──────────────────────────────────────────────────────────── */
.auth-code-input {
  text-align: center;
  font-size: 24px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 8px;
  font-weight: 600;
  padding: 16px;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--label-tertiary);
  font-size: 12px;
  margin: 8px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--separator);
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.auth-back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  background: none;
  border: none;
  color: var(--label-tertiary);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  margin-top: 16px;
  transition: color 150ms ease;
}

.auth-back-link:hover { color: var(--label-secondary); }
.auth-back-link i { font-size: 11px; }

/* ── Auth message ────────────────────────────────────────────────────────── */
.auth-message {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  padding: 0;
  min-height: 0;
  transition: all 200ms ease;
}

.auth-message:empty { padding: 0; min-height: 0; }

.auth-message.success {
  color: var(--accent-bright);
  padding: 12px 14px;
  background: var(--glass-brand-tint);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
}

.auth-message.error {
  color: var(--system-red);
  padding: 12px 14px;
  background: rgba(255, 69, 58, 0.08);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 69, 58, 0.2);
}

.auth-message.info {
  color: var(--label-primary);
  padding: 12px 14px;
  background: var(--fill-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
}

.auth-message i { margin-right: 6px; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .clid-auth-card { padding: 32px 24px; max-width: 100%; }
  .auth-screen-title { font-size: 18px; }
  .auth-sex-options { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════════
   14. Clid Cloud page
   ════════════════════════════════════════════════════════════════════════ */
.cloud-page { padding: 24px 0; max-width: 1000px; margin: 0 auto; }

.cloud-header { margin-bottom: 32px; }
.cloud-header h1 {
  font-family: var(--font-display); font-size: 28px; font-weight: 600;
  letter-spacing: -0.03em; margin: 0;
}
.cloud-subtitle { font-size: 15px; color: var(--label-secondary); margin: 4px 0 0; }

.cloud-services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 48px;
}
@media (max-width: 560px) { .cloud-services-grid { grid-template-columns: 1fr; } }

.cloud-service-tile {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  border-radius: var(--radius-lg); background: rgba(var(--glass-tint), 0.45);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--glass-border); box-shadow: 0 8px 24px var(--glass-shadow);
  cursor: pointer; transition: transform 150ms ease, background 150ms ease;
}
.cloud-service-tile:hover { transform: translateY(-2px); background: var(--fill-tertiary); }
.cloud-service-tile:active { transform: scale(0.98); }

.cloud-service-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cloud-service-icon i { font-size: 18px; }
.cloud-service-info { flex: 1; min-width: 0; }
.cloud-service-name { font-size: 15px; font-weight: 600; color: var(--label-primary); }
.cloud-service-desc { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
.cloud-service-arrow { color: var(--label-tertiary); font-size: 12px; }

.cloud-section { margin-bottom: 48px; }
.cloud-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cloud-section-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.cloud-section-head .cloud-section-title { margin: 0; }

.cloud-action-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: var(--radius-full); border: none; background: var(--accent);
  color: var(--system-background); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform 150ms ease;
}
.cloud-action-btn:active { transform: scale(0.96); }

.cloud-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .cloud-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.cloud-stat-card {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-radius: var(--radius-md); background: var(--fill-quaternary);
  border: 1px solid var(--separator);
}
.cloud-stat-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cloud-stat-icon i { font-size: 14px; }
.cloud-stat-value { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--label-primary); }
.cloud-stat-label { font-size: 12px; color: var(--label-secondary); }

.cloud-key-list { display: grid; gap: 8px; }
.cloud-key-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md); background: var(--fill-quaternary);
  border: 1px solid var(--separator);
}
.cloud-key-info { flex: 1; min-width: 0; }
.cloud-key-name { font-size: 14px; font-weight: 500; color: var(--label-primary); }
.cloud-key-id { font-size: 12px; color: var(--label-tertiary); font-family: var(--font-mono, monospace); }
.cloud-key-meta { display: flex; align-items: center; gap: 12px; }
.cloud-key-scope { font-size: 12px; color: var(--label-secondary); padding: 4px 10px; border-radius: var(--radius-full); background: var(--fill-tertiary); }
.cloud-key-revoke { background: none; border: none; color: var(--system-red); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); transition: background 150ms ease; }
.cloud-key-revoke:hover { background: rgba(255,69,58,0.1); }

.cloud-spend-card { padding: 24px; border-radius: var(--radius-md); background: var(--fill-quaternary); border: 1px solid var(--separator); }
.cloud-spend-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--separator); }
.cloud-spend-row:last-child { border-bottom: none; }
.cloud-spend-row span { font-size: 14px; color: var(--label-secondary); }
.cloud-spend-row strong { font-size: 14px; font-weight: 600; color: var(--label-primary); }

.cloud-empty { text-align: center; padding: 32px 0; }
.cloud-loading { color: var(--label-secondary); font-size: 14px; padding: 16px 0; text-align: center; }

/* ════════════════════════════════════════════════════════════════════════
   15. Drive page — complete file browser
   ════════════════════════════════════════════════════════════════════════ */
.drive-page { padding: 24px 0; max-width: 1000px; margin: 0 auto; }

.drive-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.drive-header h1 {
  font-family: var(--font-display); font-size: 28px; font-weight: 600;
  letter-spacing: -0.03em; margin: 0;
}

.drive-search-bar {
  position: relative; flex: 1; max-width: 320px;
}
.drive-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--label-tertiary); font-size: 13px; pointer-events: none;
}
.drive-search-input {
  width: 100%; padding: 8px 12px 8px 32px; border-radius: var(--radius-full);
  border: 1px solid var(--separator); background: var(--fill-quaternary);
  color: var(--label-primary); font-family: var(--font-text); font-size: 14px;
  transition: border-color 200ms ease;
}
.drive-search-input:focus { outline: none; border-color: var(--accent); }

.drive-new-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 20px;
  border-radius: var(--radius-full); border: none; background: var(--accent);
  color: var(--system-background); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform 150ms ease; white-space: nowrap;
}
.drive-new-btn:active { transform: scale(0.96); }

.drive-new-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  padding: 8px; border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: 0 24px 48px var(--glass-shadow);
  z-index: var(--z-nav); display: none;
}
.drive-new-menu.show { display: block; }
.drive-new-section { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--label-tertiary); padding: 8px 12px 4px; }
.drive-new-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius-md); cursor: pointer; font-size: 14px; color: var(--label-primary);
  transition: background 150ms ease;
}
.drive-new-item:hover { background: var(--fill-tertiary); }
.drive-new-item i { width: 16px; text-align: center; }
.drive-new-divider { height: 1px; background: var(--separator); margin: 4px 0; }

/* Storage bar */
.drive-storage {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: var(--radius-md); background: var(--fill-quaternary);
  border: 1px solid var(--separator); margin-bottom: 24px;
}
.drive-storage-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-secondary); white-space: nowrap; }
.drive-storage-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--separator); overflow: hidden; }
.drive-storage-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width 300ms ease; }

/* File list header */
.drive-list-header {
  display: grid; grid-template-columns: 1fr 120px 80px 60px;
  padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--label-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--separator);
  align-items: center;
}
.drive-col-check { display: flex; align-items: center; justify-content: center; }
.drive-col-name { display: flex; align-items: center; gap: 12px; }
.drive-col-date { text-align: left; }
.drive-col-size { text-align: left; }
.drive-col-actions { text-align: right; }

/* Sortable column headers */
.drive-sortable { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; transition: color 150ms ease; }
.drive-sortable:hover { color: var(--label-primary); }
.drive-sort-icon { font-size: 10px; opacity: 0.5; }
.drive-sortable:hover .drive-sort-icon { opacity: 1; }

/* Checkboxes */
.drive-check {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent);
}

/* File list */
.drive-list { display: grid; gap: 2px; }
.drive-file-row {
  display: grid; grid-template-columns: 1fr 120px 80px 60px;
  padding: 10px 16px; border-radius: var(--radius-md); cursor: pointer;
  transition: background 150ms ease; align-items: center;
}
.drive-file-row:hover { background: var(--fill-quaternary); }
.drive-file-row.selected { background: var(--glass-brand-tint); }

.drive-file-icon {
  width: 32px; height: 32px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px;
}
.drive-file-icon.sheets { background: rgba(48,209,88,0.18); color: #30D158; }
.drive-file-icon.docs { background: rgba(10,132,255,0.18); color: #0A84FF; }
.drive-file-icon.slides { background: rgba(255,159,10,0.18); color: #FF9F0A; }
.drive-file-icon.tasks { background: rgba(191,90,242,0.18); color: #BF5AF2; }
.drive-file-icon.notes { background: rgba(255,55,95,0.18); color: #FF375F; }
.drive-file-icon.calendar { background: rgba(64,200,224,0.18); color: #40C8E0; }
.drive-file-icon.default { background: var(--fill-tertiary); color: var(--label-secondary); }

.drive-file-name {
  font-size: 14px; font-weight: 500; color: var(--label-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drive-col-date { font-size: 13px; color: var(--label-secondary); }
.drive-col-size { font-size: 13px; color: var(--label-secondary); }
.drive-col-actions { display: flex; gap: 4px; justify-content: flex-end; }

.drive-row-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: none; border: none; color: var(--label-tertiary);
  cursor: pointer; transition: background 150ms ease, color 150ms ease;
}
.drive-row-btn:hover { background: var(--fill-tertiary); color: var(--label-primary); }
.drive-row-btn .is-starred { color: #FF9F0A; }

/* Empty / loading states */
.drive-empty {
  text-align: center; padding: 64px 0;
}
.drive-empty i {
  font-size: 48px; color: var(--label-tertiary); margin-bottom: 16px;
}
.drive-empty-title {
  font-size: 17px; font-weight: 600; color: var(--label-primary); margin-bottom: 4px;
}
.drive-empty-sub {
  font-size: 14px; color: var(--label-secondary);
}
.drive-loading {
  color: var(--label-secondary); font-size: 14px; padding: 32px 0; text-align: center;
}

/* Responsive */
@media (max-width: 760px) {
  .drive-list-header, .drive-file-row {
    grid-template-columns: 1fr 80px 50px;
  }
  .drive-col-actions { display: none; }
  .drive-list-header .drive-col-actions { display: none; }
}
@media (max-width: 560px) {
  .drive-list-header, .drive-file-row {
    grid-template-columns: 1fr;
  }
  .drive-col-date, .drive-col-size, .drive-list-header .drive-col-date, .drive-list-header .drive-col-size {
    display: none;
  }
  .drive-header { flex-direction: column; align-items: stretch; }
  .drive-search-bar { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   16. Toast notifications
   ════════════════════════════════════════════════════════════════════════ */
.ws-toast-container {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 10000; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; width: 100%; max-width: 400px; padding: 0 16px;
}
.ws-toast {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: 0 16px 48px var(--glass-shadow);
  font-size: 14px; font-weight: 500; color: var(--label-primary);
  pointer-events: auto; cursor: pointer;
  transform: translateY(-20px); opacity: 0;
  transition: transform 250ms var(--ease-spring-standard), opacity 200ms ease;
}
.ws-toast.show { transform: translateY(0); opacity: 1; }
.ws-toast.hide { transform: translateY(-20px); opacity: 0; }
.ws-toast i { font-size: 16px; flex-shrink: 0; }
.ws-toast.success i { color: var(--accent); }
.ws-toast.error i { color: var(--system-red); }
.ws-toast.info i { color: var(--system-blue); }
.ws-toast-text { flex: 1; }
.ws-toast-actions { display: flex; gap: 8px; }
.ws-toast-btn {
  padding: 4px 12px; border-radius: var(--radius-sm); border: none;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 150ms ease;
}
.ws-toast-btn:active { transform: scale(0.95); }
.ws-toast-btn.danger { background: var(--system-red); color: #fff; }
.ws-toast-btn.cancel { background: var(--fill-tertiary); color: var(--label-secondary); }

/* ════════════════════════════════════════════════════════════════════════
   17. Notifications panel
   ════════════════════════════════════════════════════════════════════════ */
.ws-notif-panel {
  position: fixed; top: 60px; right: 24px; z-index: var(--z-nav);
  width: 360px; max-height: 480px; overflow-y: auto;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: 0 24px 64px var(--glass-shadow);
  display: none; flex-direction: column;
}
.ws-notif-panel.show { display: flex; }
.ws-notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--separator);
}
.ws-notif-panel-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.ws-notif-panel-body { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ws-notif-item {
  display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-md);
  cursor: pointer; transition: background 150ms ease;
}
.ws-notif-item:hover { background: var(--fill-quaternary); }
.ws-notif-item.unread { background: var(--glass-brand-tint); }
.ws-notif-icon {
  width: 32px; height: 32px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px;
  background: var(--glass-brand-tint); color: var(--accent);
}
.ws-notif-content { flex: 1; min-width: 0; }
.ws-notif-title { font-size: 14px; font-weight: 500; color: var(--label-primary); }
.ws-notif-msg { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
.ws-notif-time { font-size: 11px; color: var(--label-tertiary); margin-top: 4px; }
.ws-notif-empty { text-align: center; padding: 32px 0; color: var(--label-secondary); font-size: 14px; }

/* ════════════════════════════════════════════════════════════════════════
   18. Expanded Settings
   ════════════════════════════════════════════════════════════════════════ */
.settings-nav {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-lg);
  background: var(--fill-quaternary); border: 1px solid var(--separator);
  margin-bottom: 32px; overflow-x: auto;
}
.settings-nav-item {
  padding: 8px 16px; border-radius: calc(var(--radius-lg) - 4px);
  font-size: 14px; font-weight: 500; color: var(--label-secondary);
  cursor: pointer; white-space: nowrap; border: none; background: none;
  transition: background 150ms ease, color 150ms ease;
}
.settings-nav-item.active { background: var(--fill-tertiary); color: var(--label-primary); }
.settings-nav-item:hover { color: var(--label-primary); }

.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--separator); gap: 16px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: 15px; font-weight: 500; color: var(--label-primary); }
.settings-row-desc { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
.settings-row-value { font-size: 14px; color: var(--label-secondary); text-align: right; }

.settings-toggle {
  position: relative; width: 44px; height: 26px; border-radius: 99px;
  background: var(--fill-tertiary); border: 1px solid var(--separator);
  cursor: pointer; transition: background 200ms ease; flex-shrink: 0;
}
.settings-toggle.on { background: var(--accent); }
.settings-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform 200ms var(--ease-spring-standard);
}
.settings-toggle.on::after { transform: translateX(18px); }

.settings-section-card {
  padding: 24px; border-radius: var(--radius-lg);
  background: var(--fill-quaternary); border: 1px solid var(--separator);
  margin-bottom: 16px;
}

/* ════════════════════════════════════════════════════════════════════════
   19. File editors
   ════════════════════════════════════════════════════════════════════════ */
.editor-shell {
  display: flex; flex-direction: column; min-height: calc(100vh - 200px);
}
.editor-topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 0 16px;
  border-bottom: 1px solid var(--separator); margin-bottom: 16px;
}
.editor-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  color: var(--label-secondary); transition: background 150ms ease, color 150ms ease;
}
.editor-back:hover { background: var(--fill-tertiary); color: var(--label-primary); }
.editor-title {
  flex: 1; background: none; border: none; color: var(--label-primary);
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em; padding: 6px 8px; border-radius: var(--radius-sm);
  transition: background 150ms ease;
}
.editor-title:focus { outline: none; background: var(--fill-quaternary); }
.editor-savestate {
  font-size: 12px; color: var(--label-secondary); display: flex;
  align-items: center; gap: 4px; white-space: nowrap;
}
.editor-actions { display: flex; gap: 4px; }
.editor-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full); border: none;
  background: var(--fill-quaternary); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background 150ms ease;
}
.editor-btn:hover { background: var(--fill-tertiary); }
.editor-root { flex: 1; overflow: auto; }

/* Spring entrance for widgets */
.dash-widget.spring-in,
.drive-file-row.spring-in,
.settings-section-card.spring-in {
  opacity: 0; transform: translateY(20px) translateZ(-32px) scale(0.98);
  transform-style: preserve-3d;
  transition: opacity 500ms var(--ease-spring-standard), transform 600ms var(--ease-spring-standard);
  transition-delay: var(--spring-delay, 0ms);
  will-change: opacity, transform;
}
.dash-widget.spring-in.is-visible,
.drive-file-row.spring-in.is-visible,
.settings-section-card.spring-in.is-visible {
  opacity: 1; transform: translateY(0) translateZ(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .dash-widget.spring-in, .drive-file-row.spring-in, .settings-section-card.spring-in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Drive context menu */
.drive-ctx-menu {
  position: fixed; z-index: 10000; min-width: 180px; padding: 6px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: 0 24px 48px var(--glass-shadow);
  display: none;
}
.drive-ctx-menu.show { display: block; }
.drive-ctx-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-md); cursor: pointer; font-size: 14px; color: var(--label-primary);
  transition: background 150ms ease;
}
.drive-ctx-item:hover { background: var(--fill-tertiary); }
.drive-ctx-item.danger { color: var(--system-red); }
.drive-ctx-item i { width: 14px; text-align: center; font-size: 13px; }
.drive-ctx-divider { height: 1px; background: var(--separator); margin: 4px 0; }

/* Drive drag-drop zone */
.drive-dropzone {
  border: 2px dashed var(--separator); border-radius: var(--radius-lg);
  padding: 32px; text-align: center; margin-bottom: 16px;
  transition: border-color 200ms ease, background 200ms ease;
  display: none;
}
.drive-dropzone.show { display: block; }
.drive-dropzone.dragover {
  border-color: var(--accent); background: var(--glass-brand-tint);
}
.drive-dropzone-icon { font-size: 32px; color: var(--accent); margin-bottom: 8px; }
.drive-dropzone-text { font-size: 14px; color: var(--label-secondary); }

/* ════════════════════════════════════════════════════════════════════════
   20. Sharing modal + external drives + offline + access gate
   ════════════════════════════════════════════════════════════════════════ */
.ws-share-modal {
  position: fixed; inset: 0; z-index: 10001; display: flex;
  align-items: center; justify-content: center; transition: opacity 200ms ease;
}
.ws-share-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ws-share-panel {
  position: relative; width: min(480px, 90vw); max-height: 80vh; overflow-y: auto;
  padding: 28px; border-radius: var(--radius-xl);
  background: rgba(var(--glass-tint), 0.86);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: 0 32px 64px var(--glass-shadow);
}
.ws-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ws-share-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.ws-share-sub { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
.ws-share-close {
  width: 32px; height: 32px; border-radius: var(--radius-full); border: none;
  background: none; color: var(--label-secondary); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background 150ms ease;
}
.ws-share-close:hover { background: var(--fill-tertiary); }
.ws-share-body { display: flex; flex-direction: column; gap: 16px; }
.ws-share-loading { color: var(--label-secondary); font-size: 14px; text-align: center; padding: 24px 0; }
.ws-share-error { color: var(--system-red); font-size: 14px; text-align: center; padding: 24px 0; }
.ws-share-section { display: flex; flex-direction: column; gap: 8px; }
.ws-share-label { font-size: 13px; font-weight: 600; color: var(--label-primary); }
.ws-share-sub-text { font-size: 12px; color: var(--label-secondary); }
.ws-share-perms { display: flex; gap: 8px; }
.ws-share-perm {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: var(--radius-md); border: 1px solid var(--separator);
  background: var(--fill-quaternary); color: var(--label-secondary); cursor: pointer;
  font-size: 12px; font-weight: 500; transition: all 150ms ease;
}
.ws-share-perm:hover { background: var(--fill-tertiary); }
.ws-share-perm.active { background: var(--glass-brand-tint); border-color: var(--accent); color: var(--accent-bright); }
.ws-share-perm i { font-size: 16px; }
.ws-share-select {
  padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--separator);
  background: var(--fill-quaternary); color: var(--label-primary); font-size: 14px; cursor: pointer;
}
.ws-share-input {
  padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--separator);
  background: var(--fill-quaternary); color: var(--label-primary); font-size: 14px;
}
.ws-share-input:focus { outline: none; border-color: var(--accent); }
.ws-share-create-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-md); border: none;
  background: var(--accent); color: var(--system-background);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: transform 150ms ease;
}
.ws-share-create-btn:active { transform: scale(0.98); }
.ws-share-divider { height: 1px; background: var(--separator); margin: 4px 0; }
.ws-share-links { display: flex; flex-direction: column; gap: 8px; }
.ws-share-link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border-radius: var(--radius-md); background: var(--fill-quaternary);
  border: 1px solid var(--separator);
}
.ws-share-link-info { flex: 1; min-width: 0; }
.ws-share-link-url {
  font-size: 13px; font-weight: 500; color: var(--label-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono, monospace);
}
.ws-share-link-meta { font-size: 11px; color: var(--label-secondary); margin-top: 2px; }
.ws-share-link-actions { display: flex; gap: 4px; }
.ws-share-link-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm); border: none;
  background: var(--fill-tertiary); color: var(--label-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 150ms ease;
}
.ws-share-link-btn:hover { background: var(--fill-secondary); color: var(--label-primary); }
.ws-share-link-btn.danger:hover { background: rgba(255,69,58,0.1); color: var(--system-red); }
.ws-share-offline-row { display: flex; align-items: center; justify-content: space-between; }
.ws-share-offline-btn {
  width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--separator);
  background: var(--fill-quaternary); color: var(--label-secondary); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; transition: all 150ms ease;
}
.ws-share-offline-btn:hover { background: var(--fill-tertiary); }

/* External drives */
.ws-ext-drive-card {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-radius: var(--radius-md); background: var(--fill-quaternary); border: 1px solid var(--separator);
}
.ws-ext-drive-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ws-ext-drive-info { flex: 1; }
.ws-ext-drive-name { font-size: 15px; font-weight: 600; }
.ws-ext-drive-status { font-size: 12px; color: var(--label-secondary); }
.ws-ext-drive-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: var(--radius-full); border: none; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: transform 150ms ease;
}
.ws-ext-drive-btn.primary { background: var(--accent); color: var(--system-background); }
.ws-ext-drive-btn.danger { background: rgba(255,69,58,0.1); color: var(--system-red); }
.ws-ext-drive-btn:active { transform: scale(0.96); }
.ws-ext-files { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.ws-ext-file-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--fill-quaternary); border: 1px solid var(--separator);
}
.ws-ext-file-row i { color: var(--label-secondary); font-size: 14px; }
.ws-ext-file-name { flex: 1; font-size: 13px; color: var(--label-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-ext-import-btn {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: var(--radius-sm); border: none; background: var(--accent);
  color: var(--system-background); font-size: 12px; font-weight: 600; cursor: pointer;
}
.ws-ext-loading { color: var(--label-secondary); font-size: 13px; padding: 12px 0; text-align: center; }

/* Access gate */
.ws-access-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50vh; text-align: center; gap: 16px;
}
.ws-access-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--glass-brand-tint);
  display: flex; align-items: center; justify-content: center;
}
.ws-access-icon i { font-size: 28px; color: var(--accent); }
.ws-access-gate h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0; }
.ws-access-gate p { font-size: 15px; color: var(--label-secondary); max-width: 400px; margin: 0; }
.ws-access-btn {
  display: flex; align-items: center; gap: 8px; padding: 12px 24px;
  border-radius: var(--radius-full); border: none; background: var(--accent);
  color: var(--system-background); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform 150ms ease;
}
.ws-access-btn:active { transform: scale(0.96); }

/* ════════════════════════════════════════════════════════════════════════
   20. DRIVE SIDEBAR + shared/offline indicators
   ════════════════════════════════════════════════════════════════════════ */
.drive-page {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 24px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
.drive-main { min-width: 0; }

.drive-sidebar {
  position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
}

.drive-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-md);
  border: none; background: transparent;
  color: var(--label-secondary); font-family: var(--font-text);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  text-align: left; width: 100%; position: relative;
}
.drive-side-item:hover {
  background: var(--fill-tertiary); color: var(--label-primary);
}
.drive-side-item:active { transform: scale(0.98); }
.drive-side-item.active {
  background: var(--glass-brand-tint); color: var(--accent-bright);
  font-weight: 600;
}
.drive-side-item i:first-child {
  width: 18px; text-align: center; font-size: 14px;
}
.drive-side-item span { flex: 1; }
.drive-side-ext-icon {
  font-size: 10px !important; color: var(--label-tertiary);
  width: auto !important; margin-left: auto;
}
.drive-side-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px; background: var(--accent);
  color: var(--system-background); font-size: 11px; font-weight: 700;
}
.drive-side-divider {
  height: 1px; background: var(--separator); margin: 8px 4px;
}

/* Storage card in sidebar */
.drive-side-storage {
  margin-top: 12px; padding: 12px;
  border-radius: var(--radius-md); background: var(--fill-quaternary);
}
.drive-side-storage-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--label-secondary); margin-bottom: 6px;
}
.drive-side-storage-num {
  font-size: 11px; color: var(--label-tertiary);
  font-variant-numeric: tabular-nums;
}
.drive-side-storage-bar {
  height: 5px; border-radius: 99px;
  background: var(--separator); overflow: hidden;
}
.drive-side-storage-fill {
  height: 100%; background: var(--accent); border-radius: 99px;
  transition: width 400ms cubic-bezier(0.36, 0.66, 0.04, 1);
}

/* Shared / offline indicators inline with file name */
.drive-shared-icon {
  color: var(--accent); font-size: 11px; margin-left: 6px;
  opacity: 0.85;
}
.drive-owner {
  font-size: 12px; color: var(--label-tertiary);
  margin-left: 8px; padding: 2px 8px;
  background: var(--fill-tertiary); border-radius: 99px;
  font-weight: 500;
}

/* Responsive — collapse sidebar into a horizontal scroll bar on narrow */
@media (max-width: 880px) {
  .drive-page { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .drive-sidebar {
    position: static; flex-direction: row; overflow-x: auto;
    padding: 8px; gap: 4px;
  }
  .drive-side-item { white-space: nowrap; }
  .drive-side-divider { display: none; }
  .drive-side-storage { display: none; }
}

/* Request-access page polish */
.ws-access-gate .ws-access-requested {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; margin-top: 8px;
  border-radius: var(--radius-md);
  background: rgba(48, 209, 88, 0.1);
  color: #30D158; font-size: 14px; font-weight: 500;
}

/* Back link in shared/offline route headers */
.ws-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--label-secondary); text-decoration: none;
  font-size: 13px; padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  transition: background 150ms ease;
}
.ws-back-link:hover { background: var(--fill-tertiary); color: var(--label-primary); }

/* ════════════════════════════════════════════════════════════════════════
   8b. DRIVE PRO FEATURES — storage hero, filters, view toggle, grid, bulk
   ════════════════════════════════════════════════════════════════════════ */

/* Storage hero strip — gradient banner at the top of Drive */
.drive-storage-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
  background: linear-gradient(135deg,
    rgba(0, 217, 126, 0.10) 0%,
    rgba(59, 130, 246, 0.06) 100%);
  border: 1px solid var(--glass-border);
}
.drive-storage-hero-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 232, 138, 0.18), transparent 70%);
  pointer-events: none;
  filter: blur(16px);
}
.drive-storage-hero-content {
  display: flex; align-items: center; gap: 16px;
  position: relative; z-index: 1;
}
.drive-storage-hero-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--glass-brand-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--accent-bright);
  flex-shrink: 0;
}
.drive-storage-hero-text { flex: 1; min-width: 0; }
.drive-storage-hero-title {
  font-size: 14px; font-weight: 600;
  color: var(--label-primary);
  margin-bottom: 8px;
}
.drive-storage-hero-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--separator);
  overflow: hidden;
  margin-bottom: 6px;
}
.drive-storage-hero-fill {
  height: 100%;
  background: var(--clid-grad);
  border-radius: 99px;
  transition: width 600ms var(--ease-spring-standard);
}
.drive-storage-hero-sub {
  font-size: 12px;
  color: var(--label-secondary);
  display: flex; align-items: center; gap: 4px;
}
.drive-storage-hero-sub i { font-size: 11px; }

/* Drive header tools layout */
.drive-header-tools {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.drive-title-icon {
  color: var(--accent-bright);
  font-size: 22px;
  margin-right: 4px;
}

/* View toggle — list / grid */
.drive-view-toggle {
  display: flex;
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}
.drive-view-btn {
  width: 32px; height: 32px;
  border: none; background: transparent;
  border-radius: var(--radius-full);
  color: var(--label-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background 150ms ease, color 150ms ease;
}
.drive-view-btn:hover { color: var(--label-primary); }
.drive-view-btn.active {
  background: var(--glass-brand-tint);
  color: var(--accent-bright);
}

/* Filter chips — multi-color */
.drive-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.drive-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}
.drive-filter-chip i { font-size: 11px; }
.drive-filter-chip:hover {
  background: var(--fill-tertiary);
  color: var(--label-primary);
  border-color: var(--label-tertiary);
}
.drive-filter-chip.active {
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 15%, transparent);
  color: var(--chip-color, var(--accent-bright));
  border-color: var(--chip-color, var(--accent));
  font-weight: 600;
}
.drive-filter-chip.active i { color: var(--chip-color, var(--accent-bright)); }

/* Bulk action toolbar */
.drive-bulk-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: rgba(var(--glass-tint), 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 16px var(--glass-shadow);
  animation: bulk-bar-in 220ms var(--ease-spring-snappy);
}
@keyframes bulk-bar-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.drive-bulk-info {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--label-primary);
}
.drive-bulk-info strong {
  color: var(--accent-bright);
  font-size: 16px;
}
.drive-bulk-clear {
  width: 28px; height: 28px;
  border: none; background: var(--fill-tertiary);
  border-radius: 50%;
  color: var(--label-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease;
}
.drive-bulk-clear:hover { background: var(--fill-secondary); color: var(--label-primary); }
.drive-bulk-actions { display: flex; gap: 6px; }
.drive-bulk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-primary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}
.drive-bulk-btn:hover {
  background: var(--fill-tertiary);
  border-color: var(--label-tertiary);
}
.drive-bulk-btn.danger {
  color: var(--system-red);
  border-color: rgba(255,69,58,0.3);
}
.drive-bulk-btn.danger:hover {
  background: rgba(255,69,58,0.1);
  border-color: var(--system-red);
}
.drive-bulk-btn i { font-size: 11px; }

/* Grid view */
.drive-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.drive-grid-card {
  position: relative;
  padding: 20px 16px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-spring-snappy),
              border-color var(--duration-fast) var(--ease-out-quick),
              box-shadow var(--duration-fast) var(--ease-out-quick);
}
.drive-grid-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--file-color) 12%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.drive-grid-card:hover {
  transform: translateY(-3px);
  border-color: var(--file-color);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--file-color) 20%, transparent);
}
.drive-grid-card:hover::before { opacity: 1; }
.drive-grid-card.selected {
  border-color: var(--accent);
  background: var(--glass-brand-tint);
}
.drive-grid-check {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  opacity: 0;
  transition: opacity 150ms ease;
}
.drive-grid-card:hover .drive-grid-check,
.drive-grid-card.selected .drive-grid-check {
  opacity: 1;
}
.drive-grid-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: color-mix(in srgb, var(--file-color) 18%, transparent);
  color: var(--file-color);
  position: relative; z-index: 1;
}
.drive-grid-name {
  font-size: 13px; font-weight: 600;
  color: var(--label-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
  position: relative; z-index: 1;
}
.drive-grid-meta {
  font-size: 11px;
  color: var(--label-secondary);
  display: flex; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}
.drive-grid-star, .drive-grid-shared { font-size: 10px; }
.drive-grid-more {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border: none; background: var(--fill-tertiary);
  border-radius: 50%;
  color: var(--label-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease, background 150ms ease;
  z-index: 2;
}
.drive-grid-card:hover .drive-grid-more { opacity: 1; }
.drive-grid-more:hover { background: var(--fill-secondary); color: var(--label-primary); }

/* Better empty state */
.drive-empty-icon {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--glass-brand-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  color: var(--accent-bright);
}
.drive-empty i { font-size: inherit; margin: 0; color: inherit; }

/* Loading spinner */
.drive-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--label-secondary); font-size: 14px;
  padding: 48px 0;
}
.drive-loading i { color: var(--accent-bright); font-size: 18px; }

/* Responsive */
@media (max-width: 760px) {
  .drive-storage-hero-content { flex-direction: column; align-items: flex-start; gap: 8px; }
  .drive-storage-hero-icon { width: 40px; height: 40px; font-size: 16px; }
  .drive-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .drive-filter-chip { white-space: nowrap; }
  .drive-bulk-bar { flex-direction: column; gap: 8px; align-items: stretch; }
  .drive-bulk-actions { justify-content: center; flex-wrap: wrap; }
  .drive-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════
   8c. IRIS CHAT — welcome, suggestions, thinking, tool cards
   ════════════════════════════════════════════════════════════════════════ */

/* Welcome card */
.friday-welcome {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 24px 16px 8px;
}
.friday-welcome-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--glass-brand-tint);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--accent-bright);
}
.friday-welcome-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  color: var(--label-primary);
}
.friday-welcome-sub {
  font-size: 13px; color: var(--label-secondary);
  line-height: 1.5; max-width: 320px;
}

/* Suggestion chips */
.friday-suggestions {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; margin-top: 8px;
}
.friday-suggestion {
  text-align: left; padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-primary);
  font-size: 13px; font-family: var(--font-text);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.friday-suggestion:hover {
  background: var(--fill-tertiary);
  border-color: var(--accent-bright);
}
.friday-suggestion::before {
  content: '\f0e7'; /* fa-bolt */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-right: 8px;
  color: var(--accent-bright);
  font-size: 11px;
}

/* Thinking animation */
.friday-msg.thinking {
  display: flex; align-items: center; gap: 6px;
  color: var(--label-secondary);
  font-style: italic;
}
.friday-msg.thinking::before {
  content: '';
  width: 12px; height: 12px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: friday-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.friday-msg.thinking::after {
  content: 'Thinking…';
  animation: friday-dots 1.5s ease-in-out infinite;
}
@keyframes friday-spin { to { transform: rotate(360deg); } }
@keyframes friday-dots {
  0%, 100% { content: 'Thinking'; }
  33% { content: 'Thinking.'; }
  66% { content: 'Thinking..'; }
}

/* Error message */
.friday-msg.error {
  background: rgba(255, 69, 58, 0.1);
  color: var(--system-red);
  border: 1px solid rgba(255, 69, 58, 0.2);
}

/* Tool cards */
.friday-tool-card {
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 4px 0;
  font-size: 13px;
}
.friday-tool-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.friday-tool-icon { font-size: 14px; }
.friday-tool-name {
  font-weight: 600; color: var(--label-primary);
  flex: 1;
}
.friday-tool-status {
  font-size: 11px; color: var(--label-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.friday-tool-status.done { color: var(--accent-bright); }
.friday-tool-status.failed { color: var(--system-red); }
.friday-tool-status.denied { color: var(--label-tertiary); }
.friday-tool-args {
  margin: 4px 0;
  font-size: 11px;
}
.friday-tool-args summary {
  cursor: pointer; color: var(--label-tertiary);
  user-select: none;
}
.friday-tool-args pre {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--fill-tertiary);
  border-radius: var(--radius-sm);
  font-size: 11px;
  overflow-x: auto;
  color: var(--label-secondary);
}
.friday-tool-result {
  margin-top: 6px;
}
.friday-tool-result pre {
  padding: 8px;
  background: var(--fill-tertiary);
  border-radius: var(--radius-sm);
  font-size: 11px;
  overflow-x: auto;
  color: var(--label-primary);
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.friday-tool-error {
  color: var(--system-red);
  font-size: 12px;
}

/* Confirmation card */
.friday-tool-confirm {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 159, 10, 0.08);
  border: 1px solid rgba(255, 159, 10, 0.2);
}
.friday-confirm-text {
  font-size: 13px; color: var(--label-primary);
  margin-bottom: 8px;
}
.friday-confirm-text .muted { color: var(--label-secondary); font-size: 12px; }
.friday-confirm-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}
.friday-confirm-actions .btn-sm {
  padding: 4px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--separator); background: var(--fill-quaternary);
  color: var(--label-primary); font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.friday-confirm-actions .btn-sm:hover { background: var(--fill-tertiary); }
.friday-confirm-actions .btn-danger {
  background: var(--system-red); color: #fff; border-color: var(--system-red);
}
.friday-confirm-actions .btn-danger:hover { opacity: 0.9; }

/* Fallback hint */
.friday-fallback-hint {
  font-size: 10px; color: var(--label-tertiary);
  margin-top: 4px; font-style: italic;
}

/* Ensure messages have proper width and don't float */
.friday-msg {
  min-width: 40px;
  width: fit-content;
  max-width: 85%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════════════
   21. WORKSPACE SWITCHER — Slack-style dropdown
   ════════════════════════════════════════════════════════════════════════ */
.ws-workspace-switcher {
  position: relative;
}

.ws-workspace-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-full);
  background: var(--fill-quaternary);
  color: var(--label-primary);
  font-family: var(--font-text);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.ws-workspace-btn:hover {
  background: var(--fill-tertiary);
  border-color: var(--label-tertiary);
}
.ws-workspace-btn:active { transform: scale(0.98); }

.ws-workspace-logo {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ws-workspace-initials {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--system-background);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.ws-workspace-name {
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-workspace-chevron {
  font-size: 10px;
  color: var(--label-tertiary);
  transition: transform 200ms ease;
}
.ws-workspace-btn[aria-expanded="true"] .ws-workspace-chevron {
  transform: rotate(180deg);
}

/* Dropdown menu */
.ws-workspace-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  max-width: 320px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.92);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 32px 64px var(--glass-shadow);
  z-index: var(--z-nav);
  animation: ws-menu-in 200ms var(--ease-spring-snappy);
}
@keyframes ws-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ws-workspace-menu-head {
  padding: 6px 12px 8px;
  font-size: 11px; font-weight: 700;
  color: var(--label-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ws-workspace-menu-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.ws-workspace-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: none; background: none;
  color: var(--label-primary);
  font-family: var(--font-text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 150ms ease;
}
.ws-workspace-menu-item:hover { background: var(--fill-tertiary); }
.ws-workspace-menu-item.active {
  background: var(--glass-brand-tint);
}
.ws-workspace-menu-logo {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ws-workspace-menu-initials {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.ws-workspace-menu-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ws-workspace-menu-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-workspace-menu-role {
  font-size: 11px;
  color: var(--label-tertiary);
  text-transform: capitalize;
}
.ws-workspace-active-check {
  color: var(--accent-bright);
  font-size: 12px;
}
.ws-workspace-menu-divider {
  height: 1px;
  background: var(--separator);
  margin: 4px 0;
}
.ws-workspace-menu-item.create {
  color: var(--accent-bright);
  font-weight: 600;
}
.ws-workspace-menu-item.create i {
  width: 32px;
  text-align: center;
  font-size: 14px;
}
.ws-workspace-loading {
  padding: 16px 12px;
  text-align: center;
  color: var(--label-secondary);
  font-size: 13px;
}
.ws-workspace-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--label-tertiary);
  font-size: 13px;
}

/* Create workspace modal */
.ws-cw-logo-section {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 8px;
}
.ws-cw-logo-preview {
  width: 72px; height: 72px;
  border-radius: var(--radius-lg);
  background: var(--fill-tertiary);
  border: 2px dashed var(--separator);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ws-cw-logo-preview i {
  font-size: 24px;
  color: var(--label-tertiary);
}
.ws-cw-logo-actions {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 4px;
}
.ws-cw-logo-sub {
  font-size: 12px;
  color: var(--label-secondary);
}
.ws-cw-logo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: background 150ms ease, border-color 150ms ease;
}
.ws-cw-logo-btn:hover {
  background: var(--fill-tertiary);
  border-color: var(--accent-bright);
}
.ws-cw-slug-row {
  display: flex; align-items: center;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  overflow: hidden;
}
.ws-cw-slug-prefix {
  padding: 0 10px;
  font-size: 13px;
  color: var(--label-tertiary);
  font-family: var(--font-text, monospace);
}
.ws-cw-slug-row .ws-share-input {
  border: none;
  background: none;
  border-radius: 0;
}
.ws-cw-slug-hint {
  font-size: 11px;
  color: var(--label-tertiary);
  margin-top: 4px;
}

/* Responsive — hide the name on narrow screens */
@media (max-width: 560px) {
  .ws-workspace-name { display: none; }
  .ws-workspace-btn { padding: 6px; }
}

/* ════════════════════════════════════════════════════════════════════════
   22. EDITOR STYLES — doc, slides, whiteboard, script
   ════════════════════════════════════════════════════════════════════════ */

/* Doc editor — toolbar + paper */
.clid-doc-editor {
  display: flex; flex-direction: column; gap: 16px;
}
.clid-doc-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(var(--glass-tint), 0.6);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 10;
}
.clid-doc-btn {
  width: 32px; height: 32px;
  border: none; background: none;
  border-radius: var(--radius-sm);
  color: var(--label-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background 150ms ease, color 150ms ease;
}
.clid-doc-btn:hover { background: var(--fill-tertiary); color: var(--label-primary); }
.clid-doc-btn:active { transform: scale(0.95); }
.clid-doc-divider {
  width: 1px; height: 20px;
  background: var(--separator);
  margin: 0 4px;
}
.clid-doc-paper {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 64px;
  min-height: 500px;
  border-radius: var(--radius-lg);
  background: var(--system-background-secondary);
  border: 1px solid var(--glass-border);
  color: var(--label-primary);
  font-family: var(--font-text), Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  outline: none;
  transition: border-color 200ms ease;
}
.clid-doc-paper:focus { border-color: var(--accent); }
.clid-doc-paper:empty::before {
  content: 'Start writing…';
  color: var(--label-tertiary);
  pointer-events: none;
}
.clid-doc-paper h1 { font-size: 28px; font-weight: 700; margin: 16px 0 8px; }
.clid-doc-paper h2 { font-size: 22px; font-weight: 600; margin: 14px 0 6px; }
.clid-doc-paper h3 { font-size: 18px; font-weight: 600; margin: 12px 0 4px; }
.clid-doc-paper p { margin: 8px 0; }
.clid-doc-paper blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--label-secondary);
  font-style: italic;
}
.clid-doc-paper pre {
  background: var(--fill-quaternary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  overflow-x: auto;
  margin: 12px 0;
}
.clid-doc-paper ul, .clid-doc-paper ol { padding-left: 24px; margin: 8px 0; }
.clid-doc-paper a { color: var(--accent-bright); text-decoration: underline; }
.clid-doc-paper img { max-width: 100%; border-radius: var(--radius-md); }

/* Slides editor */
.clid-slides-editor { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.clid-slides-rail {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 8px;
  background: var(--fill-quaternary);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
}
.clid-slides-thumb {
  width: 120px; height: 68px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--separator);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: border-color 150ms ease;
}
.clid-slides-thumb:hover { border-color: var(--accent); }
.clid-slides-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--glass-brand-tint); }
.clid-slides-canvas-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--fill-quaternary);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
  padding: 20px;
  min-height: 400px;
}
.clid-slides-canvas {
  width: 100%; max-width: 960px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

/* Whiteboard editor */
.clid-wb-editor { position: relative; height: calc(100vh - 200px); min-height: 500px; }
.clid-wb-canvas {
  width: 100%; height: 100%;
  border-radius: var(--radius-md);
  background: var(--system-background-secondary);
  border: 1px solid var(--glass-border);
  cursor: grab;
}
.clid-wb-toolbar {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  padding: 6px;
  border-radius: var(--radius-full);
  background: rgba(var(--glass-tint), 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px var(--glass-shadow);
  z-index: 10;
}
.clid-wb-tool {
  width: 36px; height: 36px;
  border: none; background: none;
  border-radius: var(--radius-full);
  color: var(--label-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background 150ms ease, color 150ms ease;
}
.clid-wb-tool:hover { background: var(--fill-tertiary); color: var(--label-primary); }
.clid-wb-tool.active { background: var(--accent); color: var(--system-background); }

/* Script editor */
.clid-script-editor { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.clid-script-files {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 6px;
  background: var(--fill-quaternary);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
}
.clid-script-file-tab {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid transparent;
  color: var(--label-secondary);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}
.clid-script-file-tab:hover { background: var(--fill-tertiary); color: var(--label-primary); }
.clid-script-file-tab.active { background: var(--accent); color: var(--system-background); }
.clid-script-code {
  flex: 1;
  min-height: 400px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--system-background-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--label-primary);
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  tab-size: 2;
}
.clid-script-code:focus { border-color: var(--accent); }
.clid-script-console {
  max-height: 200px;
  overflow-y: auto;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--system-background-tertiary);
  border: 1px solid var(--glass-border);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--label-secondary);
}
.clid-script-console-line { padding: 2px 0; }
.clid-script-console-line.error { color: var(--system-red); }
.clid-script-console-line.success { color: var(--accent-bright); }
.clid-script-run-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(var(--glass-tint), 0.6);
  border: 1px solid var(--glass-border);
}
.clid-script-run-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--accent);
  color: var(--system-background);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease;
}
.clid-script-run-btn:hover { opacity: 0.9; }
.clid-script-run-btn:active { transform: scale(0.96); }

/* ════════════════════════════════════════════════════════════════════════
   23. WORKSPACE ONBOARDING — welcome flow after creating workspace
   ════════════════════════════════════════════════════════════════════════ */

/* IRIS welcome card */
.ob-iris-card {
  display: flex; gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0,217,126,0.10), rgba(59,130,246,0.06));
  border: 1px solid var(--glass-border);
  margin-bottom: 8px;
}
.ob-iris-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--glass-brand-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--accent-bright);
}
.ob-iris-text { flex: 1; }
.ob-iris-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--accent-bright);
  margin-bottom: 4px;
}
.ob-iris-msg {
  font-size: 13px;
  color: var(--label-secondary);
  line-height: 1.5;
}

/* Apps grid — multi-color selectable cards */
.ob-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.ob-app-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  border: 2px solid var(--separator);
  cursor: pointer;
  transition: all 200ms var(--ease-spring-snappy);
  overflow: hidden;
}
.ob-app-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--app-color) 15%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.ob-app-card:hover {
  border-color: var(--app-color);
  transform: translateY(-2px);
}
.ob-app-card:hover::before { opacity: 1; }
.ob-app-card.selected {
  border-color: var(--app-color);
  background: color-mix(in srgb, var(--app-color) 12%, var(--fill-quaternary));
}
.ob-app-card.selected::before { opacity: 1; }
.ob-app-card .ob-app-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ob-app-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--app-color) 20%, transparent);
  color: var(--app-color);
  position: relative; z-index: 1;
}
.ob-app-name {
  font-size: 13px; font-weight: 600;
  color: var(--label-primary);
  position: relative; z-index: 1;
}
.ob-app-desc {
  font-size: 11px;
  color: var(--label-secondary);
  position: relative; z-index: 1;
}
.ob-app-checkmark {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--app-color);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 200ms var(--ease-spring-snappy);
  z-index: 2;
}
.ob-app-card.selected .ob-app-checkmark {
  opacity: 1;
  transform: scale(1);
}

/* Quick start options */
.ob-quick-start {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.ob-quick-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-primary);
  font-family: var(--font-text);
  cursor: pointer;
  text-align: left;
  transition: all 150ms ease;
}
.ob-quick-btn:hover {
  background: var(--fill-tertiary);
  border-color: var(--accent);
  transform: translateX(2px);
}
.ob-quick-btn > i {
  font-size: 20px;
  color: var(--accent-bright);
  width: 24px; text-align: center;
}
.ob-quick-title {
  font-size: 14px; font-weight: 600;
  color: var(--label-primary);
}
.ob-quick-sub {
  font-size: 12px;
  color: var(--label-secondary);
  margin-top: 2px;
}

/* Pin preview */
.ob-pin-hint {
  font-size: 12px;
  color: var(--label-secondary);
  margin-top: 4px;
  margin-bottom: 8px;
}
.ob-pin-preview {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  border: 1px dashed var(--separator);
  min-height: 40px;
  align-items: center;
}
.ob-pin-empty {
  font-size: 12px;
  color: var(--label-tertiary);
}
.ob-pin-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--chip-color) 15%, transparent);
  color: var(--chip-color);
  font-size: 12px; font-weight: 600;
}
.ob-pin-more {
  font-size: 12px;
  color: var(--label-tertiary);
  padding: 4px 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   24. FILE ACTION POPOVER — 3-dot menu
   ════════════════════════════════════════════════════════════════════════ */
.drive-action-popover {
  position: fixed;
  z-index: 10001;
  min-width: 240px;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint), 0.95);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 48px var(--glass-shadow);
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  transition: opacity 150ms ease, transform 150ms var(--ease-spring-snappy);
}
.drive-action-popover.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.drive-action-header {
  padding: 8px 12px 6px;
  font-size: 13px; font-weight: 600;
  color: var(--label-secondary);
  border-bottom: 1px solid var(--separator);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drive-action-name {
  color: var(--label-primary);
}
.drive-action-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  color: var(--label-primary);
  transition: background 100ms ease;
}
.drive-action-item:hover { background: var(--fill-tertiary); }
.drive-action-item i {
  width: 16px; text-align: center;
  font-size: 13px;
  color: var(--label-secondary);
}
.drive-action-item.danger { color: var(--system-red); }
.drive-action-item.danger i { color: var(--system-red); }
.drive-action-item.danger:hover { background: rgba(255,69,58,0.1); }
.drive-action-divider {
  height: 1px; background: var(--separator);
  margin: 4px 0;
}

/* 3-dot more button */
.drive-more-btn {
  opacity: 0;
  transition: opacity 150ms ease;
}
.drive-file-row:hover .drive-more-btn,
.drive-grid-card:hover .drive-more-btn {
  opacity: 1;
}
.drive-more-btn:hover {
  background: var(--fill-tertiary) !important;
  color: var(--label-primary) !important;
}

/* Starred file icon in list */
.drive-starred-icon {
  color: #FF9F0A;
}

/* ════════════════════════════════════════════════════════════════════════
   25. PROGRESS TOAST — dynamic progress bar
   ════════════════════════════════════════════════════════════════════════ */
.ws-toast-progress {
  min-width: 300px;
  max-width: 400px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(var(--glass-tint), 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px var(--glass-shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms var(--ease-spring-snappy);
  margin-bottom: 8px;
}
.ws-toast-progress.show {
  opacity: 1;
  transform: translateY(0);
}
.ws-toast-progress.error {
  border-color: rgba(255,69,58,0.3);
}
.ws-toast-progress-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.ws-toast-progress-head i {
  font-size: 14px;
  color: var(--accent-bright);
}
.ws-toast-progress-label {
  flex: 1;
  font-size: 13px;
  color: var(--label-primary);
  font-weight: 500;
}
.ws-toast-progress-pct {
  font-size: 12px;
  color: var(--label-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ws-toast-progress-bar {
  height: 4px;
  border-radius: 99px;
  background: var(--separator);
  overflow: hidden;
}
.ws-toast-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 300ms ease;
}
.ws-toast-progress.error .ws-toast-progress-fill {
  background: var(--system-red);
}

/* ════════════════════════════════════════════════════════════════════════
   26. EMBEDDED APPS — iframe container for Clid Sheets PWA
   ════════════════════════════════════════════════════════════════════════ */
.embedded-app-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  padding: 0;
}

.embedded-app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--separator);
  background: rgba(var(--glass-tint), 0.6);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.embedded-app-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  color: var(--label-secondary);
  font-size: 13px;
  text-decoration: none;
  transition: all 150ms ease;
}

.embedded-app-back:hover {
  background: var(--fill-tertiary);
  color: var(--label-primary);
}

.embedded-app-header h1 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.embedded-app-header h1 i {
  color: var(--accent-bright);
  font-size: 18px;
}

.embedded-app-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--system-background);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Responsive */
@media (max-width: 560px) {
  .embedded-app-header {
    padding: 8px 12px;
    gap: 8px;
  }
  .embedded-app-header h1 {
    font-size: 15px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   23. COMMAND PALETTE (⌘K) — Linear/Notion-style command palette
   ════════════════════════════════════════════════════════════════════════ */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  pointer-events: none;
}
.cmd-palette.is-open { pointer-events: auto; }
.cmd-palette[hidden] { display: none; }

.cmd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.36, 0.66, 0.04, 1);
}
.cmd-palette.is-open .cmd-backdrop { opacity: 1; }

.cmd-modal {
  position: relative;
  width: min(640px, 92vw);
  max-height: 70vh;
  background: var(--glass-bg, rgba(28, 28, 30, 0.85));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-xl, 20px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-12px) scale(0.96);
  opacity: 0;
  transition: transform 280ms var(--ease-spring-snappy, cubic-bezier(0.36, 0.66, 0.04, 1)),
              opacity 200ms ease;
}
.cmd-palette.is-open .cmd-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--separator, rgba(255, 255, 255, 0.08));
}
.cmd-input-icon {
  color: var(--label-tertiary, rgba(255, 255, 255, 0.45));
  font-size: 15px;
}
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--label-primary, rgba(255, 255, 255, 0.92));
  font-family: var(--font-text, -apple-system, "SF Pro Display", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.cmd-input::placeholder {
  color: var(--label-tertiary, rgba(255, 255, 255, 0.4));
}
.cmd-esc-kbd {
  font-family: var(--font-text, inherit);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--fill-quaternary, rgba(255, 255, 255, 0.06));
  color: var(--label-tertiary, rgba(255, 255, 255, 0.5));
  border: 1px solid var(--separator, rgba(255, 255, 255, 0.06));
}

.cmd-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--separator, rgba(255, 255, 255, 0.1)) transparent;
}
.cmd-results::-webkit-scrollbar { width: 8px; }
.cmd-results::-webkit-scrollbar-thumb {
  background: var(--separator, rgba(255, 255, 255, 0.1));
  border-radius: 99px;
}

.cmd-section {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-tertiary, rgba(255, 255, 255, 0.4));
  padding: 10px 12px 6px;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  transition: background 120ms ease;
  position: relative;
}
.cmd-item.is-active {
  background: var(--fill-quaternary, rgba(255, 255, 255, 0.06));
}
.cmd-item.is-danger { color: var(--system-red, #ff453a); }
.cmd-item.is-danger .cmd-item-icon { color: var(--system-red, #ff453a); }

.cmd-item-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--item-color, var(--accent, #00d97e)) 18%, transparent);
  color: var(--item-color, var(--accent, #00d97e));
  font-size: 12px;
  flex-shrink: 0;
}
.cmd-item.is-active .cmd-item-icon {
  background: color-mix(in srgb, var(--item-color, var(--accent, #00d97e)) 28%, transparent);
}

.cmd-item-text {
  flex: 1;
  min-width: 0;
}
.cmd-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--label-primary, rgba(255, 255, 255, 0.92));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-item.is-danger .cmd-item-title { color: var(--system-red, #ff453a); }
.cmd-item-title mark {
  background: transparent;
  color: var(--accent-bright, #00f59d);
  font-weight: 600;
}
.cmd-item-sub {
  font-size: 12px;
  color: var(--label-tertiary, rgba(255, 255, 255, 0.5));
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmd-item-arrow {
  color: var(--label-tertiary, rgba(255, 255, 255, 0.4));
  font-size: 11px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.cmd-item.is-active .cmd-item-arrow { opacity: 1; }

.cmd-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--label-tertiary, rgba(255, 255, 255, 0.4));
}
.cmd-empty i { font-size: 28px; margin-bottom: 12px; display: block; }
.cmd-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--label-secondary, rgba(255, 255, 255, 0.65));
  margin-bottom: 4px;
}
.cmd-empty-sub { font-size: 13px; }

.cmd-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--separator, rgba(255, 255, 255, 0.08));
  background: var(--fill-quaternary, rgba(0, 0, 0, 0.15));
}
.cmd-footer-hint {
  font-size: 11px;
  color: var(--label-tertiary, rgba(255, 255, 255, 0.45));
  display: flex;
  align-items: center;
  gap: 4px;
}
.cmd-footer-hint kbd {
  font-family: var(--font-text, inherit);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--fill-quaternary, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--separator, rgba(255, 255, 255, 0.08));
}
.cmd-footer-brand {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #00d97e);
  letter-spacing: 0.02em;
}

/* Lock body scroll when palette is open */
body.cmd-palette-open { overflow: hidden; }

/* Light mode tweaks */
[data-theme="light"] .cmd-backdrop {
  background: rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .cmd-modal {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}

/* Responsive — phone */
@media (max-width: 600px) {
  .cmd-palette { padding-top: 6vh; }
  .cmd-modal { width: 96vw; max-height: 80vh; }
  .cmd-input { font-size: 16px; }
  .cmd-footer-hint:nth-child(2),
  .cmd-footer-hint:nth-child(3) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   24. WORKSPACE SCOPE BANNER — shown in Drive when scoped to a workspace
   ════════════════════════════════════════════════════════════════════════ */
.drive-scope-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--accent, #00d97e) 10%, var(--fill-quaternary, rgba(255, 255, 255, 0.04)));
  border: 1px solid color-mix(in srgb, var(--accent, #00d97e) 30%, transparent);
  font-size: 13px;
  color: var(--label-secondary, rgba(255, 255, 255, 0.65));
}
.drive-scope-banner i { color: var(--accent, #00d97e); font-size: 14px; }
.drive-scope-banner strong {
  color: var(--label-primary, rgba(255, 255, 255, 0.92));
  font-weight: 600;
}
.drive-scope-banner button {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--separator, rgba(255, 255, 255, 0.1));
  color: var(--label-secondary, rgba(255, 255, 255, 0.65));
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms ease;
}
.drive-scope-banner button:hover {
  background: var(--fill-quaternary, rgba(255, 255, 255, 0.06));
  color: var(--label-primary, rgba(255, 255, 255, 0.92));
}

/* ════════════════════════════════════════════════════════════════════════
   25. SESSION MANAGER & 2FA SETTINGS — settings page additions
   ════════════════════════════════════════════════════════════════════════ */
.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.settings-modal[hidden] { display: none; }
.settings-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.settings-modal-panel {
  position: relative;
  width: min(560px, 96vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--glass-bg, rgba(28, 28, 30, 0.92));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-xl, 18px);
  padding: 22px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.settings-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.settings-modal-title {
  font-family: var(--font-display, inherit);
  font-size: 17px;
  font-weight: 600;
  color: var(--label-primary);
}
.settings-modal-close {
  background: transparent;
  border: none;
  color: var(--label-secondary);
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
  border-radius: 6px;
  transition: background 120ms ease;
}
.settings-modal-close:hover { background: var(--fill-quaternary); }

.session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--separator, rgba(255, 255, 255, 0.06));
}
.session-row:last-child { border-bottom: none; }
.session-row-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--fill-quaternary, rgba(255, 255, 255, 0.06));
  display: flex; align-items: center; justify-content: center;
  color: var(--label-secondary);
  font-size: 14px;
  flex-shrink: 0;
}
.session-row.is-current .session-row-icon {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.session-row-text { flex: 1; min-width: 0; }
.session-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--label-primary);
  display: flex; align-items: center; gap: 8px;
}
.session-row.is-current .session-row-title::after {
  content: 'This device';
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.session-row-meta {
  font-size: 12px;
  color: var(--label-tertiary);
  margin-top: 2px;
}
.session-row-btn {
  background: transparent;
  border: 1px solid var(--separator);
  color: var(--label-secondary);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.session-row-btn:hover {
  background: var(--system-red);
  border-color: var(--system-red);
  color: white;
}

.tfa-step {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--separator, rgba(255, 255, 255, 0.06));
}
.tfa-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--system-background);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tfa-step.is-done .tfa-step-num { background: var(--accent); }
.tfa-step.is-pending .tfa-step-num {
  background: var(--fill-quaternary);
  color: var(--label-tertiary);
  border: 1px solid var(--separator);
}
.tfa-step-body { flex: 1; }
.tfa-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--label-primary);
  margin-bottom: 3px;
}
.tfa-step-desc {
  font-size: 12px;
  color: var(--label-secondary);
  line-height: 1.5;
}
.tfa-qr {
  margin: 14px auto;
  width: 180px; height: 180px;
  background: white;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.tfa-qr img { width: 100%; height: 100%; }
.tfa-code-input {
  width: 100%;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 18px;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--separator);
  background: var(--fill-quaternary);
  color: var(--label-primary);
}
.tfa-secret {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  padding: 8px 10px;
  background: var(--fill-quaternary);
  border-radius: 6px;
  color: var(--label-secondary);
  word-break: break-all;
  margin-top: 8px;
  border: 1px dashed var(--separator);
}

/* Recovery codes grid (shown once after 2FA setup) */
.tfa-recovery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .tfa-recovery-grid { grid-template-columns: 1fr; }
}
.tfa-recovery-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  border-radius: 8px;
}
.tfa-recovery-cell code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--label-primary);
}
.tfa-recovery-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fill-tertiary);
  color: var(--label-secondary);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Folder creation modal — reuse share-modal styles */
.folder-create-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.folder-create-modal[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   26. DASHBOARD WORKSPACE BANNER — shown when scoped to a workspace
   ════════════════════════════════════════════════════════════════════════ */
.dash-workspace-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--accent, #00d97e) 8%, var(--fill-quaternary, rgba(255, 255, 255, 0.04)));
  border: 1px solid color-mix(in srgb, var(--accent, #00d97e) 25%, transparent);
  font-size: 13px;
  color: var(--label-secondary);
}
.dash-workspace-banner i { color: var(--accent, #00d97e); font-size: 14px; }
.dash-workspace-banner strong {
  color: var(--label-primary);
  font-weight: 600;
}
.dash-workspace-banner button {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--separator, rgba(255, 255, 255, 0.1));
  color: var(--label-secondary);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms ease;
}
.dash-workspace-banner button:hover {
  background: var(--fill-quaternary);
  color: var(--label-primary);
}

/* ════════════════════════════════════════════════════════════════════════
   27. FOLDER CREATION MODAL — color + icon picker
   ════════════════════════════════════════════════════════════════════════ */
.fc-color-row, .fc-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fc-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
  position: relative;
}
.fc-color-swatch:hover { transform: scale(1.1); }
.fc-color-swatch.selected {
  border-color: var(--label-primary);
  transform: scale(1.1);
}
.fc-color-swatch.selected::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
}
.fc-icon-swatch {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--fill-quaternary);
  border: 1px solid var(--separator);
  color: var(--label-secondary);
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-icon-swatch:hover {
  background: var(--fill-tertiary);
  color: var(--label-primary);
}
.fc-icon-swatch.selected {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}