:root {
  --ink: #102b2b;
  --muted: #607878;
  --line: #d8e8e6;
  --soft: #edf7f5;
  --paper: #fff;
  --canvas: #f5fbfa;
  --raised: #fff;
  --navy: #071f24;
  --navy-2: #10383d;
  --teal: #0a9d96;
  --teal-hover: #087e79;
  --accent-soft: #dff7f3;
  --accent-ink: #087a75;
  --danger: #c13f4d;
  --shadow-sm: 0 5px 16px rgba(11, 68, 67, .07);
  --shadow: 0 18px 55px rgba(8, 64, 64, .12);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

:root[data-theme="dark"] {
  --ink: #edf8ff;
  --muted: #9db9cc;
  --line: #294960;
  --soft: #102b3d;
  --paper: #0c2231;
  --canvas: #061520;
  --raised: #123149;
  --navy: #041521;
  --navy-2: #0d3048;
  --teal: #32d7d0;
  --teal-hover: #70e8e3;
  --accent-soft: #123b52;
  --accent-ink: #79e3df;
  --danger: #ff8791;
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .18);
  --shadow: 0 22px 65px rgba(0, 0, 0, .34);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: var(--canvas); font-size: 14px; line-height: 1.55; transition: color .15s ease, background-color .15s ease; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--teal) 34%, transparent); outline-offset: 2px; }
code, kbd, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
code { border-radius: 5px; padding: .12rem .34rem; color: var(--accent-ink); background: var(--accent-soft); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); letter-spacing: -.035em; }
h1 { margin-bottom: .6rem; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.08; }
h2 { font-size: 1.15rem; }
.skip-link { position: fixed; z-index: 2000; top: 10px; left: 10px; transform: translateY(-160%); border-radius: 8px; padding: 8px 12px; color: #fff; background: var(--navy); font-weight: 750; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 100; height: 68px; border-bottom: 1px solid var(--line); color: var(--ink); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(16px); }
.site-header-inner { width: min(1240px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.brand:hover { text-decoration: none; }
.brand small { border-left: 1px solid var(--line); padding-left: 10px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.brand-mark { position: relative; display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #14c9bd, #087973); box-shadow: 0 7px 18px rgba(10, 157, 150, .25); font: 700 17px Georgia, serif; }
.brand-mark::after { position: absolute; width: 18px; height: 18px; right: -8px; bottom: -8px; border-radius: 50%; background: rgba(255,255,255,.23); content: ""; }
.brand-mark span { font-size: 10px; vertical-align: sub; }
.brand-jackal-mark { border: 1px solid color-mix(in srgb, #18d5ca 56%, var(--line)); background: #071c20; box-shadow: 0 7px 21px rgba(4, 167, 159, .28); }
.brand-jackal-mark::after { display: none; }
.brand-jackal-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.account-nav { display: flex; align-items: center; gap: 8px; }
.account-nav form { margin: 0; }
.header-link { border-radius: 8px; padding: 7px 9px; color: var(--muted); font-size: 13px; font-weight: 650; }
.header-link:hover { color: var(--ink); background: var(--soft); text-decoration: none; }
.account-email { max-width: 200px; overflow: hidden; margin-left: 4px; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.theme-toggle { display: inline-flex; min-width: 38px; min-height: 36px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; color: var(--muted); background: var(--paper); box-shadow: var(--shadow-sm); }
.theme-toggle:hover { color: var(--ink); border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.theme-icon { line-height: 1; }
.theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: inline; }
.theme-label { font-size: 11px; font-weight: 700; }
.page-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 72px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; }
.page-heading.compact { margin-bottom: 20px; }
.eyebrow { margin-bottom: 9px; color: var(--teal); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.muted, .field-help { color: var(--muted); }
.button-row { display: flex; align-items: center; gap: 10px; }
.button-row.centered { justify-content: center; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 15px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); font-weight: 700; line-height: 1; text-decoration: none; transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.button:hover { border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); background: var(--soft); text-decoration: none; transform: translateY(-1px); }
.button-primary { border-color: #0a9d96; color: #fff; background: linear-gradient(135deg, #12b8ad, #087f79); box-shadow: 0 8px 22px rgba(8, 127, 121, .25); }
.button-primary:hover { border-color: #087c76; color: #fff; background: linear-gradient(135deg, #0da9a0, #066c67); }
.button-light { border-color: rgba(255,255,255,.75); color: #0a3a3a; background: #fff; }
.button-light:hover { border-color: #fff; background: #e8fbf8; }
.button-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); background: var(--paper); }
.button-quiet { border-color: transparent; color: inherit; background: transparent; box-shadow: none; }
.site-header .button-quiet { color: var(--muted); }
.button-small { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.button-large { min-height: 50px; border-radius: 12px; padding: 11px 19px; }
.button-wide { width: 100%; }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
kbd { border-left: 1px solid currentColor; padding-left: 6px; font-size: 10px; opacity: .65; }

/* Project dashboard */
.dashboard-page { background: radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 28%), var(--canvas); }
.dashboard-shell { width: min(1200px, calc(100% - 48px)); }
.dashboard-hero { position: relative; display: flex; min-height: 210px; align-items: flex-end; justify-content: space-between; gap: 30px; overflow: hidden; margin-bottom: 38px; border: 1px solid color-mix(in srgb, var(--teal) 32%, #143d42); border-radius: 22px; padding: 34px 38px; color: #fff; background: radial-gradient(circle at 92% 8%, rgba(30,220,207,.18), transparent 34%), linear-gradient(125deg, #09252c 0%, #0a4044 58%, #08726c 125%); box-shadow: 0 20px 50px rgba(4, 58, 60, .24); }
.dashboard-hero::before, .dashboard-hero::after { position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; }
.dashboard-hero::before { width: 310px; height: 310px; right: -90px; top: -150px; }
.dashboard-hero::after { width: 170px; height: 170px; right: 150px; bottom: -130px; }
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero-copy { max-width: 680px; }
.dashboard-hero .eyebrow { color: #7ce9df; }
.dashboard-hero h1 { margin-bottom: 10px; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); }
.dashboard-hero p { max-width: 650px; margin: 0; color: #c9e7e5; font-size: 15px; }
.dashboard-hero-aside { display: grid; min-width: 190px; gap: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; padding: 16px; background: rgba(12, 9, 34, .22); backdrop-filter: blur(10px); }
.dashboard-hero-aside span { color: #c5e5e2; font-size: 11px; text-transform: uppercase; }
.dashboard-hero-aside strong { margin-right: 5px; color: #fff; font-size: 22px; }
.dashboard-hero-aside a { color: #75e5dc; font-size: 11px; font-weight: 750; }
.project-heading { align-items: center; margin-bottom: 18px; }
.project-heading h2 { margin: 0 0 2px; font-size: 20px; }
.project-heading p { margin: 0; font-size: 12px; }
.project-view-tabs { display: flex; gap: 5px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.project-view-tabs a { display: flex; align-items: center; gap: 7px; border-bottom: 2px solid transparent; padding: 10px 13px; color: var(--muted); font-size: 11px; font-weight: 780; }
.project-view-tabs a:hover { color: var(--ink); text-decoration: none; }
.project-view-tabs a.active { border-color: var(--teal); color: var(--accent-ink); }
.project-view-tabs span { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 99px; padding: 0 6px; background: var(--soft); font-size: 8px; }
.project-organiser { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 30px; border: 1px solid var(--line); border-radius: 15px; padding: 18px 20px; background: var(--paper); box-shadow: var(--shadow-sm); }
.project-organiser .eyebrow { margin-bottom: 2px; }.project-organiser h2 { margin: 0; font-size: 16px; }.project-organiser p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.folder-create-form { display: flex; min-width: min(390px, 100%); gap: 8px; }.folder-create-form input { min-width: 0; flex: 1; }
.project-sections { display: grid; gap: 38px; }
.project-folder-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.project-folder-heading > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
.project-folder-heading h2 { overflow: hidden; margin: 0; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.project-folder-heading small { color: var(--muted); font-size: 9px; }
.folder-mark { display: grid; width: 28px; height: 25px; place-items: center; border-radius: 7px; color: var(--accent-ink); background: var(--accent-soft); font-size: 12px; }
.folder-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 23px; color: var(--muted); background: color-mix(in srgb, var(--paper) 72%, transparent); font-size: 10px; text-align: center; }
.shared-project-section { border-top: 1px solid var(--line); padding-top: 30px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.project-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease; }
.project-card:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-3px); }
.project-card-preview { position: relative; height: 118px; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 70%, var(--paper)), var(--soft)); }
.project-card-window { display: flex; gap: 4px; height: 22px; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 78%, transparent); }
.project-card-window span { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.project-card-paper { position: absolute; width: 84px; height: 76px; right: 18px; top: 33px; border: 1px solid var(--line); border-radius: 3px; padding: 15px 12px; background: var(--paper); box-shadow: 0 8px 20px rgba(25,22,55,.1); }
.project-card-paper i, .project-card-code i { display: block; height: 3px; margin-bottom: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 24%, transparent); }
.project-card-paper i:first-child { width: 60%; margin: 0 auto 10px; background: color-mix(in srgb, var(--teal) 40%, transparent); }
.project-card-paper i:last-child { width: 70%; }
.project-card-code { position: absolute; left: 20px; top: 42px; width: 115px; }
.project-card-code i { height: 4px; background: color-mix(in srgb, var(--teal) 25%, transparent); }
.project-card-code i:nth-child(2) { width: 80%; margin-left: 9px; }
.project-card-code i:nth-child(3) { width: 92%; }
.project-card-code i:nth-child(4) { width: 70%; margin-left: 9px; }
.project-card-code i:nth-child(5) { width: 55%; }
.project-card-icon { position: absolute; display: grid; width: 39px; height: 39px; place-items: center; left: 15px; bottom: 9px; border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent); border-radius: 10px; color: #fff; background: linear-gradient(145deg, #16bcb1, #087972); box-shadow: 0 7px 16px rgba(8,127,120,.25); font: 750 11px Georgia, serif; }
.project-card-icon span { font-size: 8px; }
.project-card-content { display: flex; align-items: center; gap: 10px; padding: 18px; }
.project-card-main { min-width: 0; flex: 1; }
.project-card h3 { overflow: hidden; margin: 0 0 9px; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.project-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.project-owner { overflow: hidden; margin-top: 8px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.project-arrow { display: grid; width: 30px; height: 30px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--teal); background: var(--accent-soft); font-size: 16px; transition: transform .18s ease; }
.project-card:hover .project-arrow { transform: translateX(2px); }
.project-card-link { display: block; color: var(--ink); }.project-card-link:hover { text-decoration: none; }
.project-card-managed:hover { transform: translateY(-2px); }
.project-card-menu-button, .folder-menu-button { display: grid; width: 34px; height: 30px; place-items: center; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font-weight: 900; letter-spacing: 1px; }
.project-card-menu-button { position: absolute; z-index: 4; right: 10px; top: 9px; color: #fff; background: rgba(5,37,44,.66); backdrop-filter: blur(8px); }
.project-card-menu-button:hover, .project-card-menu-button[aria-expanded="true"], .folder-menu-button:hover, .folder-menu-button[aria-expanded="true"] { border-color: color-mix(in srgb, var(--teal) 42%, var(--line)); color: var(--accent-ink); background: var(--accent-soft); }
.project-card.is-dragging { opacity: .42; }
.project-folder-section { border: 1px solid transparent; border-radius: 16px; padding: 10px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.project-folder-section.is-drop-target { border-color: var(--teal); background: color-mix(in srgb, var(--accent-soft) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent); }
.project-folder-section.is-moving-project { opacity: .7; pointer-events: none; }
.dashboard-context-menu { position: fixed; z-index: 1000; display: grid; width: 210px; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: var(--paper); box-shadow: 0 18px 50px rgba(9,39,47,.22); }
.dashboard-context-menu[hidden], .dashboard-context-menu button[hidden] { display: none; }
.dashboard-context-menu button { display: flex; min-height: 36px; align-items: center; gap: 10px; border: 0; border-radius: 8px; padding: 8px 10px; color: var(--ink); background: transparent; text-align: left; font-size: 11px; font-weight: 700; }
.dashboard-context-menu button:hover, .dashboard-context-menu button:focus-visible { outline: 0; background: var(--accent-soft); }
.dashboard-context-menu button span { width: 19px; color: var(--teal); text-align: center; font-size: 14px; }
.dashboard-context-menu button.danger { margin-top: 3px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--danger); }
.dashboard-action-form { display: none; }
.project-move-dialog { width: min(440px, calc(100% - 30px)); border: 1px solid var(--line); border-radius: 17px; padding: 0; color: var(--ink); background: var(--paper); box-shadow: 0 24px 70px rgba(3,31,38,.3); }
.project-move-dialog::backdrop { background: rgba(4,28,34,.52); backdrop-filter: blur(3px); }
.project-move-dialog form { display: grid; gap: 16px; padding: 21px; }
.project-move-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.project-move-dialog h2 { margin: 2px 0 0; font-size: 18px; }.project-move-dialog label { color: var(--muted); font-size: 10px; font-weight: 750; }.project-move-dialog select { width: 100%; }.project-move-dialog .button-row { justify-content: flex-end; }
.compact-project-empty { padding-block: 52px; }
.invitation-card { width: min(570px, 100%); margin: 0 auto; min-height: 0; }
.invitation-card > p { color: var(--muted); }.invitation-card > p strong { color: var(--ink); }.invitation-actions { margin-top: 23px; }.invitation-security-note { margin: 16px 0 0; font-size: 10px; text-align: center; }
.role-badge { display: inline-flex; border-radius: 99px; padding: 3px 7px; color: var(--accent-ink); background: var(--accent-soft); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.empty-state { text-align: center; border: 1px dashed color-mix(in srgb, var(--teal) 35%, var(--line)); border-radius: 20px; padding: 68px 24px; background: var(--paper); box-shadow: var(--shadow-sm); }
.empty-state h2 { margin-bottom: 8px; font-size: 24px; }
.empty-state p { max-width: 520px; margin: 0 auto 24px; color: var(--muted); }
.empty-icon { display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: var(--teal); background: var(--accent-soft); font-weight: 800; }
.empty-document { position: relative; display: grid; width: 78px; height: 96px; place-items: start center; margin: 0 auto 22px; border: 1px solid var(--line); border-radius: 8px; padding-top: 22px; background: var(--paper); box-shadow: 8px 9px 0 var(--accent-soft); }
.empty-document > span { color: var(--teal); font: 750 16px Georgia, serif; }
.empty-document > span span { font-size: 10px; }
.empty-document i { width: 45px; height: 3px; margin-top: 5px; border-radius: 5px; background: var(--line); }

/* Authentication and forms */
.auth-page { background: radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 28%), var(--canvas); }
.auth-shell { width: min(1120px, calc(100% - 40px)); min-height: calc(100vh - 68px); margin: 0 auto; padding: 42px 0; display: grid; place-items: center; }
.auth-layout { display: grid; width: 100%; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.auth-showcase { position: relative; min-height: 590px; overflow: hidden; color: #fff; background: radial-gradient(circle at 86% 14%, rgba(30,218,205,.18), transparent 32%), linear-gradient(145deg, #08242b 0%, #0b4649 58%, #08736e 120%); }
.auth-showcase::after { position: absolute; width: 330px; height: 330px; right: -140px; top: -130px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; }
.auth-showcase-grid, .cta-grid { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.auth-showcase-content { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; justify-content: center; padding: 58px; }
.auth-showcase .hero-kicker { color: #7ce9df; }
.auth-showcase h2 { max-width: 470px; margin: 17px 0 15px; color: #fff; font-size: clamp(2rem, 3.3vw, 3.05rem); line-height: 1.08; }
.auth-showcase p { max-width: 480px; color: #c8e3e1; font-size: 14px; }
.auth-mini-window { overflow: hidden; width: min(390px, 92%); margin-top: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(12,9,34,.43); box-shadow: 0 20px 45px rgba(0,0,0,.18); }
.auth-mini-window > div { display: flex; height: 30px; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.auth-mini-window > div i { width: 5px; height: 5px; border-radius: 50%; background: #8e87b0; }
.auth-mini-window > div span { margin-left: auto; color: #aaa5c6; font-size: 8px; }
.auth-mini-window section { display: grid; height: 145px; grid-template-columns: 35% 1fr; }
.auth-mini-window aside { display: grid; align-content: start; gap: 10px; border-right: 1px solid rgba(255,255,255,.1); padding: 18px 12px; }
.auth-mini-window aside b { width: 80%; height: 4px; border-radius: 5px; background: #635b86; }
.auth-mini-window article { display: grid; align-content: start; gap: 11px; padding: 22px; background: rgba(8,7,25,.2); }
.auth-mini-window article span, .auth-mini-window article strong { display: block; width: 90%; height: 5px; border-radius: 5px; background: #6d678c; }
.auth-mini-window article strong { width: 54%; background: #38d3c7; }
.auth-benefits { display: grid; gap: 13px; margin: 27px 0 0; padding: 0; list-style: none; color: #d7efed; font-size: 13px; }
.auth-benefits span { display: inline-grid; width: 21px; height: 21px; place-items: center; margin-right: 8px; border-radius: 50%; color: #083333; background: #80e9df; font-size: 10px; font-weight: 900; }
.auth-card, .form-card { border: 1px solid var(--line); border-radius: 18px; padding: 34px; background: var(--paper); box-shadow: var(--shadow); }
.auth-layout .auth-card { display: flex; width: auto; max-width: none; min-height: 590px; flex-direction: column; justify-content: center; border: 0; border-radius: 0; box-shadow: none; padding: 48px clamp(32px, 5vw, 64px); }
.auth-card { width: min(440px, 100%); }
.auth-card-wide { width: min(510px, 100%); }
.auth-card h1 { font-size: clamp(2rem, 3vw, 2.5rem); }
.stack-form { display: flex; flex-direction: column; }
.stack-form label, .share-form label, .mini-form label { margin: 13px 0 6px; color: var(--ink); font-size: 11px; font-weight: 750; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; color: var(--ink); background: var(--paper); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent); }
.stack-form > .button-primary { margin-top: 24px; }
.google-button { position: relative; min-height: 44px; margin-top: 19px; border-color: #747775; color: #1f1f1f; background: #fff; }
.google-button:hover { border-color: #747775; color: #1f1f1f; background: #f7f8f8; }
.google-mark { position: absolute; top: 50%; left: 12px; display: block; width: 20px; height: auto; transform: translateY(-50%); }
.auth-divider { display: flex; align-items: center; gap: 11px; margin: 20px 0 2px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.forgot-password-link { align-self: flex-end; margin-top: 8px; font-size: 11px; font-weight: 700; }
.security-copy { border-left: 3px solid var(--teal); padding-left: 12px; color: var(--muted); font-size: 12px; }
.field-help { margin-top: 4px; font-size: 10px; }
.field-help ul { margin: 5px 0 0; padding-left: 18px; }
.field-error, .form-error { margin-top: 5px; color: var(--danger); font-size: 11px; }
.form-error ul, .field-error ul { margin: 0; padding-left: 18px; }
.auth-switch { margin: 23px 0 0; color: var(--muted); text-align: center; }
.narrow-page { width: min(660px, 100%); margin: 0 auto; }
.template-page { width: min(960px, 100%); }
.share-page { width: min(800px, 100%); }
.back-link { display: inline-block; margin-bottom: 20px; font-weight: 700; }
.form-card + .form-card { margin-top: 18px; }
.form-card h2 { margin-bottom: 5px; }
.button-row.form-actions { flex-flow: row nowrap; justify-content: flex-end; align-items: stretch; margin-top: 10px; }
.form-actions .button { height: 42px; min-height: 42px; margin: 0; }
.template-picker { min-width: 0; margin: 22px 0 4px; border: 0; padding: 0; }
.template-picker legend { margin-bottom: 9px; color: var(--ink); font-size: 11px; font-weight: 750; }
.template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.template-option { position: relative; min-width: 0; margin: 0 !important; cursor: pointer; }
.template-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.template-card-content { display: flex; min-height: 140px; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; padding: 15px; background: var(--soft); transition: border-color .15s, box-shadow .15s, background .15s; }
.template-option:hover .template-card-content { border-color: color-mix(in srgb, var(--teal) 42%, var(--line)); background: var(--paper); }
.template-option input:checked + .template-card-content { border-color: var(--teal); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 12%, transparent); }
.template-option input:focus-visible + .template-card-content { outline: 3px solid color-mix(in srgb, var(--teal) 22%, transparent); outline-offset: 2px; }
.template-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); }
.template-card-heading > span { border-radius: 99px; padding: 2px 7px; color: var(--accent-ink); background: color-mix(in srgb, var(--paper) 70%, transparent); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.template-description { flex: 1; margin: 6px 0 11px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.45; }
.template-meta { display: flex; align-items: end; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; font-weight: 650; }
.template-meta span:last-child { max-width: 55%; text-align: right; }
.share-form { display: grid; grid-template-columns: 1fr 150px auto; align-items: end; gap: 12px; }
.share-form label { display: block; margin-top: 0; }
.member-row { display: flex; min-height: 67px; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.avatar, .comment-avatar { display: grid; place-items: center; border-radius: 50%; color: var(--accent-ink); background: var(--accent-soft); font-weight: 800; }
.avatar { width: 36px; height: 36px; }
.member-main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.member-main strong { overflow: hidden; text-overflow: ellipsis; }
.member-main span { color: var(--muted); font-size: 11px; }
.empty-inline { padding: 20px; color: var(--muted); text-align: center; font-size: 12px; }

.message-stack { position: fixed; z-index: 1000; top: 78px; left: 50%; display: grid; width: min(580px, calc(100% - 32px)); gap: 8px; transform: translateX(-50%); }
.message { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid color-mix(in srgb, #50aa7e 45%, var(--line)); border-radius: 11px; padding: 11px 14px; color: var(--ink); background: color-mix(in srgb, #5fc791 14%, var(--paper)); box-shadow: var(--shadow); }
.message-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 10%, var(--paper)); }
.message button { border: 0; color: inherit; background: transparent; font-size: 20px; }

/* Public landing page */
.landing-page .site-header { position: absolute; width: 100%; border-bottom-color: transparent; background: transparent; backdrop-filter: none; }
.landing-page .site-header .header-link { color: color-mix(in srgb, var(--ink) 75%, transparent); }
.landing-page .landing-main { overflow: hidden; }
.landing-container { width: min(1220px, calc(100% - 48px)); margin: 0 auto; }
.landing-hero { position: relative; min-height: 790px; overflow: hidden; padding: 148px 0 110px; background: radial-gradient(circle at 13% 22%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 28%), radial-gradient(circle at 82% 18%, color-mix(in srgb, #27d8cc 9%, transparent), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--paper) 45%, transparent), var(--canvas)); }
.landing-hero::after { position: absolute; height: 1px; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, transparent, var(--line), transparent); content: ""; }
.landing-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.landing-orb-one { width: 480px; height: 480px; top: 90px; right: -220px; background: radial-gradient(circle, color-mix(in srgb, #19cbbf 18%, transparent), transparent 70%); }
.landing-orb-two { width: 330px; height: 330px; left: -210px; bottom: -80px; background: radial-gradient(circle, color-mix(in srgb, #47aeb5 13%, transparent), transparent 70%); }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr); align-items: center; gap: clamp(45px, 7vw, 100px); }
.hero-copy { max-width: 590px; }
.hero-kicker { display: flex; align-items: center; gap: 8px; color: var(--accent-ink); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-kicker > span { width: 19px; height: 2px; border-radius: 2px; background: currentColor; }
.hero-copy h1 { max-width: 650px; margin: 22px 0 22px; font-size: clamp(3.3rem, 6.2vw, 5.65rem); line-height: .98; letter-spacing: -.065em; }
.hero-copy h1 span { color: var(--teal); }
.hero-copy > p { max-width: 590px; margin-bottom: 29px; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: 18px; margin: 24px 0 0; padding: 0; color: var(--muted); list-style: none; font-size: 11px; font-weight: 650; }
.hero-assurances span { margin-right: 4px; color: var(--teal); font-weight: 900; }
.product-showcase { position: relative; min-width: 0; margin: 0; padding-top: 95px; perspective: 1100px; }
.showcase-glow { position: absolute; inset: 8% 2% 0; border-radius: 50%; background: color-mix(in srgb, var(--teal) 22%, transparent); filter: blur(55px); opacity: .62; }
.jackal-hero-card { position: absolute; z-index: 4; top: 0; right: 24px; display: grid; width: min(410px, calc(100% - 30px)); min-height: 154px; grid-template-columns: 158px minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, #12bdb2 52%, var(--line)); border-radius: 24px; color: #123938; background: linear-gradient(135deg, rgba(245,255,253,.97), rgba(219,248,244,.95)); box-shadow: 0 24px 60px rgba(5,114,111,.2); backdrop-filter: blur(18px); transform: rotate(1.5deg); }
.jackal-hero-card::after { position: absolute; width: 160px; height: 160px; right: -55px; bottom: -85px; border-radius: 50%; background: rgba(18,189,178,.14); content: ""; }
.jackal-hero-art { position: relative; z-index: 1; align-self: stretch; overflow: hidden; }
.jackal-hero-art img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(1.08) contrast(1.03); }
.jackal-hero-copy { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; padding: 18px 18px 18px 16px; }
.jackal-hero-copy > span { margin-bottom: 4px; color: #087b75; font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.jackal-hero-copy strong { margin-bottom: 6px; color: #123938; font-size: 15px; line-height: 1.2; letter-spacing: -.025em; }
.jackal-hero-copy small { color: #527170; font-size: 9px; line-height: 1.45; }
.showcase-window { position: relative; z-index: 1; overflow: hidden; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius: 17px; background: #071b20; box-shadow: 0 35px 75px rgba(4,55,58,.26); transform: rotateY(-2deg) rotateX(1deg); }
.showcase-topbar { display: flex; height: 48px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #214044; padding: 0 12px; color: #effcfb; background: #0a2429; font-size: 9px; }
.showcase-brand { display: flex; align-items: center; gap: 7px; }
.mini-brand, .editor-brand-mark { display: inline-grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #fff; background: linear-gradient(145deg, #12bdb2, #087973); font: 700 12px Georgia, serif; }
.mini-brand span, .editor-brand-mark span { font-size: 7px; }
.showcase-status { color: #a2bdba; }
.showcase-status span { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #55c890; box-shadow: 0 0 0 3px rgba(85,200,144,.1); }
.showcase-actions { display: flex; align-items: center; gap: 5px; }
.showcase-actions i { width: 21px; height: 19px; border: 1px solid #365458; border-radius: 4px; }
.showcase-actions b { border-radius: 5px; padding: 5px 8px; color: #fff; background: #0a9d96; font-size: 8px; }
.showcase-body { display: grid; height: 430px; grid-template-columns: 22% 40% 38%; }
.showcase-files { border-right: 1px solid #203b40; padding: 15px 8px; color: #a5bfbd; background: #0d292e; }
.showcase-files small, .mock-tab { display: block; margin: 0 6px 9px; color: #718c8b; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mock-file { display: flex; height: 26px; align-items: center; gap: 6px; border-radius: 5px; padding: 0 7px; font-size: 8px; }
.mock-file span { width: 12px; color: #7e9a98; font-family: Georgia, serif; text-align: center; }
.mock-file.active { color: #e5f8f6; background: #154348; }
.mock-file.active span { color: #5fe0d5; }
.mock-file.nested { padding-left: 18px; }
.showcase-code { min-width: 0; border-right: 1px solid #203b40; background: #091d22; }
.mock-tab { display: flex; height: 34px; align-items: center; justify-content: space-between; margin: 0; border-bottom: 1px solid #20383d; padding: 0 10px; color: #a1b9b7; background: #102a2f; }
.mock-tab i { width: 4px; height: 4px; border-radius: 50%; background: #55c890; }
.code-lines { padding: 15px 0; }
.code-lines > div { display: grid; height: 27px; grid-template-columns: 30px minmax(0, 1fr); align-items: center; }
.code-lines b { color: #4f6a6b; font: 7px "SFMono-Regular", Consolas, monospace; text-align: right; }
.code-lines code { overflow: hidden; padding: 0 10px; color: #b7ccca; background: transparent; font-size: 7px; text-overflow: clip; white-space: nowrap; }
.code-lines em { color: #64ddd3; font-style: normal; }
.code-lines strong { color: #71bfc3; font-weight: 500; }
.showcase-pdf { min-width: 0; background: #474353; }
.paper-preview { width: 72%; height: 330px; margin: 25px auto; padding: 39px 25px; background: #fff; box-shadow: 0 7px 22px rgba(0,0,0,.22); }
.paper-preview > span { display: block; width: 100%; height: 3px; margin-bottom: 8px; border-radius: 3px; background: #d6d4dc; }
.paper-preview .paper-title { width: 62%; height: 6px; margin: 0 auto 11px; background: #4e4c56; }
.paper-preview .paper-author { width: 36%; margin: 0 auto 27px; }
.paper-preview .paper-heading { width: 45%; height: 5px; margin: 0 0 12px; background: #686570; }
.paper-preview .short { width: 67%; }
.paper-figure { display: flex; height: 72px; align-items: flex-end; justify-content: center; gap: 8px; margin: 23px 0; border-bottom: 1px solid #d6d4dc; }
.paper-figure i { width: 10px; height: 35%; border-radius: 2px 2px 0 0; background: #51c9c0; }
.paper-figure i:nth-child(2) { height: 63%; }.paper-figure i:nth-child(3) { height: 48%; }.paper-figure i:nth-child(4) { height: 80%; }.paper-figure i:nth-child(5) { height: 68%; }
.showcase-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; color: var(--ink); background: color-mix(in srgb, var(--paper) 93%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.showcase-note > span { display: grid; width: 27px; height: 27px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--accent-ink); background: var(--accent-soft); font-size: 10px; font-weight: 900; }
.showcase-note div { display: flex; flex-direction: column; }
.showcase-note strong { font-size: 9px; }.showcase-note small { color: var(--muted); font-size: 7px; }
.note-build { right: -22px; bottom: 44px; }.note-comment { left: -30px; top: 182px; }
.landing-strip { border-bottom: 1px solid var(--line); background: var(--paper); }
.strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip-grid > div { display: grid; min-width: 0; grid-template-columns: 40px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; min-height: 105px; border-right: 1px solid var(--line); padding: 20px 26px; }
.strip-grid > div:last-child { border-right: 0; }
.strip-grid > div > span { display: grid; width: 31px; height: 31px; grid-row: 1 / 3; place-items: center; border-radius: 9px; color: var(--accent-ink); background: var(--accent-soft); font-size: 9px; font-weight: 850; }
.strip-grid strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.strip-grid small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.landing-section { padding: 110px 0; }
.landing-tools-section { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--soft), var(--canvas)); }
.landing-tools-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr); align-items: center; gap: clamp(45px, 8vw, 105px); }
.landing-tool-cards { display: grid; gap: 13px; }
.landing-tool-card { display: grid; min-height: 130px; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 17px; border: 1px solid var(--line); border-radius: 18px; padding: 22px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .16s, border-color .16s, box-shadow .16s; }
.landing-tool-card:hover { border-color: color-mix(in srgb, var(--teal) 52%, var(--line)); text-decoration: none; box-shadow: var(--shadow); transform: translateY(-2px); }
.landing-tool-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 15px; color: var(--accent-ink); background: var(--accent-soft); font-size: 21px; font-weight: 850; }
.landing-tool-card div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.landing-tool-card strong { font-size: 17px; }
.landing-tool-card small { color: var(--muted); font-size: 10px; line-height: 1.55; }
.landing-tool-card b { color: var(--teal); font-size: 18px; }
.section-heading { max-width: 710px; margin: 0 auto 48px; text-align: center; }
.section-heading h2, .landing-cta h2 { margin-bottom: 13px; font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1.06; }
.section-heading p { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: 15px; }
.section-heading.align-left { margin: 0; text-align: left; }
.section-heading.align-left p { margin: 0 0 25px; }
.feature-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.feature-card { position: relative; min-height: 310px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: var(--paper); box-shadow: var(--shadow-sm); }
.feature-card h3 { margin: 17px 0 9px; font-size: 20px; }
.feature-card p { max-width: 580px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.feature-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: var(--accent-ink); background: var(--accent-soft); font-size: 14px; font-weight: 850; }
.feature-editor, .feature-compile { grid-column: span 3; }
.feature-projects, .feature-collab { grid-column: span 2; }
.feature-themes { display: flex; grid-column: span 2; flex-direction: column; justify-content: space-between; }
.completion-demo { display: flex; align-items: center; gap: 11px; margin-top: 25px; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: var(--soft); font-family: "SFMono-Regular", Consolas, monospace; }
.completion-demo code { flex: 1; color: var(--muted); background: transparent; }.completion-demo span { color: var(--muted); }.completion-demo strong { flex: 1.4; border-radius: 7px; padding: 7px 9px; color: var(--accent-ink); background: var(--accent-soft); font-size: 11px; }
.build-demo { display: flex; gap: 8px; margin-top: 26px; }
.build-demo span { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 11px; color: var(--muted); background: var(--soft); font-size: 9px; }
.build-demo i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #55b987; }
.folder-demo { display: grid; gap: 8px; margin-top: 24px; border: 1px solid var(--line); border-radius: 11px; padding: 14px; color: var(--muted); background: var(--soft); font: 10px "SFMono-Regular", Consolas, monospace; }
.folder-demo span:not(:first-child) { padding-left: 14px; color: var(--accent-ink); }
.avatar-stack { display: flex; margin-top: 27px; }
.avatar-stack i, .avatar-stack span { display: grid; width: 38px; height: 38px; place-items: center; margin-left: -7px; border: 3px solid var(--paper); border-radius: 50%; color: #fff; background: #0a9d96; font-size: 8px; font-style: normal; font-weight: 850; }
.avatar-stack i:first-child { margin-left: 0; background: #237e86; }.avatar-stack i:nth-child(2) { background: #168f87; }.avatar-stack i:nth-child(3) { background: #36aaa0; }.avatar-stack span { color: var(--muted); background: var(--soft); }
.theme-demo { display: flex; gap: 8px; margin-top: 20px; }
.theme-demo span { display: grid; width: 62px; height: 55px; place-items: center; border: 1px solid var(--line); border-radius: 11px; font: 700 15px Georgia, serif; box-shadow: var(--shadow-sm); }
.theme-swatch-light { color: #173737; background: #f7fffd; }.theme-swatch-dark { color: #e8f7ff; background: #081c2b; }
.workflow-section { border-block: 1px solid var(--line); background: var(--paper); }
.workflow-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); align-items: center; gap: clamp(60px, 10vw, 130px); }
.text-link { font-weight: 800; }.text-link span { margin-left: 5px; }
.workflow-steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.workflow-steps::before { position: absolute; width: 1px; left: 23px; top: 30px; bottom: 30px; background: var(--line); content: ""; }
.workflow-steps li { position: relative; z-index: 1; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 24px 0; }
.workflow-steps li > span { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid color-mix(in srgb, var(--teal) 42%, var(--line)); border-radius: 14px; color: var(--accent-ink); background: var(--accent-soft); font-size: 10px; font-weight: 850; }
.workflow-steps strong { display: block; margin: 1px 0 5px; font-size: 15px; }.workflow-steps p { margin: 0; color: var(--muted); font-size: 12px; }
.landing-cta { padding: 100px 0; }
.cta-card { position: relative; display: flex; min-height: 300px; align-items: center; justify-content: space-between; gap: 40px; overflow: hidden; border-radius: 25px; padding: 54px 60px; color: #fff; background: radial-gradient(circle at 88% 10%, rgba(44,226,213,.2), transparent 32%), linear-gradient(125deg, #08262d, #0b5353 65%, #087a72 120%); box-shadow: 0 26px 65px rgba(4,67,67,.26); }
.cta-card::after { position: absolute; width: 330px; height: 330px; right: -80px; bottom: -235px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; }
.cta-card > *:not(.cta-grid) { position: relative; z-index: 1; }
.cta-card > div:not(.cta-grid) { max-width: 750px; }.cta-card .eyebrow { color: #7ce9df; }.cta-card h2 { color: #fff; }.cta-card p { margin: 0; color: #c9e7e4; }
.cta-card .button { flex: 0 0 auto; }
.landing-footer { border-top: 1px solid var(--line); padding: 30px 0; background: var(--paper); }
.landing-footer .landing-container { display: flex; align-items: center; gap: 20px; }.footer-brand { font-size: 15px; }.footer-brand .brand-mark { width: 29px; height: 29px; font-size: 13px; }.landing-footer p { flex: 1; margin: 0; color: var(--muted); font-size: 11px; }.landing-footer div div { display: flex; gap: 18px; }.landing-footer div div a { color: var(--muted); font-size: 11px; font-weight: 700; }

/* Company and founder page */
.about-page { background: var(--canvas); }
.about-main { overflow: hidden; }
.about-hero { position: relative; overflow: hidden; padding: 102px 0 112px; background: radial-gradient(circle at 11% 22%, color-mix(in srgb, #16c5bb 15%, transparent), transparent 27%), radial-gradient(circle at 86% 75%, color-mix(in srgb, #47aeb5 12%, transparent), transparent 25%), linear-gradient(180deg, var(--paper), var(--canvas)); }
.about-hero::after { position: absolute; height: 1px; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, transparent, var(--line), transparent); content: ""; }
.about-orb { position: absolute; border: 1px solid color-mix(in srgb, var(--teal) 16%, transparent); border-radius: 50%; pointer-events: none; }
.about-orb-one { width: 430px; height: 430px; top: -235px; right: 12%; }
.about-orb-two { width: 230px; height: 230px; left: -115px; bottom: -105px; }
.about-hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); align-items: center; gap: clamp(55px, 8vw, 110px); }
.about-hero-copy { max-width: 630px; }
.about-hero-copy h1 { margin: 22px 0 24px; font-size: clamp(3.5rem, 6.2vw, 5.8rem); line-height: .96; letter-spacing: -.068em; }
.about-hero-copy h1 span { color: var(--teal); }
.about-hero-copy > p:not(.about-hero-note) { max-width: 620px; margin-bottom: 30px; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.7; }
.about-hero-note { margin: 22px 0 0; color: var(--muted); font-size: 11px; }
.about-hero-note strong { color: var(--ink); }
.about-hero-visual { position: relative; min-height: 530px; }
.about-vision-card { position: absolute; z-index: 1; inset: 35px 13% 35px 13%; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; border: 1px solid #1f5558; border-radius: 32px; padding: 48px; color: #fff; background: radial-gradient(circle at 83% 18%, rgba(28,217,203,.28), transparent 31%), radial-gradient(circle at 14% 82%, rgba(57,149,161,.2), transparent 27%), linear-gradient(145deg, #071f25, #0c373d 62%, #0a4b4d); box-shadow: 0 35px 80px rgba(4,60,63,.3); transform: rotate(-1.5deg); flex-direction: column; }
.about-vision-card::before, .about-vision-card::after { position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; }
.about-vision-card::before { width: 330px; height: 330px; top: -210px; right: -125px; }
.about-vision-card::after { width: 170px; height: 170px; left: -85px; bottom: -100px; }
.about-vision-mark { position: relative; z-index: 1; width: 108px; height: 108px; overflow: hidden; margin-bottom: 34px; border: 1px solid #2e7776; border-radius: 27px; background: #061b20; box-shadow: 0 17px 40px rgba(0,0,0,.32), 0 0 32px rgba(21,211,201,.12); }
.about-vision-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-vision-card > span { position: relative; z-index: 1; margin-bottom: 10px; color: #70e6dc; font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.about-vision-card > strong { position: relative; z-index: 1; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.02; letter-spacing: -.05em; }
.about-vision-card > small { position: relative; z-index: 1; max-width: 260px; margin-top: 18px; color: #bedbd8; font-size: 11px; line-height: 1.55; }
.about-orbit-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; padding: 9px 13px 9px 9px; color: var(--ink); background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(14px); font-size: 10px; font-weight: 750; }
.about-orbit-chip span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: var(--accent-ink); background: var(--accent-soft); font-size: 8px; }
.chip-documents { top: 5px; right: 2px; }.chip-profile { left: 0; top: 46%; }.chip-opportunities { right: 0; bottom: 8px; }
.about-section { padding: 112px 0; }
.about-now-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr); gap: 18px; }
.about-now-card, .about-belief-card { border: 1px solid var(--line); border-radius: 23px; background: var(--paper); box-shadow: var(--shadow-sm); }
.about-now-card { padding: 38px; }
.about-card-label { display: flex; align-items: center; gap: 8px; color: var(--accent-ink); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.about-card-label span { width: 8px; height: 8px; border-radius: 50%; background: #55b987; box-shadow: 0 0 0 5px color-mix(in srgb, #55b987 13%, transparent); }
.about-now-card h3 { max-width: 680px; margin: 18px 0 12px; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.08; }
.about-now-card > p { max-width: 750px; color: var(--muted); }
.about-feature-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 29px 0 0; padding: 0; list-style: none; }
.about-feature-list li { display: flex; min-width: 0; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; padding: 10px; color: var(--muted); background: var(--soft); font-size: 10px; font-weight: 700; }
.about-feature-list span { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--accent-ink); background: var(--accent-soft); font-size: 8px; font-weight: 850; }
.about-belief-card { display: flex; justify-content: flex-end; padding: 34px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 58%, var(--paper)), var(--paper)); flex-direction: column; }
.about-belief-card blockquote { margin: 10px 0 22px; color: var(--ink); font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 800; line-height: 1.18; letter-spacing: -.045em; }
.about-belief-card p { margin: 0; color: var(--muted); font-size: 12px; }
.about-future-section { border-block: 1px solid var(--line); background: var(--paper); }
.about-roadmap-heading { max-width: 790px; margin-bottom: 52px; }
.about-roadmap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about-roadmap-card { position: relative; display: flex; min-height: 345px; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; padding: 30px; background: var(--canvas); box-shadow: var(--shadow-sm); flex-direction: column; }
.about-roadmap-card::before { position: absolute; height: 3px; top: 0; right: 0; left: 0; background: linear-gradient(90deg, #0a9d96, #61dcd2); content: ""; }
.about-roadmap-card:nth-child(2)::before { background: linear-gradient(90deg, #29b7ae, #087f79); }.about-roadmap-card:nth-child(3)::before { background: linear-gradient(90deg, #3e9ca3, #54c8bd); }
.about-roadmap-number { position: absolute; top: 25px; right: 27px; color: color-mix(in srgb, var(--muted) 57%, transparent); font: 750 10px "SFMono-Regular", Consolas, monospace; }
.about-roadmap-icon { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 13px; color: var(--accent-ink); background: var(--accent-soft); font-size: 19px; font-weight: 800; }
.about-roadmap-card h3 { margin: 32px 0 11px; font-size: 22px; }
.about-roadmap-card p { margin-bottom: 28px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.about-roadmap-card small { margin-top: auto; color: var(--accent-ink); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.about-journey-line { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 18px; border: 1px solid var(--line); border-radius: 15px; padding: 18px 22px; background: var(--canvas); }
.about-journey-line span { color: var(--accent-ink); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.about-journey-line strong { color: var(--muted); font-size: 11px; text-align: right; }.about-journey-line i { margin: 0 6px; color: var(--teal); font-style: normal; }
.about-founder-section { background: radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 27%), var(--canvas); }
.about-founder-layout { display: grid; grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(55px, 9vw, 125px); }
.about-founder-portrait { max-width: 510px; margin: 0; }
.about-founder-image-wrap { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line)); border-radius: 30px; padding: 10px; background: var(--paper); box-shadow: 0 28px 65px rgba(6,72,72,.18); transform: rotate(-1.6deg); }
.about-founder-image-wrap::after { position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.26); border-radius: 21px; pointer-events: none; content: ""; }
.about-founder-image-wrap img { display: block; width: 100%; height: auto; border-radius: 21px; object-fit: cover; }
.about-founder-portrait figcaption { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.about-founder-portrait figcaption span { width: 24px; height: 2px; background: var(--teal); }
.about-founder-copy h2 { margin-bottom: 18px; font-size: clamp(2.8rem, 5vw, 4.8rem); line-height: 1; }
.about-founder-copy p { max-width: 710px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.about-founder-copy .about-founder-lead { color: var(--ink); font-size: clamp(1.1rem, 1.8vw, 1.38rem); font-weight: 650; line-height: 1.55; }
.about-founder-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0; }
.about-founder-tags span { border: 1px solid var(--line); border-radius: 99px; padding: 7px 11px; color: var(--accent-ink); background: var(--accent-soft); font-size: 9px; font-weight: 750; }
.about-investor-section { padding: 0 0 105px; }
.about-investor-card { position: relative; display: flex; min-height: 330px; align-items: center; justify-content: space-between; gap: 50px; overflow: hidden; border-radius: 27px; padding: 58px 62px; color: #fff; background: radial-gradient(circle at 86% 10%, rgba(42,223,210,.2), transparent 31%), linear-gradient(120deg, #07252c, #0a5050 58%, #08776f 120%); box-shadow: 0 28px 70px rgba(4,66,67,.27); }
.about-investor-card::after { position: absolute; width: 360px; height: 360px; right: -105px; bottom: -265px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; content: ""; }
.about-investor-card > *:not(.about-investor-grid) { position: relative; z-index: 1; }
.about-investor-card > div:first-of-type:not(.about-investor-grid) { max-width: 760px; }
.about-investor-card .eyebrow { color: #7ce9df; }
.about-investor-card h2 { max-width: 760px; margin-bottom: 15px; color: #fff; font-size: clamp(2.25rem, 4vw, 3.7rem); line-height: 1.04; }
.about-investor-card p { max-width: 720px; margin: 0; color: #c9e5e2; font-size: 14px; }
.about-investor-actions { display: flex; min-width: 190px; align-items: stretch; gap: 15px; flex-direction: column; }
.about-investor-link { color: #d3eeeb; font-size: 10px; font-weight: 750; text-align: center; }.about-investor-link:hover { color: #fff; }

/* Staff management */
.management-page { min-width: 320px; background: #edf1f5; }
.management-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 72px; }
.management-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; margin-bottom: 18px; border-radius: 16px; padding: 32px 36px; color: #fff; background: linear-gradient(125deg, #132238 0%, #1b3950 63%, #075f5b 100%); box-shadow: 0 15px 35px rgba(19,34,56,.16); }
.management-hero::after { position: absolute; right: -60px; bottom: -125px; width: 270px; height: 270px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; content: ""; }
.management-hero > * { position: relative; z-index: 1; }
.management-hero h1 { margin-bottom: 7px; }
.management-hero p { max-width: 680px; margin: 0; color: #cbd7e4; }
.management-hero .eyebrow { color: #72d6ce; }
.management-hero .button { border-color: rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.08); }
.management-hero .button:hover { background: rgba(255,255,255,.15); }
.management-hero .button-primary { border-color: #0a9188; background: #0a9188; }
.management-security { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; border: 1px solid #b4ddd3; border-radius: 10px; padding: 11px 14px; color: #235849; background: #f1faf7; }
.management-security-icon { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #23836e; font-weight: 800; }
.management-security div { display: flex; flex-direction: column; }
.management-security span:last-child { color: #52776d; font-size: 12px; }
.management-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.management-stats article { min-width: 0; border: 1px solid #dce2e9; border-radius: 11px; padding: 18px; background: #fff; box-shadow: 0 3px 10px rgba(16,24,40,.035); }
.management-stats article > span { display: block; color: #687588; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.management-stats article > strong { display: block; margin: 7px 0 5px; color: #16243a; font-size: 28px; line-height: 1; }
.management-stats article > small { display: block; overflow: hidden; color: #7d8797; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.management-stats .stat-text { overflow: hidden; font-size: 17px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.project-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.management-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr); gap: 18px; margin-bottom: 18px; }
.management-card { min-width: 0; border: 1px solid #dce2e9; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(16,24,40,.035); }
.management-card > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e6e9ee; padding: 14px 18px; }
.management-card > header .eyebrow { margin-bottom: 2px; font-size: 9px; }
.management-card > header h2 { margin: 0; color: #243149; }
.management-card > header > a { flex: 0 0 auto; font-size: 12px; font-weight: 700; }
.management-table-card { margin-bottom: 18px; }
.table-scroll { overflow-x: auto; }
.management-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.management-table th { color: #6b7688; background: #f8f9fb; font-size: 10px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.management-table th, .management-table td { border-bottom: 1px solid #ebedf1; padding: 12px 18px; white-space: nowrap; }
.management-table tbody tr:last-child td { border-bottom: 0; }
.management-table tbody tr:hover { background: #fbfcfd; }
.management-table td > strong, .management-table td > span { display: block; }
.management-table td > span:not(.management-pill) { color: #7b8595; font-size: 10px; }
.table-action { font-weight: 750; }
.management-pill { display: inline-flex !important; width: max-content; border-radius: 99px; padding: 3px 8px; color: #305b52; background: #e6f4f0; font-size: 9px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.management-pill.staff { color: #334e78; background: #e7edf8; }
.management-pill.inactive, .management-pill.status-failed { color: #8a2922; background: #fdecea; }
.management-pill.status-timeout { color: #7b4d12; background: #fff2d9; }
.management-pill.status-running { color: #24577b; background: #e1f1fa; }
.activity-card { min-height: 292px; }
.chart-legend { display: flex; gap: 12px; color: #647184; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.chart-legend span::before { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 2px; background: #7387a6; content: ""; }
.chart-legend .projects::before { background: #16a096; }
.chart-legend .builds::before { background: #e7a63d; }
.activity-chart { display: grid; height: 220px; grid-template-columns: repeat(7, minmax(34px, 1fr)); gap: 12px; align-items: end; padding: 20px 22px 14px; }
.activity-day { display: grid; height: 100%; grid-template-rows: 1fr auto; gap: 9px; text-align: center; }
.activity-bars { display: flex; align-items: end; justify-content: center; gap: 4px; border-bottom: 1px solid #dfe3e9; }
.activity-bars i { width: min(10px, 26%); height: var(--activity-height); min-height: 0; border-radius: 3px 3px 0 0; background: #7387a6; transition: height .2s; }
.activity-bars .projects { background: #16a096; }
.activity-bars .builds { background: #e7a63d; }
.activity-day > span { color: #778294; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.health-list { padding: 7px 18px; }
.health-list > div, .management-builds > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #edf0f3; padding: 13px 0; }
.health-list > div:last-child, .management-builds > div:last-child { border-bottom: 0; }
.health-list span { display: flex; align-items: center; gap: 8px; color: #4c596d; }
.health-list strong { font-size: 16px; }
.health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #718198; }
.health-dot.success { background: #20916d; }
.health-dot.failed { background: #d65247; }
.health-dot.timeout { background: #d99527; }
.health-dot.running { background: #4189bd; }
.storage-card { margin-bottom: 18px; }
.storage-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.storage-list a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; border-right: 1px solid #ebedf1; border-bottom: 1px solid #ebedf1; padding: 15px 18px; color: #27354a; }
.storage-list a:hover { background: #f8fafb; text-decoration: none; }
.storage-list a:nth-child(3n) { border-right: 0; }
.storage-list span { min-width: 0; }
.storage-list strong, .storage-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-list small { color: #7c8797; }
.storage-list b { flex: 0 0 auto; font-size: 12px; }
.storage-list > p { padding: 18px; }
.management-project-hero { margin-top: 0; }
.management-people, .management-builds { padding: 6px 18px; }
.management-people > div { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #edf0f3; padding: 11px 0; }
.management-people > div:last-of-type { border-bottom: 0; }
.management-people > div > span:last-child, .management-builds span { display: flex; min-width: 0; flex-direction: column; }
.management-people strong, .management-people small, .management-builds strong, .management-builds small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.management-people small, .management-builds small { color: #788496; font-size: 10px; }
.management-builds span { position: relative; padding-left: 17px; }
.management-builds .health-dot { position: absolute; top: 5px; left: 0; }
.management-builds b { color: #596679; font-size: 11px; white-space: nowrap; }

/* Editor */
.editor-page { overflow: hidden; }
.editor-page .site-header { display: none; }
.editor-shell { height: 100vh; display: flex; flex-direction: column; }
.editor-toolbar { flex: 0 0 48px; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; padding: 0 10px; border-bottom: 1px solid #263a57; }
.project-identity, .project-identity > div, .editor-actions, .compile-form { display: flex; align-items: center; gap: 8px; }
.project-identity strong { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-toolbar .role-badge { background: #29405f; color: #cbd8e9; }
.editor-toolbar .button { border-color: #40536e; background: var(--navy-2); color: #fff; }
.editor-toolbar .button-primary { background: var(--teal); border-color: var(--teal); }
.editor-toolbar select { width: 170px; height: 31px; border-color: #40536e; color: #e8edf4; background: var(--navy-2); padding: 3px 7px; font-size: 12px; }
.icon-button { display: inline-grid; place-items: center; width: 31px; height: 31px; padding: 0; color: #dce5f0; background: transparent; border: 0; border-radius: 5px; }
.icon-button:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.comments-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.save-state { color: #b9c4d2; font-size: 11px; white-space: nowrap; }
.save-state.unsaved { color: #ffd580; }
.save-state.conflict { color: #ffaaa3; }
.save-state.conflict a { color: inherit; text-decoration: underline; }
.editor-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--files-width, 190px) 8px var(--source-width, minmax(260px, 1fr)) 8px var(--preview-width, minmax(260px, 1fr)) 8px var(--comments-width, 300px); overflow: hidden; background: #111a28; }
.editor-grid.comments-hidden { grid-template-columns: var(--files-width, 220px) 8px var(--source-width, minmax(360px, 1fr)) 8px var(--preview-width, minmax(360px, 1fr)); }
.editor-grid.comments-hidden .comments-panel, .editor-grid.comments-hidden .comments-resizer { display: none; }
.file-panel { grid-column: 1; }
.panel-resizer[data-resizer="files"] { grid-column: 2; }
.source-panel { grid-column: 3; }
.panel-resizer[data-resizer="source"] { grid-column: 4; }
.preview-panel { grid-column: 5; }
.comments-resizer { grid-column: 6; }
.comments-panel { grid-column: 7; }
.panel { min-width: 0; min-height: 0; background: #fff; }
.panel-resizer { position: relative; z-index: 10; min-width: 8px; cursor: col-resize; background: #202d40; touch-action: none; }
.panel-resizer::after { position: absolute; inset: 0 3px; content: ""; background: #46566c; transition: background .12s, inset .12s; }
.panel-resizer:hover::after, .panel-resizer:focus::after, .panel-resizer.dragging::after { background: #27a69d; }
.panel-resizer:hover::after, .panel-resizer.dragging::after { inset: 0 2px; }
.panel-resizer:focus { outline: 2px solid #67d7ce; outline-offset: -2px; }
body.resizing-panels { cursor: col-resize; user-select: none; }
body.resizing-panels iframe { pointer-events: none; }
.panel-heading { height: 37px; display: flex; flex: 0 0 37px; align-items: center; justify-content: space-between; padding: 0 10px; color: #4c586b; background: #f0f2f5; border-bottom: 1px solid #d5dae2; font-size: 11px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.panel-heading a { color: #55657b; }
.file-panel { display: flex; flex-direction: column; background: #f8f9fb; }
.file-panel-actions { display: flex; align-items: center; gap: 2px; }
.panel-action { display: grid; place-items: center; width: 24px; height: 25px; border: 0; border-radius: 4px; color: #55657b; background: transparent; font-size: 13px; padding: 0; }
.panel-action:hover { background: #dfe4ea; text-decoration: none; }
.file-tree { flex: 1; min-height: 0; overflow: auto; padding: 5px 0; outline: none; }
.file-tree:focus-visible { box-shadow: inset 0 0 0 2px rgba(8,127,120,.35); }
.file-row { display: flex; align-items: center; min-height: 29px; padding: 2px 6px 2px calc(6px + var(--tree-depth) * 14px); color: #344054; font-size: 12px; outline: none; }
.file-row[draggable="false"] { cursor: default; }
.editor-grid[data-can-edit="true"] .file-row { cursor: grab; }
body.internal-drag, body.internal-drag .file-row { cursor: grabbing; user-select: none; }
.file-row:hover, .file-row:focus { background: #edf0f4; text-decoration: none; }
.file-row.active { color: #076e69; background: #dff0ee; font-weight: 700; }
.file-row.selected { box-shadow: inset 0 0 0 1px rgba(8,127,120,.48); }
.file-row.clipboard-cut { opacity: .52; }
.file-row.drag-target { box-shadow: inset 0 0 0 2px var(--teal); background: #e1f3f1; }
.file-row[hidden] { display: none; }
.tree-toggle, .tree-spacer { flex: 0 0 18px; width: 18px; height: 24px; }
.tree-toggle { display: grid; place-items: center; border: 0; padding: 0; color: #667085; background: transparent; font-size: 12px; }
.tree-toggle.collapsed { transform: rotate(-90deg); }
.file-link { display: flex; flex: 1; min-width: 0; align-items: center; gap: 5px; height: 25px; color: inherit; }
.file-link:hover { text-decoration: none; }
.file-icon { flex: 0 0 18px; text-align: center; color: #778397; font-family: Georgia, serif; }
.file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details > summary { cursor: pointer; }
.mini-form { display: grid; gap: 6px; padding: 5px; }
.mini-form input { padding: 6px; font-size: 11px; }
.check-row { display: flex; align-items: center; gap: 6px; margin: 0 !important; }
.check-row input { width: auto; }
.file-drop-zone { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 50px; padding: 7px 8px; border-top: 1px solid #d8dde5; color: #687589; background: #f1f3f6; font-size: 10px; line-height: 1.3; }
.file-drop-zone > span:first-child { min-width: 0; }
.file-drop-zone strong { display: block; color: #445166; }
.file-drop-zone.drag-target { color: #075f5b; background: #dff2ef; box-shadow: inset 0 0 0 2px var(--teal); }
.drop-actions { display: flex; gap: 3px; }
.drop-actions button { border: 1px solid #cbd2dc; border-radius: 4px; background: #fff; color: #425067; padding: 3px 5px; font-size: 9px; }
.source-panel, .preview-panel, .comments-panel { display: flex; flex-direction: column; }
.source-heading { background: #263448; color: #d9e1ec; border-color: #38485f; }
.source-heading > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.source-help-button { display: inline-flex; min-height: 25px; align-items: center; gap: 4px; border: 1px solid #52627a; border-radius: 5px; padding: 2px 7px; color: #d9e1ec; background: #314159; font-size: 10px; font-weight: 750; letter-spacing: 0; text-transform: none; }
.source-help-button:hover, .source-help-button.contextual { border-color: #38a9a1; background: #1d5a5a; }
.jackal-open-button img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.jackal-open-button kbd { border-left-color: #655f83; padding-left: 5px; }
.editor-wrap { position: relative; flex: 1; min-height: 0; background: #212a35; }
.editor-wrap form { height: 100%; }
.editor-wrap textarea { height: 100%; resize: none; border: 0; border-radius: 0; }
.CodeMirror { height: 100%; font: 13px/1.55 "SFMono-Regular", Consolas, monospace; }
.CodeMirror-gutters { border-right-color: #37404a; }
.latex-unknown-command { border-radius: 2px; background: rgba(238, 88, 76, .13); text-decoration: underline wavy #ff756a 1.2px; text-underline-offset: 3px; }
.plain-editor { color: #e8edf2; background: #212a35; font: 13px/1.55 monospace; padding: 12px; }
.editor-suggestions { position: absolute; z-index: 50; left: 55px; top: 42px; width: min(390px, calc(100% - 24px)); max-height: 280px; overflow: auto; border: 1px solid #536274; border-radius: 6px; background: #17212d; box-shadow: 0 8px 25px rgba(0,0,0,.35); }
.editor-suggestions[hidden] { display: none; }
.editor-suggestions button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid #2c3949; padding: 7px 10px; color: #dce6f1; background: transparent; text-align: left; }
.editor-suggestions button:last-child { border-bottom: 0; }
.editor-suggestions button:hover, .editor-suggestions button.active { background: #294057; }
.editor-suggestions code { flex: 0 0 auto; color: #8ce0d8; background: transparent; padding: 0; font-size: 12px; }
.editor-suggestions small { overflow: hidden; color: #aab7c6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.latex-diagnostics { position: absolute; z-index: 42; bottom: 10px; left: 55px; width: min(390px, calc(100% - 70px)); border: 1px solid #d95a52; border-radius: 7px; color: #ffe5e2; background: #4a2225; box-shadow: 0 9px 26px rgba(0,0,0,.35); font-size: 10px; }
.latex-diagnostics[hidden] { display: none; }
.latex-diagnostics > summary { display: flex; align-items: center; gap: 6px; padding: 7px 9px; cursor: pointer; font-weight: 750; list-style: none; }
.latex-diagnostics > summary::-webkit-details-marker { display: none; }
.latex-diagnostics > summary > span:first-child { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #4a2225; background: #ffaaa3; font-weight: 900; }
.latex-diagnostics-body { max-height: 180px; overflow: auto; border-top: 1px solid #754044; padding: 6px 9px 8px; color: #efc8c5; background: #351a1c; }
.latex-diagnostics-body ol { margin: 0; padding-left: 19px; }
.latex-diagnostics-body li { margin: 2px 0; }
.latex-diagnostics-body button { border: 0; padding: 2px; color: #ffd2ce; background: transparent; font: 10px "SFMono-Regular", Consolas, monospace; text-align: left; }
.latex-diagnostics-body button:hover { text-decoration: underline; }
.latex-diagnostics-body p { margin: 6px 0 0; color: #cba7a4; font-size: 9px; }
.latex-help-panel { position: absolute; z-index: 45; top: 10px; right: 10px; width: min(540px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow: auto; border: 1px solid #64748a; border-radius: 9px; color: #dce5ef; background: #17212d; box-shadow: 0 12px 35px rgba(0,0,0,.38); }
.latex-help-panel[hidden] { display: none; }
.latex-help-panel header { position: sticky; z-index: 1; top: 0; display: flex; min-height: 42px; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155; padding: 8px 11px; background: #1e2b3a; }
.latex-help-panel header button { width: 27px; height: 27px; border: 0; border-radius: 5px; color: #cbd5e1; background: transparent; font-size: 19px; }
.latex-help-panel header button:hover { background: #334155; }
#latexHelpContent { padding: 14px; }
#latexHelpContent p { margin-bottom: 12px; color: #c2ccd8; font-size: 11px; }
.latex-help-intro { margin-bottom: 12px; border: 1px solid #365268; border-radius: 7px; padding: 10px 11px; background: #1d3040; }
.latex-help-intro strong { color: #e6f8f6; font-size: 13px; }
.latex-help-intro p { margin: 3px 0 0 !important; }
.latex-help-full-link { display: inline-block; margin-top: 5px; color: #8fe2db; font-size: 10px; font-weight: 750; }
.latex-help-search { position: sticky; z-index: 1; top: 49px; display: block; margin: 0 -2px 14px; padding: 2px; background: #17212d; }
.latex-help-search input { border-color: #496077; padding: 8px 10px; color: #e5edf5; background: #111923; font-size: 11px; }
.latex-help-search input::placeholder { color: #8290a2; }
.latex-help-search input:focus { border-color: #58b8b0; box-shadow: 0 0 0 2px rgba(88,184,176,.17); }
.latex-help-section-title { margin: 15px 0 7px; color: #90e3dc; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.latex-guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.latex-guide-cards.compact { margin-bottom: 5px; }
.latex-guide-card { display: flex; min-width: 0; flex-direction: column; gap: 3px; border: 1px solid #3c4d61; border-radius: 6px; padding: 8px 9px; color: #dbe5ef; background: #202e3d; text-align: left; }
.latex-guide-card:hover, .latex-guide-card:focus { border-color: #459e98; background: #294150; }
.latex-guide-card-category { overflow: hidden; color: #7dbeb8; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.latex-guide-card strong { font-size: 11px; }
.latex-guide-card small { color: #aebac8; font-size: 9px; line-height: 1.35; }
.latex-reference-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.latex-reference-heading .latex-help-section-title { margin-bottom: 2px; }
.latex-reference-heading span > small { color: #8290a2; font-size: 9px; }
.latex-help-small-button { flex: 0 0 auto; border: 1px solid #476276; border-radius: 5px; padding: 4px 7px; color: #9edfd9; background: #203344; font-size: 9px; font-weight: 750; }
.latex-category-list { display: grid; gap: 5px; margin-top: 8px; }
.latex-category-button { display: grid; gap: 1px; border: 0; border-bottom: 1px solid #2f4051; padding: 6px 3px; color: #d7e2ed; background: transparent; text-align: left; }
.latex-category-button:hover { color: #9be1da; }
.latex-category-button strong { font-size: 10px; }
.latex-category-button small { overflow: hidden; color: #8796a8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.latex-search-count { margin: -3px 0 8px; color: #8290a2; font-size: 9px; }
.latex-help-empty { border: 1px dashed #435266; border-radius: 6px; padding: 13px; text-align: center; }
.latex-reference-list { display: grid; gap: 4px; }
.latex-reference-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #35485b; border-radius: 5px; padding: 6px 8px; color: #dce5ef; background: #1d2a38; text-align: left; }
.latex-reference-row:hover { border-color: #459e98; background: #263c4b; }
.latex-reference-main { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.latex-reference-main code { overflow: hidden; color: #93e0d9; background: transparent; padding: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.latex-reference-main small { overflow: hidden; color: #9aa8b7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.latex-reference-package { flex: 0 0 auto; max-width: 120px; overflow: hidden; border-radius: 99px; padding: 2px 5px; color: #a8b6c5; background: #121c27; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.latex-help-page-title, .latex-command-title { margin: 6px 0 5px; color: #e9f3f6; font-size: 17px; line-height: 1.25; }
.latex-command-title { color: #90e3dc; font-family: "SFMono-Regular", Consolas, monospace; }
.latex-help-page-lead { color: #bdc9d6 !important; font-size: 11px !important; }
.latex-help-kicker { margin-top: 5px; color: #76bfb9; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.latex-help-needs { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 13px; border: 1px solid #385268; border-radius: 5px; padding: 7px 8px; color: #8f9daf; background: #1c2c3b; font-size: 9px; }
.latex-help-needs strong { color: #bce8e3; text-align: right; }
.latex-help-detail-title { margin: 13px 0 4px; color: #8f9daf; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
#latexHelpContent .latex-help-code { display: block; margin: 0; overflow-x: auto; border: 1px solid #39495c; border-radius: 5px; padding: 8px 9px; color: #e5edf5; background: #111923; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }
.latex-help-note { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; border-left: 3px solid #4da79f; border-radius: 3px; padding: 7px 9px; color: #aebdcc; background: #1b2d39; font-size: 9px; }
.latex-help-note strong { color: #9fe3dc; }
.latex-help-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.latex-help-back { border: 0; padding: 3px 0; color: #8ddbd5; background: transparent; font-size: 10px; font-weight: 750; }
.latex-help-back:hover { text-decoration: underline; }
.latex-help-insert { border: 1px solid #15948b; border-radius: 5px; padding: 5px 8px; color: #effffd; background: #087f78; font-size: 9px; font-weight: 750; }
.latex-help-details { border: 1px solid #476276; border-radius: 5px; padding: 5px 8px; color: #a8e7e1; background: #203344; font-size: 9px; font-weight: 750; white-space: nowrap; }
.latex-help-details:hover { border-color: #58b8b0; text-decoration: none; }
.latex-guide-steps { margin: 4px 0 12px; padding-left: 21px; color: #c2ccd8; font-size: 10px; }
.latex-guide-steps li { margin-bottom: 6px; padding-left: 2px; }
.latex-help-related { display: flex; flex-wrap: wrap; gap: 5px; }
.latex-help-related button { border: 1px solid #3f576a; border-radius: 4px; padding: 4px 6px; color: #9bded8; background: #1e3040; font: 9px "SFMono-Regular", Consolas, monospace; }

/* Turquoise Jackal keeps generation beside the source and requires review before applying. */
.jackal-panel { --jackal-ink: #123b3a; --jackal-muted: #557675; --jackal-line: #9edbd6; --jackal-soft: #ddf6f2; --jackal-surface: #f4fffd; --jackal-accent: #087f79; position: absolute; z-index: 1100; width: min(520px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: hidden; border: 1px solid var(--jackal-line); border-radius: 16px; color: var(--jackal-ink); background: radial-gradient(circle at 100% 0, rgba(28,206,194,.19), transparent 34%), linear-gradient(150deg, #fbfffe, var(--jackal-surface)); box-shadow: 0 24px 66px rgba(5, 91, 89, .3), 0 0 0 1px rgba(255,255,255,.62) inset; }
.jackal-panel[hidden] { display: none; }
.jackal-header { display: flex; min-height: 55px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--jackal-line); padding: 8px 10px; background: linear-gradient(115deg, #d8f7f3 0%, #e8fffb 62%, #f6fffd 100%); }
.jackal-identity { display: flex; min-width: 0; align-items: center; gap: 9px; }
.jackal-identity > img { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid #43beb6; border-radius: 11px; object-fit: cover; box-shadow: 0 6px 18px rgba(5, 123, 118, .28); }
.jackal-identity > span { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.jackal-identity strong { color: var(--jackal-ink); font-size: 13px; }
.jackal-identity small { color: var(--jackal-muted); font-size: 9px; }
.jackal-header-actions { display: flex; align-items: center; gap: 3px; }
.jackal-header-actions button { min-height: 28px; border: 0; border-radius: 6px; padding: 4px 7px; color: var(--jackal-muted); background: transparent; font-size: 10px; font-weight: 700; }
.jackal-header-actions button:last-child { width: 28px; padding: 0; font-size: 19px; }
.jackal-header-actions button:hover { color: var(--jackal-ink); background: rgba(8,127,121,.1); }
.jackal-body { max-height: calc(100% - 52px); overflow: auto; padding: 13px; }
.jackal-context { margin: 0 0 9px; color: var(--jackal-muted); font-size: 10px; }
.editor-wrap .jackal-form { display: grid; height: auto; gap: 9px; }
.editor-wrap .jackal-form[hidden] { display: none; }
.editor-wrap .jackal-form textarea { width: 100%; height: auto; min-height: 76px; resize: vertical; border: 1px solid var(--jackal-line); border-radius: 10px; padding: 9px 10px; color: var(--jackal-ink); background: rgba(255,255,255,.72); font: 12px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.editor-wrap .jackal-form textarea:focus { border-color: #17a79f; outline: 0; box-shadow: 0 0 0 3px rgba(23,167,159,.16); }
.jackal-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jackal-form-actions > span { color: var(--jackal-muted); font-size: 9px; }
.jackal-panel .button:not(.button-primary) { border-color: var(--jackal-line); color: var(--jackal-ink); background: rgba(255,255,255,.64); }
.jackal-panel .button:not(.button-primary):hover { border-color: #51bdb5; background: rgba(255,255,255,.92); }
.jackal-panel .button-primary { border-color: #087f79; background: linear-gradient(135deg, #12b8ad, #087872); box-shadow: 0 6px 16px rgba(6,121,115,.25); }
.jackal-loading { display: grid; gap: 9px; }
.jackal-loading[hidden], .jackal-review[hidden], .jackal-error[hidden], .jackal-stale[hidden] { display: none; }
.jackal-loading > div { display: flex; align-items: center; gap: 8px; color: var(--jackal-accent); font-size: 11px; }
.jackal-pulse { width: 9px; height: 9px; border-radius: 50%; background: #19cabc; box-shadow: 0 0 0 0 rgba(25,202,188,.48); animation: jackal-pulse 1.4s ease-out infinite; }
@keyframes jackal-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.jackal-loading pre { min-height: 54px; max-height: 160px; overflow: auto; margin: 0; border: 1px solid var(--jackal-line); border-radius: 8px; padding: 9px; color: var(--jackal-ink); background: rgba(255,255,255,.62); font-size: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.jackal-loading > button { justify-self: start; }
.jackal-error, .jackal-stale { margin: 9px 0 0; border-left: 3px solid var(--danger); border-radius: 5px; padding: 7px 9px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--paper)); font-size: 10px; }
.jackal-review { display: grid; gap: 8px; }
.jackal-review-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.jackal-review-heading strong { font-size: 12px; }
.jackal-review-heading span { color: var(--jackal-muted); font-size: 9px; }
.jackal-diff { overflow: hidden; border: 1px solid var(--jackal-line); border-radius: 8px; }
.jackal-diff > span { display: block; border-bottom: 1px solid currentColor; padding: 4px 8px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.jackal-diff pre { max-height: 165px; overflow: auto; margin: 0; padding: 9px; color: var(--ink); background: transparent; font-size: 10px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.jackal-diff-removed { border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--paper)); }
.jackal-diff-removed > span { border-color: color-mix(in srgb, var(--danger) 24%, transparent); color: var(--danger); }
.jackal-diff-added { border-color: color-mix(in srgb, #32a36a 42%, var(--line)); background: color-mix(in srgb, #32a36a 9%, var(--paper)); }
.jackal-diff-added > span { border-color: color-mix(in srgb, #32a36a 28%, transparent); color: color-mix(in srgb, #17844e 85%, var(--ink)); }
.jackal-stale { border-left-color: #c58017; color: color-mix(in srgb, #c58017 82%, var(--ink)); background: color-mix(in srgb, #d79a32 10%, var(--paper)); }
.jackal-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jackal-fix-button { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; margin: 7px 0 2px; border: 1px solid color-mix(in srgb, #14afa5 55%, #b5dad6); border-radius: 7px; padding: 4px 8px; color: #0c615d; background: #e8faf7; font-size: 10px; font-weight: 800; }
.jackal-fix-button:hover { border-color: #0e9d95; background: #d9f5f1; }
.jackal-fix-button img, .editor-context-menu img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.editor-context-menu { width: 230px; }
.editor-context-menu button > span { display: inline-flex; align-items: center; gap: 7px; }
.context-menu-icon { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #7890a9; border-radius: 5px; color: #9de2dd; font-size: 10px; }
:root[data-theme="dark"] .jackal-fix-button { border-color: #347b9c; color: #c5f2f4; background: #12364c; }
:root[data-theme="dark"] .jackal-fix-button:hover { border-color: #4aaec5; background: #17445d; }
:root[data-theme="dark"] .jackal-panel { --jackal-ink: #edf9ff; --jackal-muted: #a3bfd1; --jackal-line: #397892; --jackal-soft: #123b52; --jackal-surface: #0a2536; --jackal-accent: #6ce7e1; border-color: #4085a1; background: radial-gradient(circle at 100% 0, rgba(36,213,204,.2), transparent 37%), radial-gradient(circle at 8% 92%, rgba(31,139,193,.2), transparent 35%), linear-gradient(150deg, #10344d, #081e30); box-shadow: 0 26px 72px rgba(0,8,18,.64), 0 0 0 1px rgba(112,218,239,.1) inset; }
:root[data-theme="dark"] .jackal-header { border-bottom-color: #397892; background: linear-gradient(115deg, #16475d 0%, #123b56 58%, #0c2c43 100%); }
:root[data-theme="dark"] .editor-wrap .jackal-form textarea, :root[data-theme="dark"] .jackal-loading pre { color: var(--jackal-ink); background: rgba(20,10,27,.46); }
:root[data-theme="dark"] .jackal-panel .button:not(.button-primary) { color: var(--jackal-ink); background: rgba(255,255,255,.07); }
:root[data-theme="dark"] .jackal-panel .button:not(.button-primary):hover { background: rgba(255,255,255,.13); }
@media (prefers-reduced-motion: reduce) { .jackal-pulse { animation: none; } }

/* Standalone LaTeX guide */
.latex-guide-page { background: #f1f4f6; }
.guide-shell { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 72px; }
.guide-hero { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 22px; border-radius: 15px; padding: 30px 34px; color: #fff; background: linear-gradient(125deg, #132238 0%, #1b3c52 66%, #08746e 100%); box-shadow: 0 14px 35px rgba(19,34,56,.15); }
.guide-hero .back-link { margin-bottom: 15px; color: #b9e8e3; font-size: 12px; }
.guide-hero .eyebrow { margin-bottom: 7px; color: #79d8d0; }
.guide-hero h1 { margin-bottom: 8px; }
.guide-hero p:last-child { max-width: 780px; margin: 0; color: #d4dee8; }
.guide-counts { display: grid; min-width: 245px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.guide-counts span { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 8px 10px; background: rgba(5,24,39,.2); color: #c7d3df; font-size: 9px; text-transform: uppercase; }
.guide-counts strong { color: #fff; font-size: 18px; line-height: 1.15; }
.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 18px; }
.guide-sidebar { position: sticky; top: 18px; border: 1px solid #d9dfe6; border-radius: 10px; padding: 15px; background: #fff; box-shadow: 0 5px 18px rgba(16,24,40,.045); }
.guide-sidebar > label { display: block; margin-bottom: 6px; color: #344054; font-size: 11px; font-weight: 750; }
.guide-sidebar input { font-size: 12px; }
.guide-tabs { display: grid; gap: 3px; margin-top: 13px; }
.guide-tabs a { border-radius: 6px; padding: 7px 9px; color: #405066; font-size: 12px; font-weight: 680; }
.guide-tabs a:hover, .guide-tabs a.active { color: #076e69; background: #e8f5f3; text-decoration: none; }
.guide-search-results { max-height: min(52vh, 520px); overflow: auto; margin: 11px -5px -5px; border-top: 1px solid #e5e9ee; padding: 8px 5px 2px; }
.guide-search-results[hidden] { display: none; }
.guide-search-results a { display: flex; min-width: 0; flex-direction: column; gap: 1px; border-bottom: 1px solid #edf0f3; padding: 7px 4px; color: #253247; }
.guide-search-results a:hover { color: #08746e; text-decoration: none; }
.guide-search-results code { overflow: hidden; padding: 0; color: inherit; background: transparent; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.guide-search-results small { overflow: hidden; color: #7d8796; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.guide-detail { min-width: 0; min-height: 620px; border: 1px solid #d9dfe6; border-radius: 10px; padding: 30px 34px 40px; background: #fff; box-shadow: 0 5px 18px rgba(16,24,40,.045); }
.guide-breadcrumb { margin-bottom: 10px; color: #687587; font-size: 11px; }
.guide-breadcrumb a { font-weight: 700; }
.guide-detail h2 { margin: 0 0 8px; color: #182438; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; }
.guide-detail h2 code { padding: 0; color: #08746e; background: transparent; }
.guide-detail h3 { margin: 27px 0 9px; color: #253247; font-size: 14px; }
.guide-detail > p, .guide-detail section > p { color: #526073; }
.guide-lead { max-width: 850px; color: #526073; font-size: 15px; }
.guide-meta-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.guide-chip { border-radius: 99px; padding: 4px 8px; color: #3b5962; background: #e7f3f2; font-size: 10px; font-weight: 750; }
.guide-code { overflow-x: auto; border: 1px solid #d6dde5; border-radius: 7px; padding: 13px 14px; color: #e6edf4; background: #17212d; font-size: 12px; line-height: 1.6; white-space: pre; }
.guide-note { margin: 17px 0; border-left: 4px solid #369e96; border-radius: 4px; padding: 11px 13px; color: #405568; background: #edf8f6; }
.guide-options { display: grid; gap: 7px; }
.guide-option { display: grid; grid-template-columns: minmax(135px, .55fr) 1.4fr; gap: 6px 16px; border: 1px solid #e0e5eb; border-radius: 7px; padding: 11px 12px; background: #fafbfc; }
.guide-option strong { color: #253247; font: 11px "SFMono-Regular", Consolas, monospace; }
.guide-option span { color: #596779; font-size: 11px; }
.guide-option code { grid-column: 1 / -1; overflow-x: auto; color: #08746e; background: transparent; font-size: 10px; white-space: pre; }
.guide-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-card { display: flex; min-width: 0; flex-direction: column; gap: 5px; border: 1px solid #dce2e8; border-radius: 8px; padding: 14px; color: #263448; background: #fafbfc; }
.guide-card:hover { border-color: #75b9b3; background: #f6fbfa; text-decoration: none; }
.guide-card small { color: #7b8796; font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.guide-card strong code { padding: 0; color: #08746e; background: transparent; }
.guide-card span { color: #657184; font-size: 11px; }
.guide-steps { padding-left: 22px; color: #526073; }
.guide-steps li { margin: 7px 0; padding-left: 3px; }
.guide-empty { border: 1px dashed #cdd5de; border-radius: 8px; padding: 24px; color: #697586; text-align: center; }
.revision-drawer { flex: 0 0 auto; max-height: 150px; overflow: auto; border-top: 1px solid #cfd5de; background: #f7f8fa; font-size: 11px; }
.revision-drawer > summary { padding: 6px 10px; font-weight: 700; }
.revision-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; border-top: 1px solid #e4e7eb; }
.revision-list form, .comment-actions form { display: inline; margin: 0; }
.file-menu { position: relative; }
.file-menu summary { list-style: none; cursor: pointer; }
.popover { position: absolute; z-index: 30; right: 0; top: 24px; width: 230px; padding: 8px; color: var(--ink); background: #fff; border: 1px solid #d2d8e1; border-radius: 7px; box-shadow: var(--shadow); text-transform: none; letter-spacing: 0; }
.asset-preview, .preview-empty { flex: 1; min-height: 0; display: grid; place-content: center; justify-items: center; padding: 30px; color: var(--muted); text-align: center; }
.asset-preview img { max-width: 90%; max-height: 65vh; margin-bottom: 18px; object-fit: contain; box-shadow: 0 3px 15px rgba(0,0,0,.12); }
.preview-panel { background: #414952; }
.pdf-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #59616a; }
.preview-empty { color: #d7dce2; }
.build-alert { flex: 0 0 auto; max-height: 45%; overflow: auto; padding: 9px 11px; color: #651b16; background: #fff1ef; border-bottom: 1px solid #eeaaa4; font-size: 11px; }
.build-alert > strong, .build-alert > span, .build-alert > small { display: block; }
.build-alert > span { margin: 2px 0; }
.clickable-error { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
.build-alert small { color: #7b514d; }
.build-alert details { margin-top: 4px; }
.build-alert pre { max-height: 180px; overflow: auto; white-space: pre-wrap; font-size: 10px; }
.build-status-ok { flex: 0 0 auto; padding: 5px 10px; color: #27633d; background: #e8f6ed; border-bottom: 1px solid #aed8bc; font-size: 10px; }
.comments-panel { background: #f8f9fb; }
.comments-panel .panel-heading .icon-button { color: #667085; }
.comment-form { flex: 0 0 auto; display: grid; gap: 6px; padding: 10px; background: #fff; border-bottom: 1px solid #d8dde5; }
.comment-form textarea { resize: vertical; min-height: 58px; padding: 7px; font-size: 11px; }
.comment-form button { justify-self: end; }
.line-anchor, .comment-lines { color: var(--teal); font-size: 10px; font-weight: 750; }
.comment-list { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.comment-card { margin-bottom: 8px; border: 1px solid #d8dde5; border-left: 4px solid hsl(var(--comment-hue), 58%, 42%); border-radius: 7px; background: #fff; padding: 9px; outline: 0; transition: box-shadow .18s, border-color .18s; }
.comment-card:focus-visible { box-shadow: 0 0 0 3px hsla(var(--comment-hue), 65%, 48%, .23); }
.comment-card-emphasized { border-color: hsl(var(--comment-hue), 58%, 42%); box-shadow: 0 0 0 3px hsla(var(--comment-hue), 65%, 48%, .24); }
.comment-card.resolved { opacity: .65; background: #f3f4f6; }
.comment-card header, .comment-reply header { display: flex; align-items: center; gap: 7px; }
.comment-avatar { width: 25px; height: 25px; color: hsl(var(--comment-hue), 55%, 27%); background: hsl(var(--comment-hue), 55%, 90%); font-size: 10px; }
.comment-card header div, .comment-reply header div { display: flex; min-width: 0; flex-direction: column; }
.comment-card header strong, .comment-reply header strong { overflow: hidden; color: #263245; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.comment-card > header strong { color: hsl(var(--comment-hue), 58%, 31%); }
.comment-card time, .comment-reply time { color: var(--muted); font-size: 9px; }
.comment-card p { margin: 7px 0; font-size: 11px; overflow-wrap: anywhere; }
.comment-reference { display: block; width: 100%; margin: 8px 0 3px; border: 0; border-radius: 6px; padding: 7px 8px; color: hsl(var(--comment-hue), 58%, 29%); background: hsla(var(--comment-hue), 64%, 50%, .1); font-size: 10px; font-weight: 720; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.comment-reference:hover { background: hsla(var(--comment-hue), 64%, 50%, .17); }
.comment-reference > span { margin-right: 3px; font: 800 15px Georgia, serif; }
.comment-reference small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 650; }
.comment-reference small:empty { display: none; }
.comment-anchor-missing .comment-reference { color: var(--muted); background: var(--soft); text-decoration: line-through; text-decoration-thickness: 1px; }
.comment-linked-highlight { border-radius: 3px; background: hsla(var(--comment-hue), 78%, 52%, .28); box-shadow: inset 0 -2px 0 hsl(var(--comment-hue), 62%, 43%); }
.comment-actions { display: flex; gap: 8px; }
.link-button { border: 0; background: transparent; color: var(--teal); padding: 0; font-size: 10px; font-weight: 700; }
.danger-text { color: var(--danger); }
.comment-reply { margin: 8px 0 0 18px; padding: 7px 0 0 7px; border-top: 1px solid #e4e7eb; border-left: 2px solid hsl(var(--comment-hue), 50%, 70%); }
.reply-box { margin-top: 8px; color: var(--muted); font-size: 10px; }
.reply-box form { display: grid; gap: 5px; margin-top: 5px; }
.reply-box textarea { padding: 6px; font-size: 10px; resize: vertical; }
.reply-box button { justify-self: end; }
.comment-empty { padding-top: 45px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.context-menu { position: fixed; z-index: 500; display: grid; width: 205px; padding: 5px; border: 1px solid #536174; border-radius: 6px; color: #e8edf5; background: #202b3b; box-shadow: 0 12px 32px rgba(0,0,0,.32); }
.context-menu[hidden] { display: none; }
.context-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 29px; border: 0; border-radius: 3px; padding: 4px 8px; color: inherit; background: transparent; text-align: left; font-size: 12px; }
.context-menu button:hover, .context-menu button:focus { background: #33445c; outline: none; }
.context-menu button:disabled { color: #8490a1; cursor: default; }
.context-menu button:disabled:hover { background: transparent; }
.context-menu .danger-text { color: #ffaaa3; }
.context-menu kbd { margin-left: auto; border: 0; padding: 0; color: #aeb9c7; }
.context-separator { display: block; height: 1px; margin: 4px 3px; background: #425168; }

.workspace-dialog { width: min(440px, calc(100% - 28px)); border: 1px solid #cbd2dc; border-radius: 10px; padding: 0; color: var(--ink); background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.workspace-dialog::backdrop { background: rgba(10,18,30,.58); }
.workspace-dialog form { display: grid; gap: 8px; padding: 18px; }
.workspace-dialog label { margin-top: 5px; color: #344054; font-size: 12px; font-weight: 700; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-heading h2 { margin: 0; }
.dialog-heading button { width: 28px; height: 28px; border: 0; border-radius: 5px; color: #657185; background: transparent; font-size: 20px; }
.dialog-heading button:hover { background: #eef1f4; }
.dialog-help { margin: 0; color: var(--muted); font-size: 11px; }
.dialog-error { min-height: 18px; color: var(--danger); font-size: 11px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.workspace-notice { position: fixed; z-index: 700; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: min(520px, calc(100% - 30px)); border: 1px solid #6bc4bd; border-radius: 7px; padding: 9px 13px; color: #e9fffd; background: #075f5b; box-shadow: var(--shadow); font-size: 12px; }
.workspace-notice.error { border-color: #e7a49e; color: #fff4f3; background: #8d221a; }
.workspace-drop-overlay { position: fixed; z-index: 650; inset: 58px 14px 14px; display: grid; place-items: center; border: 3px dashed #35b9ae; border-radius: 12px; color: #eafffd; background: rgba(8, 47, 62, .84); pointer-events: none; }
.workspace-drop-overlay[hidden] { display: none; }
.workspace-drop-overlay > div { display: grid; gap: 5px; justify-items: center; border-radius: 10px; padding: 22px 30px; background: rgba(9, 83, 83, .88); box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.workspace-drop-overlay strong { font-size: 18px; }
.workspace-drop-overlay span { color: #c7f4f0; font-size: 12px; }
body.external-drag iframe { pointer-events: none; }
.file-drag-ghost { position: fixed; z-index: 800; max-width: 300px; overflow: hidden; border: 1px solid #64d1c8; border-radius: 5px; padding: 6px 10px; color: #effffd; background: #15394a; box-shadow: 0 8px 24px rgba(0,0,0,.32); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }

/* Shared surface and theme refinements */
.auth-page .page-shell { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 40px 0; }

.management-page, .latex-guide-page { background: var(--canvas); }
.management-hero, .guide-hero { border: 1px solid rgba(73,213,203,.24); border-radius: 20px; background: radial-gradient(circle at 90% 10%, rgba(42,219,207,.16), transparent 30%), linear-gradient(125deg, #07242b 0%, #0b4548 63%, #08746e 120%); box-shadow: 0 20px 50px rgba(4,60,62,.23); }
.management-hero::after { border-color: rgba(255,255,255,.1); }
.management-hero p, .guide-hero p:last-child { color: #c9e4e1; }
.management-hero .eyebrow, .guide-hero .eyebrow { color: #7ce9df; }
.management-hero .button-primary { border-color: #0a9d96; background: #0a9d96; }
.management-security { border-color: color-mix(in srgb, #55b987 35%, var(--line)); border-radius: 13px; color: var(--ink); background: color-mix(in srgb, #55b987 10%, var(--paper)); }
.management-security span:last-child { color: var(--muted); }
.management-stats article, .management-card { border-color: var(--line); border-radius: 15px; background: var(--paper); box-shadow: var(--shadow-sm); }
.management-stats article > span, .management-stats article > small, .chart-legend, .activity-day > span, .management-people small, .management-builds small, .management-builds b, .storage-list small { color: var(--muted); }
.management-stats article > strong, .management-card > header h2 { color: var(--ink); }
.management-card > header, .management-table th, .management-table td, .health-list > div, .management-builds > div, .management-people > div, .storage-list a { border-color: var(--line); }
.management-table th { color: var(--muted); background: var(--soft); }
.management-table tbody tr:hover, .storage-list a:hover { background: var(--soft); }
.management-table td > span:not(.management-pill) { color: var(--muted); }
.health-list span, .storage-list a { color: var(--ink); }
.management-pill { color: var(--accent-ink); background: var(--accent-soft); }
.management-pill.staff { color: #5474b8; background: color-mix(in srgb, #6f8bd1 14%, var(--paper)); }
.activity-bars { border-color: var(--line); }

.guide-sidebar, .guide-detail { border-color: var(--line); border-radius: 15px; background: var(--paper); box-shadow: var(--shadow-sm); }
.guide-sidebar > label, .guide-detail h2, .guide-detail h3 { color: var(--ink); }
.guide-tabs a { color: var(--muted); }
.guide-tabs a:hover, .guide-tabs a.active { color: var(--accent-ink); background: var(--accent-soft); }
.guide-search-results { border-color: var(--line); }
.guide-search-results a { border-color: var(--line); color: var(--ink); }
.guide-search-results a:hover, .guide-detail h2 code, .guide-card strong code, .guide-option code { color: var(--teal); }
.guide-search-results small, .guide-breadcrumb, .guide-detail > p, .guide-detail section > p, .guide-lead, .guide-option span, .guide-card span, .guide-steps, .guide-empty { color: var(--muted); }
.guide-chip { color: var(--accent-ink); background: var(--accent-soft); }
.guide-note { border-color: var(--teal); color: var(--ink); background: var(--accent-soft); }
.guide-option, .guide-card { border-color: var(--line); color: var(--ink); background: var(--soft); }
.guide-card:hover { border-color: color-mix(in srgb, var(--teal) 50%, var(--line)); background: var(--accent-soft); }
.guide-option strong { color: var(--ink); }
.guide-card small { color: var(--muted); }
.guide-empty { border-color: var(--line); }

.editor-toolbar { flex-basis: 54px; border-bottom-color: #22454a; padding: 0 12px; background: linear-gradient(100deg, #061b21, #0b3439); }
.editor-brand-mark { flex: 0 0 auto; }
.editor-toolbar .button { border-color: #31555a; border-radius: 8px; color: #eefbf9; background: #10383d; box-shadow: none; }
.editor-toolbar .button:hover { border-color: #4b8584; background: #17494e; transform: none; }
.editor-toolbar .button-primary { border-color: #0a9d96; background: #0a9d96; }
.editor-toolbar select { border-color: #31555a; border-radius: 8px; color: #e5f5f3; background: #10383d; }
.editor-toolbar .role-badge { color: #a9e6e0; background: #17474b; }
.editor-theme-toggle { display: inline-grid; place-items: center; }
.editor-theme-toggle .theme-icon { grid-area: 1 / 1; }
.editor-grid, .editor-grid.comments-hidden { background: #06171c; }
.panel-resizer { background: #0c252b; }
.panel-resizer::after { background: #28494d; }
.panel-resizer:hover::after, .panel-resizer:focus::after, .panel-resizer.dragging::after { background: #2fd6c9; }
.panel { color: var(--ink); background: var(--paper); }
.panel-heading { border-color: var(--line); color: var(--muted); background: var(--soft); }
.panel-heading a, .panel-action { color: var(--muted); }
.panel-action:hover { color: var(--ink); background: var(--accent-soft); }
.file-panel { background: var(--paper); }
.file-tree:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--teal) 40%, transparent); }
.file-row { color: var(--ink); }
.file-row:hover, .file-row:focus { background: var(--soft); }
.file-row.active { color: var(--accent-ink); background: var(--accent-soft); }
.file-row.selected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 50%, transparent); }
.file-row.drag-target { background: var(--accent-soft); }
.tree-toggle, .file-icon { color: var(--muted); }
.file-drop-zone { border-color: var(--line); color: var(--muted); background: var(--soft); }
.file-drop-zone strong { color: var(--ink); }
.file-drop-zone.drag-target { color: var(--accent-ink); background: var(--accent-soft); }
.drop-actions button { border-color: var(--line); color: var(--ink); background: var(--paper); }
.source-heading { border-color: #315158; color: #e2f4f2; background: #12343a; }
.source-help-button { border-color: #3e686d; border-radius: 7px; color: #dff3f0; background: #194148; }
.source-help-button:hover, .source-help-button.contextual { border-color: #38c4bb; background: #17645f; }
.editor-wrap { background: #fff; }
.CodeMirror { font-size: 13px; line-height: 1.6; }
.cm-s-default.CodeMirror { color: #173535; background: #fff; }
.cm-s-default .CodeMirror-gutters { border-right-color: #dfebe9; background: #f5faf9; }
.cm-s-default .CodeMirror-linenumber { color: #9aafad; }
.plain-editor { color: #173535; background: #fff; }
.preview-panel { background: #354b4e; }
.preview-empty h2 { color: #effbf9; }
.editor-page .message-stack { top: auto; bottom: 14px; left: 14px; width: min(400px, calc(100% - 28px)); transform: none; }
.revision-drawer { border-color: var(--line); color: var(--ink); background: var(--soft); }
.revision-list > div { border-color: var(--line); }
.popover, .workspace-dialog { border-color: var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); }
.workspace-dialog label { color: var(--ink); }
.dialog-heading button { color: var(--muted); }
.dialog-heading button:hover { background: var(--soft); }
.comments-panel { background: var(--soft); }
.comments-panel .panel-heading .icon-button { color: var(--muted); }
.comment-form, .comment-card { border-color: var(--line); background: var(--paper); }
.comment-card.resolved { background: var(--soft); }
.comment-card header strong, .comment-reply header strong { color: var(--ink); }
.comment-card > header strong { color: hsl(var(--comment-hue), 58%, 31%); }
.comment-reply { border-color: var(--line); }

:root[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--paper) 88%, transparent); }
:root[data-theme="dark"] .landing-page .site-header { background: transparent; }
:root[data-theme="dark"] .button-primary { border-color: #29bec4; color: #031c2b; background: linear-gradient(135deg, #20c7bd, #168fbd); box-shadow: 0 8px 24px rgba(17,113,157,.3); }
:root[data-theme="dark"] .button-primary:hover { border-color: #3bd1d2; color: #031c2b; background: linear-gradient(135deg, #2dd5cb, #22a4cf); }
:root[data-theme="dark"] .landing-hero { background: radial-gradient(circle at 18% 22%, rgba(38,207,198,.16), transparent 31%), radial-gradient(circle at 82% 30%, rgba(28,143,190,.22), transparent 30%), linear-gradient(180deg, #071827, var(--canvas)); }
:root[data-theme="dark"] .showcase-window { border-color: #2e5872; box-shadow: 0 35px 85px rgba(0,0,0,.48); }
:root[data-theme="dark"] .showcase-note { background: rgba(11,34,51,.94); }
:root[data-theme="dark"] .jackal-hero-card { border-color: #36839b; color: #fff; background: linear-gradient(135deg, rgba(13,55,75,.98), rgba(8,34,55,.97)); box-shadow: 0 26px 62px rgba(0,0,0,.52); }
:root[data-theme="dark"] .jackal-hero-copy > span { color: #62e2d8; }
:root[data-theme="dark"] .jackal-hero-copy strong { color: #f1f9ff; }
:root[data-theme="dark"] .jackal-hero-copy small { color: #b2cad9; }
:root[data-theme="dark"] .dashboard-hero { border-color: #285c76; background: radial-gradient(circle at 92% 8%, rgba(40,214,205,.2), transparent 34%), radial-gradient(circle at 15% 100%, rgba(27,128,185,.22), transparent 38%), linear-gradient(125deg, #071a2a 0%, #0d3658 60%, #08706e 128%); box-shadow: 0 20px 54px rgba(0,35,67,.34); }
:root[data-theme="dark"] .auth-showcase { background: radial-gradient(circle at 86% 14%, rgba(37,215,205,.2), transparent 32%), radial-gradient(circle at 8% 88%, rgba(29,132,190,.22), transparent 36%), linear-gradient(145deg, #071a2a 0%, #0d3759 62%, #08716e 125%); }
:root[data-theme="dark"] .cta-card, :root[data-theme="dark"] .about-investor-card { background: radial-gradient(circle at 88% 10%, rgba(43,220,210,.2), transparent 32%), radial-gradient(circle at 8% 92%, rgba(30,137,194,.22), transparent 34%), linear-gradient(125deg, #071a2b, #0e3a5d 64%, #08736f 125%); box-shadow: 0 27px 68px rgba(0,39,72,.34); }
:root[data-theme="dark"] .about-vision-card { border-color: #285b73; background: radial-gradient(circle at 83% 18%, rgba(35,214,204,.25), transparent 31%), radial-gradient(circle at 14% 82%, rgba(30,137,194,.24), transparent 29%), linear-gradient(145deg, #071927, #0d334e 62%, #0b465b); box-shadow: 0 35px 80px rgba(0,35,63,.38); }
:root[data-theme="dark"] .management-hero, :root[data-theme="dark"] .guide-hero { border-color: rgba(82,174,211,.3); background: radial-gradient(circle at 90% 10%, rgba(42,219,207,.17), transparent 30%), radial-gradient(circle at 10% 100%, rgba(28,128,185,.2), transparent 35%), linear-gradient(125deg, #071a2b 0%, #0e395a 65%, #08716e 124%); box-shadow: 0 20px 52px rgba(0,34,65,.34); }
:root[data-theme="dark"] .cv-hero { border-color: #285d77; background: radial-gradient(circle at 82% 20%, rgba(36,214,204,.22), transparent 28%), radial-gradient(circle at 8% 88%, rgba(29,133,191,.22), transparent 34%), linear-gradient(128deg, #071a2a 0%, #0d385a 60%, #08726f 130%); box-shadow: 0 28px 72px rgba(0,37,70,.36); }
:root[data-theme="dark"] .cv-source-aside { background: radial-gradient(circle at 88% 8%, rgba(34,207,198,.16), transparent 30%), linear-gradient(145deg, #081b2c, #0d405d); }
:root[data-theme="dark"] .management-pill.inactive, :root[data-theme="dark"] .management-pill.status-failed { color: #ffb0b4; background: #45252e; }
:root[data-theme="dark"] .management-pill.status-timeout { color: #f5ce8b; background: #453522; }
:root[data-theme="dark"] .management-pill.status-running { color: #9bd0f1; background: #20384b; }
:root[data-theme="dark"] .management-security-icon { background: #408c70; }
:root[data-theme="dark"] .editor-toolbar { border-bottom-color: #244861; background: linear-gradient(100deg, #061827, #0c2e49); }
:root[data-theme="dark"] .editor-toolbar .button, :root[data-theme="dark"] .editor-toolbar select { border-color: #315873; color: #edf8ff; background: #11324b; }
:root[data-theme="dark"] .editor-toolbar .button:hover { border-color: #4b819d; background: #194660; }
:root[data-theme="dark"] .editor-toolbar .button-primary { border-color: #29bec4; color: #031c2b; background: linear-gradient(135deg, #20c7bd, #168fbd); }
:root[data-theme="dark"] .editor-toolbar .role-badge { color: #b9e8ef; background: #17415a; }
:root[data-theme="dark"] .editor-grid, :root[data-theme="dark"] .editor-grid.comments-hidden { background: #051522; }
:root[data-theme="dark"] .panel-resizer { background: #0a2134; }
:root[data-theme="dark"] .panel-resizer::after { background: #294c65; }
:root[data-theme="dark"] .source-heading { border-color: #315873; color: #e7f5fc; background: #12344e; }
:root[data-theme="dark"] .source-help-button { border-color: #3e6b85; color: #e2f5f8; background: #19445e; }
:root[data-theme="dark"] .source-help-button:hover, :root[data-theme="dark"] .source-help-button.contextual { border-color: #3fbac2; background: #176072; }
:root[data-theme="dark"] .cm-s-material-darker.CodeMirror { background: #081d2c; }
:root[data-theme="dark"] .cm-s-material-darker .CodeMirror-gutters { border-right-color: #27475e; background: #0b2233; }
:root[data-theme="dark"] .editor-wrap, :root[data-theme="dark"] .plain-editor { color: #e9f6fd; background: #081d2c; }
:root[data-theme="dark"] .build-status-ok { border-color: #335744; color: #a9e3be; background: #1d3528; }
:root[data-theme="dark"] .build-alert { border-color: #633d42; color: #ffd1ce; background: #412528; }
:root[data-theme="dark"] .build-alert small { color: #d9aaa7; }
:root[data-theme="dark"] .comment-avatar { color: #123333; }
:root[data-theme="dark"] .comment-card > header strong { color: hsl(var(--comment-hue), 67%, 75%); }
:root[data-theme="dark"] .comment-reference { color: hsl(var(--comment-hue), 70%, 78%); background: hsla(var(--comment-hue), 70%, 56%, .14); }
:root[data-theme="dark"] .comment-linked-highlight { background: hsla(var(--comment-hue), 76%, 58%, .32); box-shadow: inset 0 -2px 0 hsl(var(--comment-hue), 72%, 67%); }
:root[data-theme="dark"] .guide-code { border-color: #31536b; background: #071925; }

@media (max-width: 1180px) {
  .hero-layout { grid-template-columns: minmax(0, .85fr) minmax(500px, 1.15fr); gap: 45px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .editor-grid { grid-template-columns: var(--files-width, 150px) 8px var(--source-width, minmax(220px, 1fr)) 8px var(--preview-width, minmax(220px, 1fr)) 8px var(--comments-width, 270px); }
  .editor-grid.comments-hidden { grid-template-columns: var(--files-width, 180px) 8px var(--source-width, minmax(300px, 1fr)) 8px var(--preview-width, minmax(300px, 1fr)); }
  .guide-hero { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 1040px) {
  .landing-hero { padding-top: 135px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { max-width: 720px; text-align: center; margin: 0 auto; }
  .hero-copy .hero-kicker, .hero-actions, .hero-assurances { justify-content: center; }
  .product-showcase { width: min(760px, 100%); margin: 10px auto 0; }
  .feature-editor, .feature-compile { grid-column: span 3; }
  .feature-projects, .feature-collab, .feature-themes { grid-column: span 2; }
  .workflow-layout { grid-template-columns: 1fr 1.1fr; gap: 50px; }
  .landing-tools-layout { grid-template-columns: 1fr; gap: 35px; }
  .auth-layout { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); }
  .auth-showcase-content { padding: 42px; }
  .about-hero-layout { grid-template-columns: 1fr; }
  .about-hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }
  .about-hero-copy .hero-kicker, .about-hero-copy .hero-actions { justify-content: center; }
  .about-hero-visual { width: min(680px, 100%); margin: 15px auto 0; }
}
@media (max-width: 850px) {
  .editor-grid { --comments-width: 290px !important; grid-template-columns: var(--files-width, 145px) 8px minmax(340px, 1fr) var(--comments-width); overflow-x: auto; }
  .editor-grid.comments-hidden { grid-template-columns: var(--files-width, 145px) 8px minmax(340px, 1fr); }
  .comments-panel { grid-column: 4; }
  .preview-panel, [data-resizer="source"], .comments-resizer { display: none; }
}
@media (max-width: 800px) {
  .account-email, .save-state, .editor-toolbar #saveButton, .editor-toolbar select { display: none; }
  .page-shell { width: min(100% - 24px, 700px); padding-top: 28px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .project-grid { grid-template-columns: 1fr; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; padding: 29px; }
  .dashboard-hero-aside { width: 100%; grid-template-columns: auto 1fr; align-items: center; }
  .share-form { grid-template-columns: 1fr; }
  .management-shell { width: min(100% - 24px, 700px); padding-top: 20px; }
  .management-hero { align-items: flex-start; flex-direction: column; padding: 25px; }
  .management-hero .button-row { width: 100%; }
  .management-stats, .project-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-columns { grid-template-columns: 1fr; }
  .storage-list { grid-template-columns: 1fr; }
  .storage-list a, .storage-list a:nth-child(3n) { border-right: 0; }
  .chart-legend { display: none; }
  .project-identity strong { max-width: 110px; }
  .guide-shell { width: min(100% - 24px, 700px); padding-top: 20px; }
  .guide-hero { padding: 24px; }
  .guide-counts { width: 100%; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-sidebar { position: static; }
  .guide-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-detail { min-height: 0; padding: 24px; }
  .site-header-inner, .landing-container { width: min(100% - 28px, 700px); }
  .header-link, .account-email, .theme-label { display: none; }
  .landing-page .public-signin { display: inline-flex; }
  .landing-hero { padding: 122px 0 80px; }
  .jackal-hero-card { right: 14px; }
  .showcase-body { height: 390px; }
  .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-grid > div { border-bottom: 1px solid var(--line); }
  .strip-grid > div:nth-child(2n) { border-right: 0; }
  .landing-section { padding: 82px 0; }
  .feature-editor, .feature-compile, .feature-projects, .feature-collab { grid-column: span 3; }
  .feature-themes { grid-column: 1 / -1; }
  .workflow-layout { grid-template-columns: 1fr; gap: 25px; }
  .cta-card { align-items: flex-start; flex-direction: column; padding: 42px; }
  .about-section { padding: 84px 0; }
  .about-now-grid, .about-founder-layout { grid-template-columns: 1fr; }
  .about-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-roadmap-grid { grid-template-columns: 1fr; }
  .about-roadmap-card { min-height: 0; }
  .about-journey-line { align-items: flex-start; flex-direction: column; }
  .about-journey-line strong { text-align: left; }
  .about-founder-portrait { width: min(500px, 100%); }
  .about-investor-section { padding-bottom: 82px; }
  .about-investor-card { align-items: flex-start; flex-direction: column; padding: 44px; }
  .about-investor-actions { width: 100%; }
  .auth-shell { width: min(100% - 24px, 600px); padding: 28px 0; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  .auth-layout .auth-card { min-height: 0; border-radius: 20px; padding: 38px; }
}
@media (max-width: 520px) {
  .site-header-inner { width: calc(100% - 24px); }
  .account-email { display: none; }
  .auth-card, .form-card { padding: 22px; }
  .button-row { flex-wrap: wrap; }
  .template-grid { grid-template-columns: 1fr; }
  .member-row { flex-wrap: wrap; padding: 10px 0; }
  .management-stats, .project-stats { grid-template-columns: 1fr; }
  .management-security { align-items: flex-start; }
  .activity-chart { gap: 5px; padding-inline: 12px; }
  .source-help-button { padding-inline: 5px; }
  .source-help-button span { display: none; }
  .jackal-open-button kbd { display: none; }
  .jackal-body { padding: 10px; }
  .jackal-review-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .latex-diagnostics { left: 10px; width: calc(100% - 20px); }
  .guide-card-grid { grid-template-columns: 1fr; }
  .guide-option { grid-template-columns: 1fr; }
  .guide-option code { grid-column: 1; }
  .brand small, .header-cta { display: none; }
  .account-nav { gap: 4px; }
  .landing-page .public-signin { display: inline-flex; }
  .landing-hero { padding-top: 112px; }
  .product-showcase { padding-top: 170px; }
  .jackal-hero-card { right: auto; left: 50%; width: min(340px, calc(100% - 12px)); grid-template-columns: 132px minmax(0, 1fr); transform: translateX(-50%) rotate(1deg); }
  .hero-copy h1 { font-size: clamp(2.9rem, 15vw, 4.1rem); }
  .hero-copy > p { font-size: 14px; }
  .hero-actions .button { width: 100%; }
  .hero-assurances { display: grid; gap: 7px; }
  .showcase-body { height: 340px; grid-template-columns: 49% 51%; }
  .showcase-files { display: none; }
  .paper-preview { width: 80%; height: 265px; margin-top: 18px; padding: 28px 17px; }
  .note-build, .note-comment { display: none; }
  .strip-grid > div { min-height: 92px; padding: 16px 13px; }
  .landing-section { padding: 68px 0; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h2, .landing-cta h2 { font-size: 2.35rem; }
  .feature-bento { grid-template-columns: 1fr; }
  .feature-editor, .feature-compile, .feature-projects, .feature-collab, .feature-themes { grid-column: 1; }
  .feature-card { min-height: 0; padding: 23px; }
  .build-demo { flex-direction: column; }
  .cta-card { min-height: 0; border-radius: 20px; padding: 32px 25px; }
  .cta-card .button { width: 100%; }
  .about-hero { padding: 75px 0 78px; }
  .about-hero-copy h1 { font-size: clamp(3rem, 15vw, 4.2rem); }
  .about-hero-copy .button { width: 100%; }
  .about-hero-visual { min-height: 475px; }
  .about-vision-card { inset: 30px 7% 30px; padding: 34px 29px; }
  .about-vision-mark { width: 90px; height: 90px; margin-bottom: 27px; border-radius: 23px; }
  .about-orbit-chip { font-size: 9px; }
  .chip-documents { right: 0; }.chip-profile { left: 0; top: 48%; }.chip-opportunities { right: 0; }
  .about-section { padding: 68px 0; }
  .about-now-card, .about-belief-card { border-radius: 19px; padding: 25px; }
  .about-feature-list { grid-template-columns: 1fr; }
  .about-roadmap-card { padding: 25px; }
  .about-journey-line strong { display: grid; gap: 4px; }.about-journey-line i { display: none; }
  .about-founder-layout { gap: 48px; }
  .about-founder-image-wrap { border-radius: 23px; padding: 7px; }
  .about-founder-image-wrap img { border-radius: 17px; }
  .about-investor-card { min-height: 0; border-radius: 21px; padding: 34px 25px; }
  .about-investor-card .button { width: 100%; }
  .landing-footer .landing-container { align-items: flex-start; flex-wrap: wrap; }
  .landing-footer p { flex-basis: calc(100% - 70px); }
  .landing-footer .landing-container > div { width: 100%; }
  .dashboard-shell { width: calc(100% - 24px); }
  .dashboard-hero { min-height: 0; margin-bottom: 27px; border-radius: 18px; padding: 24px; }
  .dashboard-hero h1 { font-size: 2.2rem; }
  .dashboard-hero-aside { grid-template-columns: 1fr; }
  .project-heading .button-row, .project-heading .button { width: 100%; }
  .project-organiser { align-items: stretch; flex-direction: column; }.folder-create-form { min-width: 0; width: 100%; }
  .project-folder-heading { align-items: flex-start; }.project-folder-heading > div { flex-wrap: wrap; }.project-folder-heading form .button { width: auto; }
  .project-card-preview { height: 105px; }
  .auth-layout .auth-card { padding: 27px 22px; }
  .editor-brand-mark, .editor-toolbar .role-badge { display: none; }
  .editor-toolbar { padding: 0 6px; }
  .editor-actions { gap: 4px; }
  .editor-grid { --files-width: 120px !important; grid-template-columns: 120px 8px minmax(275px, 1fr) var(--comments-width); }
  .editor-grid.comments-hidden { grid-template-columns: 120px 8px minmax(275px, 1fr); }
}

/* Turquoise Jackal CV creator */
.cv-page { background: radial-gradient(circle at 92% 2%, color-mix(in srgb, #23c8bd 11%, transparent), transparent 26%), radial-gradient(circle at 5% 28%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 25%), var(--canvas); }
.cv-shell { width: min(1180px, calc(100% - 40px)); }
.cv-hero { position: relative; display: grid; min-height: 430px; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); align-items: center; gap: 60px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--teal) 32%, #153f42); border-radius: 28px; padding: 64px 72px; color: #fff; background: radial-gradient(circle at 82% 20%, rgba(33,213,201,.22), transparent 27%), linear-gradient(128deg, #071f26 0%, #0b4649 58%, #08756f 130%); box-shadow: 0 28px 70px rgba(4,65,67,.27); }
.cv-hero::after { position: absolute; width: 370px; height: 370px; right: -120px; bottom: -190px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: ""; }
.cv-hero-copy { position: relative; z-index: 1; max-width: 680px; }
.cv-hero .eyebrow { color: #76e8de; }
.cv-hero h1 { max-width: 650px; margin-bottom: 18px; color: #fff; font-size: clamp(3rem, 5.5vw, 5.25rem); line-height: .98; }
.cv-hero p { max-width: 620px; color: #cae5e2; font-size: 15px; }
.cv-trust-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 25px; color: #bfe0dc; font-size: 10px; font-weight: 700; }
.cv-trust-row span::first-letter { color: #78dfbd; }
.cv-hero-paper { position: relative; z-index: 1; width: min(300px, 100%); height: 365px; margin: 0 auto; transform: rotate(3deg); border-radius: 6px; padding: 55px 35px; background: #fff; box-shadow: 0 34px 55px rgba(3,3,19,.35); }
.cv-hero-paper::before { position: absolute; inset: 14px; border: 1px solid #e6e4eb; content: ""; }
.cv-hero-paper span, .cv-hero-paper b, .cv-hero-paper i { position: relative; display: block; height: 5px; margin-bottom: 10px; border-radius: 4px; background: #d8d7df; }
.cv-hero-paper .cv-paper-name { width: 60%; height: 12px; margin: 0 auto 8px; background: #164f4d; }
.cv-hero-paper .cv-paper-contact { width: 78%; height: 4px; margin: 0 auto 29px; background: #908aa7; }
.cv-hero-paper i { width: 33%; height: 7px; margin: 21px 0 12px; background: #0da39b; }
.cv-hero-paper b:nth-of-type(2), .cv-hero-paper b:nth-of-type(5) { width: 84%; }
.cv-hero-paper b:nth-of-type(3) { width: 72%; }
.cv-hero-paper em { position: absolute; right: 25px; bottom: 20px; color: #0b968f; font: 800 12px Georgia, serif; }
.cv-choice-section { padding: 76px 0 35px; }
.compact-heading { max-width: 650px; margin-bottom: 28px; }
.compact-heading h2 { font-size: clamp(2rem, 4vw, 3rem); }
.cv-workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cv-workflow-card { position: relative; display: flex; min-height: 315px; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; padding: 28px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cv-workflow-card::after { position: absolute; width: 150px; height: 150px; right: -80px; top: -80px; border-radius: 50%; background: color-mix(in srgb, var(--teal) 8%, transparent); content: ""; }
.cv-workflow-card:hover { border-color: color-mix(in srgb, var(--teal) 50%, var(--line)); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-4px); }
.cv-workflow-number { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.cv-workflow-icon { display: grid; width: 51px; height: 51px; place-items: center; margin: 30px 0 24px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #19bdb2, #087972); box-shadow: 0 9px 23px rgba(8,127,120,.24); font-size: 21px; }
.cv-workflow-improve .cv-workflow-icon { background: linear-gradient(145deg, #37cbbf, #118d87); }
.cv-workflow-tailor .cv-workflow-icon { background: linear-gradient(145deg, #3b9da1, #236d76); }
.cv-workflow-card > strong { margin-bottom: 9px; font-size: 20px; letter-spacing: -.025em; }
.cv-workflow-card > span:not(.cv-workflow-number, .cv-workflow-icon) { color: var(--muted); font-size: 12px; }
.cv-workflow-card > b { margin-top: auto; padding-top: 22px; color: var(--teal); font-size: 11px; }
.cv-process-strip { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin-top: 35px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: var(--shadow-sm); }
.cv-process-strip > div { position: relative; display: grid; min-height: 105px; grid-template-columns: 34px 1fr; align-content: center; border-right: 1px solid var(--line); padding: 20px 25px; }
.cv-process-strip > div:last-child { border: 0; }
.cv-process-strip span { grid-row: span 2; color: var(--teal); font-weight: 850; }
.cv-process-strip strong { font-size: 13px; }.cv-process-strip small { color: var(--muted); font-size: 10px; }
.cv-flow-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 28px; }
.cv-flow-heading > div:first-child { max-width: 720px; }.cv-flow-heading h1 { margin-bottom: 10px; }.cv-flow-heading p { margin: 0; color: var(--muted); }
.cv-step-indicator { display: flex; min-width: 300px; align-items: center; justify-content: flex-end; gap: 7px; }
.cv-step-indicator > span { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--paper); font-size: 10px; font-weight: 850; }
.cv-step-indicator > span.done, .cv-step-indicator > span.active { border-color: var(--teal); color: #fff; background: var(--teal); }
.cv-step-indicator i { width: 35px; height: 1px; background: var(--line); }
.cv-step-indicator small { position: absolute; margin-top: 54px; color: var(--muted); font-size: 8px; font-weight: 650; }
.cv-source-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); align-items: start; gap: 20px; }
.cv-form-card, .cv-source-aside { border: 1px solid var(--line); border-radius: 19px; padding: 32px; background: var(--paper); box-shadow: var(--shadow-sm); }
.cv-details-form { display: grid; gap: 20px; }
.cv-card-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.cv-card-heading h2 { margin: 1px 0 4px; font-size: 19px; }.cv-card-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.cv-card-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: var(--accent-ink); background: var(--accent-soft); font-size: 13px; font-weight: 850; }
.cv-form-card > label, .cv-field-grid label, .cv-source-pair label { display: block; margin: 15px 0 6px; color: var(--ink); font-size: 10px; font-weight: 780; }
.cv-source-aside { position: sticky; top: 90px; color: #fff; background: linear-gradient(145deg, #08262d, #0c5151); }
.cv-source-aside .eyebrow { color: #79e8de; }.cv-source-aside h2 { color: #fff; font-size: 24px; }.cv-source-aside p { margin: 22px 0 0; color: #c2dedb; font-size: 10px; }
.cv-source-aside ul { margin: 27px 0 0; padding: 0; list-style: none; }.cv-source-aside li { display: grid; gap: 3px; border-bottom: 1px solid rgba(255,255,255,.1); padding: 14px 0; }.cv-source-aside li strong { font-size: 12px; }.cv-source-aside li span { color: #bdb8cf; font-size: 10px; }
.cv-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 10px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.cv-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.cv-source-pair, .cv-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }.cv-field-grid-project { grid-template-columns: .8fr 1.2fr; }
.cv-privacy-note, .cv-fact-promise { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line)); border-radius: 12px; padding: 14px; background: var(--accent-soft); }.cv-privacy-note > span, .cv-fact-promise > span { color: var(--teal); font-weight: 850; }.cv-privacy-note p, .cv-fact-promise p { margin: 0; color: var(--muted); font-size: 10px; }.cv-privacy-note strong, .cv-fact-promise strong { color: var(--ink); }
.cv-notice { margin-bottom: 18px; border-left: 3px solid var(--teal); border-radius: 0 12px 12px 0; padding: 14px 18px; color: var(--muted); background: var(--paper); box-shadow: var(--shadow-sm); font-size: 11px; }.cv-notice strong { color: var(--ink); }.cv-notice p { margin: 4px 0 0; }.cv-notice ul { margin: 6px 0 0; padding-left: 18px; }.cv-notice-warning { border-color: #d09135; }
.cv-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.cv-section-editor { align-self: start; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); }.cv-section-editor[open] { grid-column: span 2; background: var(--paper); }.cv-section-editor summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; font-size: 11px; font-weight: 750; }.cv-section-editor summary small { color: var(--muted); font-size: 8px; font-weight: 650; text-transform: uppercase; }.cv-section-editor > div { border-top: 1px solid var(--line); padding: 12px; }.cv-section-editor textarea { min-height: 125px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.cv-template-picker { min-width: 0; border: 0; padding: 0; }.cv-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cv-template-card { position: relative; display: grid; min-width: 0; grid-template-columns: 125px 1fr; gap: 17px; border: 1px solid var(--line); border-radius: 15px; padding: 13px; background: var(--soft); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }.cv-template-card:hover { border-color: color-mix(in srgb, var(--template-accent) 50%, var(--line)); transform: translateY(-2px); }.cv-template-card.selected { border-color: var(--template-accent); background: color-mix(in srgb, var(--template-accent) 7%, var(--paper)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--template-accent) 14%, transparent); }.cv-template-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cv-template-visual { position: relative; display: block; height: 166px; overflow: hidden; border-radius: 4px; padding: 37px 17px 15px; background: #fff; box-shadow: 0 7px 18px rgba(25,22,55,.13); }.cv-template-visual::before { position: absolute; height: 7px; width: 48%; left: 17px; top: 20px; background: var(--template-accent); content: ""; }.cv-template-visual i, .cv-template-visual b, .cv-template-visual em { display: block; height: 3px; margin-bottom: 8px; border-radius: 3px; background: #d3d3d9; }.cv-template-visual i { width: 38%; height: 5px; margin-top: 10px; background: var(--template-accent); }.cv-template-visual b:nth-of-type(2) { width: 80%; }.cv-template-visual em { width: 55%; }.cv-template-visual strong { position: absolute; right: 9px; bottom: 6px; color: var(--template-accent); font: 700 8px Georgia, serif; }.cv-template-visual-professional { padding-top: 59px; }.cv-template-visual-professional::before { inset: 0 0 auto; width: 100%; height: 47px; }.cv-template-visual-technical::before { width: calc(100% - 34px); height: 2px; top: 33px; }.cv-template-visual-academic::before { left: 28%; width: 44%; height: 5px; }
.cv-template-copy { display: flex; min-width: 0; flex-direction: column; padding: 5px 0; }.cv-template-name { display: flex; align-items: center; justify-content: space-between; gap: 5px; }.cv-template-name strong { font-size: 16px; }.cv-template-name small { border-radius: 99px; padding: 3px 6px; color: var(--template-accent); background: color-mix(in srgb, var(--template-accent) 10%, var(--paper)); font-size: 7px; font-weight: 800; text-transform: uppercase; }.cv-template-copy > b { margin: 4px 0 9px; color: var(--template-accent); font-size: 9px; text-transform: uppercase; }.cv-template-copy > span:not(.cv-template-name) { color: var(--muted); font-size: 10px; }.cv-template-copy button { align-self: flex-start; margin-top: auto; border: 0; padding: 8px 0 0; color: var(--template-accent); background: transparent; font-size: 9px; font-weight: 800; }
.cv-top-error { border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: 12px; padding: 13px; background: color-mix(in srgb, var(--danger) 7%, var(--paper)); }
.cv-preview-dialog { width: min(900px, calc(100% - 30px)); height: min(90vh, 900px); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; padding: 0; color: var(--ink); background: var(--paper); box-shadow: 0 35px 90px rgba(0,0,0,.35); }.cv-preview-dialog::backdrop { background: rgba(11,9,27,.72); backdrop-filter: blur(5px); }.cv-preview-heading { display: flex; height: 73px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 13px 18px; }.cv-preview-heading .eyebrow { margin: 0; }.cv-preview-heading h2 { margin: 2px 0 0; }.cv-preview-heading button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: var(--soft); font-size: 20px; }.cv-preview-dialog iframe { width: 100%; height: calc(100% - 73px); border: 0; background: #53505a; }
.cv-progress { position: fixed; z-index: 2500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(10,8,25,.74); backdrop-filter: blur(8px); }.cv-progress[hidden] { display: none; }.cv-progress > div { display: grid; width: min(430px, 100%); justify-items: center; gap: 10px; border: 1px solid #554d78; border-radius: 18px; padding: 35px; color: #fff; background: #211b39; box-shadow: 0 28px 80px rgba(0,0,0,.45); text-align: center; }.cv-progress strong { font-size: 17px; }.cv-progress small { color: #c3bdd3; }
.cv-editor-context { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid color-mix(in srgb, #17a9a0 38%, var(--line)); padding: 6px 11px; color: #086d68; background: #e5f8f5; font-size: 9px; }.cv-editor-context span { font-weight: 850; }.cv-editor-context small { overflow: hidden; color: #47716f; text-overflow: ellipsis; white-space: nowrap; }.cv-editor-context code { color: inherit; background: rgba(255,255,255,.55); }
:root[data-theme="dark"] .cv-editor-context { border-color: #346d87; color: #82e5e2; background: #12364d; }.cv-editor-context small { color: inherit; }

@media (max-width: 900px) {
  .cv-hero { grid-template-columns: 1fr; padding: 50px; }.cv-hero-copy { text-align: center; }.cv-hero-copy h1, .cv-hero-copy p { margin-inline: auto; }.cv-trust-row { justify-content: center; }.cv-hero-paper { display: none; }
  .cv-workflow-grid { grid-template-columns: 1fr; }.cv-workflow-card { min-height: 245px; }.cv-workflow-icon { margin-block: 20px; }
  .cv-flow-heading { align-items: flex-start; flex-direction: column; }.cv-step-indicator { min-width: 0; justify-content: flex-start; margin-bottom: 12px; }
  .cv-source-layout { grid-template-columns: 1fr; }.cv-source-aside { position: static; }
  .cv-template-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cv-shell { width: calc(100% - 24px); }.cv-hero { min-height: 0; border-radius: 20px; padding: 37px 24px; }.cv-hero h1 { font-size: 3rem; }.cv-trust-row { display: grid; }
  .cv-choice-section { padding-top: 52px; }.cv-workflow-card { padding: 23px; }.cv-process-strip { grid-template-columns: 1fr; }.cv-process-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .cv-form-card, .cv-source-aside { border-radius: 15px; padding: 21px; }.cv-source-pair, .cv-field-grid, .cv-field-grid-project { grid-template-columns: 1fr; }
  .cv-section-grid { grid-template-columns: 1fr; }.cv-section-editor[open] { grid-column: 1; }
  .cv-template-card { grid-template-columns: 92px 1fr; gap: 13px; }.cv-template-visual { height: 135px; padding-inline: 12px; }.cv-template-visual::before { left: 12px; }.cv-template-visual-technical::before { width: calc(100% - 24px); }.cv-template-copy > span:not(.cv-template-name) { display: none; }
  .cv-step-indicator small { display: none; }.cv-flow-heading { gap: 17px; }
}

/* Document conversion and PDF editing tools */
.document-tools-shell { width: min(1220px, calc(100% - 40px)); }
.document-tools-hero { position: relative; display: grid; min-height: 330px; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); align-items: center; gap: 40px; overflow: hidden; margin-bottom: 28px; border: 1px solid #1a6673; border-radius: 26px; padding: 54px 58px; color: #eafffc; background: radial-gradient(circle at 90% 10%, rgba(45,225,213,.23), transparent 32%), linear-gradient(130deg, #061b2a, #0c3c58 62%, #08736f); box-shadow: 0 27px 68px rgba(0,52,79,.22); }
.document-tools-hero h1 { max-width: 760px; margin-bottom: 16px; color: #fff; font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: 1; }
.document-tools-hero p { max-width: 720px; margin: 0; color: #c6e6e6; font-size: 14px; }
.document-tools-hero .eyebrow { color: #69e1d8; }
.document-tools-trust { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 24px; color: #bfe8e5; font-size: 10px; font-weight: 750; }
.document-tools-hero-mark { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; transform: rotate(2deg); }
.document-tools-hero-mark span, .document-tools-hero-mark em { display: grid; min-height: 105px; place-items: center; border: 1px solid rgba(143,240,232,.36); border-radius: 17px; color: #fff; background: rgba(5,24,38,.58); box-shadow: 0 16px 35px rgba(0,0,0,.24); font: 800 15px "SFMono-Regular", Consolas, monospace; }
.document-tools-hero-mark i { color: #68e1da; font-size: 24px; font-style: normal; }
.document-tools-hero-mark b { position: absolute; left: 50%; bottom: -30px; color: #69e1d8; font-size: 22px; }
.document-tools-hero-mark em { position: absolute; width: 122px; min-height: 48px; left: calc(50% - 61px); bottom: -63px; border-radius: 99px; background: #0a827d; font: 800 11px inherit; }
.document-trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--teal) 42%, var(--line)); border-radius: 15px; padding: 15px 18px; background: var(--accent-soft); }
.document-trial-banner > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.document-trial-banner strong { color: var(--accent-ink); font-size: 12px; }.document-trial-banner span { color: var(--muted); font-size: 10px; }
.document-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.document-tool-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--line); border-radius: 21px; padding: 31px; background: var(--paper); box-shadow: var(--shadow-sm); }
.document-tool-card > header { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.document-tool-card h2 { margin: 2px 0 0; font-size: 25px; }
.document-tool-card > p { min-height: 65px; color: var(--muted); font-size: 11px; }
.document-tool-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: var(--accent-ink); background: var(--accent-soft); font-size: 20px; font-weight: 800; }
.document-tool-card-editor .document-tool-icon { color: #f2fbff; background: linear-gradient(145deg, #168d9a, #10617d); }
.document-tool-card form { display: grid; gap: 9px; margin-top: 17px; }
.document-tool-card form label { margin-top: 7px; color: var(--ink); font-size: 10px; font-weight: 780; }
.document-tool-card form .button { justify-self: start; margin-top: 9px; }
.document-tool-progress { margin: 0; color: var(--teal); font-size: 10px; font-weight: 750; }
.document-tool-detail { margin-top: 21px; border-top: 1px solid var(--line); padding-top: 15px; color: var(--muted); font-size: 10px; }
.document-tool-detail summary { color: var(--ink); cursor: pointer; font-weight: 750; }
.redaction-primer { display: grid; gap: 8px; margin-top: 22px; }
.redaction-primer > div { display: grid; grid-template-columns: 64px 1fr; gap: 9px; border-radius: 9px; padding: 9px 11px; color: var(--muted); background: var(--soft); font-size: 9px; }
.redaction-primer strong { color: var(--ink); }
.document-history { margin-top: 56px; }
.document-history-list { display: grid; gap: 13px; }
.document-history-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--paper); box-shadow: var(--shadow-sm); }
.document-history-main { display: flex; align-items: center; gap: 13px; }
.document-history-main h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.document-history-main p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.document-quality-notes { margin: 14px 0; border-left: 3px solid #d09135; border-radius: 0 9px 9px 0; padding: 10px 13px; color: var(--muted); background: var(--soft); font-size: 9px; }
.document-quality-notes ul { margin: 4px 0 0; padding-left: 17px; }
.document-result-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; }
.document-result-row form { margin-left: auto; }
.compact-empty { padding: 42px 20px; }

.pdf-editor-page { overflow: hidden; }
.pdf-editor-shell { height: calc(100vh - 68px); height: calc(100dvh - 68px); min-height: 620px; }
.pdf-editor-csrf { display: none; }
.pdf-editor-app { display: grid; height: 100%; grid-template-rows: auto auto minmax(0, 1fr); color: var(--ink); background: var(--canvas); }
.pdf-editor-topbar { display: grid; min-height: 66px; grid-template-columns: minmax(240px, 1fr) auto minmax(420px, 1fr); align-items: center; gap: 15px; border-bottom: 1px solid var(--line); padding: 9px 16px; background: var(--paper); }
.pdf-editor-title { display: flex; min-width: 0; align-items: center; gap: 14px; }
.pdf-editor-title .back-link { margin: 0; white-space: nowrap; }
.pdf-editor-title > div { display: grid; min-width: 0; }
.pdf-editor-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-editor-title span { color: var(--muted); font-size: 8px; }
.pdf-editor-navigation, .pdf-editor-actions { display: flex; align-items: center; gap: 7px; }
.pdf-editor-navigation label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.pdf-editor-navigation input { width: 55px; padding: 6px; text-align: center; }
.pdf-editor-navigation .icon-button { width: 31px; height: 31px; font-size: 19px; }
.pdf-editor-actions { justify-content: flex-end; }
.pdf-editor-actions > span { min-width: 42px; color: var(--muted); text-align: center; font-size: 9px; font-weight: 750; }
.pdf-editor-status { min-height: 31px; border-bottom: 1px solid var(--line); padding: 7px 17px; color: #0a706b; background: var(--accent-soft); font-size: 9px; font-weight: 700; }
.pdf-editor-status.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--paper)); }
.pdf-editor-notices { min-height: 0; }
.pdf-editor-source-warning { display: flex; flex-wrap: wrap; gap: 7px 18px; border-bottom: 1px solid color-mix(in srgb, #d09135 30%, var(--line)); padding: 7px 17px; color: color-mix(in srgb, #b47925 78%, var(--ink)); background: color-mix(in srgb, #d09135 8%, var(--paper)); font-size: 8px; }
.pdf-editor-workspace { position: relative; display: grid; min-height: 0; grid-template-columns: 72px minmax(0, 1fr) 278px; }
.pdf-tool-panel { position: relative; z-index: 20; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: var(--paper); }
.pdf-property-panel { min-width: 0; min-height: 0; max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border-left: 1px solid var(--line); padding: 15px; background: var(--paper); }
.pdf-tool-rail { display: flex; height: 100%; flex-direction: column; gap: 4px; overflow-x: hidden; overflow-y: auto; padding: 9px 7px; }
.pdf-tool-rail button { display: grid; min-height: 54px; place-items: center; gap: 2px; border: 1px solid transparent; border-radius: 10px; padding: 5px 2px; color: var(--muted); background: transparent; }
.pdf-tool-rail button:hover, .pdf-tool-rail button.active, .pdf-tool-rail button[aria-expanded="true"] { border-color: color-mix(in srgb, var(--teal) 32%, var(--line)); color: var(--accent-ink); background: var(--accent-soft); }
.pdf-tool-rail button > span { font-size: 19px; line-height: 1; }.pdf-tool-rail small { font-size: 8px; font-weight: 750; }
.pdf-tool-drawer { position: absolute; z-index: 30; width: 270px; max-height: calc(100% - 16px); left: calc(100% + 8px); top: 8px; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; padding: 15px; background: var(--paper); box-shadow: 0 20px 55px rgba(6,36,43,.24); }
.pdf-tool-drawer[hidden], .pdf-tool-drawer [hidden] { display: none; }
.pdf-tool-drawer header { position: sticky; z-index: 2; top: -15px; display: flex; align-items: flex-start; justify-content: space-between; margin: -15px -15px 12px; border-bottom: 1px solid var(--line); padding: 13px 15px; background: var(--paper); }
.pdf-tool-drawer h2 { margin: 2px 0 0; font-size: 16px; }.pdf-tool-drawer section > p { margin: 0 0 12px; color: var(--muted); font-size: 9px; }
.pdf-tool-drawer section > button, .pdf-shape-grid button { display: flex; width: 100%; min-height: 39px; align-items: center; gap: 9px; margin: 5px 0; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); background: var(--paper); text-align: left; font-size: 10px; font-weight: 720; }
.pdf-tool-drawer section > button:hover, .pdf-tool-drawer section > button.active, .pdf-shape-grid button:hover, .pdf-shape-grid button.active { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); background: var(--accent-soft); }
.pdf-tool-drawer section > button span, .pdf-shape-grid button span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; color: var(--accent-ink); background: var(--soft); font-size: 14px; }
.pdf-tool-drawer section > .pdf-palette-primary { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); color: var(--accent-ink); background: var(--accent-soft); }
.pdf-tool-drawer section > .pdf-redact-tool { color: #a33939; }.pdf-shape-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }.pdf-shape-grid button { display: grid; place-items: center; text-align: center; }
.pdf-palette-fields { display: grid; gap: 7px; margin-top: 15px; border-top: 1px solid var(--line); padding-top: 13px; }.pdf-palette-fields > strong { color: var(--muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.pdf-palette-fields label { display: grid; grid-template-columns: 1fr 110px; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 720; }.pdf-palette-fields input, .pdf-palette-fields select { min-width: 0; padding: 6px; font-size: 9px; }
.pdf-page-viewport { min-width: 0; min-height: 0; overflow: auto; padding: 32px; background: #314a50; }
.pdf-page-wrapper { position: relative; margin: 0 auto; }
.pdf-page-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.35); user-select: none; }
.pdf-page-stage > img { position: absolute; width: 100%; height: 100%; inset: 0; display: block; pointer-events: none; }
.pdf-overlay-layer { position: absolute; z-index: 2; inset: 0; cursor: default; touch-action: none; }
.pdf-overlay-layer[data-active-tool="select"] { cursor: default; }
.pdf-overlay-layer[data-active-tool="text"] { cursor: text; }
.pdf-overlay-layer[data-active-tool="image"], .pdf-overlay-layer[data-active-tool="signature"] { cursor: copy; }
.pdf-overlay-layer[data-active-tool="eraser"] { cursor: pointer; }
.pdf-overlay-layer[data-active-tool="rectangle"], .pdf-overlay-layer[data-active-tool="ellipse"], .pdf-overlay-layer[data-active-tool="line"], .pdf-overlay-layer[data-active-tool="arrow"], .pdf-overlay-layer[data-active-tool="freehand"], .pdf-overlay-layer[data-active-tool="cover"], .pdf-overlay-layer[data-active-tool="redact"] { cursor: crosshair; }
.pdf-overlay-layer.is-moving { cursor: grabbing; }.pdf-overlay-layer.is-resizing { cursor: nwse-resize; }
.pdf-element { position: absolute; z-index: 2; overflow: hidden; border: 1px dashed rgba(11,143,137,.62); background: rgba(255,255,255,.03); cursor: grab; white-space: pre-wrap; overflow-wrap: anywhere; }
.pdf-overlay-layer:not([data-active-tool="select"]):not([data-active-tool="eraser"]) .pdf-element { pointer-events: none; }
.pdf-overlay-layer[data-active-tool="eraser"] .pdf-element { cursor: pointer; }
.pdf-overlay-layer.is-moving .pdf-element.selected { cursor: grabbing; }
.pdf-element.selected { z-index: 4; outline: 2px solid #10a9a1; outline-offset: 2px; }
.pdf-element-text { padding: 0; line-height: 1.25; }
.pdf-text-content { width: 100%; height: 100%; overflow: hidden; padding: 7px; outline: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pdf-text-content.is-editing { cursor: text; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 28%, transparent); user-select: text; }
.pdf-element-image img, .pdf-element-signature img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pdf-element-signature { background: rgba(255,255,255,.3); }
.pdf-element-redact { display: grid; place-items: center; border: 2px solid #b32736; color: #fff; background: repeating-linear-gradient(135deg, rgba(164,23,41,.83) 0 8px, rgba(102,11,25,.88) 8px 16px); font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.pdf-element-cover { display: grid; place-items: center; border-color: #c79638; color: #75571d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.pdf-element-rectangle, .pdf-element-ellipse, .pdf-element-line, .pdf-element-arrow, .pdf-element-freehand { background: transparent; }
.pdf-element > svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pdf-resize-handle { position: absolute; z-index: 5; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 3px; padding: 0; background: #0b8f89; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
.pdf-resize-handle.handle-nw { left: 0; top: 0; cursor: nwse-resize; }.pdf-resize-handle.handle-n { left: calc(50% - 6px); top: 0; cursor: ns-resize; }.pdf-resize-handle.handle-ne { right: 0; top: 0; cursor: nesw-resize; }
.pdf-resize-handle.handle-e { right: 0; top: calc(50% - 6px); cursor: ew-resize; }.pdf-resize-handle.handle-se { right: 0; bottom: 0; cursor: nwse-resize; }.pdf-resize-handle.handle-s { left: calc(50% - 6px); bottom: 0; cursor: ns-resize; }
.pdf-resize-handle.handle-sw { left: 0; bottom: 0; cursor: nesw-resize; }.pdf-resize-handle.handle-w { left: 0; top: calc(50% - 6px); cursor: ew-resize; }
.pdf-properties-empty { padding: 28px 5px; color: var(--muted); text-align: center; font-size: 9px; }
.pdf-properties-empty strong { color: var(--ink); font-size: 12px; }
.pdf-properties-empty > .button { margin-top: 10px; }
.pdf-shortcut-list { display: grid; gap: 5px; margin: 20px 0 0; border-top: 1px solid var(--line); padding-top: 12px; text-align: left; }.pdf-shortcut-list div { display: flex; justify-content: space-between; gap: 8px; }.pdf-shortcut-list dt { color: var(--ink); font-weight: 750; }.pdf-shortcut-list dd { margin: 0; font-family: "SFMono-Regular", Consolas, monospace; }
.pdf-property-panel [data-properties] > header { position: sticky; z-index: 6; top: -15px; display: flex; align-items: center; justify-content: space-between; margin: -15px -15px 14px; border-bottom: 1px solid var(--line); padding: 15px; background: var(--paper); }
.pdf-property-panel [data-properties] h2 { margin: 2px 0 0; font-size: 16px; }
.pdf-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pdf-property-panel label { display: grid; gap: 4px; margin: 9px 0; color: var(--muted); font-size: 8px; font-weight: 750; }
.pdf-property-panel input, .pdf-property-panel select, .pdf-property-panel textarea { padding: 7px 8px; font-size: 10px; }
.pdf-style-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pdf-style-row label { display: flex; align-items: center; gap: 5px; }
.pdf-style-row input[type="checkbox"] { width: auto; }
.pdf-style-row input[type="color"], [data-shape-properties] input[type="color"] { height: 31px; padding: 2px; }
.pdf-lock-aspect { display: flex !important; align-items: center; gap: 7px !important; }.pdf-lock-aspect input { width: auto; }
[data-image-crop-properties] { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 12px; }[data-image-crop-properties] > strong { font-size: 10px; }[data-image-crop-properties] > p { margin: 3px 0 8px; color: var(--muted); font-size: 8px; }[data-image-crop-properties] label { grid-template-columns: 45px 1fr; align-items: center; }[data-image-crop-properties] input { padding: 0; }
.pdf-property-note { margin-top: 14px; border-radius: 9px; padding: 10px; color: var(--muted); background: var(--soft); font-size: 8px; }
.pdf-property-note:empty { display: none; }
.pdf-object-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }.pdf-object-actions + .pdf-object-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }.pdf-object-actions .button { min-width: 0; padding-inline: 5px; font-size: 8px; }
.pdf-signature-dialog, .pdf-export-dialog, .pdf-auth-dialog { width: min(820px, calc(100% - 30px)); border: 1px solid var(--line); border-radius: 18px; padding: 20px; color: var(--ink); background: var(--paper); box-shadow: 0 32px 90px rgba(0,0,0,.45); }
.pdf-signature-dialog::backdrop, .pdf-export-dialog::backdrop, .pdf-auth-dialog::backdrop { background: rgba(3,15,25,.72); backdrop-filter: blur(6px); }
.pdf-signature-dialog header, .pdf-export-dialog header, .pdf-auth-dialog header { display: flex; align-items: center; justify-content: space-between; }
.pdf-signature-dialog h2, .pdf-export-dialog h2, .pdf-auth-dialog h2 { margin: 2px 0; }
.pdf-signature-dialog p { color: var(--muted); font-size: 10px; }
.pdf-signature-dialog canvas { width: 100%; height: 260px; border: 1px dashed #91aaa8; border-radius: 11px; background: #fff; cursor: crosshair; touch-action: none; }
.pdf-signature-dialog .button-row, .pdf-export-dialog .button-row, .pdf-auth-dialog .button-row { justify-content: flex-end; margin-top: 14px; }
.pdf-auth-dialog { width: min(540px, calc(100% - 30px)); }.pdf-auth-dialog > p { color: var(--muted); font-size: 11px; line-height: 1.65; }
.pdf-export-dialog { height: min(90vh, 900px); }
.pdf-export-dialog iframe { width: 100%; height: calc(100% - 150px); border: 1px solid var(--line); border-radius: 9px; background: #3c4c52; }
.pdf-export-warnings { max-height: 75px; overflow: auto; margin: 7px 0; color: var(--muted); font-size: 8px; }
.pdf-export-warnings p { margin: 3px 0; }
.pdf-context-menu { position: fixed; z-index: 1100; display: grid; width: 205px; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: var(--paper); box-shadow: 0 18px 50px rgba(3,26,32,.32); }
.pdf-context-menu[hidden], .pdf-context-menu button[hidden] { display: none; }.pdf-context-menu button { display: flex; min-height: 35px; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 7px; padding: 7px 9px; color: var(--ink); background: transparent; text-align: left; font-size: 10px; font-weight: 700; }.pdf-context-menu button:hover, .pdf-context-menu button:focus-visible { outline: 0; background: var(--accent-soft); }.pdf-context-menu button.danger { margin-top: 3px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; color: var(--danger); }.pdf-context-menu kbd { margin-left: auto; }

@media (max-width: 1100px) {
  .pdf-editor-topbar { grid-template-columns: minmax(220px, 1fr) auto; }
  .pdf-editor-actions { grid-column: span 2; justify-content: center; border-top: 1px solid var(--line); padding-top: 7px; }
  .pdf-editor-workspace { grid-template-columns: 68px minmax(0, 1fr) 245px; }
}
@media (max-width: 900px) {
  .document-tools-hero { grid-template-columns: 1fr; padding: 42px; }
  .document-tools-hero-mark { display: none; }
  .document-tools-grid { grid-template-columns: 1fr; }
  .document-tool-card > p { min-height: 0; }
  .pdf-editor-page { overflow: auto; }
  .pdf-editor-shell { height: auto; min-height: calc(100vh - 68px); }
  .pdf-editor-app { min-height: calc(100vh - 68px); }
  .pdf-editor-workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(520px, 65vh) auto; }
  .pdf-tool-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .pdf-tool-rail { height: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 7px; }.pdf-tool-rail button { min-width: 59px; min-height: 50px; }
  .pdf-tool-drawer { width: min(330px, calc(100vw - 20px)); max-height: 410px; left: 10px; top: calc(100% + 8px); }
  .pdf-property-panel { max-height: 320px; border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 620px) {
  .document-tools-shell { width: calc(100% - 24px); }
  .document-tools-hero { min-height: 0; border-radius: 20px; padding: 34px 24px; }
  .document-tools-hero h1 { font-size: 2.75rem; }
  .document-tools-trust { display: grid; }
  .document-tool-card { border-radius: 16px; padding: 22px; }
  .document-history-main { align-items: flex-start; flex-direction: column; }
  .document-result-row .button, .document-result-row form { width: 100%; margin-left: 0; }
  .document-result-row form .button { width: 100%; }
  .pdf-editor-topbar { grid-template-columns: 1fr; }
  .pdf-editor-navigation, .pdf-editor-actions { grid-column: 1; flex-wrap: wrap; justify-content: center; }
  .pdf-editor-actions .button-primary { width: 100%; }
  .pdf-page-viewport { padding: 18px; }
  .pdf-signature-dialog canvas { height: 180px; }
}