/* ============================================================
   Moddy — Theme layer (Design Tokens v2)
   Ported from the redesign prototype. Loaded AFTER app.css /
   style.css / Bootstrap so it overrides the legacy look without
   removing Bootstrap's modal JS. Plain CSS — no build step.

   Structure:
     1. Tokens
     2. Base typography + font force
     3. Buttons / forms
     4. App shell (sidebar, nav, logout)
     5. Page head (title, status pill, create buttons)
     6. Filters / list head / view switcher
     7. Projects table (list view) + pills / chips / pagination
     8. Projects grid view
     9. Generic tables, profile/billing cards, misc surfaces
    10. Templates / Shared pages
    11. Modals
    12. Auth pages
   Each selector is defined exactly once — do not append overrides
   at the end of the file; edit the block in place.
   ============================================================ */

:root {
  /* Brand */
  --moddy-50: oklch(0.965 0.022 250);
  --moddy-100: oklch(0.93 0.05 250);
  --moddy-200: oklch(0.87 0.10 250);
  --moddy-500: oklch(0.58 0.225 250);
  --moddy-600: oklch(0.52 0.235 250);
  --moddy-700: oklch(0.47 0.215 250);
  --moddy-800: oklch(0.41 0.175 250);
  --moddy-900: oklch(0.33 0.13 250);
  --moddy-950:#15244f;
  --brand: oklch(0.585 0.175 250);
  --brand-hover: oklch(0.52 0.17 250);
  --brand-active: oklch(0.46 0.155 250);
  --brand-ring: oklch(0.585 0.175 250 / 0.16);
  /* Neutral */
  --ink-25:#fbfcfd; --ink-50:#f6f8fa; --ink-100:#eef1f5; --ink-200:#e2e7ee; --ink-300:#cbd2dc;
  --ink-400:#97a1b1; --ink-500:#6b7587; --ink-600:#4d566a; --ink-700:#353d4f; --ink-800:#232a3a;
  --ink-900:#141925; --ink-950:#0a0e17;

  /* Semantic */
  --success-50:#ecfdf3; --success-100:#d1fadf; --success-500:#12b76a; --success-600:#039855; --success-700:#027a48;
  --warning-50:#fffaeb; --warning-100:#fef0c7; --warning-500:#f79009; --warning-600:#dc6803; --warning-700:#b54708;
  --danger-50:#fef3f2; --danger-100:#fee4e2; --danger-500:#f04438; --danger-600:#d92d20; --danger-700:#b42318;
  --info-50:#eff8ff; --info-100:#d1e9ff; --info-500:#2e90fa; --info-700:#175cd3;

  /* Surfaces / borders / text */
  --surface-app:var(--ink-50); --surface-card:#fff; --surface-sunken:var(--ink-100); --surface-overlay:rgba(20,25,37,.55);
  --border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-strong:var(--ink-400); --border-focus:var(--moddy-500);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-600); --text-tertiary:var(--ink-500); --text-muted:var(--ink-400);
  --text-on-brand:#fff; --text-link:var(--moddy-700);

  /* Type */
  --font-sans:"Inter","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:15px; --text-lg:17px; --text-xl:19px;
  --text-2xl:22px; --text-3xl:26px; --text-4xl:32px;
  --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Spacing / radius / shadow / motion */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-2xl:18px; --r-full:9999px;
  --shadow-xs:0 1px 2px rgba(20,25,37,.04);
  --shadow-sm:0 1px 2px rgba(20,25,37,.06),0 1px 1px rgba(20,25,37,.04);
  --shadow-md:0 4px 8px -2px rgba(20,25,37,.08),0 2px 4px -2px rgba(20,25,37,.04);
  --shadow-lg:0 12px 24px -6px rgba(20,25,37,.10),0 4px 8px -4px rgba(20,25,37,.06);
  --shadow-xl:0 24px 48px -12px rgba(20,25,37,.18);
  --ring-focus:0 0 0 3px rgba(59,117,255,.22);
  --ease-out:cubic-bezier(.2,.8,.2,1); --dur-fast:120ms; --dur-base:180ms;

  --sidebar-w:248px;
}

/* ============================================================
   2. Base typography + font force
   style.css uses "Proxima Nova" and Tailwind .font-sans uses
   Nunito 17px — both must be overridden, hence the !important.
   The 14px rule sets the app-wide body-copy default; component
   rules BELOW this section override it by source order.
   ============================================================ */
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}
body.logged-in { background: var(--surface-app); }

body.logged-in, body.auth-page,
body.logged-in :where(h1,h2,h3,h4,h5,h6,p,span,a,div,td,th,button,input,select,textarea,label,li,strong,small,blockquote,form),
body.auth-page :where(h1,h2,h3,h4,h5,h6,p,span,a,div,td,th,button,input,select,textarea,label,li,strong,small,blockquote,form) {
  font-family: var(--font-sans) !important;
}
body.logged-in :where(.bi, [class*="bi-"]) { font-family: "bootstrap-icons" !important; }
body.logged-in .cont, body.logged-in .cont :where(p,span,a,div,td,th,li,label) { font-size: 14px; }

/* ============================================================
   3. Buttons — re-skins both legacy + Bootstrap .btn-* — and forms
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: var(--r-md); font-weight: var(--weight-medium); font-size: var(--text-base);
  line-height: 1; padding: 10px 14px; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.btn-primary, .btn.btn-primary {
  background: var(--brand); color: var(--text-on-brand); border-color: var(--brand); box-shadow: var(--shadow-xs);
}
.btn-primary:hover, .btn.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn-primary:active, .btn.btn-primary:active { background: var(--brand-active); }

.btn-secondary, .btn.btn-secondary {
  background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover, .btn.btn-secondary:hover { background: var(--ink-50); border-color: var(--border-strong); color: var(--text-primary); }

.btn-danger, .btn.btn-danger {
  background: var(--danger-600); color: #fff; border-color: var(--danger-600);
}
.btn-danger:hover, .btn.btn-danger:hover { background: var(--danger-700); border-color: var(--danger-700); color: #fff; }

.form-control,
.main-area input[type="text"], .main-area input[type="email"], .main-area input[type="search"],
.main-area select, .main-area textarea {
  border: 1px solid var(--border-default); border-radius: var(--r-md);
  padding: 9px 12px; font-size: var(--text-base); color: var(--text-primary); background: #fff;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.main-area select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: 36px;;
}
.form-control:focus,
.main-area input:focus, .main-area select:focus, .main-area textarea:focus {
  outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus);
}

/* ============================================================
   4. App shell — full-width content + sidebar
   ============================================================ */
/* style.css sets .cont to width:70% float:left — make it fill */
body.logged-in .main-area { background: var(--surface-app); display: flex; align-items: stretch; }
body.logged-in .sidebar + .cont { width: auto; flex: 1 1 auto; min-width: 0; float: none; max-width: none; }
body.logged-in .cont { padding: var(--s-7); }

/* Structural sidebar overrides are DESKTOP ONLY. Below 981px the legacy CSS
   turns the sidebar into a fixed slide-out menu (max-width:980px in style.css);
   overriding its width/position here would break that menu. */
body.logged-in .sidebar-logo { display: none; }
@media (min-width: 981px) {
  body.logged-in .sidebar {
    width: var(--sidebar-w); background: var(--surface-card);
    border-right: 1px solid var(--border-subtle); padding: var(--s-5) var(--s-3);
  }
  body.logged-in .sidebar .menu {position: relative;}
  body.logged-in .sidebar .menu:before {position: absolute;content: '';width: calc(100% + 24px);left: -12px;top: 0;border-bottom: 1px solid var(--border-subtle);}
  body.logged-in .sidebar-logo { display: block; padding: 6px 7px var(--s-5); }
  body.logged-in .sidebar-logo img { height: 40px; width: auto; }
}

/* Legacy .sidebar .menu has `margin: 0 -30px` (full-bleed) — reset it so the
   nav pills sit inset within the sidebar padding. */
body.logged-in .sidebar .menu { margin: 0 0 0; padding: 20px 0 0 0; overflow: visible; }
body.logged-in .sidebar .menu li { width: 100%; }
body.logged-in .sidebar .menu li a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px 12px; border-radius: var(--r-md);
  color: var(--text-secondary); font-size: 14px; font-weight: var(--weight-medium);
  text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
body.logged-in .sidebar .menu li a:hover { background: var(--moddy-50); }
/* Active item: 25% brand pill that bleeds to the sidebar's left edge,
   rounded on the right only (matches prototype .nav-item.is-active) */
body.logged-in .sidebar .menu li.is-active > a {
  background: rgba(47, 99, 250, 0.25); color: oklch(0.585 0.175 250); font-weight: var(--weight-semibold);
  margin-left: -12px; padding-left: 24px; border-radius: 0 var(--r-md) var(--r-md) 0;
}
@media (max-width: 980px) {
  body.logged-in .sidebar .menu li.is-active > a { margin-left: 0; }
  body.logged-in .sidebar .menu li.logout button { margin-left: 12px; padding-left: 24px; border-radius: 0 var(--r-md) var(--r-md) 0; }
}
/* Nav icons: hide the legacy SVGs, draw Lucide-style masks that inherit the
   nav text colour (so the active item goes blue too). 18px per prototype. */
body.logged-in .sidebar .menu li a svg { display: none; }
body.logged-in .sidebar .menu li a::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}
body.logged-in .sidebar .menu li.menu-item-projects a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E");
}
body.logged-in .sidebar .menu li.menu-item-templates a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='7' x='3' y='3' rx='1'/%3E%3Crect width='9' height='7' x='3' y='14' rx='1'/%3E%3Crect width='5' height='7' x='16' y='14' rx='1'/%3E%3C/svg%3E");
}
body.logged-in .sidebar .menu li.menu-item-shared a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49'/%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49'/%3E%3C/svg%3E");
}
body.logged-in .sidebar .menu li.menu-item-tutorial a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3Crect width='14' height='12' x='2' y='6' rx='2' ry='2'/%3E%3C/svg%3E");
}
body.logged-in .sidebar .menu li.menu-item-team a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
body.logged-in .sidebar .menu li.menu-item-billing a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E");
}
body.logged-in .sidebar .menu li.menu-item-profile a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
body.logged-in .sidebar .menu li.menu-item-support a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
/* Admin is the only nav item whose <li> class carries no --nav-icon by default.
   Without one the mask shorthand is invalid-at-computed-value-time, so the
   ::before renders as a solid 18px currentColor square instead of an icon. */
body.logged-in .sidebar .menu li.menu-item-admin a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* Logout as a plain nav item (icon + label, hover pill) */
body.logged-in .sidebar .menu li.logout form { margin: 0; }
body.logged-in .sidebar .menu li.logout button {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: 9px 12px;
  background: none; border: none; border-radius: var(--r-md); color: var(--text-secondary);
  font-family: inherit; font-size: 14px; font-weight: var(--weight-medium); cursor: pointer; text-align: left; box-shadow: none;
}
body.logged-in .sidebar .menu li.logout button:hover { background: var(--moddy-50); color: var(--text-primary); }
body.logged-in .sidebar .menu li.logout button::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================================================
   5. Page head — title/subtitle left, status pill + buttons right
   ============================================================ */
body.logged-in .page-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  /* break out of .cont's 32px padding so the bar spans the content column */
  margin: calc(var(--s-7) * -1) calc(var(--s-7) * -1) var(--s-6);
  padding: var(--s-4) var(--s-7);
}
body.logged-in .page-title { font-size: 22px; font-weight: 600; margin: 0; color: var(--text-primary); line-height: 1.5; }
body.logged-in .page-subtitle { margin: 0; font-size: 13px; color: var(--ink-600);line-height: 1.6; }
body.logged-in .page-head-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
body.logged-in .status-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-full);
  background: var(--moddy-50); color: var(--moddy-700); font-size: var(--text-sm); font-weight: var(--weight-medium);
  border: 1px solid var(--moddy-100);
}
body.logged-in .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--moddy-500); }
body.logged-in .btn-create-top { padding: 7px 15px; }
body.logged-in .btn-create-top .plus-icon { font-size: 17px; line-height: 1; font-weight: 400;margin-bottom: 3px; }
body.logged-in .btn-2d { background: #CCFBF1; color: #0F766E; border-color: #CCFBF1; }
body.logged-in .btn-2d:hover { background: #99F6E4; border-color: #99F6E4; color: #0F766E; }

/* Legacy page title (pages not yet converted to .page-head) */
body.logged-in .maintitle {
  font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text-primary);
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 0 var(--s-2);
}

/* ============================================================
   6. Filter row, list head, view switcher
   ============================================================ */
body.logged-in .filter-row { display: flex; gap: var(--s-3); align-items: center; margin: 0 0 var(--s-5); flex-wrap: wrap; }
body.logged-in .filter-row .float-start, body.logged-in .filter-row .float-end { float: none !important; }
body.logged-in .filter-row .search { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin: 0; width: 100%; }
body.logged-in .filter-row .search input[name="s"] { min-width: 280px; }
body.logged-in .search-field { position: relative; flex: 1 1 300px; max-width: 320px; }
body.logged-in .search-field .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.logged-in .search-field input { width: 100%; padding-left: 38px !important; }
body.logged-in .filter-select {
  min-width: 150px; padding: 9px 34px 9px 13px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  appearance: none; -webkit-appearance: none; font-size: var(--text-base); color: var(--text-primary); background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7587' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer;
}
body.logged-in .filter-select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }

body.logged-in .list-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s-4); }
body.logged-in .list-head-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; color: var(--text-primary); letter-spacing: -0.01em; }

/* List / grid segmented switcher */
body.logged-in .list-head .view { display: inline-flex; gap: 2px; background: var(--ink-100); border-radius: var(--r-md); padding: 3px; float: none; }
body.logged-in .list-head .view a {
  width: 30px; height: 26px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  cursor: pointer; background-image: none !important; margin: 0;
}
body.logged-in .list-head .view a::before {
  content: ""; width: 16px; height: 16px; background-color: var(--text-tertiary);
  -webkit-mask: var(--vicon) center / contain no-repeat; mask: var(--vicon) center / contain no-repeat;
}
body.logged-in .list-head .view a.list-view { --vicon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E"); }
body.logged-in .list-head .view a.grid-view { --vicon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E"); }
body.logged-in .list-head .view a.active { background: #fff; box-shadow: var(--shadow-xs); }
body.logged-in .list-head .view a.active::before { background-color: var(--text-primary); }

/* ============================================================
   7. Projects table — list view (measured against prototype:
   rows 58px, td 14/16, name 14px/500 ink-900, dates ink-600,
   header 12px/600 uppercase 0.02em, pills 12px/500 2px 8px,
   3D pill oklch(0.585 0.175 250), no blue hover)
   ============================================================ */
/* Base rules shared by list AND grid mode */
body.logged-in .projects-table .table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; }
body.logged-in .projects-table .table thead th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-tertiary); font-weight: var(--weight-semibold);
  border-bottom: 1px solid var(--border-subtle); padding: 10px 12px; text-align: left;
}
body.logged-in .projects-table .table tbody td { padding: 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
body.logged-in .projects-table .table tbody tr:hover { background: var(--ink-25); }
body.logged-in .projects-table .table td.type { width: 80px; }
body.logged-in .projects-table .project-item-name { color: var(--text-primary); font-weight: var(--weight-medium); }
body.logged-in .projects-table .project-item-name:hover { color: var(--moddy-700); }

/* Rounded white card with a header-row background */
body.logged-in .projects-table:not(.grid) .table-area {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl);box-shadow: var(--shadow-xs);
}
body.logged-in .projects-table:not(.grid) .table thead th {
  background: var(--ink-50); border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-tertiary);
  font-weight: var(--weight-semibold); padding: 10px 16px; text-align: left; white-space: nowrap;
}
body.logged-in .projects-table:not(.grid) .table tbody td {
  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); border-left: none; border-right: none;
  vertical-align: middle; color: var(--text-secondary);
}
body.logged-in .projects-table:not(.grid) .table th { border-left: none; border-right: none; }
body.logged-in .projects-table:not(.grid) .table tbody tr:last-child td { border-bottom: none; }

/* Row hover: subtle grey, NO blue inset border (was style.css #2F92FA) */
body.logged-in .projects-table:not(.grid) tbody tr { box-shadow: none; }
body.logged-in .projects-table:not(.grid) tbody tr:hover { box-shadow: none !important; background: var(--ink-25); }
body.logged-in .projects-table:not(.grid) tbody tr:hover td { border-color: var(--border-subtle) !important; }

/* First cell: hide the legacy 144px thumbnail, keep it a table cell */
body.logged-in .projects-table:not(.grid) .first .img { display: none !important; width: 0 !important; }
body.logged-in .projects-table:not(.grid) .table td.first { display: table-cell !important; }

/* Proportional column widths (auto layout distributes extra evenly, so the
   name column no longer grabs all the space on wide screens) */
body.logged-in .projects-table:not(.grid) .table td.first  { width: 28%; }
body.logged-in .projects-table:not(.grid) .table td.type   { width: 8%; }
body.logged-in .projects-table:not(.grid) .table td.name   { width: 14%; }
body.logged-in .projects-table:not(.grid) .table td.tags   { width: 15%; }
body.logged-in .projects-table:not(.grid) .table td.second { width: 14%; }
body.logged-in .projects-table:not(.grid) .table td.edit   { width: 14%; }
body.logged-in .projects-table:not(.grid) .table td.dots   { width: 7%; text-align: right; }
body.logged-in .projects-table:not(.grid) .table th:last-child { text-align: right; width: 72px; }
body.logged-in .projects-table:not(.grid) .table td:last-child { text-align: right; }

/* Cell typography */
body.logged-in .projects-table:not(.grid) .project-item-name {
  font-size: 14px; font-weight: 500; color: var(--ink-900);
  display: block; padding-right: 0;
}
body.logged-in .projects-table:not(.grid) td.name { color: var(--ink-900); white-space: nowrap; }
body.logged-in .projects-table:not(.grid) td.second,
body.logged-in .projects-table:not(.grid) td.edit { color: var(--ink-600); white-space: nowrap; }

/* Type pill (2D teal / 3D solid blue). Pills carry a small type icon
   (image for 2D, cube for 3D) everywhere except the projects list
   column, matching the prototype. */
body.logged-in .type-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px;
  border: 1px solid transparent; font-size: 12px; font-weight: 500; line-height: 1.5;
}
body.logged-in .type-pill::before {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; background-color: currentColor;
  -webkit-mask: var(--type-icon) center / contain no-repeat; mask: var(--type-icon) center / contain no-repeat;
}
body.logged-in .type-pill.t-2d { --type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); }
body.logged-in .type-pill.t-3d { --type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
/* Projects list column keeps the plain text pill (per prototype) */
body.logged-in .projects-table:not(.grid):not(.templates-view) .table td.type .type-pill::before { display: none; }
body.logged-in .type-pill.t-2d { background: #CCFBF1; color: #0F766E; border-color: #CCFBF1; }
body.logged-in .type-pill.t-3d { background: oklch(0.585 0.175 250); color: #fff; border-color: oklch(0.585 0.175 250); }

/* Folder chip in the table (grey pill + folder colour dot) */
body.logged-in .tag-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 9999px;
  background: var(--ink-100); color: var(--ink-700); font-size: 12px; font-weight: 500;
}
body.logged-in .tag-chip .tag-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
body.logged-in .tag-empty { color: var(--text-muted); }
/* Owner column: 13px near-black (needs .table tbody weight to beat the generic td colour) */
body.logged-in .projects-table:not(.grid) .table tbody td.name { font-size: 13px; color: var(--ink-900); }

/* Action dots: ghost icon-button (28px box, ink-100 on hover/open),
   ellipsis drawn via ::before mask. Menu opens on CLICK (.h.open set
   by the layout script), not on the legacy row hover. */
body.logged-in .projects-table .more {
  width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; -webkit-mask: none; mask: none;
  border-radius: var(--r-sm); cursor: pointer; overflow: visible; text-indent: 0;
  transition: background-color var(--dur-fast) var(--ease-out);
}
body.logged-in .projects-table .more::before {
  content: ""; width: 18px; height: 18px; background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.logged-in .projects-table .h:hover .more,
body.logged-in .projects-table .h.open .more { background: var(--ink-100); }
body.logged-in .projects-table .h:hover .more::before,
body.logged-in .projects-table .h.open .more::before { background-color: var(--text-primary); }
/* Disable the legacy hover reveal; only .h.open shows the menu */
body.logged-in .projects-table td:last-child:hover .more-h { display: none; }
body.logged-in .projects-table td:last-child .h.open .more-h { display: block; }

/* Row-actions dropdown — match the prototype Menu component:
   200px card, r-md, 4px padding, 13px items w/ 14px muted icons,
   dividers between groups, red Delete. (Legacy .more-h reveal on
   td:last-child:hover is kept.) */
body.logged-in .projects-table .more-h {
  width: 200px; overflow: visible; top: calc(100% + 4px);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  padding: 4px; z-index: 100;
}
body.logged-in .projects-table .more-h a,
body.logged-in .projects-table .more-h a.btn,
body.logged-in .projects-table .more-h span.btn {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; background: transparent; border: none; box-shadow: none; margin: 0;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 400; color: var(--text-primary);
  text-align: left; justify-content: flex-start; line-height: 1.4; text-decoration: none;
}
body.logged-in .projects-table .more-h a:hover { background: var(--ink-50); color: var(--text-primary); }
body.logged-in .projects-table .more-h a::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background-color: var(--text-tertiary);
  -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat;
}
body.logged-in .projects-table .more-h a.project-item-open { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
body.logged-in .projects-table .more-h a.project-item-rename { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E"); }
body.logged-in .projects-table .more-h a.project-item-duplicate { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
body.logged-in .projects-table .more-h a.project-item-move { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z'/%3E%3C/svg%3E"); }
body.logged-in .projects-table .more-h a.project-revisions { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
body.logged-in .projects-table .more-h a.project-item-delete { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E"); }
/* Danger item */
body.logged-in .projects-table .more-h a.project-item-delete { color: var(--danger-700); }
body.logged-in .projects-table .more-h a.project-item-delete::before { background-color: var(--danger-600); }
body.logged-in .projects-table .more-h a.project-item-delete:hover { background: var(--danger-50); color: var(--danger-700); }
/* Group dividers (after Open, after the edit group, before Delete).
   Drawn as a pseudo-element line, NOT border-top: iOS Safari bends a
   border around the item's rounded corners, producing curved lines. */
body.logged-in .projects-table .more-h a.project-item-rename,
body.logged-in .projects-table .more-h a.project-revisions,
body.logged-in .projects-table .more-h a.project-item-delete { border-top: none; margin-top: 9px; position: relative; }
body.logged-in .projects-table .more-h a.project-item-rename::after,
body.logged-in .projects-table .more-h a.project-revisions::after,
body.logged-in .projects-table .more-h a.project-item-delete::after {
  content: ""; position: absolute; top: -5px; left: -4px; right: -4px; height: 1px;
  background: var(--border-subtle); pointer-events: none;
}
body.logged-in .projects-table .more-h a:first-child { margin-top: 0; }
body.logged-in .projects-table .more-h a:first-child::after { display: none; }

/* Pagination — 32px boxes, 8px radius, 4px gap,
   active = solid oklch(0.52 0.235 250), inactive = white + border.
   .pager-row = custom vendor/pagination/bootstrap-5 template:
   "Showing 1–15 of 33" summary left, pager right. */
body.logged-in .projects-table nav,
body.logged-in .projects-table .table-area + * { margin-top: var(--s-6); }
body.logged-in .pager-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
body.logged-in .pager-summary { margin: 0; font-size: 13px; color: var(--ink-600); }
body.logged-in .pager-summary strong { font-weight: 600; color: var(--ink-900); }
body.logged-in .projects-table .pagination { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.logged-in .projects-table .pagination .page-item { margin: 0; }
body.logged-in .projects-table .pagination .page-link {
  min-width: 32px; height: 32px; padding: 0 9px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); border-radius: 8px !important; background: #fff; color: var(--ink-600);
  font-size: 13px; font-weight: 500; line-height: 1; box-shadow: none; margin: 0;
}
body.logged-in .projects-table .pagination .page-link:hover { background: var(--ink-50); color: var(--ink-700); z-index: auto; }
body.logged-in .projects-table .pagination .page-item.active .page-link {
  background: oklch(0.52 0.235 250); border-color: oklch(0.52 0.235 250); color: #fff; font-weight: 600;
}
body.logged-in .projects-table .pagination .page-item.disabled .page-link { color: var(--ink-400); background: #fff; opacity: .55; }
body.logged-in .projects-table .pagination .page-link svg { width: 14px; height: 14px; }

/* ============================================================
   8. Projects grid (card) view — measured from "projets grid.html":
   grid auto-fill ~270px cols, 16px gap; card r-14 white + subtle
   border; thumb 16/11 #f5f9ff with pill overlaid top 10/left 10;
   footer 12x14: name 14/600 + "Edited …" 12 ink-500 + kebab right.
   ============================================================ */
body.logged-in .projects-table.grid table { display: block; width: 100%; }
body.logged-in .projects-table.grid thead { display: none; }
body.logged-in .projects-table.grid tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
body.logged-in .projects-table.grid tbody tr {
  position: relative; display: block; width: auto !important; float: none !important; margin: 0 !important;
  border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  /* overflow stays visible so the actions dropdown isn't clipped;
     the thumbnail box does its own corner clipping */
  overflow: visible;
  box-shadow: var(--shadow-xs); background: var(--surface-card);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Hover lift creates a stacking context (transform), so the card must
   also raise its own z-index or its dropdown paints under later cards */
body.logged-in .projects-table.grid tbody tr:hover {
  box-shadow: var(--shadow-md); border-color: var(--border-default);
  transform: translateY(-2px); background: var(--surface-card); z-index: 5;
}
body.logged-in .projects-table.grid tbody tr:has(.h.open) { z-index: 30; }
body.logged-in .projects-table.grid tbody tr td { display: block; padding: 0; border: none; width: auto; }
body.logged-in .projects-table.grid tbody tr td.first .img {
  display: block !important; width: auto !important; margin: 0; aspect-ratio: 16 / 11;
  background: #f5f9ff; border: none !important; border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 9px 9px 0 0 !important; overflow: hidden;
  box-shadow: none !important;
}
body.logged-in .projects-table.grid tbody tr td.first .img a { display: block; width: 100%; height: 100%; border: none !important; }
body.logged-in .projects-table.grid tbody tr td.first .img img { width: 100%; height: 100%; object-fit: cover; display: block; border: none !important; }
body.logged-in .projects-table.grid tbody tr td .project-item-name {
  padding: 12px 44px 0 14px; font-size: 14px; font-weight: 600; color: var(--text-primary);
  display: block;
  max-width: 100%;
}
/* Type pill overlays the thumbnail */
body.logged-in .projects-table.grid tbody tr td.type { position: absolute; top: 10px; left: 10px; width: auto; padding: 0; }
body.logged-in .projects-table.grid td.tags { display: none !important; }
body.logged-in .projects-table.grid tbody tr td.second { display: none !important; }
body.logged-in .projects-table.grid tbody tr td.edit { padding: 2px 44px 12px 14px; color: var(--ink-500); font-size: 12px; white-space: nowrap; }
body.logged-in .projects-table.grid tbody tr td.edit::before { content: "Edited "; }
body.logged-in .projects-table.grid tbody tr td.name { display: none !important; }   /* drop owner-initials avatar clutter */
/* z-index lifts the open dropdown above later sibling cards */
body.logged-in .projects-table.grid tbody tr td.dots { margin-top: 0 !important; float: none; position: absolute; bottom: 26px; right: 10px; width: auto; z-index: 20; }

/* ============================================================
   9. Generic tables (Team members), profile/billing cards, misc
   ============================================================ */
body.manage-team .table-area {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
}
body.manage-team .table-area .table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; }
body.manage-team .table-area .table thead th {
  background: var(--ink-50); border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary);
  font-weight: var(--weight-semibold); padding: 11px 16px; text-align: left;
}
body.manage-team .table-area .table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; color: var(--text-secondary); }
body.manage-team .table-area .table tbody tr:last-child td { border-bottom: none; }
body.manage-team .table-area .table tbody tr:hover { background: var(--ink-25); }
body.manage-team h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--s-3); color: var(--text-primary); }

/* Team page (redesign July 2026): roles banner, avatar rows, role
   dropdown, status pills — values measured from design/team.html */
body.logged-in .info-banner {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 0 var(--s-4);
  background: var(--moddy-50); border: 1px solid var(--moddy-100); border-radius: var(--r-xl); box-shadow: var(--shadow-xs);
}
body.logged-in .info-banner-icon {
  width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--moddy-100); color: var(--moddy-700);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px;
}
body.logged-in .info-banner-text { font-size: 13px; color: var(--moddy-900); line-height: 1.55; }
body.logged-in .info-banner-text strong { font-weight: 600; }

body.manage-team .member-cell { display: flex; align-items: center; gap: 12px; }
body.manage-team .member-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
body.manage-team .member-avatar.is-inactive { background: var(--ink-400); }
body.manage-team .member-meta { min-width: 0; }
body.manage-team .member-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-900); white-space: nowrap; }
body.manage-team .member-email { display: block; font-size: 12px; color: var(--ink-500); }
body.manage-team .owner-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px;
  background: var(--moddy-50); color: var(--moddy-700); border: 1px solid var(--moddy-100);
  font-size: 12px; font-weight: 500;
}
body.manage-team .member-role { font-size: 13px; color: var(--ink-900); }
body.manage-team .member-role form { margin: 0; }
body.manage-team .role-select {
  width: 120px; height: 32px; padding: 5px 26px 5px 8px; font-size: 13px; color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: 8px; background-color: #fff; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7587' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
body.logged-in .state-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; border: 1px solid transparent;
}
body.logged-in .state-pill .state-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
body.logged-in .state-pill.state-active { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }
body.logged-in .state-pill.state-active .state-dot { background: var(--success-600); }
body.logged-in .state-pill.state-invited { background: var(--moddy-50); color: var(--moddy-700); border-color: var(--moddy-100); }
body.logged-in .state-pill.state-invited .state-dot { background: var(--moddy-600); }
body.logged-in .state-pill.state-inactive { background: var(--ink-100); color: var(--ink-600); border-color: var(--ink-200); }
body.logged-in .state-pill.state-inactive .state-dot { background: var(--ink-400); }

/* Breadcrumbs above page title (Revisions etc.) */
body.logged-in .page-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }
body.logged-in .page-crumbs a { color: var(--text-tertiary); }
body.logged-in .page-crumbs a:hover { color: var(--text-secondary); text-decoration: none; }
body.logged-in .page-crumbs svg { flex-shrink: 0; color: var(--text-muted); }

/* Project revisions table */
body.logged-in .revisions-table .table tbody td { height: 58px; vertical-align: middle; }
body.logged-in .revisions-table .rev-version { display: flex; align-items: center; gap: 8px; height: 58px; }
body.logged-in .revisions-table .rev-version svg { color: var(--text-tertiary); flex-shrink: 0; }
body.logged-in .revisions-table .rev-date { font-size: 14px; font-weight: var(--weight-medium); color: var(--text-primary); }
body.logged-in .revisions-table .rev-author { font-size: 13px; color: var(--text-primary); }
body.logged-in .revisions-table .rev-actions { text-align: right; white-space: nowrap; }
body.logged-in .revisions-table .table th:last-child { width: 220px; }
body.logged-in .revisions-table .rev-actions form { display: inline-block; margin: 0 0 0 6px; }
body.logged-in .btn-rev {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px;
  font-size: 13px; font-weight: var(--weight-medium); line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
body.logged-in .btn-rev svg { flex-shrink: 0; }
body.logged-in .btn-rev-view { background: #fff; color: var(--text-primary); border: 1px solid var(--border-default); box-shadow: 0 1px 2px rgba(20, 25, 37, 0.04); }
body.logged-in .btn-rev-view:hover { background: var(--ink-50); color: var(--text-primary); text-decoration: none; }
body.logged-in .btn-rev-restore { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
body.logged-in .btn-rev-restore:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* Column sizing for the 4-column members table */
body.manage-team .team-table .table td:nth-child(2), body.manage-team .team-table .table th:nth-child(2) { width: 20%; }
body.manage-team .team-table .table td:nth-child(3), body.manage-team .team-table .table th:nth-child(3) { width: 18%; }
body.manage-team .team-table .table th:last-child { width: 100px; }
/* These action-menu items (View Projects/Remove/Re-Activate/etc.) don't have one of the
   .project-item-* classes that set --mi, so the shared .more-h a::before icon mask renders
   as a plain solid square instead of a clipped icon. No icon here, per design. */
body.manage-team .team-table .more-h a::before { content: none; }

/* Billing — wrap legacy tab content in white cards (profile now uses .pcard) */
body.manage-billing .tab1,
body.manage-billing .tab2,
body.manage-billing .tab3 {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  padding: var(--s-7); box-shadow: var(--shadow-xs); margin-top: var(--s-4);
}
/* Billing invoice tables inside the card shouldn't double-border */
body.manage-billing .tab1 .table-area, body.manage-billing .tab2 .table-area, body.manage-billing .tab3 .table-area { border: none; box-shadow: none; border-radius: 0; }

/* ============================================================
   Profile page — stacked cards + modal forms (July 2026 drop 2)
   ============================================================ */
body.logged-in .profile-alert { max-width: 800px; }
body.logged-in .profile-cards { max-width: 800px; display: flex; flex-direction: column; gap: 28px; }
body.logged-in .pcard {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 32px; box-shadow: 0 1px 2px rgba(20, 25, 37, 0.04);
  height: 100%;
}
body.logged-in .pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
body.logged-in .pcard-title { font-size: 17px; font-weight: 600; color: var(--text-primary); margin: 0; }
body.logged-in .pcard-sub { font-size: 13px; color: var(--text-secondary); margin: 6px 0 0; }
body.logged-in .pcard-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: 20px 0 0; opacity: 1; }
body.logged-in .detail-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; font-size: 13px; margin: 20px 0 0; }
body.logged-in .detail-grid dt { color: var(--text-tertiary); font-weight: 400; font-size: 13px; }
body.logged-in .detail-grid dd { margin: 0; color: var(--text-primary); font-weight: var(--weight-normal); font-size: 13px; }
body.logged-in .detail-grid dd.muted { color: var(--text-muted); font-weight: 400; }
body.logged-in .pcard-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-top: 20px; }
body.logged-in .pcard-row h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
body.logged-in .pcard-row p { font-size: 13px; color: var(--text-secondary); margin: 0; max-width: 480px; }
body.logged-in .profile-cards .detail-grid dd {font-weight: var(--weight-medium); }
/* Toggle switch (44x26, brand when on) */
body.logged-in .switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; display: inline-block; margin: 0; cursor: pointer; }
body.logged-in .switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
body.logged-in .switch .track { position: absolute; inset: 0; background: var(--ink-200); border-radius: 999px; transition: background var(--dur-fast) var(--ease-out); }
body.logged-in .switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transition: transform var(--dur-fast) var(--ease-out);
}
body.logged-in .switch input:checked + .track { background: var(--brand); }
body.logged-in .switch input:checked + .track::after { transform: translateX(18px); }
body.logged-in .switch input:disabled { cursor: not-allowed; }
body.logged-in .switch input:disabled + .track { opacity: 0.55; }

/* Connected accounts row */
body.logged-in .gacct-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
body.logged-in .gacct-icon {
  width: 40px; height: 40px; border: 1px solid var(--border-subtle); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0;
}
body.logged-in .gacct-name { font-size: 14px; font-weight: var(--weight-medium); color: var(--text-primary); }
body.logged-in .gacct-state { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
body.logged-in .gacct-action { margin-left: auto; }
body.logged-in .gacct-action form { margin: 0; }
body.logged-in .gacct-danger { color: var(--danger-700); }
body.logged-in .gacct-danger:hover { background: var(--danger-50); }
body.logged-in .gacct-hint { font-size: 12px; color: var(--text-muted); }

/* Modal forms + ghost button */
body.logged-in .btn-ghost {
  background: #fff; border: 1px solid var(--border-default); color: var(--text-primary);
  border-radius: var(--r-md); font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 8px 14px;
  transition: background var(--dur-fast) var(--ease-out);
}
body.logged-in .btn-ghost:hover { background: var(--ink-50); }
body.logged-in .modal .form-label { font-size: 13px; font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 5px; }
body.logged-in .units-options { display: flex; gap: 20px; }
body.logged-in .units-options label { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-primary); margin: 0; cursor: pointer; }
body.logged-in .twofa-qr { display: flex; justify-content: center; margin-bottom: 12px; }
body.logged-in .twofa-qr svg { width: 168px; height: 168px; }
body.logged-in .twofa-secret { text-align: center; margin-bottom: 4px; }
body.logged-in .twofa-secret code { font-size: 12px; color: var(--text-secondary); background: var(--ink-50); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: 3px 8px; word-break: break-all; }
body.logged-in .recovery-codes {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; padding: 14px 16px;
  background: var(--ink-50); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--text-primary);
}

/* ============================================================
   Billing page — plan / payment / details cards + invoice table
   ============================================================ */
body.logged-in .billing-alert { margin-bottom: var(--s-4); }
body.logged-in .billing-stack { display: flex; flex-direction: column; gap: 28px; }
body.logged-in .billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 1000px) { body.logged-in .billing-grid { grid-template-columns: 1fr; } }

/* Billing cards run tighter than profile ones: 15px titles, 24px padding,
   and the simple cards (Payment method / Billing details) have NO header divider */
body.manage-billing .pcard { padding: 24px; }
body.manage-billing .pcard-title { font-size: 15px; }
body.manage-billing .detail-grid { margin-top: 16px; }

/* Flush card: header band + full-bleed rows (Your plan, Upcoming/Tax invoices) */
body.logged-in .bcard-flush { padding: 0; overflow: hidden; }
body.logged-in .bcard-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 14px 20px; background: var(--ink-25); border-bottom: 1px solid var(--border-subtle);
}
body.logged-in .bcard-band .pcard-sub { margin: 0; }
body.logged-in .bcard-band-plain { background: var(--surface-card); padding: 16px 20px; }
body.logged-in .bcard-count { font-size: 12px; color: var(--text-tertiary); }
body.logged-in .bcard-foot { padding: 16px 20px 20px; }
body.logged-in .plan-rows + .bcard-foot, body.logged-in .invoices-table + .bcard-foot { border-top: 1px solid var(--border-subtle); }
body.logged-in .bcard-empty { padding: 16px 20px 20px; margin: 0; }

body.logged-in .plan-rows { margin: 0; }
body.logged-in .plan-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 14px 20px; border-bottom: 1px solid var(--border-subtle);
}
body.logged-in .plan-row-label { font-size: 14px; color: var(--text-secondary); }
body.logged-in .plan-row-label .plan-x { color: var(--text-muted); }
body.logged-in .plan-row-amount { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
body.logged-in .plan-row-total { border-bottom: none; }
body.logged-in .plan-row-total .plan-row-label, body.logged-in .plan-row-total .plan-row-amount { font-weight: 600; color: var(--text-primary); }
body.logged-in .plan-renew { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; }
body.logged-in .plan-actions { display: flex; gap: 10px; }
body.logged-in .plan-actions .btn-manage-sub { padding: 7px 14px; font-size: 13px; font-weight: var(--weight-semibold); }

body.logged-in .pm-box {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  background: var(--ink-25); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 14px 16px;
}
body.logged-in .pm-brand {
  background: #1f2a55; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; border-radius: 5px; padding: 7px 9px; line-height: 1; flex-shrink: 0;
}
body.logged-in .pm-last4 { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.06em; }
body.logged-in .pm-exp { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
body.logged-in .pm-state { margin-left: auto; }
body.logged-in .pm-update-form { margin-top: 18px; border-top: 1px solid var(--border-subtle); padding-top: 18px; }
/* style.css gives #payment-element a 25px grey panel + 24px bottom margin and turns
   #pay-button into a 214px-wide pill (`.main-area #payment-form #pay-button`). Both
   selectors carry two ids, so these overrides must too. Result: the card form sits
   tight under the fields and the submit matches .btn-manage-sub above it. */
body.logged-in .pm-update-form #payment-form #payment-element {
  background: transparent; padding: 0; margin-bottom: 0; border-radius: 0;
}
body.logged-in .pm-update-form #payment-form #payment-message {
  padding-top: 8px; text-align: left; font-size: 13px; color: var(--text-secondary);
}
/* Both submits on this page still land on legacy shapes: style.css pill-lists
   `.main-area #payment-form #pay-button` with `border-radius: 100px !important` (hence the
   !important here), and `.main-area .billinginfo .btn` restyles the billing-details modal's
   submit as the old 214px 16px/30px pill. The page's own primary is .btn-manage-sub;
   these two match it. */
body.logged-in .pm-update-form #payment-form #pay-button,
body.logged-in .modal .billinginfo .modal-footer .btn-primary {
  min-width: 0; padding: 7px 14px;
  border-radius: var(--r-md) !important; -webkit-border-radius: var(--r-md) !important;
  font: var(--weight-semibold) 13px/1.5 var(--font-sans);
  background: var(--brand); border-color: var(--brand); color: var(--text-on-brand);
  box-shadow: var(--shadow-xs);
}
body.logged-in .pm-update-form #payment-form #pay-button { margin-top: 12px; }
body.logged-in .modal .billinginfo .modal-footer .btn-primary { margin-top: 0; }
body.logged-in .pm-update-form #payment-form #pay-button:hover:not(:disabled),
body.logged-in .modal .billinginfo .modal-footer .btn-primary:hover {
  background: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-on-brand);
}
body.logged-in .pm-update-form #payment-form #pay-button:disabled { opacity: 0.55; }

body.logged-in .state-pill.state-unpaid { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-100); }
body.logged-in .state-pill.state-unpaid .state-dot { background: var(--danger-500); }
body.logged-in .state-pill.state-warning { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); }
body.logged-in .state-pill.state-warning .state-dot { background: var(--warning-500); }

/* Invoices table fills the flush card edge-to-edge; tinted uppercase header row */
body.logged-in .pcard-table .invoices-table { margin: 0; border: 0; border-radius: 0; overflow: visible; }
body.logged-in .invoices-table .table { margin: 0; }
body.logged-in .invoices-table .table thead th {
  background: var(--ink-50); color: var(--text-tertiary); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em; padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
body.logged-in .invoices-table .table tbody td { vertical-align: middle; height: auto; padding: 14px 16px; }
body.logged-in .invoices-table .table tbody tr:last-child td { border-bottom: 0; }
body.logged-in .bcard-foot-table { padding: 12px 20px; }
body.logged-in .bcard-foot-table nav { margin: 0; }
body.logged-in .invoices-table .inv-number { font-size: 13px; color: var(--text-tertiary); }
body.logged-in .invoices-table .inv-date { font-size: 13px; color: var(--text-primary); }
body.logged-in .invoices-table .inv-amount { font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
body.logged-in .invoices-table .inv-actions { text-align: right; white-space: nowrap; }
body.logged-in .invoices-table .table th:last-child { width: 110px; text-align: right; }

/* Manage-subscription modal bits */
body.logged-in .sub-actions { display: flex; flex-direction: column; gap: 10px; }
body.logged-in .sub-actions .btn, body.logged-in .sub-actions .btn-ghost { text-align: center; display: block; }
body.logged-in .sub-cancel-row { margin-top: 16px; text-align: center; }
/* beat legacy red-pill styling on .open-cancel-subscription */
body.logged-in .main-area .sub-cancel-row .open-cancel-subscription,
body.logged-in .sub-cancel-row .open-cancel-subscription {
  display: inline; min-width: 0; padding: 0; margin: 0; background: none; border: none; box-shadow: none;
  font: inherit; font-size: 13px; line-height: 1.4; color: var(--danger-700); text-decoration: underline;
}
body.logged-in .sub-cancel-row .open-cancel-subscription:hover { color: var(--danger-600); background: none; }
body.logged-in .sub-h { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px; }
body.logged-in .sub-danger { color: var(--danger-700); }

/* ============================================================
   Support page — Open/Closed segmented tabs + ticket cards
   ============================================================ */
body.logged-in .support-alert { margin-bottom: var(--s-4); }
body.logged-in .support-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: 18px; }
body.logged-in .seg-tabs {
  display: flex; gap: 4px; background: var(--ink-50); border: 1px solid var(--border-subtle);
  border-radius: var(--r-full); padding: 3px;
}
body.logged-in .seg-tab {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; border: none; border-radius: var(--r-full);
  font-size: 13px; font-weight: 600; background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
body.logged-in .seg-tab.active { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs); }
body.logged-in .seg-count {
  font-size: 11.5px; font-weight: 600; min-width: 18px; text-align: center; padding: 1px 6px;
  border-radius: var(--r-full); background: var(--ink-100); color: var(--ink-600);
}
body.logged-in .seg-tab.active .seg-count-open { background: var(--moddy-100); color: var(--moddy-700); }
body.logged-in .btn-new-ticket { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; font-weight: var(--weight-medium); border-radius: var(--r-sm); }

body.logged-in .ticket-list { display: flex; flex-direction: column; gap: 8px; }
body.logged-in .ticket-card {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  padding: 12px 16px; box-shadow: var(--shadow-xs); color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
body.logged-in .ticket-card:hover { border-color: var(--moddy-300); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
body.logged-in .ticket-card.has-update { border-color: var(--moddy-300); }
body.logged-in .ticket-icon {
  width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0; margin-top: 3px;
  display: flex; align-items: center; justify-content: center;
}
body.logged-in .ticket-icon-problem { background: var(--danger-50); color: var(--danger-600); }
body.logged-in .ticket-icon-suggestion { background: var(--moddy-50); color: var(--moddy-600); }
body.logged-in .ticket-icon-question { background: var(--moddy-50); color: var(--moddy-600); }
body.logged-in .ticket-icon-billing { background: var(--warning-50); color: var(--warning-700); }
body.logged-in .ticket-main { flex: 1; min-width: 0; }
body.logged-in .ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.logged-in .ticket-title { font-size: 14px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.logged-in .ticket-num { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }
body.logged-in .ticket-preview { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.logged-in .ticket-author { font-weight: 600; color: var(--ink-600); }
body.logged-in .ticket-author.is-staff { color: var(--moddy-700); }
body.logged-in .ticket-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
body.logged-in .ticket-replies { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary); }
body.logged-in .ticket-updated { font-size: 12px; color: var(--text-tertiary); }
body.logged-in .ticket-empty {
  background: var(--surface-card); border: 1px dashed var(--border-default); border-radius: var(--r-xl);
  padding: 36px 24px; text-align: center; font-size: 14px; color: var(--text-tertiary);
}

/* Projects page — global empty state (no projects at all) */
body.logged-in .empty-projects-state {
  background: var(--surface-card); border: 1px dashed var(--border-default); border-radius: var(--r-xl);
  padding: 56px 24px; text-align: center;
}
body.logged-in .empty-projects-state .eps-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--moddy-50); color: var(--moddy-600);
  display: flex; align-items: center; justify-content: center;
}
body.logged-in .empty-projects-state h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
body.logged-in .empty-projects-state p { font-size: 14px; color: var(--text-tertiary); margin: 0 0 18px; }

/* Ticket thread */
body.logged-in .ticket-thread { max-width: 800px; display: flex; flex-direction: column; gap: 14px; }
body.logged-in .ticket-msg {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  padding: 16px 18px; box-shadow: var(--shadow-xs);
}
body.logged-in .ticket-msg.is-staff { background: var(--moddy-50); border-color: var(--moddy-100); }
body.logged-in .ticket-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
body.logged-in .ticket-msg-author { font-size: 13px; font-weight: 600; color: var(--text-primary); }
body.logged-in .ticket-msg-author.is-staff { color: var(--moddy-700); }
body.logged-in .ticket-msg-time { font-size: 12px; color: var(--text-tertiary); }
body.logged-in .ticket-msg-body { font-size: 14px; color: var(--text-primary); line-height: 1.55; }
body.logged-in .ticket-reply-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  padding: 16px 18px; box-shadow: var(--shadow-xs);
}
body.logged-in .ticket-reply-actions { margin-top: 12px; text-align: right; }
body.logged-in .page-head-actions form { margin: 0; }

/* The two big "Create project" cards. The legacy :before icon sits absolutely
   at left:21px (54px wide), so keep ~90px left padding to clear it. */
body.logged-in .button-create { display: flex; gap: var(--s-4); margin: var(--s-5) 0 var(--s-6); flex-wrap: wrap; padding-bottom: 0; overflow: visible; }
body.logged-in .button-create .btn,
body.logged-in .button-create .blue,
body.logged-in .button-create .white {
  flex: 1; min-width: 260px; float: none !important; margin: 0 !important;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  padding: 18px 22px 18px 90px; border-radius: var(--r-xl); text-align: left; box-shadow: var(--shadow-sm);
  min-height: 78px;
}
body.logged-in .button-create .btn strong { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: 1.2; }
body.logged-in .button-create .btn p { margin: 0; font-size: var(--text-sm); opacity: .9; font-weight: 400; }
body.logged-in .button-create .white:before,
body.logged-in .button-create .blue:before { left: 24px; width: 46px; height: 46px; margin-top: -23px; }
body.logged-in .button-create .btn.white { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); }
body.logged-in .button-create .btn.white:hover { border-color: var(--brand); }
body.logged-in .button-create .btn.blue { background: var(--brand); color: #fff; border-color: var(--brand); }
body.logged-in .button-create .btn.blue:hover { background: var(--brand-hover); }

/* Tabs (pages that still use the legacy tab bar) */
body.logged-in .tabs-row ul { display: flex; gap: var(--s-1); list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-4); border-bottom: 1px solid var(--border-subtle); }
body.logged-in .tabs-row li a {
  display: block; padding: 10px 14px; color: var(--text-secondary); font-weight: var(--weight-medium);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
}
body.logged-in .tabs-row li a:hover { color: var(--text-primary); }
body.logged-in .tabs-row li.active a { color: var(--moddy-700); border-bottom-color: var(--moddy-600); }

/* Folder cards (refine the inline-styled ones to tokens) */
/* (legacy folder-card overrides removed — chips are full pills, styled in projects/index) */

/* ============================================================
   10. Templates / Shared pages
   ============================================================ */
body.logged-in .page-body { padding-top: var(--s-2); }
body.logged-in .page-body h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--s-3); color: var(--text-primary); }
body.logged-in .empty-panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); box-shadow: var(--shadow-xs); padding: 48px var(--s-6); text-align: center; }
body.logged-in .empty-panel .empty-state-message { color: var(--text-tertiary); font-size: var(--text-md); margin: 0; }

body.manage-templates .list-head { justify-content: flex-end; }
/* List: [3D pill] Bold name | "Create from template →" right */
body.logged-in .templates-view:not(.grid) .table td.first { width: auto; }
body.logged-in .templates-view:not(.grid) .table td.first .img { display: none !important; }
body.logged-in .templates-view:not(.grid) .table td.first .project-item-name { display: inline; font-weight: 600; color: var(--ink-900); font-size: 14px; margin-left: 10px; }
body.logged-in .templates-view:not(.grid) .table td:last-child { text-align: right; width: 200px; }
body.logged-in .templates-view .tpl-use { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 7px 13px; white-space: nowrap; }
body.logged-in .templates-view .tpl-arrow { font-size: 15px; line-height: 1; }
/* The pill lives twice in the markup: inline for list view, overlay for grid view */
body.logged-in .templates-view .tpl-pill-overlay { display: none; }
body.logged-in .templates-view.grid td.first .img { position: relative; }
body.logged-in .templates-view.grid .tpl-pill-overlay { display: inline-flex; position: absolute; top: 10px; left: 10px; z-index: 2; }
body.logged-in .templates-view.grid .tpl-pill-inline { display: none; }

/* Grid: thumbnail card with name + full-width "Create from template" button */
body.manage-templates .projects-table.grid table { display: block; width: 100%; }
body.manage-templates .projects-table.grid thead { display: none; }
body.manage-templates .projects-table.grid tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); justify-content: start; }
body.manage-templates .projects-table.grid tbody tr { width: auto !important; float: none !important; margin: 0 !important; }
body.manage-templates .projects-table.grid .table-area { border: none; background: transparent; box-shadow: none; overflow: visible; }
body.manage-templates .projects-table.grid tbody tr td .project-item-name { padding: 12px 14px 10px; display: block; }
body.manage-templates .projects-table.grid tbody tr td.dots { position: static; float: none; margin: 0 !important; padding: 0 14px 14px; width: auto; text-align: left; }
body.manage-templates .projects-table.grid .tpl-use { display: flex; width: 100%; justify-content: center; }

/* ============================================================
   10b. Video Tutorials (redesign July 2026) — progress banner,
   Cards/Table toggle, difficulty sections, category chips.
   Values measured from design/video cards *.html
   ============================================================ */
body.manage-tutorials .vt-progress {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: linear-gradient(135deg, var(--moddy-50), var(--moddy-100));
  border: 1px solid var(--moddy-100); border-radius: var(--r-xl); box-shadow: var(--shadow-xs);
  padding: 24px; margin-bottom: var(--s-6);
}
body.manage-tutorials .vt-kicker { font-size: 13px; font-weight: 600; color: var(--moddy-700); text-transform: uppercase; letter-spacing: 0.04em; }
body.manage-tutorials .vt-progress-title { margin: 4px 0 0; font-size: 22px; font-weight: 600; color: var(--moddy-900); }
body.manage-tutorials .vt-progress-sub { margin: 6px 0 0; color: var(--moddy-800); font-size: 14px; }
body.manage-tutorials .vt-ring { width: 96px; height: 96px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.manage-tutorials .vt-ring svg { position: absolute; transform: rotate(-90deg); }
body.manage-tutorials .vt-ring-label { font-size: 20px; font-weight: 700; color: var(--moddy-800); }

body.manage-tutorials .vt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
body.manage-tutorials .vt-toolbar-left, body.manage-tutorials .vt-toolbar-right { display: flex; align-items: center; gap: var(--s-3); }
body.manage-tutorials .vt-count, body.manage-tutorials .vt-shown { font-size: 13px; color: var(--ink-500); }
body.manage-tutorials .vt-filters { display: flex; gap: var(--s-2); }
body.manage-tutorials .vt-filters[hidden] { display: none; }
body.manage-tutorials .vt-toggle { display: inline-flex; padding: 3px; background: var(--ink-50); border: 1px solid var(--border-subtle); border-radius: var(--r-md); gap: 2px; }
body.manage-tutorials .vt-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent;
  color: var(--text-secondary); padding: 5px 12px; font-size: 12px; font-weight: 600;
  border-radius: var(--r-sm); cursor: pointer; box-shadow: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
body.manage-tutorials .vt-toggle-btn.active { background: #fff; color: var(--text-primary); box-shadow: var(--shadow-xs); }

body.manage-tutorials .vt-section { margin-bottom: var(--s-7); }
body.manage-tutorials .vt-section-title { margin: 0 0 16px; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
body.manage-tutorials .vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
body.manage-tutorials .vt-card {
  display: flex;flex-wrap: wrap;align-content: flex-start; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs); transition: box-shadow var(--dur-fast) var(--ease-out);
}
body.manage-tutorials .vt-card:hover { box-shadow: var(--shadow-md); }
body.manage-tutorials .vt-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-100); }
body.manage-tutorials .vt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.manage-tutorials .vt-card-body { display: block; padding: 12px 14px; }
body.manage-tutorials .vt-card-meta { display: flex; align-items: center; gap: 8px; }
body.manage-tutorials .vt-card-meta .vt-check { margin-left: auto; color: var(--success-600); font-size: 15px; line-height: 1; display: none; }
body.manage-tutorials .vt-card[data-completed="true"] .vt-check { display: inline-flex; }
body.manage-tutorials .vt-card-title { display: block; font-size: 14px; font-weight: 600; margin-top: 8px; color: var(--text-primary); }

/* Difficulty pills — plain in cards, with a dot in the table */
body.logged-in .diff-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 600;
}
body.logged-in .diff-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
body.logged-in .diff-pill.diff-easy { background: var(--success-50); color: var(--success-700); }
body.logged-in .diff-pill.diff-easy .pill-dot { background: var(--success-600); }
body.logged-in .diff-pill.diff-medium { background: #FFF5E8; color: #C4500B; }
body.logged-in .diff-pill.diff-medium .pill-dot { background: #DC6803; }
body.logged-in .diff-pill.diff-advanced { background: var(--ink-100); color: var(--ink-600); }
body.logged-in .diff-pill.diff-advanced .pill-dot { background: var(--ink-400); }

/* Category chips */
body.logged-in .cat-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; border: 1px solid transparent;
}
body.logged-in .cat-chip.cat-controls { background: var(--ink-100); color: var(--ink-600); border-color: var(--ink-200); }
body.logged-in .cat-chip.cat-bathroom { background: var(--moddy-50); color: var(--moddy-700); border-color: var(--moddy-100); }
body.logged-in .cat-chip.cat-ramp { background: #FFF5E8; color: #C4500B; border-color: #FDE6CF; }
body.logged-in .cat-chip.cat-stairs { background: #EDE9FE; color: #5B21B6; border-color: #DDD6FE; }
body.logged-in .cat-chip.cat-rails { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }

/* Table view */
body.manage-tutorials .vt-table[hidden] { display: none; }
body.manage-tutorials .vt-table .vt-row { cursor: pointer; }
body.manage-tutorials .vt-title-cell { display: flex; align-items: center; gap: 12px; }
body.manage-tutorials .vt-play {
  width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--moddy-50); color: var(--moddy-600);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px;
}
body.manage-tutorials .vt-name { font-weight: 500; color: var(--ink-900); }
body.manage-tutorials .vt-completed-label { display: none; color: var(--success-600); align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
body.manage-tutorials .vt-row[data-completed="true"] .vt-completed-label { display: inline-flex; }
body.manage-tutorials .vt-actions { text-align: right; }
body.manage-tutorials .vt-watch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap; }
body.manage-tutorials .vt-table .table td:nth-child(2), body.manage-tutorials .vt-table .table th:nth-child(2) { width: 15%; }
body.manage-tutorials .vt-table .table td:nth-child(3), body.manage-tutorials .vt-table .table th:nth-child(3) { width: 15%; }
body.manage-tutorials .vt-table .table th:last-child { width: 110px; }

/* ============================================================
   11. Modals (Bootstrap markup, new skin)
   ============================================================ */
body .modal-content { border: 1px solid var(--border-subtle); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
body .modal-header { border-bottom: 1px solid var(--border-subtle); padding: var(--s-5) var(--s-6) var(--s-4); align-items: flex-start; }
body .modal-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: -0.01em; }
/* Children (e.g. the quoted project name span in Rename) must not shrink to the
   blanket 14px span size — keep the whole title one size */
body.logged-in .modal-title :where(span, strong, em) { font-size: inherit; font-weight: inherit; }
body.logged-in .modal-desc, body .modal-desc { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
body .modal-desc strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
/* Ghost close X, top-right of the header */
body .modal-x { flex-shrink: 0; margin-left: var(--s-2); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--r-sm); color: var(--text-tertiary); cursor: pointer; padding: 0; }
body .modal-x:hover { background: var(--ink-50); color: var(--text-primary); }
body .modal-body { padding: var(--s-5) var(--s-6); }
body .modal-footer { border-top: 1px solid var(--border-subtle); padding: 14px var(--s-6); gap: var(--s-2); background: var(--ink-25); }
/* Required-field star on modal form labels */
body .modal .form-label .req { color: var(--danger-600); margin-left: 2px; }
body .modal .btn:disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================
   12a. Two-column auth (login) — form left, photo + quote right
   ============================================================ */
body.auth-page { background: #fff; }
body.auth-page nav, body.auth-page .header, body.auth-page footer, body.auth-page .footer { display: none !important; }
body.auth-page .min-h-screen { min-height: 0; }
body.auth-page .main-area { display: block; padding: 0; min-height: 100vh; margin: 0; background: transparent; }

.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-form-col { display: flex; align-items: center; justify-content: center; padding: 40px 32px; position: relative; }
.auth-form-inner { width: 100%; max-width: 380px; }
/* Logo pinned to the page corner per prototype (form stays vertically centered) */
.auth-logo { position: absolute; top: 40px; left: 40px; }
.auth-logo img { height: 32px; display: block; }
.auth-title { font-size: 26px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin: 0 0 24px; color: var(--text-primary); }
.auth-status { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-100); border-radius: var(--r-md); padding: 10px 12px; font-size: var(--text-sm); margin-bottom: var(--s-4); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-tertiary); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

.auth-visual-col {
  background: linear-gradient(160deg, rgb(247, 249, 255) 0%, rgb(237, 243, 255) 55%, rgb(225, 234, 255) 100%);border-left: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 48px;
}
.auth-photo-wrap { max-width: 518px; width: 100%; }
.auth-photo-wrap img { width: 100%; height: auto; border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); display: block; }
.auth-quote { max-width: 518px; width: 100%; margin: 0; }
.auth-quote > p {    font-size: 16px;line-height: 1.55; color: var(--ink-800); font-weight: 500; letter-spacing: -0.01em;margin: 0 0 14px; }
.auth-quote-author { display: flex; align-items: center; gap: 10px;line-height: 1; }
.auth-quote-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.auth-quote-author strong { display: block; color: var(--brand); font-size: 13px; font-weight: var(--weight-semibold);line-height: 1.2; }
.auth-quote-author span { color: var(--text-tertiary); font-size: 12px; }

/* Validation errors — soft danger card (replaces legacy red-border box) */
body.auth-page .validation_errors,
body.logged-in .validation_errors {
  background: var(--danger-50); border: 1px solid var(--danger-100); border-radius: var(--r-md);
  padding: 12px 14px; margin: 0 0 18px; color: var(--danger-700);
}
body.auth-page .validation_errors > div,
body.logged-in .validation_errors > div { font-size: 13px; font-weight: var(--weight-semibold); color: var(--danger-700); margin: 0 0 4px; }
body.auth-page .validation_errors ul,
body.logged-in .validation_errors ul { margin: 0; padding: 0 0 0 18px; font-size: 13px; color: var(--danger-700); }
body.auth-page .validation_errors li,
body.logged-in .validation_errors li { margin: 0; }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-visual-col { display: none; }
  .auth-form-inner { max-width: 400px; }
  /* Logo back in flow above the title on small screens */
  .auth-logo {top: 32px; left: 32px;}
  .auth-form-col {padding-top: 100px;}
  /* 16px inputs stop iOS Safari from zooming the viewport on focus
     (.auth-split raises specificity above the base 14px rule further down) */
  body.logged-out .auth-split .loginform input.form-control,
  body.auth-page .auth-split input.form-control,
  body.auth-page .newregistration #payment-form.register-form #step-1 input.form-control { font-size: 16px; }
}

/* ============================================================
   12b. Guest pages — clean centered card (register/forgot)
   ============================================================ */
body.logged-out { background: var(--surface-app); font-family: var(--font-sans); color: var(--text-primary); }
body.logged-out .row.justify-content-md-center { margin: 0; }
body.logged-out .col-5 {
  flex: none; max-width: 460px; width: 100%; margin: 56px auto; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--r-2xl); padding: var(--s-8) var(--s-8) var(--s-7);
  box-shadow: var(--shadow-md);
}
body.logged-out .col-5 > p { color: var(--text-tertiary); font-size: var(--text-sm); margin: var(--s-3) 0 var(--s-5); text-align: center; }
body.logged-out .loginform input.form-control {
  background: #fff; padding: 10px 12px; border: 1px solid var(--ink-300); border-radius: var(--r-md);
  box-shadow: none; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-primary);
}
body.logged-out .loginform input.form-control:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(47, 99, 250, 0.15); background: #fff; }
body.logged-out .form-label { display: block; font-weight: var(--weight-medium); font-size: 13px; margin-bottom: 6px; color: var(--text-primary); }
body.logged-out .loginform button[type="submit"],
body.logged-out form button[type="submit"]:not(.btn) {
  width: 100%; margin-top: var(--s-5); padding: 12px 18px; border: none;
  /* !important beats legacy style.css `border-radius: 100px !important` pill */
  border-radius: 10px !important;
  background: var(--brand); color: #fff; font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: 15px; line-height: 1.2; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
body.logged-out .loginform button[type="submit"]:hover,
body.logged-out form button[type="submit"]:not(.btn):hover { background: var(--brand-hover); box-shadow: none; }
body.logged-out .remember-forgot-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-3); font-size: 13px; }
body.logged-out .remember-forgot-row .form-check-label,
body.logged-out .remember-forgot-row label { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); }
body.logged-out .forgot { color: var(--brand); font-size: 13px; }
body.logged-out .google-signin-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%;
  padding: 12px 18px; border: 1px solid var(--border-default); border-radius: 10px;
  background: #fff; color: var(--text-primary); font-weight: var(--weight-medium); font-size: 15px; line-height: 1.2;
}
body.logged-out .google-signin-btn:hover { background: var(--ink-50); text-decoration: none; color: var(--text-primary); }
body.logged-out .signup-prompt { text-align: center; margin-top: var(--s-5); color: var(--text-secondary); font-size: 13px; }
body.logged-out .signup-prompt a { color: var(--brand); font-weight: var(--weight-medium); }

/* Centered notice card (student trial ended etc.) on the auth shell */
body.auth-page .notice-card {
  max-width: 440px; margin: 96px auto 0; padding: 40px 36px; text-align: center;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md);
}
body.auth-page .notice-logo { height: 32px; margin: 0 auto 22px; display: block; }
body.auth-page .notice-card h1 { font-size: 22px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 14px; }
body.auth-page .notice-card p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 12px; }
body.auth-page .notice-card .auth-submit-btn { margin-top: var(--s-4); border-radius: 10px; }
body.auth-page .notice-logout { margin-top: 16px; }
body.auth-page .notice-logout button {
  background: none; border: none; padding: 0; font-size: 13px; color: var(--text-tertiary);
  text-decoration: underline; cursor: pointer;
}
body.auth-page .notice-logout button:hover { color: var(--text-secondary); }
/* Forms inside notice cards (confirm-password gate is shown while logged in,
   so the body.logged-out form styling doesn't reach it) */
body.auth-page .notice-card .form-label { display: block; text-align: left; font-size: 13px; font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 6px; }
body.auth-page .notice-card .form-control {
  display: block; width: 100%; padding: 10px 12px; font-size: 16px; line-height: 1.5;
  color: var(--text-primary); background: #fff; border: 1px solid var(--ink-300); border-radius: var(--r-md); box-shadow: none;
}
body.auth-page .notice-card .form-control:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(47, 99, 250, 0.15); }
body.auth-page .notice-card .auth-submit-btn { border: none; cursor: pointer; border-radius: 10px; }

/* ============================================================
   12c. Register page — step 1 restyled to auth-split; step 2
   (Stripe payment) keeps its legacy layout. Overrides below
   neutralize legacy .newregistration rules on the auth shell.
   ============================================================ */
.auth-back { display: inline-block; font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--s-3); }
.auth-back:hover { color: var(--text-primary); text-decoration: none; }
.auth-sub { color: var(--text-secondary); font-size: var(--text-sm); margin: -16px 0 24px; }

.auth-name-row { display: flex; gap: 12px; }
.auth-name-row > div { flex: 1; min-width: 0; }

.auth-submit-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: var(--s-5); padding: 11px 16px; border: none; border-radius: var(--r-md);
  background: var(--brand); color: #fff; font-weight: var(--weight-semibold); font-size: var(--text-base); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.auth-submit-btn:hover { background: var(--brand-hover); color: #fff; text-decoration: none; }

/* Neutralize legacy register wrapper on the redesigned step 1 */
body.auth-page .newregistration { margin: 0; padding: 0; max-width: none; width: auto; }
body.auth-page .newregistration #payment-form.register-form { margin-top: 0; }
body.auth-page .newregistration #payment-form.register-form #step-1 {
  display: block; max-width: none; margin: 0; padding: 0; border: none; border-radius: 0; text-align: left; background: transparent;
}
body.auth-page .newregistration #payment-form.register-form #step-1 label { font-size: var(--text-sm); font-weight: var(--weight-medium); margin: 0 0 5px; color: var(--text-secondary); }
body.auth-page .newregistration #payment-form.register-form #step-1 input.form-control {
  display: block; width: 100%; margin: 0; padding: 10px 12px; font-size: var(--text-base); line-height: 1.5;
  color: var(--text-primary); background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md);
}
body.auth-page .newregistration #payment-form.register-form #step-1 input.form-control:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(47, 99, 250, 0.15); }
body.auth-page .newregistration #payment-form.register-form #step-1 input.form-control::placeholder { color: var(--text-muted); }
body.auth-page .newregistration #payment-form.register-form #step-1 .invalid-feedback { text-align: left; font-size: var(--text-xs); margin-top: 4px; }

/* Step 2 (payment): center it and give it breathing room without the legacy negative margins */
body.auth-page .newregistration #payment-form.register-form #step-2 { padding: 40px 32px; }

/* ============================================================
   13. Mobile (matches legacy 980px drawer breakpoint) — normalize
   the slide-in menu and header that legacy CSS oversizes
   ============================================================ */
@media only screen and (max-width: 980px) {
  /* Slide-in drawer: cap width, tidy padding */
  body.logged-in .main-area .sidebar { width: min(320px, 85%); padding: 20px 16px 24px 0; box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18); }
  /* Menu items: 15px (legacy forces 16px !important), consistent rhythm */
  body.logged-in .sidebar .menu li a { font-size: 15px !important; padding: 10px 12px 10px 24px; }
  body.logged-in .sidebar .menu li a svg { width: 18px; height: 18px; }
  /* Drawer logo row */
  body.logged-in .sidebar .mobile { margin: 0 0 18px; padding-left: 24px; }
  body.logged-in .sidebar .mobile .l img { height: 30px; width: auto; }
  /* Top bar logo: legacy forces 203px !important */
  body.logged-in .header .justify-between > .flex:first-child .shrink-0:first-child a { width: 150px !important; }

  /* Content gutters: legacy gives .main-area 24px + .cont 32px = 56px of
     side padding, and the page-head only cancels 32 of it (inset white box).
     Collapse to a single 14px gutter on .cont so the head can go full-bleed. */
  body.logged-in .main-area { padding-left: 0; padding-right: 0; padding-top: 0; }
  body.logged-in .cont { padding: 14px; }
  body.logged-in .page-head { margin: -14px -14px 18px; padding: 16px 14px; }

  /* Page head: keep title/subtitle scale, stack actions full-width */
  body.logged-in .page-head-actions { width: 100%; }
  body.logged-in .page-head-actions .btn-create-top { flex: 1; justify-content: center; text-align: center; }

  /* List-view tables scroll sideways instead of overflowing the page */
  body.logged-in .projects-table:not(.grid) .table-area { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.logged-in .pcard-table .invoices-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Templates list: stack name + CTA vertically so the Create button
     stays on screen instead of hiding in the horizontal scroll */
  body.logged-in .templates-view .table thead { display: none; }
  body.logged-in .templates-view .table, body.logged-in .templates-view .table tbody { display: block; width: 100%; }
  body.logged-in .templates-view .table tbody tr {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 14px; border-bottom: 1px solid var(--border-subtle);
  }
  body.logged-in .templates-view .table tbody td { display: block; padding: 0; border: none; width: 100%; }
  body.logged-in .templates-view .table tbody td.dots { text-align: left; }

  /* Cards: tighter padding + spacing on small screens */
  body.logged-in .pcard { padding: 20px 16px; }
  body.logged-in .billing-grid, body.logged-in .billing-stack,
  body.logged-in .profile-cards { gap: 16px; }
  body.logged-in .btn-rev { white-space: nowrap; }
  body.logged-in .vt-progress { padding: 20px 16px; }
}
.modal-backdrop.show {
  opacity: 1;
}
.modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
/* ============================================================
   Support ticket — thread beside the staff context panel
   ============================================================ */
body.logged-in .ticket-layout { display: flex; align-items: flex-start; gap: var(--s-6); }
/* min-width:0 is load-bearing: without it a long unbroken token in a customer's
   message (a URL, a stack frame) blows the flex item past the panel. */
body.logged-in .ticket-layout > .ticket-thread { flex: 1 1 auto; min-width: 0; }

body.logged-in .ticket-context {
  flex: 0 0 300px; width: 300px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--s-5);
  position: sticky; top: var(--s-5);
  font-size: var(--text-sm);
}
body.logged-in .ticket-context-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-4); }
body.logged-in .ticket-context-head h2 { font-size: 14px; font-weight: 600; margin: 0; color: var(--text-primary); }
body.logged-in .ticket-context-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--r-full); padding: 2px 8px; white-space: nowrap; }
body.logged-in .ticket-context-list { margin: 0; display: grid; gap: var(--s-3); }
body.logged-in .ticket-context-list dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: 2px; }
body.logged-in .ticket-context-list dd { margin: 0; color: var(--text-primary); line-height: 1.5; overflow-wrap: anywhere; }
body.logged-in .ticket-context-muted { color: var(--text-tertiary); font-size: 12px; }
body.logged-in .ticket-context-section { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border-subtle); }
body.logged-in .ticket-context-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin: 0 0 var(--s-3); }
body.logged-in .ticket-context-row { display: flex; justify-content: space-between; gap: var(--s-2); padding: 3px 0; color: var(--text-primary); }
body.logged-in .ticket-context-error { margin-bottom: var(--s-3); }
body.logged-in .ticket-context-error code { display: block; font-size: 11px; color: var(--danger-700); overflow-wrap: anywhere; margin-bottom: 2px; }
body.logged-in .ticket-context-link { display: inline-block; margin-top: var(--s-5); font-size: 12px; color: var(--text-link); }

/* Stack before the panel starts squeezing the thread. */
@media (max-width: 1200px) {
  body.logged-in .ticket-layout { display: block; }
  body.logged-in .ticket-context { width: auto; max-width: 800px; margin-top: var(--s-6); position: static; }
}

/* ============================================================
   Top band alignment + stable scrollbar gutter
   ============================================================ */

/* The sidebar already draws a full-width rule at the top of .menu, which sits at
   y=86 (sidebar padding-top 20 + .sidebar-logo 66). The page header's own
   border-bottom landed at 86.8, because its height was derived from padding plus
   whatever the title/subtitle happened to measure -- so the two rules met in a
   ~1px step at the seam, and a page-head with no subtitle would have been ~20px
   out. Pinning the height makes both land on 86 regardless of content; the
   element is already display:flex/align-items:center, so the content re-centres
   itself. */
@media (min-width: 981px) {
  body.logged-in .page-head {
    height: 86px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Login has a short form and fits in 100vh; register is far taller and scrolls.
   The scrollbar appearing takes ~15px off the viewport, and because .auth-split
   is a 1fr 1fr grid across the full width, both columns shift -- so moving
   between the two pages made the whole layout jump sideways. Reserving the
   gutter permanently keeps the geometry identical whether a page scrolls or not.
   overflow-y:scroll is the pre-scrollbar-gutter fallback and is harmless where
   the modern property is supported. */
html { overflow-y: scroll; scrollbar-gutter: stable; }

/* Register wraps its content in a Bootstrap .row, which carries margin: 0 -12px
   and relies on its .col-* child's 12px padding to cancel it. The auth-page rule
   above zeroes that padding, so the negative margin was left uncompensated: the
   whole .auth-split rendered at left:-12px and 24px wider than the viewport,
   while login (which has no .row) sat at 0. That 12px offset is why moving
   between login and register made the layout jump sideways. */
body.auth-page .row.newregistration-h { margin-left: 0; margin-right: 0; }

/* The sidebar rule is drawn by .sidebar .menu:before, positioned at top:0 of
   .menu (which starts at y=86) with a border-bottom -- so it paints at 86..87.
   .page-head's border-bottom sits inside its 86px border-box, painting at
   85..86. Both elements therefore "end at 86" while their rules are a pixel
   apart, which is the step you see where they meet. Lift the pseudo-element by
   its own border width so the two lines occupy the same pixel row. */
@media (min-width: 981px) {
  body.logged-in .sidebar .menu:before { top: -1px; }
}

/* Between 640px (where Tailwind's sm: turns the inline nav links on) and 980px
   (where nav.header is hidden entirely) the header renders half-built: the logo,
   a stray "Tutorials"/"Dashboard" link, AND the hamburger -- with no gap, so it
   reads as "☰ Tutorials". Everything those links point at is already in the
   slide-out menu, so hide them wherever the hamburger is the navigation. */
@media (max-width: 980px) {
  body.logged-in nav.header .space-x-8,
  body.logged-in nav.header a.tel,
  body.logged-in nav.header span.tel { display: none !important; }
}

/* "Upgrade to create 3D projects" modal (/projects, teams not on a 3D plan).
   style.css sizes this for the old design: a 256px logo and a 28px heading that
   wraps to two lines inside a 500px dialog. Scale both down and give the footer
   buttons the same centred row as the rest of the modal. */
#pleaseUpgradeModal .modal-body .logo { width: 170px; margin: 0 auto 18px; }
#pleaseUpgradeModal .modal-body .logo img { width: 100%; height: auto; display: block; }
#pleaseUpgradeModal .modal-body h2 { font-size: 22px; line-height: 28px; padding: 0; margin: 0 0 10px; }
#pleaseUpgradeModal .modal-body .modal-desc { max-width: 380px; margin: 0 auto; }
#pleaseUpgradeModal .modal-footer { display: flex; justify-content: center; gap: 10px; padding-top: 22px; }

/* The upgrade/downgrade, cancel and feedback overlays are hand-rolled modals, not
   Bootstrap ones, and style.css gives them z-index: 1. They are all opened from links
   *inside* the Bootstrap "Manage subscription" modal, which sits at z-index 1055 over a
   1050 backdrop -- so they opened behind it and looked like nothing had happened.
   Bootstrap's tooltip layer is 1080, so 1065 clears the modal without covering that. */
.upgrade-downgrade-modal,
.cancel-form-modal,
.feedback-form-modal { z-index: 1065; }

/* Close control for the hand-rolled modals. style.css sets a background-image of
   images/close-popup.svg -- which does not exist on any server -- then a later rule
   overrides it with `background: gray`, leaving a bare 24px grey square whose "Close"
   label is pushed off-screen by text-indent. Nobody reads that as a close button. */
.upgrade-downgrade-modal .modal-body .close,
.cancel-form-modal .close,
.feedback-form-modal .close {
  background: transparent;
  text-indent: 0;
  overflow: visible;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0;
  line-height: 1;
  color: #5b6474;
  text-decoration: none;
}
.upgrade-downgrade-modal .modal-body .close::before,
.cancel-form-modal .close::before,
.feedback-form-modal .close::before {
  content: '\00d7';
  font-size: 26px;
  line-height: 1;
}
.upgrade-downgrade-modal .modal-body .close:hover,
.cancel-form-modal .close:hover,
.feedback-form-modal .close:hover { background: rgba(15, 23, 42, 0.07); color: #202942; }

/* /team-inactive. Renders inside the app layout, so it is a normal content card in the
   main column rather than a centred standalone page. */
body.logged-in .notice-card { max-width: 620px; }
body.logged-in .notice-flag { margin: 0 0 14px; }
body.logged-in .notice-lead { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
body.logged-in .notice-rows { margin: 22px 0 0; }
body.logged-in .notice-help { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 22px 0 0; }
body.logged-in .notice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 0; }
body.logged-in .notice-actions form { margin: 0; }

/* ---- Support: ticket category cards (redesign) ------------------------------
   Replaces the old "What's it about?" <select>. Radio inputs styled as cards,
   one per SupportTicket::TYPES value, with the prototype's tint per category. */
body .ticket-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { body .ticket-cats { grid-template-columns: 1fr; } }
body .ticket-cat {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin: 0;
  border: 1px solid var(--border-default); border-radius: var(--r-md);
  background: var(--surface-card); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body .ticket-cat input { position: absolute; opacity: 0; width: 0; height: 0; }
body .ticket-cat:hover { border-color: var(--border-strong); }
body .ticket-cat:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
body .ticket-cat:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
body .ticket-cat-icon {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
body .ticket-cat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body .ticket-cat-label { font-size: 14px; font-weight: var(--weight-medium); color: var(--text-primary); }
body .ticket-cat-blurb { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }

body .ticket-cat-bug     .ticket-cat-icon { background: var(--danger-50); color: var(--danger-600); }
body .ticket-cat-feature .ticket-cat-icon { background: var(--moddy-50);  color: var(--moddy-600); }
body .ticket-cat-account .ticket-cat-icon { background: var(--info-50);   color: #2563eb; }
body .ticket-cat-other   .ticket-cat-icon { background: var(--ink-50);    color: var(--text-secondary); }

/* Flash messages sit in their own row under the page head. Previously they rendered at
   the top of .cont, where .page-head's negative top margin (it breaks out of .cont's
   padding) pulled the head up over them. */
body.logged-in .page-flash { margin: 0 0 var(--s-5); }
body.logged-in .page-flash .alert { margin: 0; }