/* ─── Google Fonts ─────────────────────────────────────────────── */
/* Inter (UI typeface), JetBrains Mono (monospace numerics), and Playfair
   Display (architecture-section editorial accents) are now loaded at the
   document level via KDexTheme.spec.assets[] (see k8s/<env>/020_theme.yaml).
   They MUST NOT be re-declared here via @import — constructable shadow
   stylesheets silently drop @import rules and don't propagate @font-face
   to the document font registry, so any @import inside this file is both
   noisy (console warning) and useless (font never reaches shadow CSS). */

/* ─── Design tokens (light) ───────────────────────────────────── */
:root {
  /* Accents */
  --accent-purple: #7c3aed;
  --accent-blue:   #3b82f6;
  --accent-cyan:   #06b6d4;
  --accent-indigo: #6366f1;
  --accent-teal:   #14b8a6;
  --accent-red:    #dc2626;
  --amber:         #f59e0b;
  --amber-light:   #fef3c7;

  /* Light surface */
  --bg-base:        #ffffff;
  --bg-surface:     #f8fafc;
  --bg-elevated:    #ffffff;
  --surface-hover:  #f1f5f9;
  --border-base:    #e2e8f0;

  /* Text */
  --text-heading:   #0f172a;
  --text-body:      #334155;
  --text-muted:     #64748b;

  /* Effects */
  --shadow-soft:    0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-elev:    0 12px 32px rgba(15, 23, 42, 0.12);
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;

  /* Typography */
  --font-sans:    'Google Sans Flex', 'Google Sans', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif:   'Playfair Display', Georgia, serif;

  /* Nav scroll-progress (driven by header script) */
  --nav-opacity: 0;

  /* Named-zone responsive breakpoints (sm = mobile landscape / small
     tablet, md = laptop, lg = desktop). xs is anything below sm. The
     workbench's progressive-enhancement rules consume these. */
  --bp-sm: 700px;
  --bp-md: 900px;
  --bp-lg: 1200px;
}

/* ─── Design tokens (dark) ────────────────────────────────────── */
html.dark, .dark {
  --bg-base:        #020617;
  --bg-surface:     #0f172a;
  --bg-elevated:    #1e293b;
  --surface-hover:  #1e293b;
  --border-base:    rgba(255,255,255,0.08);
  --amber-light:    rgba(245, 158, 11, 0.18);
  --text-heading:   #f8fafc;
  --text-body:      #cbd5e1;
  --text-muted:     #94a3b8;
  --shadow-soft:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-elev:    0 12px 32px rgba(0,0,0,0.6);
}

/* ─── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-body);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
img { display: block; max-width: 100%; }

/* ─── Page chrome (consumed by KDexPageHeader / KDexPageFooter templates) ── */
.page-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 16px 0;
  background: color-mix(in srgb, var(--bg-base) calc(var(--nav-opacity) * 90%), transparent);
  backdrop-filter: blur(calc(var(--nav-opacity) * 12px));
  border-bottom: 1px solid color-mix(in srgb, var(--border-base) calc(var(--nav-opacity) * 100%), transparent);
  transition: background 200ms ease, border-color 200ms ease;
}
.page-header.scrolled {
  --nav-opacity: 1;
}
.page-header-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 32px;
}
.page-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; color: var(--text-heading); letter-spacing: -0.3px; }
.page-logo img { height: 28px; transition: filter 0.3s; }
/* Source SVG is white. Invert it to black in light mode (prod pattern). */
html:not(.dark) .page-logo img,
html:not(.dark) .page-footer-logo { filter: brightness(0); }
.page-brand-name { font-size: 20px; }
.page-nav-main { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.page-header-actions { display: flex; align-items: center; gap: 12px; }

/* ─── Dynamic navigation (kdex-default-page-navigation-*) ─────────
   The cluster-default navigation templates emit
     <ul class="navigation pages">      (main nav)
     <ul class="navigation login-status"> (login / user dropdown)
   wrapped at the page-header level inside a fetch-replaced <nav id="navigation-{main,login}">.
   Style both classes directly so we don't depend on the wrapper. */

.navigation.pages,
.navigation.login-status {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation.login-status { gap: 12px; }

.navigation.page,
.navigation.login-link,
.navigation.user-profile { margin: 0; padding: 0; position: relative; }

.navigation.page-link,
.navigation.page-entry {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.navigation.page-link:hover { color: var(--text-heading); }
/* No .selected color treatment — selected leaves are hidden below
   (you're already on that page), and selected nodes with children
   stay visually identical to their unselected siblings. */

/* Hide the nav entry for the current page when it has no children —
   no need to link to where you already are. Selected entries that DO
   have children remain visible so users can reach their child pages. */
.navigation.page.selected:not(:has(.navigation.pages)) { display: none; }

/* Sub-page lists (children of a top-level nav item) — collapse the flex
   layout to vertical so children stack underneath their parent if any
   site introduces a multi-level nav. */
.navigation.pages .navigation.pages {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Login/Sign-in CTA — matches .btn-ghost from the rest of the chrome. */
.navigation .login-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-heading);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.navigation .login-button:hover {
  background: #ffffff;
  border-color: var(--accent-indigo);
  transform: translateY(-1px);
}
html.dark .navigation .login-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
html.dark .navigation .login-button:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--accent-indigo);
}

/* Logged-in user trigger (avatar + name) emitted by login nav. */
.navigation.user-profile .user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 100px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.navigation.user-profile .user-trigger:hover {
  background: #ffffff;
  border-color: var(--accent-indigo);
}
html.dark .navigation.user-profile .user-trigger {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
html.dark .navigation.user-profile .user-trigger:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--accent-indigo);
}

.navigation .user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.navigation .avatar-image { width: 100%; height: 100%; object-fit: cover; }

.navigation .user-info { display: flex; flex-direction: column; line-height: 1.1; }
.navigation .user-name { font-size: 13px; font-weight: 500; color: var(--text-heading); }

/* Dropdown panel — now opened via JS click (initProfileModal).
   Keep the display:none default; the hover/focus reveal is replaced
   by the full account modal. Legacy fallback: if JS fails, the
   old dropdown still works. */
.navigation.user-profile .dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elev);
  padding: 12px;
  display: none;
  z-index: 60;
}
/* Hover-bridge — kept for legacy fallback only. */
.navigation.user-profile .dropdown-content::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
/* NOTE: hover/focus reveal intentionally removed — JS opens the modal instead.
   .navigation.user-profile .dropdown-trigger:focus + .dropdown-content is kept
   as a no-JS accessibility fallback. */
.navigation.user-profile .dropdown-trigger:focus + .dropdown-content { display: block; }

.navigation .dropdown-header {
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--border-base);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navigation .header-email { font-size: 12px; color: var(--text-muted); }

.navigation #logout-form { margin: 0; }
.navigation .logout-button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-body);
  background: transparent;
  transition: background 150ms ease, color 150ms ease;
}
.navigation .logout-button:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
}
html.dark .navigation .logout-button:hover { color: #fca5a5; }
.theme-toggle {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color      0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform  0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle:hover {
  background: #ffffff;
  color: var(--text-heading);
  transform: rotate(15deg);
}

/* Icon swap: show the icon for the mode the user can switch TO.
   Default (light mode) shows the moon — clicking goes dark.
   html.dark shows the sun — clicking goes light.
   Both SVGs ship in the button; CSS owns the visibility. */
.theme-toggle [data-icon]            { display: none; }
.theme-toggle [data-icon="moon"]     { display: inline-block; }
html.dark .theme-toggle [data-icon="moon"] { display: none; }
html.dark .theme-toggle [data-icon="sun"]  { display: inline-block; }

.page-footer {
  padding: 48px 0 32px;
  border-top: 1px solid var(--border-base);
  background: var(--bg-surface);
  color: var(--text-muted);
}
.page-footer-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.page-footer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.page-footer-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.page-footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; }
.page-footer-links a:hover { color: var(--text-heading); }
.page-footer-social { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.page-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: color 0.2s ease;
}
.page-footer-social a:hover { color: var(--text-heading); }
.page-footer-social svg { display: block; }
.page-footer-copy { display: block; text-align: center; color: var(--text-muted); font-size: 13px; }
.page-footer-copy strong { color: var(--text-heading); font-weight: 600; }
.page-footer-divider { color: var(--text-muted); opacity: 0.55; padding: 0 4px; }

/* ─── Dashboard variant (workbench / app pages) ──────────────────
   Marketing chrome assumes a fixed nav over a hero background; that
   collides with the workbench, which fills its viewport. The dashboard
   modifier flips the header from fixed to sticky (so it takes its own
   vertical slot and pushes the app down), tightens the inner gutter,
   and collapses the footer to a single utility line. */
.page-header.is-workbench {
  position: sticky;
  padding: 10px 0;
  background: var(--bg-surface);
  backdrop-filter: none;
}
.page-header.is-workbench .page-header-inner {
  max-width: none;
  padding: 0 20px 0 0;
  gap: 16px;
}
.page-header.is-workbench .page-header-actions { margin-left: auto; }
.page-footer.is-workbench {
  padding: 12px 0;
  background: var(--bg-surface);
}
.page-footer.is-workbench .page-footer-inner {
  max-width: none;
  padding: 0 20px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Workbench page layout: pin the footer to the bottom of the viewport
   and let the workbench custom element fill the space between header
   and footer. The workbench shadow root handles its own internal
   scrolling, so the page body itself doesn't scroll — height + overflow
   hidden caps the layout at the viewport. Scoped via :has() to the
   workbench footer so the public landing keeps its natural-scroll
   layout. */
body:has(> .page-footer.is-workbench) {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
}
body:has(> .page-footer.is-workbench) > main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
body:has(> .page-footer.is-workbench) > main > [data-viewport="main"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
body:has(> .page-footer.is-workbench) knowdrive-workbench,
body:has(> .page-footer.is-workbench) knowdrive-workbench-simple {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  /* Contain the workbench's internal z-index ladder (its shadow DOM uses
     values up to 100000 for floating menus/portals) so it can't outrank
     the page header's z-index: 50 and bury the header's own dropdowns
     (hamburger nav, login menu). */
  isolation: isolate;
}

/* App shell page layout: the shell chrome (<aside data-viewport="shell">) and
   the content viewport (<main data-viewport="main">) are direct body children.
   By default body is `display:block`, so they stack vertically and the
   full-height shell pushes <main> below the fold (off-screen). Lay them out as
   a two-column grid — chrome (auto width, so it tracks the sidebar's
   expand/collapse) beside content (1fr) — both pinned to the top. Cap at the
   viewport like the workbench layout above so the content viewport scrolls
   internally rather than the page. Scoped via :has() to the shell archetype so
   landing / login / utility pages keep their own layouts. On narrow screens the
   shell collapses to a top bar + slide-in drawer (see the .kd-* rules at end of
   file), so fall back to a single column there. */
body:has(> aside [data-viewport="shell"]) {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
}
body:has(> aside [data-viewport="shell"]) > aside,
body:has(> aside [data-viewport="shell"]) > main {
  min-width: 0;
  min-height: 0;
}
body:has(> aside [data-viewport="shell"]) > main {
  display: flex;
}
body:has(> aside [data-viewport="shell"]) > main > [data-viewport="main"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  /* Scroll tall content (e.g. the landing) within the fixed-height shell —
     the body is overflow:hidden, so without this the content column clips.
     Apps that fill 100% height and scroll inside their own shadow root never
     overflow this, so they get no extra scrollbar. */
  overflow-y: auto;
}
/* Hidden / overlay body siblings (signup mount, tracking iframe, <template>s)
   must not consume grid cells. */
body:has(> aside [data-viewport="shell"]) > template,
body:has(> aside [data-viewport="shell"]) > knowdrive-signup,
body:has(> aside [data-viewport="shell"]) > iframe {
  grid-column: 1 / -1;
}
@media (max-width: 820px) {
  body:has(> aside [data-viewport="shell"]) {
    grid-template-columns: 1fr;
  }
}

/* ─── Hamburger corner-fixture (workbench header only) ─────────────
   Pinned to the workbench header's top-left corner via position:absolute
   (the header itself is position:fixed at top:0;left:0, so the fixture
   effectively pins to the viewport corner). 10px symmetric padding on
   all four sides gives the 36×36 trigger button consistent breathing
   room. A subtle ~6% tint of --text-heading distinguishes the corner
   from the rest of the header background in both light and dark modes;
   the bottom-right radius gives it a corner-tab silhouette. The flex
   row containing logo/topbar/actions reserves enough left-padding
   (see .page-header-inner above) so its children don't collide with
   the absolute fixture. */
.page-header.is-workbench .page-nav-main {
  position: relative;
  margin-left: 0;
  gap: 0;
  background: transparent;
  border-bottom-right-radius: 0;
  z-index: 51;
}
.page-header.is-workbench .page-nav-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color 150ms ease, background 150ms ease;
}
.page-header.is-workbench .page-nav-trigger:hover,
.page-header.is-workbench .page-nav-trigger[aria-expanded="true"] {
  color: var(--text-heading);
  background: color-mix(in srgb, var(--text-heading) 8%, transparent);
}
.page-header.is-workbench .page-nav-trigger:focus-visible {
  outline: 2px solid var(--accent-indigo);
  outline-offset: 2px;
}
.page-header.is-workbench .page-nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  /* Match .page-nav-main's padding-left so the dropdown opens aligned
     with the trigger button rather than flush with the wrapper edge. */
  left: 10px;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elev);
  padding: 12px;
  display: none;
  z-index: 60;
}
.page-header.is-workbench .page-nav-menu.is-open { display: block; }
.page-header.is-workbench .page-nav-menu .navigation.pages {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.page-header.is-workbench .page-nav-menu .navigation.page-link {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.page-header.is-workbench .page-nav-menu .navigation.page-link:hover {
  background: color-mix(in srgb, var(--text-heading) 8%, transparent);
}

/* ─── Workbench topbar (rendered via React Portal into the workbench
       header's [data-kd-workbench-topbar] slot) ──────────────────── */
.page-header.is-workbench [data-kd-workbench-topbar] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  container-type: inline-size;
  container-name: kd-topbar;
}
.page-header.is-workbench .topbar {
  display: flex; align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}
.page-header.is-workbench .topbar [data-tooltip] { position: relative; cursor: help; }
.page-header.is-workbench .topbar [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(5px);
  width: 240px; padding: 10px 14px; background: rgba(15, 23, 42, 0.95);
  color: #fff; font-size: 11px; font-family: var(--font-body); line-height: 1.5;
  border-radius: 8px; box-shadow: var(--shadow-elev); opacity: 0; pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1000; text-align: center;
  backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1);
}
.page-header.is-workbench .topbar [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.page-header.is-workbench .topbar [data-tooltip]::before {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: rgba(15, 23, 42, 0.95);
  opacity: 0; pointer-events: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1000;
}
.page-header.is-workbench .topbar [data-tooltip]:hover::before { opacity: 1; }

.page-header.is-workbench .ephem-badge {
  display: flex; align-items: center; gap: 7.5px; padding: 4.5px 12px;
  border-radius: 20px; background: var(--amber-light); border: 1px solid #FCD34D;
  flex-shrink: 0;
}
.page-header.is-workbench .ephem-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
  animation: kd-topbar-pulse 2s infinite;
}
@keyframes kd-topbar-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.75); }
}
.page-header.is-workbench .ephem-label,
.page-header.is-workbench .ephem-ttl {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  color: var(--amber); letter-spacing: .04em;
}
.page-header.is-workbench .ephem-sep { color: var(--amber); opacity: .5; }

.page-header.is-workbench .meter-wrap { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.page-header.is-workbench .meter-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.page-header.is-workbench .meter-track { width: 110px; height: 5px; background: var(--border-base); border-radius: 3px; overflow: hidden; }
.page-header.is-workbench .meter-fill { height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-teal));
  transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
.page-header.is-workbench .meter-fill.critical { background: var(--accent-red) !important; background-image: none !important; }
.page-header.is-workbench .meter-val { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--accent-blue); min-width: 80px; }
.page-header.is-workbench .meter-val.critical { color: var(--accent-red) !important; font-weight: 700 !important; }

.page-header.is-workbench .topbar-alert {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--accent-red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-red) 20%, transparent);
  padding: 4px 12px; border-radius: 20px;
  color: var(--accent-red); font-size: 11px; font-weight: 600; margin: 0 12px;
  animation: kd-topbar-slidein 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes kd-topbar-slidein {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.page-header.is-workbench .upgrade-btn-small {
  background: var(--accent-red); color: white; border: none;
  padding: 2px 10px; border-radius: 12px; font-size: 10px; font-weight: 700;
  cursor: pointer; transition: transform 0.2s ease;
}
.page-header.is-workbench .upgrade-btn-small:hover { transform: scale(1.05); background: #b91c1c; }

/* Compact upgrade label — hidden by default; revealed at dense-2/minimal
   container width when there isn't room for the full "Upgrade Account". */
.page-header.is-workbench .upgrade-btn-label-compact { display: none; }

.page-header.is-workbench .layout-toggles { display: flex; align-items: center; gap: 4px; margin-left: 12px; margin-right: 16px; }
.page-header.is-workbench .layout-toggle-btn {
  background: transparent !important; border: none !important; padding: 4px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: color 0.2s ease; outline: none;
}
.page-header.is-workbench .layout-toggle-btn:hover { color: var(--text-body); }
.page-header.is-workbench .layout-toggle-btn.active { color: var(--text-heading); }

/* Layout-toggle visibility per zone:
     lg / md (≥ 900):  all 4 buttons
     sm     (700–899):  hide RightSidebar (panel is gone at sm)
     xs     (< 700):    hide the whole group (no panels to toggle) */
@media (max-width: 899px) {
  .page-header.is-workbench .layout-toggles .lt-rightsidebar { display: none; }
}
@media (max-width: 699px) {
  .page-header.is-workbench .layout-toggles { display: none; }
}

/* Topbar progressive enhancement (driven by slot container width).
   Stages, by container kd-topbar inline-size:
     full     (≥ 800):  meter "GB limit" + bar + "MB used"
                        ephem "EPHEMERAL · TTL mm:ss"
                        alert full message + Upgrade Account button
     dense-1  (600-799): drop meter's "GB limit" label
                        drop ephem's "EPHEMERAL" word + sep
     dense-2  (400-599): drop meter's "MB used" value (bar only)
                        drop ephem's "TTL" prefix (badge = dot + mm:ss)
                        alert collapses to icon + "Upgrade →"
                        (clickable via wrapper)
     minimal  (< 400):   hide meter entirely
   layout-toggles are NOT in this table — driven by viewport zone in
   the next task because their meaning depends on which panels exist. */

@container kd-topbar (max-width: 799px) {
  .page-header.is-workbench .meter-label { display: none; }
  .page-header.is-workbench .ephem-label,
  .page-header.is-workbench .ephem-sep { display: none; }
}
@container kd-topbar (max-width: 599px) {
  .page-header.is-workbench .meter-val { display: none; }
  .page-header.is-workbench .ephem-ttl-prefix { display: none; }
  .page-header.is-workbench .topbar-alert-msg,
  .page-header.is-workbench .upgrade-btn-label-full { display: none; }
  .page-header.is-workbench .upgrade-btn-label-compact { display: inline; }
}
@container kd-topbar (max-width: 399px) {
  .page-header.is-workbench .meter-wrap { display: none; }
}

/* ─── Button base classes (shared across landing & workbench) ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 100px;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.35);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn-primary:hover  { transform: translateY(-1px); box-shadow: 0 0 32px rgba(99,102,241,0.55); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.large  { padding: 14px 32px; font-size: 16px; }

/* Hide the Get Started CTA when the user is already authenticated. The
   page-header template is rendered identity-agnostically (the page-render
   cache is shared across callers; only the navigation render under
   /-/navigation/* is per-request and identity-aware via .Extra.Identity).
   So we can't use a server-side template conditional on the button itself.
   Instead we key on the DOM signal the login navigation emits: the
   cluster-default navigation-login renders <li class="navigation user-profile">
   for logged-in users and <li class="navigation login-link"> for anonymous,
   spliced into .page-header via [[ pop .Navigation "login" ]]. Using :has
   to lift that signal up to .page-header lets us hide siblings of the nav. */
.page-header:has(.navigation.user-profile) .btn-primary[data-kd-open-waitlist] {
  display: none;
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 100px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: var(--text-heading); font-weight: 500; font-size: 14px;
  background: rgba(255, 255, 255, 0.8);
  transition: background 150ms ease, border-color 150ms ease;
}
.btn-ghost:hover { background: #ffffff; border-color: var(--accent-indigo); }
.btn-ghost.large { padding: 14px 32px; font-size: 16px; }

/* ─── Aurora background system ────────────────────────────────── */
.landing-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.aurora-orb {
  position: absolute; border-radius: 50%; filter: blur(100px);
  opacity: var(--orb-opacity, 0.10);
  animation: aurora-drift var(--dur, 20s) ease-in-out infinite alternate;
  transition: opacity 0.5s;
}
.aurora-orb-1 { width: 600px; height: 600px; top: -10%; left: -10%; background: var(--accent-purple); }
.aurora-orb-2 { width: 700px; height: 700px; top: 30%; right: -20%; background: var(--accent-blue);  animation-delay: -10s; }
.aurora-orb-3 { width: 500px; height: 500px; bottom: 10%; left: 30%;  background: var(--accent-cyan);  animation-delay: -20s; }
.aurora-orb-4 { width: 600px; height: 600px; bottom: -20%; right: 10%; background: var(--accent-indigo); animation-delay: -5s; }
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0)   scale(1); }
  50%  { transform: translate3d(40px, -30px, 0) scale(1.08); }
  100% { transform: translate3d(-30px, 40px, 0) scale(0.95); }
}
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line, rgba(15,23,42,0.04)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line, rgba(15,23,42,0.04)) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 40%, transparent 80%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 40%, transparent 80%);
  transition: background-image 0.4s;
}
.bg-darken {
  position: absolute; inset: 0;
  background: var(--bg-overlay, transparent);
  transition: background 0.4s;
}

/* ─── Gradient text utility ───────────────────────────────────── */
.gradient-text {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue), var(--accent-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─── Utility pages (login, error, etc. — kdex-default-page-archetype-utility) ── */
/* The utility archetype renders <body class="utility-page"><main>[content]</main></body>
   with no header/nav/footer chrome — these styles own the whole viewport. */
body.utility-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  /* Exact landing-page backdrop (packages/landing/src/bundle.css .page). */
  background: radial-gradient(1100px 560px at 80% -8%, #ECEAFB 0%, rgba(236,234,251,0) 55%),
              linear-gradient(180deg, #FBFAFF 0%, #F5F3FC 100%);
  position: relative;
}
html.dark body.utility-page { background: var(--bg-base); }

body.utility-page > main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
}

/* Login card — the landing hero auth-card idiom, verbatim: white card,
   #ECE9F7 hairline, 18px radius, soft violet-tinted shadow, Jakarta. */
.login-container {
  background: var(--bg-elevated);
  border: 1px solid #ECE9F7;
  border-radius: 18px;
  padding: 36px 32px 28px;
  box-shadow: 0 12px 40px rgba(60, 40, 120, 0.10);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
html.dark .login-container { border-color: var(--border-base); box-shadow: var(--shadow-elev); }

/* Brand mark above the title — the ICON-ONLY logo the site nav uses
   (notext variant), not the wordmark. White-on-transparent SVG inverted
   to black in light mode (matches .page-logo). */
.login-container::before {
  content: "";
  display: block;
  height: 34px;
  background: url('/-/theme/logos/knowdrive_white_logo_notext.svg') center / contain no-repeat;
  margin-bottom: 2px;
}
html:not(.dark) .login-container::before { filter: brightness(0); }

/* Title — solid heading in the landing's voice (no gradient text). */
.login-container > strong {
  display: block;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

/* An explicit `display` beats the UA stylesheet's [hidden] { display: none },
   so .oidc-divider's display:flex kept the SSO block visible whenever the markup
   tried to hide it. Production never hit this (the block is behind a server-side
   [[ if .Extra.oidc ]]), but the dev shim toggles it with the attribute and so
   always showed SSO — a preview that lied about the default state. */
.oidc-divider[hidden], .oidc-button[hidden] { display: none; }

/* Subtitle under the title — the design's "Sign in to your KnowDrive
   workspace." line. Pulled tight to the title so they read as one unit rather
   than two items in the container's 20px flex gap. */
.login-subtitle {
  margin: -12px 0 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #8C8C9E);
}

/* Field labels. The card is centre-aligned, but labelled inputs read as a form
   only when the label sits hard against the field's left edge. */
.login-form label {
  display: block;
  text-align: left;
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary, #5A5A6E);
}

/* "Forgot password?" — right-aligned inside the form, per the design. */
.login-forgot { text-align: right; margin-top: -6px; }
.login-forgot a {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 700; color: #6C5CE7; text-decoration: none;
}
.login-forgot a:hover { color: #4B3FC4; }

/* "NEW HERE?" rule — same construction as .oidc-divider so the two stack
   consistently when OIDC is enabled. */
.login-newhere {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  color: var(--text-muted, #B9B4D6);
}
.login-newhere::before,
.login-newhere::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle, #F1EFF8); }

/* Secondary action: outlined, so it never competes with the dark Sign in. */
.login-create {
  display: block; width: 100%; box-sizing: border-box; padding: 12px;
  border: 1px solid #E2DEF8; border-radius: 12px;
  background: var(--bg-elevated, #fff); color: #4B3FC4;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}
.login-create:hover { border-color: #6C5CE7; background: #F9F8FE; }
html.dark .login-create { border-color: var(--border-base); background: transparent; color: #B9AFFA; }

.login-reassure {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 500;
  color: var(--text-muted, #B9B4D6);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.login-form .form-group { display: flex; flex-direction: column; }

/* Inputs — the landing .email-input idiom: #E2E2EA hairline, 12px radius,
   violet focus border with the #EFEEFC ring. */
.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 13px 15px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-heading);
  background: var(--bg-base);
  border: 1px solid #E2E2EA;
  border-radius: 12px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
html.dark .login-form input[type="text"],
html.dark .login-form input[type="password"] { border-color: var(--border-base); }
.login-form input[type="text"]::placeholder,
.login-form input[type="password"]::placeholder { color: var(--text-muted); }
.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 3px #EFEEFC;
}
html.dark .login-form input[type="text"]:focus,
html.dark .login-form input[type="password"]:focus { box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.25); }

/* Primary button — the landing hero .btn-primary, verbatim: dark, 12px
   radius, 700 weight, soft ink shadow. */
.login-form button[type="submit"] {
  margin-top: 6px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #15151F;
  color: #fff;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(21, 21, 31, 0.18);
  transition: background 150ms ease;
}
.login-form button[type="submit"]:hover { background: #000; }
html.dark .login-form button[type="submit"] { background: #6C5CE7; box-shadow: 0 8px 22px rgba(108, 92, 231, 0.32); }
html.dark .login-form button[type="submit"]:hover { background: #5B4FD6; }

.error-message {
  color: #C03A3A;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
html.dark .error-message {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
}

/* OIDC divider — matches the checkout/landing OR-divider idiom. */
.oidc-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #B9B4D6;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.oidc-divider::before,
.oidc-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #F1EFF8;
}
html.dark .oidc-divider::before,
html.dark .oidc-divider::after { background: var(--border-base); }

/* SSO button — the landing ghost-button idiom: white, #E2DEF8 hairline,
   12px radius, violet hover border. */
.oidc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid #E2DEF8;
  background: var(--bg-elevated);
  color: #2A2A3C;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  transition: border-color 150ms ease;
}
.oidc-button:hover { border-color: #6C5CE7; }
html.dark .oidc-button { border-color: var(--border-base); color: var(--text-heading); }

/* Footer line — the landing site-footer text voice. */
.footer-organization {
  margin-top: 2px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.footer-organization p { margin: 0; }

@media (max-width: 480px) {
  .login-container { padding: 30px 22px 22px; }
  .login-container > strong { font-size: 18px; }
}

/* ─── Language dropdown (header chrome) ─────────────────────────
   Visual sibling of the .user-profile dropdown; mirrors the same
   trigger/panel skeleton (rounded button, hover-bridge, CSS-only
   reveal). Flag-priority degradation: the BCP-47 code is hidden
   when the .page-header-actions container is narrow, but the flag
   stays visible.
*/
.language-dropdown { position: relative; }

.language-dropdown .language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 32px;
  border-radius: 100px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-heading);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.language-dropdown .language-trigger:hover {
  background: #ffffff;
  border-color: var(--accent-indigo);
}
html.dark .language-dropdown .language-trigger {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-heading);
}
html.dark .language-dropdown .language-trigger:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--accent-indigo);
}

.language-flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 2px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Language flags via flag-icons (jsDelivr CDN, MIT). The language tag maps
   to a country code (en -> UK, fr -> France). .language-flag sizes the box;
   these set the image. Add a rule when the $allowed list in
   pagenavigation_language.yaml gains a locale. */
.flag-en { background-image: url("https://cdn.jsdelivr.net/npm/flag-icons@7/flags/4x3/gb.svg"); }
.flag-fr { background-image: url("https://cdn.jsdelivr.net/npm/flag-icons@7/flags/4x3/fr.svg"); }
.flag-de { background-image: url("https://cdn.jsdelivr.net/npm/flag-icons@7/flags/4x3/de.svg"); }
.flag-es { background-image: url("https://cdn.jsdelivr.net/npm/flag-icons@7/flags/4x3/es.svg"); }
.flag-it { background-image: url("https://cdn.jsdelivr.net/npm/flag-icons@7/flags/4x3/it.svg"); }
.flag-pt { background-image: url("https://cdn.jsdelivr.net/npm/flag-icons@7/flags/4x3/pt.svg"); }

.language-dropdown .language-code {
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Dropdown panel — same visual treatment as .user-profile .dropdown-content. */
.language-dropdown .dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elev);
  display: none;
  z-index: 60;
}
.language-dropdown .dropdown-content::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.language-dropdown:hover .dropdown-content,
.language-dropdown:focus-within .dropdown-content,
.language-dropdown .dropdown-trigger:focus + .dropdown-content { display: block; }

.language-dropdown .languages li.language { margin: 0; }
.language-dropdown .language-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  color: var(--text-heading);
  text-decoration: none;
  font-size: 13px;
}
.language-dropdown .language-link:hover {
  background: rgba(99, 102, 241, 0.08);
}
.language-dropdown .languages li.selected .language-link {
  font-weight: 600;
  background: rgba(99, 102, 241, 0.12);
}

/* Flag-priority compact mode: hide the BCP-47 code in the trigger
   at narrow viewports. The flag (20×14) stays visible at every width.
   A viewport media query (not @container) is used because
   .page-header-actions is a flex item, and container-type: inline-size
   on a flex item collapses its allocated width to 0 — the flex
   algorithm strips intrinsic sizing under containment. The actions
   row always sits at the right edge of the header, so viewport width
   is a faithful proxy for its rendered width. */
@media (max-width: 480px) {
  .language-dropdown .language-code { display: none; }
}

/* ==========================================================================
   KnowDrive Simple App: Header & Footer animations based on sidebar state
   ========================================================================== */
header.page-header {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease, border-color 0.4s;
}

footer.page-footer {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease, border-color 0.4s;
}

/* Sidebar closed (default workbench view): slide header up and footer down out of view */
header.page-header.workbench-sidebar-closed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 solid transparent !important;
  overflow: hidden;
}

footer.page-footer.workbench-sidebar-closed {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 0 solid transparent !important;
  overflow: hidden;
}

/* Sidebar open: restore normal positions */
header.page-header.workbench-sidebar-open {
  transform: translateY(0);
  opacity: 1;
}

footer.page-footer.workbench-sidebar-open {
  transform: translateY(0);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   PROFILE PORTAL — outer-document styles for [data-kd-workbench-topbar]
   (React portal renders here; shadow-DOM App.css cannot reach it)
════════════════════════════════════════════════════════════════════ */

.profile-portal-root {
  position: relative;
  display: flex;
  align-items: center;
}

.profile-avatar-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.profile-avatar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-indigo) 25%, transparent);
}

.profile-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  user-select: none;
}

/* Mini dropdown */
.profile-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 260px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-base);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  overflow: hidden;
  z-index: 9999;
  animation: profileDropIn 0.18s ease-out;
  font-family: var(--font-sans, 'Google Sans Flex', 'Plus Jakarta Sans', system-ui, sans-serif);
}

@keyframes profileDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-dropdown-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
}

.profile-dropdown-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.profile-dropdown-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.profile-dropdown-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-dropdown-email {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-dropdown-divider {
  height: 1px;
  background: var(--border-base);
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-body);
  font-weight: 500;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
  font-family: inherit;
}

.profile-dropdown-item:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}

/* Account modal */
.account-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, 'Google Sans Flex', 'Plus Jakarta Sans', system-ui, sans-serif);
  animation: fadeIn 0.18s ease;
}

.account-modal {
  display: flex;
  width: min(900px, 95vw);
  height: min(640px, 90vh);
  background: var(--bg-elevated);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.12);
  animation: slideUp 0.22s ease;
}

.account-modal-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-base);
  border-right: 1px solid var(--border-base);
  display: flex;
  flex-direction: column;
  padding: 28px 0 20px;
}

.account-modal-sidebar-header {
  padding: 0 20px 24px;
}

.account-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: -0.02em;
}

.account-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.account-modal-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
}

.account-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-body);
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
  font-family: inherit;
  width: 100%;
}

.account-nav-item:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}

.account-nav-item.active {
  background: color-mix(in srgb, var(--accent-indigo) 12%, transparent);
  color: var(--accent-indigo);
  font-weight: 700;
}

.account-nav-item svg { opacity: 0.7; flex-shrink: 0; }
.account-nav-item.active svg { opacity: 1; }

.account-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 36px;
  position: relative;
}

.account-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1;
  font-family: inherit;
}

.account-modal-close:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}

.account-tab-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}

.account-tab-divider {
  height: 1px;
  background: var(--border-base);
  margin: 0 0 20px;
}

.account-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 0;
}

.account-row-label {
  width: 180px;
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  padding-top: 2px;
}

.account-row-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-body);
  flex-wrap: wrap;
}

.account-row-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.account-row-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-heading);
}

.account-row-action {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.12s ease;
  margin-left: auto;
  font-family: inherit;
}

.account-row-action:hover { color: var(--accent-indigo); }

.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-hover);
  color: var(--text-muted);
}

.account-dots-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s ease;
  letter-spacing: 2px;
  font-family: inherit;
}

.account-dots-btn:hover { background: var(--surface-hover); }

.account-add-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-indigo);
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.12s ease;
  font-family: inherit;
}

.account-add-link:hover { opacity: 0.75; }

.account-danger-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: #ef4444;
  padding: 0;
  transition: opacity 0.12s ease;
  font-family: inherit;
}

.account-danger-link:hover { opacity: 0.75; }

.account-device-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
}

/* Theme toggle inside preferences */
.theme-toggle-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-base);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-base);
}

.theme-toggle-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  font-family: inherit;
}

.theme-toggle-opt.active {
  background: var(--bg-elevated);
  color: var(--text-heading);
  font-weight: 700;
}

.theme-toggle-opt:hover:not(.active) { background: var(--surface-hover); }

.account-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-body);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.12s ease;
  font-weight: 500;
}

.account-lang-option:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}

.storage-bar-track {
  height: 6px;
  background: var(--surface-hover);
  border-radius: 99px;
  overflow: hidden;
  width: 100%;
}

.storage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-indigo), var(--accent-purple));
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.subscription-plan-card {
  border: 1px solid var(--border-base);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-surface);
  transition: border-color 0.15s ease;
  width: 100%;
}

.subscription-plan-card.current {
  border-color: var(--accent-indigo);
  background: color-mix(in srgb, var(--accent-indigo) 4%, var(--bg-surface));
}

/* Simple-modal-btn used inside the account modal (portal target) */
.simple-modal-btn.confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, var(--accent-indigo), var(--accent-purple));
  color: #fff;
  transition: opacity 0.15s ease;
  font-family: inherit;
}

.simple-modal-btn.confirm:hover { opacity: 0.88; }

/* ═══ HIDE header controls when profile portal is active ═══════ */
body.has-profile-portal .theme-toggle,
body.has-profile-portal .language-dropdown {
  display: none !important;
}

body.has-profile-portal #navigation-login {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT / PROFILE MODAL  (injected by packages/header/src/index.js)
   CSS class names are identical to workbench-simple so both share
   the same visual language without duplication.
═══════════════════════════════════════════════════════════════════ */

.account-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.account-modal {
  display: flex;
  width: min(900px, 95vw);
  height: min(640px, 90vh);
  background: var(--bg-elevated);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.12);
  animation: slideUp 0.22s ease;
}

/* Sidebar */
.account-modal-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-base);
  border-right: 1px solid var(--border-base);
  display: flex;
  flex-direction: column;
  padding: 28px 0 20px;
}

.account-modal-sidebar-header {
  padding: 0 20px 24px;
}

.account-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: -0.02em;
}

.account-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.account-modal-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
}

.account-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-body);
  font-family: inherit;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.account-nav-item:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}

.account-nav-item.active {
  background: color-mix(in srgb, var(--accent-indigo) 12%, transparent);
  color: var(--accent-indigo);
  font-weight: 700;
}

.account-nav-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.account-nav-item.active svg {
  opacity: 1;
}

/* Right content panel */
.account-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 36px 32px;
  position: relative;
}

.account-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1;
  font-family: inherit;
}

.account-modal-close:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}

/* ── Tab panels — CSS-driven visibility (KDEX convention) ────────
   All 5 panels are rendered into the DOM in one pass.
   JS only toggles the .active class on switchTab(); no innerHTML
   replacement occurs. CSS controls what the user sees. */
.account-tab-panel {
  display: none;
}

.account-tab-panel.active {
  display: block;
  animation: fadeIn 0.14s ease;
}

.account-tab-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}

.account-tab-divider {
  height: 1px;
  background: var(--border-base);
  margin: 0 0 20px;
}

/* Account rows — label / content pairs */
.account-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 0;
}

.account-row-label {
  width: 180px;
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  padding-top: 2px;
}

.account-row-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-body);
  flex-wrap: wrap;
}

.account-row-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
}

.account-row-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-heading);
}

.account-row-action {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.12s ease;
  margin-left: auto;
}

.account-row-action:hover { color: var(--accent-indigo); }

.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-hover);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.account-dots-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: inherit;
  transition: background 0.12s ease;
  letter-spacing: 2px;
}

.account-dots-btn:hover { background: var(--surface-hover); }

.account-add-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-indigo);
  padding: 0;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.12s ease;
}

.account-add-link:hover { opacity: 0.75; }

.account-danger-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: #ef4444;
  padding: 0;
  font-family: inherit;
  transition: opacity 0.12s ease;
}

.account-danger-link:hover { opacity: 0.75; }

/* Device row */
.account-device-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
}

/* Preferences: theme toggle group */
.account-theme-toggle-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-base);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-base);
}

.account-theme-toggle-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}

.account-theme-toggle-opt.active {
  background: var(--bg-elevated);
  color: var(--text-heading);
  font-weight: 700;
}

.account-theme-toggle-opt:hover:not(.active) { background: var(--surface-hover); }

/* Preferences: language options */
.account-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-body);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.12s ease;
  font-weight: 500;
}

.account-lang-option:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}

/* Storage bars */
.account-storage-bar-track {
  height: 6px;
  background: var(--surface-hover);
  border-radius: 99px;
  overflow: hidden;
  width: 100%;
}

.account-storage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-indigo), var(--accent-purple));
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* Subscription plan cards */
.account-plan-card {
  border: 1px solid var(--border-base);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-surface, var(--bg-base));
  transition: border-color 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.account-plan-card.current {
  border-color: var(--accent-indigo);
  background: color-mix(in srgb, var(--accent-indigo) 4%, var(--bg-base));
}

/* ===========================================================================
   Shell app chrome (knowdrive-shell)
   Merged non-destructively from packages/shell/src/App.css. The shell adopts
   this stylesheet into its own shadow root (index.jsx fetches /-/theme/main.css
   and replaceSync's it onto adoptedStyleSheets), so these :host / .kd-* /
   @keyframes rules apply inside the shell's shadow tree. At document scope the
   :host rule is inert and harmless. @keyframes fadeIn intentionally omitted —
   an identical definition already exists above.
   =========================================================================== */

:host { display: block; }

@keyframes dropIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sidebarExpand { from { width: 60px; } to { width: 280px; } }
@keyframes sidebarCollapse { from { width: 280px; } to { width: 60px; } }
@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Desktop: ease the collapse/expand width morph */
@media (min-width: 821px) {
  .kd-sidebar { overflow: hidden; view-transition-name: kd-sidebar; }
  .kd-sidebar.expanding { animation: sidebarExpand .28s ease-in; }
  .kd-rail.collapsing { animation: sidebarCollapse .28s ease-out; overflow: hidden; }
  .kd-rail { view-transition-name: kd-rail; }
}

/* Mobile: sidebar becomes a slide-in drawer behind a hamburger */
@media (max-width: 820px) {
  .kd-rail { display: none !important; }
  .kd-mobilebar { display: flex !important; }
  .kd-sidebar {
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 84vw !important; max-width: 330px !important; z-index: 80 !important;
    /* dvh keeps the bottom-anchored nav clear of mobile browser chrome (100vh fallback). */
    height: 100vh !important; height: 100dvh !important;
    transform: translateX(-100%); box-shadow: 14px 0 50px rgba(20,20,50,.2); overflow: hidden;
  }
  .kd-sidebar[data-open="1"] { transform: translateX(0); animation: drawerIn .3s cubic-bezier(.2,.7,.2,1); }
  .kd-acctmodal { flex-direction: column !important; height: 92vh !important; }
  .kd-acctrail { width: 100% !important; border-right: none !important; border-bottom: 1px solid #ECECF1 !important; padding: 18px !important; }
  .kd-plangrid { grid-template-columns: 1fr !important; }
}

/* ===========================================================================
   Invitations app (knowdrive-invitations)
   Merged non-destructively from packages/invitations/src/App.css. The app
   adopts this stylesheet into its shadow root (index.jsx fetches
   /-/theme/main.css), so these :host / .kd-page / .invite-* / @keyframes rules
   apply inside its shadow tree. Omitted as already-defined-and-identical above:
   :host { display: block }, @keyframes fadeIn, @keyframes dropIn.
   =========================================================================== */

@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.kd-page { max-width: 1040px; margin: 0 auto; padding: 64px 40px 60px; }
.kd-page-title { font: 800 30px 'Plus Jakarta Sans'; letter-spacing: -.02em; color: #1C1C2B; margin: 0 0 4px; }
.kd-page-sub { font: 500 14.5px 'Plus Jakarta Sans'; color: #8C8C9E; margin: 0 0 26px; }
@media (max-width: 820px) { .kd-page { padding: 26px 16px 46px !important; } }

/* ── Success banner ──────────────────────────────── */
.invite-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid #B7EDD5;
  border-radius: 14px;
  background: #EDFAF4;
  margin-bottom: 20px;
  animation: msgIn .25s ease both;
}
.invite-banner-body { flex: 1; min-width: 0; }
.invite-banner-msg { font: 600 14px 'Plus Jakarta Sans'; color: #1A7A55; }
.invite-banner-msg strong { color: #0F6040; }
.invite-banner-link { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invite-banner-note { font: 500 12.5px 'Plus Jakarta Sans'; color: #4A8066; flex-shrink: 0; }
.invite-banner-url {
  font: 500 12px/1.5 'JetBrains Mono', monospace;
  color: #0F6040;
  background: #D4F3E6;
  padding: 3px 9px;
  border-radius: 7px;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.invite-banner-copy {
  padding: 5px 12px;
  border: 1px solid #B7EDD5;
  border-radius: 8px;
  background: #fff;
  font: 600 12px 'Plus Jakarta Sans';
  color: #12A07A;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.invite-banner-copy:hover { background: #EDFAF4; }
.invite-banner-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: #7AC8A5;
  font-size: 15px;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.invite-banner-dismiss:hover { color: #1A7A55; }

/* ── Invite form ─────────────────────────────────── */
.invite-form {
  border: 1px solid #E7E7EF;
  border-radius: 18px;
  padding: 22px 24px;
  background: #FBFAFF;
  margin-bottom: 30px;
}
.invite-form h2 { font: 700 15px 'Plus Jakarta Sans'; color: #1C1C2B; margin: 0 0 14px; }
.invite-form-error {
  background: #FEF0F0;
  border: 1px solid #FCCFCF;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.invite-form-error strong { display: block; font: 700 13px 'Plus Jakarta Sans'; color: #B93030; margin-bottom: 2px; }
.invite-form-error p { font: 500 13px 'Plus Jakarta Sans'; color: #B93030; margin: 0; }
.invite-form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.invite-form-field > span { font: 600 13px 'Plus Jakarta Sans'; color: #545468; }
.invite-form-field input {
  padding: 12px 15px;
  border: 1px solid #E7E7EF;
  border-radius: 12px;
  outline: none;
  font: 500 14.5px 'Plus Jakarta Sans';
  color: #1C1C2B;
  background: #fff;
  max-width: 480px;
  transition: border-color .15s, box-shadow .15s;
}
.invite-form-field input:focus { border-color: #6C5CE7; box-shadow: 0 0 0 3px rgba(108,92,231,.12); }
.invite-form-field input:disabled { opacity: .6; background: #F7F7FB; }
.invite-form button[type=submit] {
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  background: #6C5CE7;
  color: #fff;
  font: 700 14px 'Plus Jakarta Sans';
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(108,92,231,.28);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .15s;
}
.invite-form button[type=submit]:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.invite-form button[type=submit]:not(:disabled):hover { opacity: .9; }

/* ── Invite list ─────────────────────────────────── */
.invite-list h2 {
  font: 700 13px 'Plus Jakarta Sans';
  letter-spacing: .04em;
  color: #545468;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.invite-list-loading,
.invite-list-empty,
.invite-list-error {
  font: 500 14px 'Plus Jakarta Sans';
  color: #8C8C9E;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
}
.invite-list-error { color: #B93030; flex-direction: column; align-items: flex-start; gap: 10px; }
.invite-list button[type=button] {
  padding: 8px 16px;
  border: 1px solid #ECECF1;
  border-radius: 9px;
  background: #fff;
  font: 600 13px 'Plus Jakarta Sans';
  color: #6C5CE7;
  cursor: pointer;
}

/* Table wrapper for rounded corners with border-collapse */
.invite-list-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ECECF1;
  border-radius: 14px;
}
.invite-list-table thead tr th:first-child { border-top-left-radius: 13px; }
.invite-list-table thead tr th:last-child { border-top-right-radius: 13px; }
.invite-list-table tbody tr:last-child td:first-child { border-bottom-left-radius: 13px; }
.invite-list-table tbody tr:last-child td:last-child { border-bottom-right-radius: 13px; }
.invite-list-table th {
  font: 600 12px 'Plus Jakarta Sans';
  letter-spacing: .03em;
  color: #8C8C9E;
  text-align: left;
  padding: 11px 16px;
  background: #F7F7FB;
  border-bottom: 1px solid #ECECF1;
}
.invite-list-table tbody tr { border-bottom: 1px solid #F0F0F4; }
.invite-list-table tbody tr:last-child td { border-bottom: none; }
.invite-list-table td {
  padding: 13px 16px;
  font: 500 13.5px 'Plus Jakarta Sans';
  color: #3A3A4E;
  vertical-align: middle;
  border-bottom: 1px solid #F0F0F4;
}
.invite-list-table tbody tr:last-child td { border-bottom: none; }
.invite-row-email { font-weight: 600 !important; color: #1C1C2B !important; }
.invite-row-invited-by { color: #8C8C9E !important; font-size: 12.5px !important; }
.invite-row-actions { white-space: nowrap; }
.invite-row-actions button {
  padding: 7px 13px;
  border: 1px solid #ECECF1;
  background: #fff;
  border-radius: 9px;
  font: 600 12.5px 'Plus Jakarta Sans';
  color: #545468;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s;
}
.invite-row-actions button:hover:not(:disabled) { background: #F4F4F8; }
.invite-row-actions button:disabled { opacity: .5; cursor: not-allowed; }
.invite-row-error {
  display: block;
  margin-top: 5px;
  font: 500 12px 'Plus Jakarta Sans';
  color: #B93030;
}

/* ── Pager ──────────────────────────────────────── */
.invite-pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.invite-pager button {
  padding: 7px 16px;
  border: 1px solid #ECECF1;
  border-radius: 9px;
  background: #fff;
  font: 600 13px 'Plus Jakarta Sans';
  color: #3A3A4E;
  cursor: pointer;
  transition: background .12s;
}
.invite-pager button:hover:not(:disabled) { background: #F4F4F8; }
.invite-pager button:disabled { opacity: .4; cursor: default; }
.invite-pager span { font: 500 13px 'Plus Jakarta Sans'; color: #8C8C9E; }

/* ===========================================================================
   KnowDrive app design system — theme-level rules
   Extracted from the landing "standalone" export: global box-sizing/scrollbar
   resets, animation keyframes, the .kd-wiggle / [data-hl] / [data-tip] helpers,
   app dark-mode ([data-r="approot"][data-theme="dark"] invert+hue-rotate with
   img/[data-noinvert] counter-invert), and the [data-r=…] responsive
   breakpoints. The knowdrive-landing app's bundle.css drops these and relies on
   them being here (floatY/dotPulse/caretBlink/sendPulse/kdWiggle, .kd-wiggle).
   Omitted as theme-served/duplicate: @font-face and fadeIn/dropIn/viewIn/msgIn/
   slideInUp/drawerIn/sidebarExpand/sidebarCollapse.
   =========================================================================== */
* { box-sizing: border-box; }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #E2E2EA; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: #CFCFDA; background-clip: content-box; }
  
  
  
  @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
  
  
  @keyframes segPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
  @keyframes tipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
  
  
  @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
  @keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
  @keyframes sendPulse { 0% { box-shadow: 0 0 0 0 rgba(108,92,231,.45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(108,92,231,0); } }
  @keyframes kdWiggle { 0% { transform: rotate(0); } 3% { transform: rotate(-2.6deg); } 6% { transform: rotate(2.2deg); } 9% { transform: rotate(-1.8deg); } 12% { transform: rotate(1.2deg); } 15%, 100% { transform: rotate(0); } }
  .kd-wiggle { display: inline-block; transform-origin: center 60%; animation: kdWiggle 3s ease-in-out infinite; }
  [data-hl="1"] { outline: 2px solid #6C5CE7 !important; outline-offset: -2px; background: #F6F4FF !important; }
  /* Dark mode (logged-in app only): invert + hue-rotate flips lightness while keeping hues;
     images, flags and other raster/colored marks are counter-inverted to restore them. */
  [data-r="approot"][data-theme="dark"] { filter: invert(1) hue-rotate(180deg); }
  [data-r="approot"][data-theme="dark"] img,
  [data-r="approot"][data-theme="dark"] [data-noinvert] { filter: invert(1) hue-rotate(180deg); }
  [data-tip]:hover .kdtip { opacity: 1 !important; visibility: visible !important; }
  
  @keyframes typingBlink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
  @keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (max-width: 820px) {
    [data-r="rail"] { display: none !important; }
    [data-r="mobilebar"] { display: flex !important; }
    [data-r="sidebar"] { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 84vw !important; max-width: 330px !important; height: 100vh !important; height: 100dvh !important; z-index: 80 !important; transform: translateX(-100%); box-shadow: 14px 0 50px rgba(20,20,50,.2); display: flex !important; }
    [data-r="sidebar"][data-open="1"] { transform: translateX(0); animation: drawerIn .3s cubic-bezier(.2,.7,.2,1); }
    [data-r="page"] { padding: 26px 16px 46px !important; }
    [data-r="grid4"] { grid-template-columns: 1fr 1fr !important; }
    [data-r="grid3"] { grid-template-columns: 1fr !important; }
    [data-r="grid-12"] { grid-template-columns: 1fr !important; }
    [data-r="tablewrap"] { overflow-x: auto !important; }
    [data-r="trow"] { min-width: 620px !important; }
    [data-r="hero"] { padding: 60px 18px 24px !important; }
    [data-r="herotitle"] { font-size: 26px !important; }
    [data-r="herosub"] { font-size: 15px !important; }
    [data-r="filespanel"] { height: 86vh !important; }
    [data-r="filerow"] { flex-wrap: wrap !important; }
    [data-r="landgrid"] { grid-template-columns: 1fr !important; gap: 30px !important; padding: 24px 0 !important; }
    [data-r="landhead"] { font-size: 36px !important; }
    [data-r="acctmodal"] { flex-direction: column !important; height: 92vh !important; }
    [data-r="acctrail"] { width: 100% !important; border-right: none !important; border-bottom: 1px solid #ECECF1 !important; padding: 18px !important; }
    [data-r="acctnav"] { flex-direction: row !important; flex-wrap: wrap !important; }
    [data-r="plangrid"] { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 560px) {
    [data-r="grid4"] { grid-template-columns: 1fr !important; }
    [data-r="folderchip"], [data-r="filesize"] { display: none !important; }
  }
  @media (min-width: 821px) {
    [data-r="sidebar"] { animation: sidebarExpand .28s ease-in; overflow: hidden; }
  }