:root {
  --void: #07060b;
  --void-2: #0c0a12;
  --panel: rgba(19, 17, 29, .78);
  --panel-solid: #13111d;
  --panel-high: #1c1928;
  --text: #f4f1e9;
  --muted: #918c9d;
  --line: rgba(244, 241, 233, .13);
  --line-hot: rgba(199, 255, 61, .46);
  --signal: #c7ff3d;
  --violet: #7945ff;
  --cyan: #63efff;
  --coral: #ff5b3d;
  --paper: #e9e6dd;
  --ink: #111018;
  --display: "Syne", sans-serif;
  --serif: "Instrument Serif", serif;
  --mono: "IBM Plex Mono", monospace;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); overflow-x: hidden; }
body { margin: 0; min-width: 320px; background: var(--void); color: var(--text); font-family: var(--display); overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.hidden { display: none !important; }
::selection { background: var(--signal); color: var(--ink); }

.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .18; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); }
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% -15%, rgba(121, 69, 255, .16), transparent 38%), var(--void); }
.ambient::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(99,239,255,.09), transparent 70%); }
.ambient i { position: absolute; width: 38vw; aspect-ratio: 1; border-radius: 50%; filter: blur(110px); opacity: .15; animation: drift 16s ease-in-out infinite alternate; }
.ambient i:nth-child(1) { background: var(--violet); top: 8%; left: -15%; }
.ambient i:nth-child(2) { background: var(--cyan); right: -20%; top: 45%; animation-delay: -6s; }
.ambient i:nth-child(3) { background: var(--coral); left: 34%; bottom: -35%; animation-delay: -11s; }
.cursor-aura { position: fixed; top: -110px; left: -110px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; z-index: 99; opacity: .1; background: radial-gradient(circle, var(--cyan), transparent 62%); filter: blur(12px); transition: opacity .2s; }

.brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; font: 700 18px var(--display); letter-spacing: -.055em; position: relative; z-index: 3; }
.brand i { font: italic 22px var(--serif); color: var(--signal); }
.brand span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-hot); border-radius: 50%; color: var(--signal); font: 500 11px var(--mono); box-shadow: inset 0 0 18px rgba(199,255,61,.13), 0 0 24px rgba(199,255,61,.08); }
.brand::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); left: 26px; top: -1px; box-shadow: 0 0 12px var(--signal); }

.eyebrow, .step-label, .microcopy, .auth-citation, .card-index, .credit-card span, .editor-tools span, .metric span, .keyword-box span, .progress, .template-meta p, .archive-stats span, .history-date, .history-format, .file-record small, .compact-upload small, .parsed-block span, .plan-includes span { font: 500 9px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.primary, .secondary { min-height: 48px; border: 0; padding: 13px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; cursor: pointer; text-decoration: none; font: 700 11px var(--display); letter-spacing: .01em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); transition: transform .25s ease, background .25s, color .25s, box-shadow .25s; }
.primary { color: var(--ink); background: var(--signal); box-shadow: 0 0 0 1px rgba(199,255,61,.4), 0 0 28px rgba(199,255,61,.12); }
.primary:hover { transform: translateY(-3px); background: var(--cyan); box-shadow: 0 10px 35px rgba(99,239,255,.22); }
.secondary { color: var(--text); background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.secondary:hover { color: var(--void); background: var(--text); transform: translateY(-3px); }
.primary b, .secondary b { font-size: 18px; line-height: .6; }
.text-link, .paste-toggle, .logout { color: inherit; border: 0; background: none; padding: 0; cursor: pointer; font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.text-link::after, .paste-toggle::after, .logout::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 4px; background: currentColor; transform-origin: right; transition: transform .25s; }
.text-link:hover::after, .paste-toggle:hover::after, .logout:hover::after { transform: scaleX(.25); }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.035); color: var(--text); padding: 14px 15px; outline: none; font: 400 13px var(--display); transition: border-color .2s, background .2s, box-shadow .2s; }
input::placeholder, textarea::placeholder { color: #686273; }
input:focus, textarea:focus, select:focus { border-color: var(--cyan); background: rgba(99,239,255,.035); box-shadow: 0 0 0 3px rgba(99,239,255,.06), inset 3px 0 var(--cyan); }
select option { background: var(--panel-solid); }

/* Entry portal */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); background: var(--void); }
.auth-intro { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 5vw, 76px); border-right: 1px solid var(--line); background: radial-gradient(circle at 72% 48%, rgba(121,69,255,.25), transparent 32%), linear-gradient(135deg, #09080e 0%, #0c0913 100%); }
.auth-intro::before { content: "SS/25"; position: absolute; left: -2vw; bottom: -6vw; z-index: -1; font: 800 28vw/.75 var(--display); letter-spacing: -.12em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.055); }
.auth-intro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(100deg, transparent 0 90px, rgba(255,255,255,.025) 91px, transparent 92px 180px); transform: skewX(-12deg); }
.auth-intro .eyebrow { color: var(--cyan); margin: clamp(90px, 17vh, 180px) 0 15px; }
.auth-intro h1 { margin: 0; max-width: 840px; font: 700 clamp(64px, 8.2vw, 142px)/.74 var(--display); letter-spacing: -.09em; text-transform: uppercase; position: relative; z-index: 2; }
.auth-intro h1 em { display: inline-block; font: italic 1.1em/.8 var(--serif); text-transform: none; color: var(--signal); text-shadow: 0 0 40px rgba(199,255,61,.18); transform: translateX(8vw); }
.auth-note { max-width: 460px; margin: 38px 0 20px; color: #b4afbd; font-size: 13px; line-height: 1.7; }
.auth-citation { color: var(--signal); }
.auth-orbit { position: absolute; right: -10vw; top: 8vh; width: min(43vw, 650px); aspect-ratio: 1; border: 1px solid rgba(99,239,255,.18); border-radius: 50%; animation: breathe 5s ease-in-out infinite; }
.auth-orbit::before, .auth-orbit::after, .auth-orbit i { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.auth-orbit::after { inset: 30%; border-color: rgba(199,255,61,.28); }
.auth-orbit i:nth-child(1) { inset: 3% 47%; border: 0; width: 1px; border-radius: 0; background: linear-gradient(transparent, var(--cyan), transparent); animation: spin 9s linear infinite; }
.auth-orbit i:nth-child(2) { inset: 49% 2%; height: 1px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); }
.auth-orbit i:nth-child(3) { inset: 44%; background: var(--violet); border: 0; filter: blur(20px); box-shadow: 0 0 90px var(--violet); }
.auth-orbit b { position: absolute; inset: 42%; display: grid; place-items: center; border-radius: 50%; background: var(--signal); color: var(--ink); font: 800 34px var(--display); box-shadow: 0 0 40px rgba(199,255,61,.45); }
.auth-orbit span { position: absolute; bottom: 9%; left: 39%; color: var(--cyan); font: 500 8px var(--mono); letter-spacing: .14em; }
.auth-panel { width: min(100%, 480px); align-self: center; justify-self: center; padding: clamp(30px, 5vw, 68px); position: relative; }
.auth-panel::before { content: "AUTH / SECURE PORTAL"; display: block; margin-bottom: 55px; color: var(--muted); font: 500 8px var(--mono); letter-spacing: .2em; }
.tab-row { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.tab { color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 12px; cursor: pointer; font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tab.active { color: var(--signal); border-color: var(--signal); }
form label { display: block; margin-top: 18px; color: #aaa5b3; font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
form label input { margin-top: 8px; }
.auth-panel .primary { width: 100%; margin-top: 24px; }
.microcopy { margin-top: 20px; color: var(--muted); text-transform: none; letter-spacing: 0; line-height: 1.6; }
.microcopy strong { color: var(--signal); font-size: 14px; }
.form-error { color: #ff9b86; border-left: 2px solid var(--coral); padding-left: 10px; font-size: 12px; }

/* Onboarding */
.onboarding { min-height: 100vh; padding: 28px clamp(24px, 5vw, 80px) 70px; background: radial-gradient(circle at 78% 60%, rgba(121,69,255,.23), transparent 30%), var(--void); position: relative; overflow: hidden; }
.onboarding::after { content: "SOURCE"; position: absolute; right: -3vw; bottom: -4vw; font: 800 15vw var(--display); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.05); }
.onboarding header { display: flex; align-items: center; justify-content: space-between; }
.onboarding .logout { color: var(--muted); }
.onboarding-layout { max-width: 1280px; margin: 10vh auto 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(45px, 8vw, 130px); align-items: center; position: relative; z-index: 2; }
.step-label { color: var(--cyan); }
.onboarding-copy h1 { margin: 16px 0 28px; font: 700 clamp(58px, 7vw, 108px)/.78 var(--display); letter-spacing: -.09em; text-transform: uppercase; }
.onboarding-copy h1 em { font-family: var(--serif); font-weight: 400; color: var(--signal); text-transform: none; }
.onboarding-copy > p:not(.step-label) { max-width: 520px; color: #aca7b5; line-height: 1.7; font-size: 13px; }
.onboarding-copy ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; color: #d2ced8; font: 500 10px var(--mono); letter-spacing: .04em; }
.onboarding-copy li::before { content: "◉"; color: var(--signal); margin-right: 12px; text-shadow: 0 0 12px var(--signal); }
.onboarding-upload { position: relative; padding: clamp(28px, 4vw, 52px); background: rgba(18,16,27,.8); border: 1px solid var(--line); backdrop-filter: blur(22px); box-shadow: 24px 24px 0 rgba(121,69,255,.16); }
.onboarding-upload::before { content: ""; position: absolute; inset: -1px; clip-path: polygon(0 0, 68px 0, 0 68px); background: var(--signal); }
.onboarding-upload .eyebrow { color: var(--cyan); margin: 0 0 15px; }
.upload-zone { min-height: 120px; padding: 22px; border: 1px dashed #5d5868; display: grid; place-items: center; gap: 7px; text-align: center; color: var(--muted); cursor: pointer; transition: background .25s, border-color .25s, transform .25s; position: relative; }
.upload-zone.large { min-height: 250px; }
.upload-zone:hover { background: rgba(199,255,61,.04); border-color: var(--signal); transform: scale(.985); }
.upload-zone input, .compact-upload input { position: absolute; opacity: 0; pointer-events: none; }
.upload-zone b { color: var(--text); }
.upload-zone small { font: 500 8px var(--mono); letter-spacing: .1em; }
.upload-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line-hot); border-radius: 50%; color: var(--signal); font-size: 24px; box-shadow: inset 0 0 24px rgba(199,255,61,.08), 0 0 30px rgba(199,255,61,.08); animation: breathe 3s ease-in-out infinite; }
.paste-toggle { margin-top: 16px; color: var(--muted); text-align: left; }
.paste-panel { margin-top: 16px; }
.paste-panel .primary, .paste-panel .secondary { width: 100%; margin-top: 8px; }
.upload-status { margin-top: 16px; padding-left: 11px; color: var(--cyan); border-left: 2px solid var(--cyan); font: 500 9px var(--mono); letter-spacing: .06em; }

/* Application shell */
.product-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); background: transparent; }
.sidebar { position: sticky; top: 0; z-index: 20; height: 100vh; min-height: 720px; padding: 28px 24px; display: flex; flex-direction: column; background: rgba(8,7,13,.88); border-right: 1px solid var(--line); backdrop-filter: blur(28px); }
.sidebar::after { content: ""; position: absolute; right: -1px; top: 18%; width: 1px; height: 32%; background: linear-gradient(transparent, var(--violet), var(--cyan), transparent); box-shadow: 0 0 16px rgba(99,239,255,.5); }
.system-state { margin-top: 32px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: var(--muted); font: 500 7px var(--mono); letter-spacing: .12em; }
.system-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 11px var(--signal); animation: blink 1.8s ease-in-out infinite; }
.system-state b { color: var(--signal); font-weight: 500; }
.profile-chip { margin: 32px 0; padding: 16px 0; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(121,69,255,.6); border-radius: 50%; background: rgba(121,69,255,.15); color: #bda9ff; font: 500 11px var(--mono); box-shadow: 0 0 22px rgba(121,69,255,.12); }
.profile-chip strong { display: block; max-width: 165px; overflow: hidden; text-overflow: ellipsis; color: #e7e3ec; font-size: 10px; font-weight: 500; }
.profile-chip small { color: var(--muted); font: 400 8px var(--mono); }
.sidebar nav { display: grid; gap: 5px; }
.nav-link { min-height: 46px; padding: 0 12px; border: 1px solid transparent; background: transparent; color: #777181; display: flex; align-items: center; gap: 16px; cursor: pointer; text-align: left; font: 500 8px var(--mono); transition: color .25s, background .25s, border-color .25s, transform .25s; }
.nav-link span { font: 600 12px var(--display); letter-spacing: -.02em; }
.nav-link:hover { color: var(--text); transform: translateX(5px); }
.nav-link.active { color: var(--signal); background: linear-gradient(90deg, rgba(199,255,61,.09), transparent); border-left-color: var(--signal); }
.credit-card { margin-top: auto; padding: 18px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(121,69,255,.14), rgba(255,255,255,.02)); position: relative; overflow: hidden; }
.credit-card::after { content: ""; position: absolute; width: 80px; height: 80px; border: 1px solid rgba(199,255,61,.16); border-radius: 50%; right: -35px; top: -35px; }
.credit-card span { color: var(--cyan); }
.credit-card strong { display: block; margin: 7px 0 0; color: var(--signal); font: 400 52px/.9 var(--serif); text-shadow: 0 0 24px rgba(199,255,61,.18); }
.credit-card p { margin: 4px 0 15px; color: var(--muted); font-size: 9px; }
.credit-card .text-link { color: var(--text); }
.logout { margin-top: 20px; color: #6d6774; text-align: left; }
.app-main { min-width: 0; padding: 36px clamp(24px, 4.6vw, 78px) 90px; position: relative; }
.app-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; margin-bottom: 38px; position: relative; z-index: 3; }
.app-header .eyebrow, .library-head .eyebrow, .editor-head .eyebrow { margin: 0 0 8px; color: var(--cyan); }
.app-header h1, .library-head h2, .editor-head h2, .archive-head h2, .profile-panel h2 { margin: 0; font: 700 clamp(42px, 5vw, 76px)/.82 var(--display); letter-spacing: -.085em; text-transform: uppercase; }
.header-plan { min-width: 155px; padding: 12px 15px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--text); cursor: pointer; text-align: left; font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: background .25s, border-color .25s; }
.header-plan span { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; }
.header-plan:hover { border-color: var(--signal); background: rgba(199,255,61,.06); }
.view { animation: reveal .65s cubic-bezier(.2,.8,.2,1) both; }

/* Signature dashboard */
.signal-stage { min-height: 410px; display: grid; grid-template-columns: .75fr 1.25fr; position: relative; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 72% 52%, rgba(121,69,255,.28), transparent 24%), linear-gradient(125deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); isolation: isolate; }
.signal-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.018) 6px); }
.signal-stage::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; background: linear-gradient(105deg, transparent 28%, rgba(99,239,255,.14), transparent 55%) border-box; mix-blend-mode: screen; animation: scan 5s linear infinite; }
.signal-copy { padding: clamp(26px, 4vw, 55px); display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 2; }
.live-signal { color: var(--signal); font: 500 8px var(--mono); letter-spacing: .14em; }
.live-signal i { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); animation: blink 1.8s ease-in-out infinite; }
.signal-copy > p { max-width: 385px; margin: 20px 0 35px; color: #b0aab7; font: 400 clamp(16px, 1.7vw, 24px)/1.4 var(--serif); }
.signal-coordinates { display: flex; flex-wrap: wrap; gap: 18px; color: #686273; font: 500 7px var(--mono); letter-spacing: .15em; }
.signal-orbit { min-height: 410px; position: relative; display: grid; place-items: center; perspective: 800px; }
.orbit-ring { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.ring-one { width: min(33vw, 410px); aspect-ratio: 1; box-shadow: inset 0 0 60px rgba(121,69,255,.06); }
.ring-two { width: min(25vw, 310px); aspect-ratio: 1; border-color: rgba(99,239,255,.25); transform: rotateX(65deg); animation: spin3d 8s linear infinite; }
.ring-three { width: min(17vw, 210px); aspect-ratio: 1; border-style: dashed; border-color: rgba(199,255,61,.3); animation: spin 14s linear infinite reverse; }
.orbit-path { position: absolute; width: min(30vw, 370px); aspect-ratio: 1; border-radius: 50%; animation: spin 11s linear infinite; }
.orbit-path i { position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.path-two { width: min(21vw, 260px); animation-duration: 7s; animation-direction: reverse; transform: rotate(45deg); }
.path-two i { background: var(--signal); box-shadow: 0 0 18px var(--signal); }
.signal-core { width: min(12vw, 150px); aspect-ratio: 1; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff, var(--signal) 16%, #779e14 48%, #13160c 72%); color: var(--ink); box-shadow: 0 0 30px rgba(199,255,61,.25), 0 0 100px rgba(121,69,255,.34); animation: float 4s ease-in-out infinite; z-index: 3; }
.signal-core span { font: 500 8px var(--mono); letter-spacing: .15em; }
.signal-core b { font: 400 50px/.7 var(--serif); }
.signal-core small { font: 500 6px var(--mono); letter-spacing: .13em; }
.orbit-label { position: absolute; padding: 6px 8px; border: 1px solid var(--line); color: var(--muted); background: rgba(7,6,11,.72); font: 500 7px var(--mono); letter-spacing: .13em; }
.label-one { top: 16%; right: 13%; }.label-two { bottom: 18%; left: 8%; }.label-three { right: 5%; bottom: 38%; }
.signal-marquee { margin: 12px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--signal); color: var(--ink); }
.signal-marquee div { width: max-content; padding: 8px 0; font: 700 9px var(--mono); letter-spacing: .1em; animation: marquee 20s linear infinite; }

.archive-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.archive-stats article { min-height: 175px; padding: 22px; display: flex; flex-direction: column; background: rgba(17,15,24,.86); position: relative; overflow: hidden; transition: transform .3s, background .3s; }
.archive-stats article::before, .flow-card::before, .profile-panel::before, .template-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(280px circle at var(--px,50%) var(--py,50%), rgba(99,239,255,.09), transparent 65%); }
.archive-stats article:hover::before, .flow-card:hover::before, .profile-panel:hover::before, .template-card:hover::before { opacity: 1; }
.archive-stats article:hover { background: var(--panel-high); transform: translateY(-4px); z-index: 2; }
.archive-stats span { color: var(--muted); }
.archive-stats strong { margin: auto 0 3px; color: var(--text); font: 400 66px/.8 var(--serif); letter-spacing: -.06em; }
.archive-stats article:nth-child(2) strong { color: var(--signal); text-shadow: 0 0 28px rgba(199,255,61,.14); }
.archive-stats strong.date-stat { font-size: clamp(28px, 3vw, 43px); }
.archive-stats p { margin: 0; color: var(--muted); font-size: 10px; }
.archive-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 65px 0 20px; }
.archive-head .eyebrow { margin: 0 0 8px; color: var(--violet); }
.archive-head h2 { font-size: clamp(38px, 4vw, 60px); }
.history-list { border-top: 1px solid var(--line); }
.history-item { display: grid; grid-template-columns: 82px minmax(200px,1.4fr) minmax(145px,.75fr) 85px 100px 120px; gap: 18px; align-items: center; min-height: 94px; padding: 15px 8px; border-bottom: 1px solid var(--line); position: relative; transition: padding .25s, background .25s; }
.history-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); transform: scaleY(0); transition: transform .25s; }
.history-item:hover { padding-left: 17px; background: rgba(199,255,61,.025); }
.history-item:hover::before { transform: scaleY(1); }
.history-date, .history-format { color: var(--muted); }
.history-role a, .history-role > strong { color: var(--text); font: 600 18px var(--display); letter-spacing: -.035em; text-decoration: none; }
.history-role a:hover { color: var(--signal); }
.history-role p, .history-company p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.history-company strong { font-size: 11px; }
.history-score { display: flex; align-items: center; gap: 8px; }
.history-score strong { color: var(--cyan); font: 400 28px var(--serif); }
.history-score span { color: var(--muted); font: 500 8px var(--mono); }
.history-actions { display: flex; justify-content: flex-end; gap: 6px; }
.history-actions button, .history-actions a { min-height: 34px; padding: 8px 10px; font-size: 8px; }
.empty-archive { min-height: 250px; display: grid; place-items: center; text-align: center; color: var(--muted); border-bottom: 1px solid var(--line); background: radial-gradient(circle, rgba(121,69,255,.08), transparent 48%); }
.empty-archive strong { display: block; margin-bottom: 7px; color: var(--text); font: 400 30px var(--serif); }

/* Flow workspace */
.source-ribbon { margin-bottom: 22px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.source-ribbon > div { display: flex; align-items: center; gap: 11px; }.source-ribbon p { margin: 0; }.source-ribbon b { display: block; font-size: 11px; }.source-ribbon small { color: var(--muted); font: 400 8px var(--mono); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 13px var(--signal); }
.progress { margin: 0 0 24px; display: flex; align-items: center; gap: 11px; color: #625d6a; }.progress-on { color: var(--cyan); }.progress i { width: 34px; height: 1px; background: var(--line); }
.flow-card { position: relative; overflow: hidden; padding: clamp(28px,4vw,50px); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.flow-card::after { content: "01"; position: absolute; right: 1vw; bottom: -5vw; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.045); font: 800 19vw var(--display); pointer-events: none; }
.role-card { display: grid; grid-template-columns: 55px 1fr; gap: 0 30px; }.role-card .card-index { grid-row: 1/6; color: var(--cyan); }.card-copy .eyebrow { margin: 1px 0 8px; color: var(--violet); }
.card-copy h2, .match-intro h2, .generation-panel h2 { margin: 0; font: 700 44px/.86 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.card-copy > p:last-child { max-width: 610px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.job-form { display: flex; max-width: 790px; margin-top: 30px; }.job-form input { border-right: 0; }.job-form .secondary { white-space: nowrap; }
.role-card > .paste-toggle, .role-card > .manual-job, .role-card > .saved-job { grid-column: 2; }
.manual-job { display: grid; gap: 8px; max-width: 790px; margin-top: 15px; }.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.saved-job { max-width: 790px; margin-top: 28px; padding-top: 17px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }.saved-job > span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-hot); border-radius: 50%; color: var(--signal); }.saved-job strong { font-size: 11px; }.saved-job p { margin: 3px 0; color: var(--muted); font-size: 9px; }.saved-job .text-link { margin-left: auto; }
.match-panel { margin-top: 15px; padding: clamp(28px,4vw,48px); display: grid; grid-template-columns: .8fr 1.7fr; gap: 34px; border: 1px solid rgba(121,69,255,.4); background: radial-gradient(circle at 15% 25%, rgba(121,69,255,.24), transparent 29%), var(--panel-solid); box-shadow: 0 0 70px rgba(121,69,255,.08); }
.match-intro .eyebrow { margin: 0 0 10px; color: var(--cyan); }.match-intro h2 { color: var(--signal); font: 400 92px/.7 var(--serif); text-shadow: 0 0 35px rgba(199,255,61,.18); }.match-intro h2 small { color: var(--muted); font: 500 9px var(--mono); }.match-intro > p:last-child { color: var(--muted); font-size: 11px; line-height: 1.6; }
.metric-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.metric { padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }.metric span { display: block; color: var(--muted); }.metric strong { display: block; color: var(--cyan); font: 400 34px var(--serif); }.metric strong small { color: var(--muted); font: 500 8px var(--mono); }.metric i { display: block; height: 2px; background: #332e3c; }.metric i b { display: block; height: 100%; background: linear-gradient(90deg,var(--violet),var(--cyan)); box-shadow: 0 0 8px var(--cyan); }
.keyword-box { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }.keyword-box div { padding: 17px 17px 0 0; }.keyword-box div+div { padding-left: 17px; border-left: 1px solid var(--line); }.keyword-box span { color: var(--signal); }.keyword-box p { color: #c4bfca; font-size: 10px; line-height: 1.6; }.match-panel > .primary { grid-column: 2; justify-self: end; }
.generation-panel { margin-top: 15px; padding: 30px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: var(--ink); background: var(--signal); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }.generation-panel .eyebrow { margin: 0 0 6px; }.generation-panel h2 { font-size: 34px; }.generation-panel h2 b { font: 500 10px var(--mono); }.generation-panel p { max-width: 520px; font-size: 11px; }.generation-actions { display: flex; gap: 8px; }.generation-panel .secondary { color: var(--ink); border-color: var(--ink); }

/* Library and editor */
.library-head, .editor-head { margin-bottom: 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }.library-head h2 em { color: var(--signal); font-family: var(--serif); font-weight: 400; text-transform: none; }.library-head > p { max-width: 350px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }.editor-head > div:last-child { display: flex; gap: 8px; }
.template-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }.template-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--panel-solid); transition: transform .3s, border-color .3s; }.template-card:hover { transform: translateY(-8px); border-color: var(--format); }.template-preview { height: 190px; padding: 18px; position: relative; background: #dedbd2; }.template-preview::before { content: ""; display: block; width: 58%; height: 9px; margin-bottom: 11px; background: var(--format); }.template-preview div { width: 72%; height: 4px; margin: 6px 0; background: #9b9994; }.template-preview i { display: block; height: 2px; margin-top: 7px; background: #bab7b0; }.template-preview i:nth-of-type(2) { width: 82%; }.template-preview span { position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; border: 1px solid var(--format); border-radius: 50%; box-shadow: inset 0 0 15px var(--format); opacity: .45; }.template-meta { padding: 13px; }.template-meta strong { font: 600 16px var(--display); }.template-meta p { margin: 3px 0 0; color: var(--muted); font-size: 7px; letter-spacing: .05em; text-transform: none; }.template-actions { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; background: rgba(7,6,11,.9); backdrop-filter: blur(10px); transition: opacity .25s; }.template-card:hover .template-actions, .template-card:focus-within .template-actions { opacity: 1; }.template-actions .primary, .template-actions .secondary { width: 100%; min-height: 40px; padding: 9px; font-size: 8px; }
.disabled-link { pointer-events: none; opacity: .4; }.editor-empty { min-height: 350px; display: grid; place-items: center; padding: 30px; color: var(--muted); text-align: center; border: 1px dashed var(--line); background: radial-gradient(circle, rgba(121,69,255,.08), transparent 45%); }.editor-stage { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 25px; align-items: start; }.editor-tools { position: sticky; top: 22px; padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }.editor-tools span { display: block; margin: 10px 0 6px; color: var(--cyan); }.editor-tools p { color: var(--muted); font-size: 10px; line-height: 1.6; }
.resume-paper { max-width: 800px; min-height: 1040px; padding: 70px; background: #f8f6ef; color: #15131a; outline: 0; box-shadow: 0 28px 90px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.1); }.resume-paper header { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #15131a; }.resume-paper h1 { margin: 0; font: 700 38px/.9 var(--display); letter-spacing: -.065em; }.resume-paper header p { margin: 8px 0 0; color: #5d5861; font: 400 9px var(--mono); }.resume-paper h3 { margin: 0 0 5px; font: 600 17px var(--display); }.resume-paper h4 { margin: 20px 0 8px; padding-bottom: 5px; border-bottom: 1px solid #c9c5bc; font: 500 9px var(--mono); letter-spacing: .1em; }.resume-paper p, .resume-paper li { font-family: Arial, sans-serif; font-size: 11px; line-height: 1.58; }.resume-paper ul { margin: 0; padding-left: 17px; }.resume-paper.signal header,.resume-paper.signal h4 { border-color:#b21939 }.resume-paper.signal h1,.resume-paper.signal h3{color:#b21939}.resume-paper.architect{border-left:9px solid #173f5f}.resume-paper.architect h1,.resume-paper.architect h3{color:#173f5f}.resume-paper.noir{background:#fff}.resume-paper.dawn{border-top:8px solid #aa5a37}

/* Profile */
.profile-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; align-items: start; }.profile-panel { min-width: 0; padding: 30px; position: relative; overflow: hidden; border: 1px solid var(--line); background: rgba(18,16,27,.82); }.profile-panel .eyebrow { margin: 0 0 9px; color: var(--cyan); }.profile-panel h2 { font-size: clamp(34px,3.4vw,52px); }.panel-note { max-width: 600px; color: var(--muted); font-size: 11px; line-height: 1.65; }.file-record { margin: 28px 0 14px; }.file-record b,.file-record small{overflow-wrap:anywhere}.file-card { padding: 15px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }.file-card > span { width: 40px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; color: var(--signal); border: 1px solid var(--line-hot); font: 500 8px var(--mono); }.file-card div { min-width:0 }.file-card b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px }.file-card small { color:var(--muted) }.file-card a { margin-left:auto; color:var(--cyan); font:500 8px var(--mono); text-transform:uppercase }.compact-upload { padding:15px; display:flex; align-items:center; gap:12px; position:relative; cursor:pointer; border:1px dashed #514c59; transition:border-color .25s,background .25s }.compact-upload:hover { border-color:var(--signal); background:rgba(199,255,61,.03) }.compact-upload > span { width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--signal);border:1px solid var(--line-hot) }.compact-upload b,.compact-upload small{display:block}.compact-upload b{font-size:11px}.compact-upload small{margin-top:3px;color:var(--muted)}.parsed-profile{min-height:500px}.parsed-summary{margin-top:26px;display:grid;gap:1px;background:var(--line)}.parsed-block{padding:15px 0;background:var(--panel-solid)}.parsed-block span{display:block;margin-bottom:6px;color:var(--violet)}.parsed-block strong{margin-right:8px;color:var(--text);font:400 24px var(--serif)}.parsed-block p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.55}
.billing-panel { grid-column:1/-1; display:grid; grid-template-columns:1fr .8fr auto; gap:28px; align-items:center; background:radial-gradient(circle at 15% 0,rgba(121,69,255,.28),transparent 32%),var(--panel-solid); border-color:rgba(121,69,255,.35) }.billing-panel .eyebrow{grid-column:1/-1;margin-bottom:-12px;color:var(--signal)}.billing-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.billing-heading p{margin:5px 0 0;color:var(--muted);font-size:10px}.billing-heading>strong{color:var(--signal);font:400 55px var(--serif);text-shadow:0 0 30px rgba(199,255,61,.17)}.plan-includes{padding-left:25px;border-left:1px solid var(--line)}.plan-includes span{color:var(--cyan)}.plan-includes p{margin:6px 0 0;color:#bbb6c2;font-size:10px;line-height:1.6}.billing-panel .primary{white-space:nowrap}.billing-actions{display:grid;gap:10px}.billing-note{grid-column:1/-1;margin:-12px 0 0;color:#706a78;font-size:8px}
.toast { position:fixed;right:24px;bottom:24px;z-index:80;max-width:380px;padding:14px 17px;color:var(--ink);background:var(--signal);font:600 10px var(--mono);box-shadow:0 15px 50px rgba(0,0,0,.42);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%) }


@keyframes drift { to { transform: translate3d(12vw,-8vh,0) scale(1.18); } }
@keyframes breathe { 50% { transform: scale(1.035); filter: brightness(1.2); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin3d { to { transform: rotateX(65deg) rotateZ(360deg); } }
@keyframes float { 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes blink { 50% { opacity:.28; } }
@keyframes scan { from { transform:translateX(-80%); } to { transform:translateX(80%); } }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

@media (max-width:1100px){
  .template-grid{grid-template-columns:repeat(3,1fr)}
  .history-item{grid-template-columns:70px minmax(180px,1.2fr) minmax(120px,.7fr) 80px}.history-format{display:none}.history-actions{grid-column:2/-1;justify-content:flex-start}
  .billing-panel{grid-template-columns:1fr 1fr}.billing-panel .billing-actions{justify-self:start}
  .signal-stage{grid-template-columns:.9fr 1.1fr}
}
@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr}.auth-intro{min-height:68vh;border-right:0;border-bottom:1px solid var(--line)}.auth-panel{padding-top:60px;padding-bottom:70px}.auth-orbit{right:-20vw;top:5vh;width:70vw}
  .product-shell{grid-template-columns:1fr}.sidebar{position:sticky;height:auto;min-height:0;padding:14px 18px;display:grid;grid-template-columns:1fr auto;align-items:center}.sidebar::after,.sidebar .profile-chip,.credit-card,.sidebar>.logout,.system-state{display:none}.sidebar nav{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:14px}.nav-link{justify-content:center;padding:8px;gap:7px}.nav-link:hover{transform:none}
  .app-main{padding:30px 20px 65px}.onboarding-layout{grid-template-columns:1fr;margin-top:7vh}.onboarding-copy h1{font-size:72px}
  .signal-stage{min-height:360px}.signal-orbit{min-height:360px}.archive-stats{grid-template-columns:1fr 1fr}.archive-stats article:last-child{grid-column:1/-1}
  .match-panel{grid-template-columns:1fr}.keyword-box,.match-panel>.primary{grid-column:auto}
}
@media (max-width:680px){
  .cursor-aura{display:none}.auth-intro{min-height:620px;padding:24px 20px}.auth-intro .eyebrow{margin-top:130px}.auth-intro h1{font-size:58px;line-height:.78}.auth-intro h1 em{transform:translateX(4vw)}.auth-note{margin-top:30px}.auth-orbit{width:390px;right:-190px;top:30px}.auth-panel{padding:50px 20px 65px}.auth-panel::before{margin-bottom:35px}
  .onboarding{padding:22px 20px 60px}.onboarding-layout{margin-top:60px;gap:38px}.onboarding-copy h1{font-size:50px}.onboarding-upload{padding:22px;box-shadow:10px 10px 0 rgba(121,69,255,.16)}
  .sidebar nav{gap:1px}.nav-link{min-height:54px;flex-direction:column;font-size:7px;gap:4px}.nav-link span{font-size:8px;line-height:1.1;text-align:center}.sidebar .brand{font-size:15px}.sidebar .brand i{font-size:18px}
  .app-header{align-items:flex-start;margin-bottom:28px}.app-header h1{font-size:39px}.header-plan{min-width:118px;padding:9px;font-size:7px}
  .signal-stage{grid-template-columns:1fr;min-height:580px}.signal-copy{padding:24px;min-height:210px;justify-content:flex-start}.signal-copy>p{margin:16px 0 22px;font-size:18px}.signal-orbit{min-height:360px;margin-top:-20px}.ring-one{width:290px}.ring-two{width:220px}.ring-three{width:150px}.orbit-path{width:265px}.path-two{width:185px}.signal-core{width:108px}.orbit-label{font-size:6px}.label-one{right:7%}.signal-marquee{margin:8px 0}
  .archive-stats{grid-template-columns:1fr}.archive-stats article:last-child{grid-column:auto}.archive-stats article{min-height:135px}.archive-stats strong{font-size:50px}.archive-head{align-items:flex-start;margin-top:48px}.archive-head h2{font-size:39px}.archive-head .secondary{padding:9px;font-size:8px}
  .history-item{grid-template-columns:58px 1fr;gap:10px 13px}.history-company,.history-score,.history-actions{grid-column:2}.history-actions{flex-wrap:wrap}.history-role a,.history-role>strong{font-size:15px}
  .role-card{grid-template-columns:1fr}.role-card .card-index{grid-row:auto;margin-bottom:20px}.role-card>.paste-toggle,.role-card>.manual-job,.role-card>.saved-job{grid-column:1}.card-copy h2{font-size:38px}.job-form{display:grid;gap:7px}.job-form input{border-right:1px solid var(--line)}.field-pair{grid-template-columns:1fr}.saved-job{align-items:flex-start;flex-wrap:wrap}.saved-job .text-link{margin-left:48px}
  .progress{font-size:7px;gap:5px}.progress i{width:12px}.match-panel{padding:23px}.match-intro h2{font-size:72px}.metric-grid{grid-template-columns:1fr 1fr;gap:7px}.metric{padding:11px}.metric strong{font-size:28px}.keyword-box{grid-template-columns:1fr}.keyword-box div+div{padding-left:0;border-left:0}.generation-panel,.library-head,.editor-head{display:block}.generation-actions,.editor-head>div:last-child{margin-top:17px;flex-wrap:wrap}
  .template-grid{grid-template-columns:repeat(2,1fr);gap:8px}.template-preview{height:150px;padding:13px}.template-actions{position:relative;opacity:1;padding:9px;background:#0c0a12}.template-actions .primary,.template-actions .secondary{min-height:35px}
  .editor-stage{grid-template-columns:1fr}.editor-tools{position:relative}.resume-paper{padding:36px 25px;min-height:820px}.resume-paper h1{font-size:30px}
  .profile-grid{grid-template-columns:1fr}.profile-panel{padding:23px}.billing-panel{grid-column:auto;display:block}.billing-heading{align-items:flex-start;margin:18px 0}.plan-includes{padding:18px 0;border-left:0;border-top:1px solid var(--line)}.billing-panel .primary{width:100%}.billing-note{margin-top:14px}
  .toast{left:15px;right:15px;bottom:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Calm workspace — clear hierarchy, readable copy, fewer competing elements */
:root {
  --void: #0d0d10;
  --void-2: #121216;
  --panel: #17171c;
  --panel-solid: #17171c;
  --panel-high: #1d1d23;
  --text: #f7f5ef;
  --muted: #b6b2bd;
  --line: rgba(247, 245, 239, .14);
  --line-hot: rgba(202, 255, 82, .55);
  --signal: #caff52;
  --cyan: #9ee8ef;
}

body { background: var(--void); font-size: 15px; line-height: 1.55; }
.grain, .cursor-aura, .ambient i, .ambient::before, .ambient::after { display: none; }
.ambient { background: linear-gradient(180deg, #101014, #0d0d10); }

.eyebrow, .step-label, .microcopy, .card-index, .credit-card span,
.editor-tools span, .metric span, .keyword-box span, .progress,
.template-meta p, .archive-stats span, .history-date, .history-format,
.file-record small, .compact-upload small, .parsed-block span, .plan-includes span {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: none;
}

.primary, .secondary {
  min-height: 46px;
  padding: 12px 18px;
  gap: 10px;
  border-radius: 10px;
  clip-path: none;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.primary:hover, .secondary:hover { transform: translateY(-1px); }
.text-link, .paste-toggle, .logout {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
input, textarea, select {
  min-height: 48px;
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 15px;
}
input::placeholder, textarea::placeholder { color: #8f8b96; }

/* Sign in */
.auth-shell { grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); }
.auth-intro {
  padding: clamp(32px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right-color: var(--line);
  background: #111115;
}
.auth-intro::before, .auth-intro::after, .auth-panel::before { display: none; }
.auth-intro .brand { position: absolute; left: clamp(32px, 6vw, 88px); top: 36px; }
.auth-intro .eyebrow { margin: 0 0 20px; color: var(--signal); }
.auth-intro h1 {
  max-width: 840px;
  font-size: clamp(58px, 7vw, 112px);
  line-height: .92;
  letter-spacing: -.065em;
  text-transform: none;
}
.auth-intro h1 em { transform: none; }
.auth-note { max-width: 580px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.auth-panel { width: min(100%, 460px); padding: 40px; }
.identity-lane { margin-bottom: 24px; }
.google-auth { min-height: 52px; display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 12px; padding: 0 18px; color: var(--text); background: rgba(255,255,255,.035); border: 1px solid rgba(244,241,233,.22); border-radius: 999px; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.google-auth::after { content: ""; width: 24px; }
.google-auth:hover { transform: translateY(-2px); border-color: var(--line-hot); background: rgba(199,255,61,.055); box-shadow: 0 12px 32px rgba(0,0,0,.24); }
.google-mark { width: 24px; height: 24px; display: grid; place-items: center; }
.google-mark svg { width: 19px; height: 19px; }
.google-auth-copy { justify-self: center; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.google-auth.is-leaving { pointer-events: none; opacity: .72; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; color: #76717f; font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.tab-row { gap: 28px; margin-bottom: 34px; }
.tab { font-size: 13px; letter-spacing: 0; text-transform: none; }
form label { color: var(--muted); font-size: 13px; letter-spacing: 0; text-transform: none; }
.microcopy { font-size: 12px; }
.auth-legal { margin: 15px 0 0; color: #77727f; font-size: 10px; line-height: 1.55; }
.auth-legal a { color: #aaa6b0; text-underline-offset: 3px; }
.auth-legal a:hover { color: var(--signal); }

/* Onboarding */
.onboarding { padding: 30px clamp(24px, 5vw, 72px) 64px; background: var(--void); }
.onboarding::after, .onboarding-upload::before { display: none; }
.onboarding-layout { max-width: 1100px; margin-top: 10vh; gap: clamp(40px, 7vw, 100px); }
.onboarding-copy h1 {
  margin: 12px 0 24px;
  font-size: clamp(54px, 6vw, 86px);
  line-height: .9;
  letter-spacing: -.065em;
  text-transform: none;
}
.onboarding-copy > p:not(.step-label) { color: var(--muted); font-size: 16px; }
.onboarding-copy ul { gap: 10px; color: var(--text); font: 400 14px var(--display); }
.onboarding-copy li::before { content: "✓"; }
.onboarding-upload { padding: clamp(24px, 4vw, 42px); border-radius: 18px; background: var(--panel); box-shadow: none; }
.upload-zone { border-radius: 14px; }
.upload-zone.large { min-height: 230px; }
.upload-mark { animation: none; }

/* Product shell */
.product-shell {
  --rail-width: 232px;
  position: relative;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  background: linear-gradient(90deg, #111115 0 var(--rail-width), var(--void) var(--rail-width));
}
.product-shell::after {
  content: "";
  position: absolute;
  z-index: 19;
  top: 0;
  bottom: 0;
  left: calc(var(--rail-width) - 1px);
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.sidebar {
  align-self: start;
  min-height: 0;
  height: 100dvh;
  padding: 28px 20px;
  overflow-y: auto;
  scrollbar-width: none;
  background: transparent;
  border-right: 0;
  backdrop-filter: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar::after { display: none; }
.profile-chip { margin: 34px 0 22px; }
.profile-chip strong { font-size: 12px; }
.profile-chip small { font-size: 10px; }
.sidebar nav { width: 100%; gap: 7px; }
.nav-link {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--muted);
}
.nav-link span { font-size: 14px; letter-spacing: 0; }
.nav-link:hover { transform: none; background: rgba(255,255,255,.04); }
.nav-link.active {
  color: var(--void);
  background: var(--signal);
  border: 0;
}
.credit-card { width: 100%; padding: 16px; border-radius: 12px; background: var(--panel); }
.credit-card::after { display: none; }
.credit-card strong { font-size: 44px; }
.credit-card p { font-size: 11px; }
.sidebar > .logout { width: 100%; }
.app-main { max-width: 1440px; width: 100%; margin: 0 auto; padding: 38px clamp(24px, 4vw, 64px) 80px; }
.app-header { align-items: center; margin-bottom: 34px; }
.app-header .eyebrow, .library-head .eyebrow, .editor-head .eyebrow { color: var(--muted); }
.app-header h1, .library-head h2, .editor-head h2, .archive-head h2, .profile-panel h2 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: .95;
  letter-spacing: -.055em;
  text-transform: none;
}
.header-plan {
  min-width: 170px;
  padding: 11px 14px;
  border-radius: 10px;
  font: 600 13px var(--display);
  letter-spacing: 0;
  text-transform: none;
}
.header-plan span { font-size: 10px; }

/* Home */
.signal-stage {
  min-height: 0;
  display: block;
  border-radius: 18px;
  background: linear-gradient(135deg, #1b2020, #17171c 60%);
}
.signal-stage::before, .signal-stage::after { display: none; }
.signal-copy {
  max-width: 760px;
  padding: clamp(32px, 5vw, 62px);
  display: block;
}
.live-signal { font: 500 12px var(--display); letter-spacing: 0; text-transform: none; }
.live-signal i { animation: none; }
.signal-copy h2 {
  max-width: 650px;
  margin: 24px 0 16px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.06em;
}
.signal-copy > p {
  max-width: 620px;
  margin: 0 0 28px;
  color: var(--muted);
  font: 400 16px/1.65 var(--display);
}
.signal-copy .primary { width: fit-content; }
.archive-stats {
  margin-top: 14px;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border: 0;
  background: transparent;
}
.archive-stats article {
  min-height: 130px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.archive-stats article::before { display: none; }
.archive-stats article:hover { transform: none; background: var(--panel); }
.archive-stats strong { margin-top: auto; font-size: 50px; }
.archive-stats p { font-size: 11px; }
.archive-head { margin: 52px 0 18px; }
.history-item { min-height: 88px; }
.history-role p, .history-company p { font-size: 11px; }
.history-date, .history-format { font-size: 10px; }
.empty-archive .primary { margin-top: 20px; }

/* Tailoring flow */
.source-ribbon, .flow-card, .match-panel, .profile-panel, .editor-tools {
  border-radius: 14px;
  background: var(--panel);
}
.source-ribbon b { font-size: 13px; }
.source-ribbon small { font-size: 11px; }
.progress { color: #918d98; font-size: 12px; }
.progress-on { color: var(--signal); }
.flow-card { padding: clamp(26px, 4vw, 44px); }
.flow-card::after, .flow-card::before { display: none; }
.role-card { grid-template-columns: 1fr; }
.role-card .card-index { display: none; }
.role-card > .paste-toggle, .role-card > .manual-job, .role-card > .saved-job { grid-column: 1; }
.card-copy h2, .generation-panel h2 {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.05em;
  text-transform: none;
}
.card-copy > p:last-child { color: var(--muted); font-size: 15px; }
.job-form { max-width: 860px; }
.saved-job { max-width: 860px; }
.saved-job strong { font-size: 14px; }
.saved-job p { font-size: 11px; }
.saved-job .primary { margin-left: auto; }
.match-panel {
  grid-template-columns: .8fr 1.6fr;
  border-color: var(--line);
  background: var(--panel);
  box-shadow: none;
}
.match-intro > p:last-child { font-size: 13px; }
.metric { border-radius: 10px; background: #1d1d23; }
.metric span { font-size: 11px; }
.keyword-box p { font-size: 12px; }
.generation-panel { border-radius: 14px; clip-path: none; }

/* Templates, editor and settings */
.library-head > p { max-width: 470px; color: var(--muted); font-size: 14px; }
.template-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.template-card { border-radius: 12px; }
.template-card:hover { transform: translateY(-3px); }
.template-meta p { font-size: 10px; }
.template-actions .primary, .template-actions .secondary { font-size: 12px; }
.editor-tools p, .panel-note { color: var(--muted); font-size: 13px; }
.profile-grid { gap: 16px; }
.profile-panel { padding: 26px; }
.profile-panel::before { display: none; }
.parsed-profile { min-height: 0; }
.parsed-block p { color: var(--muted); font-size: 12px; }
.file-card b, .file-card a, .compact-upload b { font-size: 12px; }
.billing-heading p, .plan-includes p { font-size: 12px; }
.billing-note { color: var(--muted); font-size: 10px; }
.toast { border-radius: 10px; clip-path: none; font-size: 12px; }

/* Legal pages */
.legal-page { min-height: 100vh; padding: 34px clamp(22px, 6vw, 92px) 80px; background: radial-gradient(circle at 80% 10%, rgba(199,255,61,.08), transparent 28%), var(--void); }
.legal-page > .brand { position: sticky; top: 24px; }
.legal-page article { width: min(760px, 100%); margin: clamp(90px, 13vh, 150px) auto 0; }
.legal-page .eyebrow { color: var(--signal); }
.legal-page h1 { margin: 18px 0 30px; font: 700 clamp(52px, 7vw, 92px)/.88 var(--display); letter-spacing: -.065em; }
.legal-page h1 em { color: var(--signal); font-family: var(--serif); font-weight: 400; }
.legal-lead { color: #cbc7d0; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.55; }
.legal-page section { padding: 28px 0; border-top: 1px solid var(--line); }
.legal-page section h2 { margin: 0 0 10px; font-size: 16px; }
.legal-page section p, .legal-page footer { color: var(--muted); font-size: 14px; line-height: 1.75; }
.legal-page a { color: var(--text); text-underline-offset: 4px; }
.legal-page footer { padding-top: 25px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { min-height: 58vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .product-shell { grid-template-columns: 1fr; background: var(--void); }
  .product-shell::after { display: none; }
  .sidebar {
    position: sticky;
    top: 0;
    align-self: auto;
    min-height: 0;
    height: auto;
    padding: 14px 18px;
    overflow: visible;
    background: #111115;
    border-bottom: 1px solid var(--line);
  }
  .sidebar nav { grid-template-columns: repeat(4, 1fr); }
  .app-main { padding-top: 28px; }
  .template-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .auth-intro { min-height: 520px; padding: 100px 22px 48px; }
  .auth-intro .brand { left: 22px; top: 24px; }
  .auth-intro h1 { font-size: 51px; }
  .auth-note { font-size: 15px; }
  .auth-panel { padding: 38px 22px 52px; }
  .google-auth { min-height: 52px; padding: 0 16px; grid-template-columns: 22px 1fr 22px; }
  .google-mark { width: 22px; height: 22px; }
  .onboarding-layout { margin-top: 60px; }
  .onboarding-copy h1 { font-size: 48px; }
  .sidebar nav { margin-top: 12px; }
  .nav-link { min-height: 42px; padding: 0 7px; }
  .nav-link span { font-size: 12px; }
  .app-header { align-items: flex-start; }
  .app-header h1 { font-size: 34px; }
  .header-plan { min-width: 132px; font-size: 11px; }
  .signal-copy { padding: 30px 22px; }
  .signal-copy h2 { font-size: 41px; }
  .archive-stats { grid-template-columns: 1fr; }
  .archive-stats article, .archive-stats article:last-child { min-height: 110px; grid-column: auto; }
  .archive-head { align-items: flex-start; }
  .progress { overflow-x: auto; padding-bottom: 6px; white-space: nowrap; }
  .job-form { gap: 8px; }
  .saved-job .primary { width: 100%; margin-left: 0; }
  .match-panel { padding: 22px; }
  .template-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Template creation, preview and progress */
.template-actions { gap: 7px; }
.template-actions .template-preview-action {
  color: var(--text);
  background: transparent;
  border-color: rgba(255,255,255,.28);
}
.template-actions .template-preview-action:hover { color: var(--void); background: var(--text); }

.modal-open { overflow: hidden; }
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(5, 5, 7, .78);
  backdrop-filter: blur(10px);
}
.template-modal {
  width: min(1080px, calc(100vw - 48px));
  height: min(900px, calc(100dvh - 48px));
  padding: 30px;
  position: fixed;
  z-index: 90;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #141419;
  box-shadow: 0 40px 120px rgba(0,0,0,.65);
}
.modal-close {
  width: 42px;
  height: 42px;
  position: absolute;
  z-index: 2;
  right: 22px;
  top: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: #1c1c22;
  cursor: pointer;
  font-size: 25px;
}
.modal-close:hover { color: var(--void); background: var(--signal); }

/* Plan chooser — the decision happens here, before checkout. */
#planModalScrim { z-index: 91; }
.plan-modal {
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  padding: clamp(24px, 4vw, 48px);
  position: fixed;
  z-index: 92;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: auto;
  border: 1px solid rgba(202,255,82,.26);
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(158,232,239,.06), transparent 35%),
    radial-gradient(circle at 86% 8%, rgba(202,255,82,.1), transparent 29%),
    #121216;
  box-shadow: 0 48px 150px rgba(0,0,0,.72);
}
.plan-modal::before {
  content: "";
  height: 1px;
  position: absolute;
  left: 48px;
  right: 48px;
  top: 0;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
}
.plan-modal-head { max-width: 720px; padding-right: 58px; }
.plan-modal-head .eyebrow { margin: 0 0 12px; color: var(--signal); }
.plan-modal-head h2 { max-width: 680px; margin: 0; font-size: clamp(38px, 5vw, 68px); line-height: .93; letter-spacing: -.065em; text-transform: none; }
.plan-modal-head > p { max-width: 610px; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.plan-list { margin-top: 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.plan-tier { min-width: 0; padding: 27px; position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.plan-tier.is-current { box-shadow: inset 0 0 0 1px rgba(158,232,239,.2); }
.plan-tier.is-current::after { content: "Current plan"; position: absolute; right: 20px; top: 20px; color: var(--cyan); font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.plan-tier-paid { padding-top: 57px; border-color: rgba(202,255,82,.45); background: linear-gradient(155deg, rgba(202,255,82,.09), rgba(255,255,255,.025) 42%); }
.plan-recommended { height: 31px; padding: 0 15px; position: absolute; left: -1px; right: -1px; top: -1px; display: flex; align-items: center; gap: 8px; border-radius: 16px 16px 0 0; color: #11130e; background: var(--signal); font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.plan-recommended i { width: 6px; height: 6px; border-radius: 50%; background: #11130e; box-shadow: 0 0 0 4px rgba(17,19,14,.14); }
.plan-tier-pro { border-color: rgba(158,232,239,.45); background: linear-gradient(155deg, rgba(158,232,239,.09), rgba(255,255,255,.025) 42%); }
.plan-tier-pro .plan-price b { color: var(--cyan); text-shadow: 0 0 32px rgba(158,232,239,.14); }
.plan-pro-label { height: 31px; padding: 0 15px; position: absolute; left: -1px; right: -1px; top: -1px; display: flex; align-items: center; gap: 8px; border-radius: 16px 16px 0 0; color: #0b1618; background: var(--cyan); font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.plan-pro-label i { width: 6px; height: 6px; border-radius: 50%; background: #0b1618; box-shadow: 0 0 0 4px rgba(11,22,24,.14); }
.plan-tier-top span { display: block; margin-bottom: 6px; color: var(--muted); font: 500 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.plan-tier-top strong { display: block; padding-right: 90px; font-size: 19px; }
.plan-price { min-height: 72px; margin: 23px 0 17px; display: flex; align-items: flex-end; gap: 9px; }
.plan-price b { color: var(--text); font: 400 clamp(50px, 5vw, 72px)/.78 var(--serif); letter-spacing: -.045em; }
.plan-tier-paid .plan-price b { color: var(--signal); text-shadow: 0 0 32px rgba(202,255,82,.14); }
.plan-price small { margin-bottom: 2px; color: var(--muted); font-size: 10px; }
.plan-tier > p { min-height: 46px; margin: 0 0 21px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.plan-tier ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 11px; }
.plan-tier li { padding-left: 20px; position: relative; color: #d4d1d8; font-size: 12px; }
.plan-tier li::before { content: "↳"; position: absolute; left: 0; color: var(--cyan); font-family: var(--mono); }
.plan-tier li b { color: var(--text); }
.plan-tier-action { width: 100%; min-height: 48px; margin-top: auto; }
.plan-tier-action:disabled { cursor: default; opacity: .56; }
.plan-secure-note { margin-top: 10px; color: #85808c; font: 400 8px/1.5 var(--mono); text-align: center; }
.plan-modal-foot { margin-top: 16px; padding-top: 16px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #827d88; font: 400 9px var(--mono); }
.upgrade-confirm {
  min-height: 100%;
  padding: clamp(32px, 6vw, 72px);
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(30px, 6vw, 80px);
  align-content: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 82% 22%, rgba(158,232,239,.15), transparent 27%),
    linear-gradient(140deg, rgba(202,255,82,.07), transparent 43%),
    #121216;
}
.upgrade-confirm::after { content: ""; position: absolute; inset: 18px; pointer-events: none; border: 1px solid rgba(158,232,239,.13); border-radius: 14px; }
.upgrade-confirm-close { width: 46px; height: 46px; position: absolute; z-index: 2; left: 24px; top: 24px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: rgba(255,255,255,.035); cursor: pointer; font-size: 20px; }
.upgrade-confirm-close:hover { color: var(--void); background: var(--cyan); }
.upgrade-confirm-copy { align-self: center; }
.upgrade-confirm-copy .eyebrow { margin: 0 0 14px; color: var(--signal); }
.upgrade-confirm-copy h3 { max-width: 610px; margin: 0; font-size: clamp(44px, 6vw, 76px); line-height: .88; letter-spacing: -.065em; }
.upgrade-confirm-copy > p:not(.eyebrow) { max-width: 590px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.upgrade-route { margin-top: 34px; padding: 16px 0; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.upgrade-route span { color: var(--muted); }
.upgrade-route i { color: var(--signal); font: 400 18px var(--mono); }
.upgrade-route strong { color: var(--cyan); }
.upgrade-charge { padding: clamp(25px, 4vw, 42px); align-self: center; position: relative; border: 1px solid rgba(158,232,239,.32); border-radius: 18px; background: rgba(255,255,255,.035); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.upgrade-charge > span { color: var(--cyan); font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.upgrade-charge > strong { margin: 18px 0 14px; display: block; color: var(--text); font: 400 clamp(56px, 7vw, 88px)/.72 var(--serif); letter-spacing: -.045em; }
.upgrade-charge p { margin: 0; color: #d0ccd5; font-size: 12px; }
.upgrade-charge small { margin-top: 19px; padding-top: 16px; display: block; border-top: 1px solid var(--line); color: var(--muted); font: 400 9px/1.55 var(--mono); }
.upgrade-confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; }
.upgrade-confirm-actions button { min-height: 48px; }

@media (max-width: 900px) {
  .plan-list { grid-template-columns: 1fr; }
  .plan-tier > p { min-height: 0; }
  .upgrade-confirm { grid-template-columns: 1fr; align-content: start; padding: 90px 28px 34px; }
  .upgrade-confirm-copy h3 { font-size: 52px; }
  .upgrade-confirm-actions { grid-column: auto; }
}
.template-modal-head {
  min-height: 78px;
  padding: 0 62px 22px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--line);
}
.template-modal-head .eyebrow { margin: 0 0 7px; color: var(--signal); }
.template-modal-head h2 { margin: 0; font-size: 36px; letter-spacing: -.045em; }
.template-modal-head > p { max-width: 420px; margin: 0; color: var(--muted); font-size: 12px; }
.template-modal-stage {
  height: auto;
  min-height: 0;
  flex: 1;
  padding: 34px;
  overflow: auto;
  display: grid;
  justify-items: center;
  background: #0e0e12;
}
.template-modal-stage .resume-paper {
  width: min(100%, 800px);
  flex: 0 0 auto;
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
}
.canonical-template-preview {
  width: min(100%, 920px);
  background: #fff;
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
}
.canonical-template-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.api-loader {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(190,255,55,.11), transparent 28%),
    rgba(7,7,10,.92);
  backdrop-filter: blur(22px) saturate(130%);
}
.api-loader-noise {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}
.api-loader-card {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: 48px;
  padding: 46px;
  position: relative;
  border: 1px solid rgba(190,255,55,.22);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(26,26,31,.96), rgba(15,15,19,.97));
  box-shadow: 0 50px 140px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.05);
}
.api-loader-card::after {
  content: "PROCESS / LIVE";
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(190,255,55,.5);
  font: 500 9px var(--mono);
  letter-spacing: .15em;
}
.typewriter-machine {
  --machine-width: 156px;
  width: 220px;
  height: 220px;
  position: relative;
  display: grid;
  place-items: center;
  animation: typewriterBounce 3s linear infinite;
}
.typewriter-orbit { position: absolute; inset: 7px; border: 1px dashed rgba(190,255,55,.19); border-radius: 50%; animation: spin 11s linear infinite; }
.typewriter-orbit::after { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(143,228,239,.12); border-radius: 50%; }
.typewriter-paper {
  position: absolute;
  left: 83px;
  top: 37px;
  width: 58px;
  height: 68px;
  border-radius: 6px 6px 2px 2px;
  background: #eef0e9;
  transform: translateY(45px);
  animation: typewriterPaper 3s linear infinite;
  box-shadow: 0 0 22px rgba(255,255,255,.08);
}
.typewriter-paper::before { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 4px; border-radius: 2px; background: rgba(15,15,19,.26); box-shadow: 0 13px 0 rgba(15,15,19,.22), 0 26px 0 rgba(15,15,19,.18), 0 39px 0 rgba(15,15,19,.14); }
.typewriter-carriage {
  position: absolute;
  left: 43px;
  top: 92px;
  z-index: 2;
  width: 128px;
  height: 28px;
  margin-left: 12px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--cyan), #42738a);
  transform: translateX(12px);
  animation: typewriterSlide 3s ease infinite;
  box-shadow: 0 8px 24px rgba(72,159,177,.2);
}
.typewriter-carriage::before, .typewriter-carriage::after, .typewriter-carriage i::before { content: ""; position: absolute; background: var(--signal); }
.typewriter-carriage::before { width: 3px; height: 12px; top: 8px; left: 100%; }
.typewriter-carriage::after { left: 130px; top: 4px; width: 8px; height: 20px; border-radius: 4px; }
.typewriter-carriage i { display: block; position: absolute; right: 100%; top: 6px; width: 8px; height: 6px; background: var(--signal); }
.typewriter-carriage i::before { right: 100%; top: -3px; width: 5px; height: 17px; border-radius: 3px; }
.typewriter-keyboard {
  position: absolute;
  left: 34px;
  top: 111px;
  z-index: 3;
  width: var(--machine-width);
  height: 74px;
  border-radius: 8px;
  background: linear-gradient(145deg, #354046, #171a1d);
  transform: perspective(28px) rotateX(5deg);
  transform-origin: 50% 100%;
  box-shadow: 0 20px 40px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.12);
}
.typewriter-keyboard::before { content: ""; position: absolute; left: 17px; top: 19px; width: 14px; height: 7px; border-radius: 3px; background: #f4f3ee; box-shadow: 21px 0 #f4f3ee, 42px 0 #f4f3ee, 63px 0 #f4f3ee, 84px 0 #f4f3ee, 105px 0 #f4f3ee, 10px 16px #f4f3ee, 31px 16px #f4f3ee, 52px 16px #f4f3ee, 73px 16px #f4f3ee, 94px 16px #f4f3ee, 24px 32px #f4f3ee, 45px 32px #f4f3ee, 66px 32px #f4f3ee, 87px 32px #f4f3ee; animation: typewriterKeys 3s linear infinite; }
.typewriter-keyboard::after { content: ""; position: absolute; left: 47px; bottom: 8px; width: 62px; height: 5px; border-radius: 3px; background: var(--signal); box-shadow: 0 0 10px rgba(190,255,55,.28); }
.api-loader-copy .eyebrow { margin: 0 0 10px; color: var(--cyan); }
.api-loader-copy h2 { max-width: 430px; margin: 0; font-size: clamp(31px, 5vw, 52px); line-height: .98; letter-spacing: -.06em; }
.typewriter-status { min-height: 48px; margin-top: 24px; display: flex; align-items: flex-start; color: #f4f3ee; font: 500 13px/1.55 var(--mono); }
.typewriter-status i { width: 2px; height: 18px; margin: 1px 0 0 5px; flex: 0 0 auto; background: var(--signal); animation: cursorBlink .72s steps(1) infinite; }
.loader-track {
  height: 3px;
  margin: 7px 0 16px;
  overflow: hidden;
  border-radius: 99px;
  background: #303037;
}
.loader-track i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--signal));
  box-shadow: 0 0 16px rgba(190,255,55,.35);
  animation: loaderProgress 1.25s cubic-bezier(.65,0,.35,1) infinite;
}
.api-loader-copy small { color: var(--muted); font: 400 10px/1.5 var(--mono); }
body.api-busy { overflow: hidden; cursor: progress; }
@keyframes loaderProgress { from { transform: translateX(-110%); } to { transform: translateX(275%); } }
@keyframes cursorBlink { 50% { opacity: 0; } }
@keyframes typewriterBounce { 0%, 6%, 12%, 18%, 100% { transform: translateY(0); } 3%, 9%, 15% { transform: translateY(-5px); } 30% { transform: translateY(2px); } }
@keyframes typewriterPaper { 0% { transform: translateY(45px); } 20%, 100% { transform: translateY(0); } }
@keyframes typewriterSlide { 0%, 35% { transform: translateX(12px); } 70%, 100% { transform: translateX(-12px); } }
@keyframes typewriterKeys { 0%, 12%, 20%, 32%, 40%, 52%, 60%, 72%, 80%, 100% { transform: translateY(0); opacity: 1; } 6%, 26%, 46%, 66% { transform: translateY(2px); opacity: .82; } }

/* Every named format is reflected in both the editor and generated PDF. */
.resume-paper { --resume-accent: #18211b; }
.resume-paper header, .resume-paper h4 { border-color: var(--resume-accent); }
.resume-paper h1, .resume-paper h3 { color: var(--resume-accent); }
.resume-paper.atelier { --resume-accent: #18211b; }
.resume-paper.signal { --resume-accent: #b21939; border-top: 8px solid #b21939; }
.resume-paper.architect { --resume-accent: #173f5f; border-left: 9px solid #173f5f; }
.resume-paper.ledger { --resume-accent: #374044; font-variant-numeric: tabular-nums; }
.resume-paper.harbor { --resume-accent: #217a72; }
.resume-paper.harbor header { text-align: center; }
.resume-paper.folio { --resume-accent: #7d4e57; }
.resume-paper.folio header { text-align: center; border-bottom-style: double; }
.resume-paper.fieldnote { --resume-accent: #766b38; background: #fbf8ed; }
.resume-paper.noir { --resume-accent: #252525; background: #fff; }
.resume-paper.dawn { --resume-accent: #aa5a37; border-top: 8px solid #aa5a37; }
.resume-paper.proof { --resume-accent: #4b5962; box-shadow: 0 0 0 1px #d7d9da; }

@media (max-width: 680px) {
  .plan-modal {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    padding: 24px 18px 34px;
    border: 0;
    border-radius: 0;
  }
  .plan-modal::before { left: 18px; right: 18px; }
  .plan-modal .modal-close { right: 16px; top: 16px; }
  .plan-modal-head { padding: 60px 0 0; }
  .plan-modal-head h2 { font-size: 42px; }
  .plan-modal-head > p { font-size: 13px; }
  .plan-list { margin-top: 28px; grid-template-columns: 1fr; }
  .plan-tier { padding: 23px 20px; }
  .plan-tier-paid { padding-top: 54px; }
  .plan-tier-top strong { padding-right: 76px; }
  .plan-price { min-height: 58px; }
  .plan-price b { font-size: 54px; }
  .plan-tier > p { min-height: 0; }
  .plan-modal-foot { display: grid; gap: 6px; }
  .upgrade-confirm { padding: 82px 18px 28px; gap: 24px; }
  .upgrade-confirm::after { inset: 8px; }
  .upgrade-confirm-close { left: 16px; top: 16px; }
  .upgrade-confirm-copy h3 { font-size: 43px; }
  .upgrade-confirm-copy > p:not(.eyebrow) { font-size: 13px; }
  .upgrade-route { margin-top: 24px; gap: 10px; font-size: 11px; }
  .upgrade-charge { padding: 25px 20px; }
  .upgrade-charge > strong { font-size: 62px; }
  .upgrade-confirm-actions { display: grid; grid-template-columns: 1fr 1.35fr; }
  .upgrade-confirm-actions button { padding-inline: 10px; font-size: 9px; }
  .template-modal {
    width: 100vw;
    height: 100dvh;
    padding: 20px;
    border: 0;
    border-radius: 0;
  }
  .template-modal-head { display: block; padding-right: 50px; }
  .template-modal-head h2 { font-size: 28px; }
  .template-modal-head > p { margin-top: 8px; }
  .template-modal-stage { height: auto; padding: 18px 8px; }
  .template-modal-stage .resume-paper { min-height: 850px; padding: 38px 26px; }
  .api-loader { padding: 14px; }
  .api-loader-card { grid-template-columns: 1fr; gap: 12px; padding: 34px 24px 28px; text-align: center; }
  .typewriter-machine { width: 220px; height: 172px; margin: -8px auto 0; scale: .78; }
  .api-loader-copy h2 { margin-inline: auto; }
  .typewriter-status { min-height: 60px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-machine, .typewriter-orbit, .typewriter-paper, .typewriter-carriage, .typewriter-keyboard::before, .loader-track i, .typewriter-status i { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Dashboard first-viewport hierarchy: keep saved work visible without scrolling. */
#dashboardView .signal-copy {
  max-width: 720px;
  padding: clamp(28px, 3.1vw, 42px) clamp(28px, 4vw, 54px);
}
#dashboardView .signal-copy h2 {
  max-width: 610px;
  margin: 16px 0 10px;
  font-size: clamp(38px, 3.8vw, 56px);
  line-height: .96;
}
#dashboardView .signal-copy > p {
  max-width: 570px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
}
#dashboardView .signal-copy .primary { min-height: 44px; }
#dashboardView .archive-stats { margin-top: 10px; gap: 10px; }
#dashboardView .archive-stats article {
  min-height: 98px;
  padding: 14px 17px;
  border-radius: 12px;
}
#dashboardView .archive-stats strong { font-size: 40px; line-height: .86; }
#dashboardView .archive-stats strong.date-stat { font-size: clamp(25px, 2.4vw, 34px); }
#dashboardView .archive-stats p { margin-top: 4px; font-size: 9px; line-height: 1.25; }
#dashboardView .archive-head { margin: 24px 0 10px; }
#dashboardView .archive-head .eyebrow { margin-bottom: 4px; }
#dashboardView .archive-head h2 { font-size: clamp(31px, 3.1vw, 44px); }
#dashboardView .history-item { min-height: 76px; padding-block: 11px; }

@media (min-width: 1101px) {
  #dashboardView .archive-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #dashboardView .signal-copy { padding: 24px 20px; }
  #dashboardView .signal-copy h2 { margin-top: 13px; font-size: 36px; }
  #dashboardView .signal-copy > p { display: none; }
  #dashboardView .signal-copy .primary { margin-top: 17px; }
  #dashboardView .archive-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #dashboardView .archive-stats article,
  #dashboardView .archive-stats article:last-child { min-height: 88px; padding: 13px; grid-column: auto; }
  #dashboardView .archive-stats strong { font-size: 34px; }
  #dashboardView .archive-stats strong.date-stat { font-size: 24px; }
  #dashboardView .archive-head { margin-top: 22px; }
}

/* Evidence-backed format library and ATS assessment */
.archive-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ats-stat strong, .ats-gauge strong, .editor-score b, .ats-pill b, .score-pair b {
  color: var(--signal);
  font-family: var(--serif);
  font-weight: 400;
}
.source-actions { display: flex; align-items: center; gap: 18px; }
.ats-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 10px;
}
.ats-pill b { font-size: 20px; line-height: 1; }
.score-pair { display: flex; gap: 9px; margin-top: 18px; }
.score-pair span {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 11px;
}
.score-pair b { margin-right: 5px; font-size: 23px; }

.recommended-library {
  margin: 0 0 34px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(202,255,82,.28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(202,255,82,.055), transparent 38%), var(--panel);
}
.section-heading {
  margin-bottom: 19px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section-heading span { color: var(--signal); font-size: 11px; }
.section-heading h3 { margin: 5px 0 0; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.045em; }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 12px; }
.recommended-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.library-controls {
  margin: 0 0 15px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, .8fr));
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.library-controls label { color: var(--muted); font-size: 10px; }
.library-controls input, .library-controls select { width: 100%; min-height: 42px; margin-top: 5px; font-size: 12px; }
.library-results { margin: 0 2px 14px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.library-empty { grid-column: 1 / -1; padding: 54px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; }

.template-card { min-width: 0; display: flex; flex-direction: column; border-radius: 14px; }
.template-card.is-recommended { border-color: rgba(202,255,82,.34); }
.template-preview {
  height: 205px;
  padding: 17px;
  overflow: hidden;
  background: #f2f0e9;
}
.template-preview::before { display: none; }
.canonical-template-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: #fff;
  transition: transform .35s ease;
}
.template-card:hover .canonical-template-thumb { transform: scale(1.025); }
.template-preview .preview-kicker {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 5px 7px;
  border-radius: 5px;
  width: auto;
  height: auto;
  margin: 0 0 20px;
  overflow: hidden;
  color: #fff;
  background: rgba(7,7,10,.78);
  backdrop-filter: blur(7px);
  font: 600 8px/1.2 var(--mono);
  letter-spacing: .05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.template-preview .preview-name { width: 62%; height: 10px; margin: 0 0 12px; background: var(--format); }
.template-preview i { height: 2px; margin-top: 7px; background: #c0bdb5; }
.template-preview i:nth-of-type(1) { width: 88%; }
.template-preview i:nth-of-type(2) { width: 72%; }
.template-preview i:nth-of-type(3) { width: 80%; }
.template-preview > span {
  left: 17px;
  right: 17px;
  bottom: 48px;
  width: auto;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: #c8c4bb;
  box-shadow: none;
  opacity: 1;
}
.compatibility-badge {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 13px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--format) 45%, transparent);
  border-radius: 999px;
  color: var(--format);
  background: rgba(255,255,255,.65);
  font: 700 7px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.template-preview.engine-education-first .preview-name,
.template-preview.engine-projects-first .preview-name { margin-top: 15px; }
.template-preview.engine-portfolio { background: #f4eee9; }
.template-preview.engine-research { background: #f4f0e5; }
.template-preview.engine-government { background: #edf1f3; }
.template-preview.engine-executive .preview-name { width: 78%; }
.template-preview.engine-deal-centric .preview-name { width: 48%; }
.template-meta { min-height: 185px; padding: 16px; }
.template-meta strong { display: block; margin-top: 12px; font-size: 17px; line-height: 1.15; }
.template-meta p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.template-meta > small { display: block; margin-top: 12px; color: #8f8b96; font-size: 9px; }
.template-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.template-badges span {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 8px;
}
.template-actions { padding: 17px; }
.template-action-copy { width: 100%; margin-bottom: 4px; text-align: left; }
.template-action-copy span { color: var(--signal); font-size: 10px; }
.template-action-copy p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }

.preview-context { max-width: 450px; }
.preview-context p { margin: 0 0 7px; color: var(--muted); font-size: 12px; }
.preview-context a { color: var(--cyan); font-size: 11px; }
.template-modal-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.template-modal-actions button { min-height: 36px; padding: 0 13px; font-size: 10px; }

.ats-panel { grid-column: 1 / -1; }
.ats-heading { margin: 20px 0 24px; display: flex; align-items: center; gap: 24px; }
.ats-heading h2 { font-size: 30px; }
.ats-heading p { max-width: 520px; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.ats-gauge {
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid var(--line-hot);
  border-radius: 50%;
  box-shadow: inset 0 0 35px rgba(202,255,82,.07);
}
.ats-gauge strong { font-size: 47px; line-height: .8; }
.ats-gauge span { color: var(--muted); font-size: 10px; }
.ats-dimensions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ats-dimensions > div { padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-high); }
.ats-dimensions span { display: block; color: var(--muted); font-size: 10px; }
.ats-dimensions i { height: 3px; margin: 11px 0 8px; display: block; overflow: hidden; background: #33333a; }
.ats-dimensions i b { height: 100%; display: block; background: var(--signal); }
.ats-dimensions strong { font-size: 19px; }
.ats-findings { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ats-findings > div { padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
.ats-findings span { color: var(--cyan); font-size: 11px; }
.ats-findings ul { margin: 10px 0 0; padding-left: 17px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.editor-score { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 11px; color: var(--muted); font-size: 10px; border: 1px solid var(--line); border-radius: 8px; }
.editor-score b { font-size: 22px; line-height: 1; }
.editor-stage {
  display: block;
}
.editor-stage .editor-tools {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(180px, .55fr) 1fr 1fr;
  column-gap: 24px;
  align-items: start;
}
.editor-stage .editor-tools span { margin-top: 0; }
.source-editor { min-width: 0; }
.source-editor-label {
  min-height: 48px;
  padding: 0 3px 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  color: var(--cyan);
  font: 600 10px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.source-editor-label small {
  max-width: 240px;
  color: var(--muted);
  font: 400 9px/1.45 var(--mono);
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
}
.source-editor .resume-paper {
  width: min(100%, 820px);
  min-height: 1060px;
  margin: 0 auto;
  padding: 58px 52px;
}
.structured-content-paper {
  --resume-accent: #263b36;
  background: #fbfaf5;
}
.structured-content-paper header,
.structured-content-paper h4 { border-color: #263b36; }
.structured-content-paper h1,
.structured-content-paper h3 { color: #18211b; }
.structured-content-paper .resume-layout {
  display: block;
}
.structured-content-paper .resume-layout > aside,
.structured-content-paper .resume-layout > main {
  padding: 0;
  margin: 0;
  min-height: 0;
  color: inherit;
  background: transparent;
}
.structured-content-paper [data-resume-path]:focus {
  border-radius: 3px;
  outline: 2px solid rgba(54, 153, 153, .55);
  outline-offset: 2px;
  background: rgba(54, 153, 153, .1);
}
.document-workspace { margin-top: 18px; }
.document-modebar {
  min-height: 58px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #15151a;
}
.document-modebar button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font: 650 12px var(--display);
  cursor: pointer;
}
.document-modebar button:hover { color: var(--ink); background: rgba(255,255,255,.045); }
.document-modebar button.active { color: #11120f; background: var(--signal); }
.document-modebar > span { margin-left: auto; padding-right: 10px; color: var(--muted); font: 500 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.direct-preview,
.source-editor {
  min-height: 900px;
  padding: clamp(22px, 4vw, 58px);
  border: 1px solid var(--line);
  border-radius: 0 0 14px 14px;
  background: radial-gradient(circle at 50% 0, #24242a 0, #16161b 42%, #101014 100%);
}
.compiled-resume-pages {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 28px;
}
.compiled-resume-page {
  max-width: 100%;
  height: auto !important;
  display: block;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12);
}
.preview-loading {
  min-height: 680px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--muted);
  font: 500 10px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.preview-loading i { width: 32px; height: 32px; border: 2px solid #3a3a42; border-top-color: var(--signal); border-radius: 50%; animation: directPreviewSpin .75s linear infinite; }
@keyframes directPreviewSpin { to { transform: rotate(360deg); } }

.resume-paper { --resume-accent: #252a2d; border: 0; }
.resume-entry > strong,.resume-entry > span { display: block; }
.resume-entry > span { margin-top: 3px; }
.resume-paper.engine-education-first,
.resume-paper.engine-technical-leadership { --resume-accent: #173f5f; }
.resume-paper.engine-projects-first { --resume-accent: #285c4d; }
.resume-paper.engine-experience-first { --resume-accent: #252a2d; }
.resume-paper.engine-executive { --resume-accent: #30363a; padding-top: 82px; }
.resume-paper.engine-deal-centric { --resume-accent: #263b36; font-variant-numeric: tabular-nums; }
.resume-paper.engine-research { --resume-accent: #574b32; background: #fbfaf6; }
.resume-paper.engine-portfolio { --resume-accent: #714557; }
.resume-paper.engine-portfolio header { text-align: center; }
.resume-paper.engine-government { --resume-accent: #29445b; font-size: 10px; }
.resume-paper.engine-transition { --resume-accent: #5d493e; }

/* Stored source-template layouts: materially different structures, not colour swaps. */
.mini-resume { position: relative; width: 100% !important; height: 137px !important; margin: 0 !important; padding: 12px; display: grid; grid-template-columns: 1fr; grid-template-rows: 22px 1fr; gap: 8px; background: #fff !important; box-shadow: 0 8px 24px rgba(25,25,30,.12); }
.mini-resume header { width: 55%; height: 8px; background: var(--format); }
.mini-resume aside, .mini-resume main { width: auto !important; height: auto !important; margin: 0 !important; background: transparent !important; }
.mini-resume aside { display: none; }
.mini-resume main b { display: block; width: 44%; height: 4px; margin: 7px 0 5px; background: var(--format); }
.mini-resume i { display: block; width: 92% !important; height: 2px !important; margin: 4px 0 !important; background: #c8c6c0 !important; }
.mini-resume i:nth-child(3n) { width: 68% !important; }
.layout-classic-tight .mini-resume { padding: 9px 14px; text-align: center; }
.layout-classic-tight .mini-resume header { width: 38%; margin: 0 auto; background: #111; }
.layout-classic-rule .mini-resume header { width: 100%; border-bottom: 2px solid #111827; background: linear-gradient(90deg,#111827 0 36%,transparent 36%); }
.layout-technical-grid .mini-resume { grid-template-columns: 1fr 1fr; grid-template-rows: 24px 1fr; }
.layout-technical-grid .mini-resume header { grid-column: 1/-1; width: 100%; border-bottom: 3px double var(--format); background: transparent; }
.layout-harvard-serif .mini-resume { border-top: 6px solid var(--format); }
.layout-harvard-serif .mini-resume header { width: 72%; height: 10px; }
.layout-modern-band .mini-resume { padding-left: 25px; border-left: 13px solid var(--format); }
.layout-engineering-grid .mini-resume { background-image: linear-gradient(#eef4f7 1px,transparent 1px) !important; background-size: 100% 13px !important; }
.layout-engineering-grid .mini-resume header { width: 48%; }
.layout-sidebar-left .mini-resume,.layout-profile-sidebar .mini-resume,.layout-two-column .mini-resume,.layout-sidebar-right .mini-resume { grid-template-columns: 34% 1fr; grid-template-rows: 22px 1fr; gap: 8px; }
.layout-sidebar-left .mini-resume aside,.layout-profile-sidebar .mini-resume aside,.layout-two-column .mini-resume aside,.layout-sidebar-right .mini-resume aside { display: block; grid-row: 1/-1; padding: 8px; background: color-mix(in srgb,var(--format) 12%,#f4f1ea) !important; }
.layout-sidebar-left .mini-resume header,.layout-profile-sidebar .mini-resume header,.layout-two-column .mini-resume header,.layout-sidebar-right .mini-resume header { grid-column: 2; width: 75%; }
.layout-sidebar-right .mini-resume { grid-template-columns: 1fr 34%; }
.layout-sidebar-right .mini-resume aside { grid-column: 2; }
.layout-sidebar-right .mini-resume header,.layout-sidebar-right .mini-resume main { grid-column: 1; }
.layout-profile-sidebar .mini-resume aside { border-radius: 60px 60px 0 0; background: var(--format) !important; }
.layout-awesome-accent .mini-resume header { width: 78%; height: 12px; background: linear-gradient(90deg,var(--format) 0 22%,#2f2f2f 22%); }
.layout-awesome-accent .mini-resume main b { padding-left: 8px; border-left: 4px solid var(--format); background: transparent; }

.resume-layout { min-width: 0; }
.resume-sidebar-layout,.resume-two-column { display: grid; grid-template-columns: 30% 1fr; gap: 30px; }
.resume-sidebar-layout aside { grid-column: 1; grid-row: 1; }
.resume-sidebar-layout main { grid-column: 2; grid-row: 1; }
.resume-paper.layout-sidebar-right .resume-sidebar-layout { grid-template-columns: 1fr 30%; }
.resume-paper.layout-sidebar-right .resume-sidebar-layout aside { grid-column: 2; }
.resume-paper.layout-sidebar-right .resume-sidebar-layout main { grid-column: 1; }
.resume-two-column { grid-template-columns: 1.55fr 1fr; }
.resume-two-column aside { padding-left: 22px; border-left: 1px solid #c9c5bc; }
.resume-paper.layout-sidebar-left,.resume-paper.layout-profile-sidebar { padding-left: 0; }
.resume-paper.layout-sidebar-left > #resumeDocument > header,.resume-paper.layout-profile-sidebar > #resumeDocument > header { margin-left: 220px; padding-right: 55px; }
.resume-paper.layout-sidebar-left .resume-sidebar-layout>aside,.resume-paper.layout-profile-sidebar .resume-sidebar-layout>aside { min-height: 830px; margin-top: -86px; padding: 42px 24px 30px; color: #fff; background: var(--resume-accent); }
.resume-paper.layout-sidebar-left .resume-sidebar-layout>aside h4,.resume-paper.layout-profile-sidebar .resume-sidebar-layout>aside h4 { color: #fff; border-color: rgba(255,255,255,.45); }
.resume-paper.layout-sidebar-left .resume-sidebar-layout>main,.resume-paper.layout-profile-sidebar .resume-sidebar-layout>main { padding-right: 55px; }
.resume-paper.layout-modern-band { border-left: 16px solid var(--resume-accent); }
.resume-paper.layout-harvard-serif { font-family: Georgia,serif; border-top: 8px solid #781c2e; }
.resume-paper.layout-harvard-serif h1,.resume-paper.layout-harvard-serif h3,.resume-paper.layout-harvard-serif h4 { font-family: Georgia,serif; }
.resume-paper.layout-awesome-accent { --resume-accent:#dc3522; }
.resume-paper.layout-awesome-accent h4 { padding-left: 10px; border-left: 5px solid var(--resume-accent); border-bottom: 0; }
.resume-paper.layout-technical-grid header { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.resume-paper.layout-technical-grid header p { text-align: right; }
.resume-paper.layout-engineering-grid { background-image: linear-gradient(rgba(23,73,107,.035) 1px,transparent 1px); background-size:100% 24px; }
.resume-paper.layout-profile-sidebar { --resume-accent:#5b2c6f; }
.resume-paper.layout-profile-sidebar .resume-sidebar-layout>aside { border-radius: 120px 120px 0 0; }

@media (max-width: 1200px) {
  .archive-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recommended-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .section-heading, .source-ribbon { align-items: flex-start; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 10px; }
  .source-actions { align-items: flex-end; flex-direction: column; gap: 7px; }
  .ats-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .archive-stats, .recommended-grid, .library-controls, .ats-findings { grid-template-columns: 1fr; }
  .archive-stats article:last-child { grid-column: auto; }
  .recommended-library { padding: 17px; }
  .template-meta { min-height: 0; }
  .ats-heading { align-items: flex-start; }
  .ats-gauge { width: 92px; height: 92px; flex: 0 0 auto; }
  .ats-gauge strong { font-size: 39px; }
  .score-pair { flex-wrap: wrap; }
  .resume-sidebar-layout,.resume-two-column { grid-template-columns: 1fr; gap: 0; }
  .resume-sidebar-layout aside,.resume-sidebar-layout main,.resume-two-column aside,.resume-two-column main,
  .resume-paper.layout-sidebar-right .resume-sidebar-layout aside,.resume-paper.layout-sidebar-right .resume-sidebar-layout main { grid-column: 1; grid-row: auto; }
  .resume-paper.layout-sidebar-left,.resume-paper.layout-profile-sidebar { padding-left: 25px; }
  .resume-paper.layout-sidebar-left > #resumeDocument > header,.resume-paper.layout-profile-sidebar > #resumeDocument > header { margin-left: 0; padding-right: 0; }
  .resume-paper.layout-sidebar-left .resume-sidebar-layout>aside,.resume-paper.layout-profile-sidebar .resume-sidebar-layout>aside { min-height: 0; margin-top: 10px; padding: 18px; border-radius: 0; }
  .resume-paper.layout-sidebar-left .resume-sidebar-layout>main,.resume-paper.layout-profile-sidebar .resume-sidebar-layout>main { padding-right: 0; }
}

@media (max-width: 1100px) {
  .editor-stage .editor-tools { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .editor-stage .editor-tools { grid-column: auto; grid-template-columns: 1fr; }
  .document-modebar { align-items: stretch; flex-wrap: wrap; }
  .document-modebar button { flex: 1; }
  .document-modebar > span { width: 100%; margin: 2px 0 0; padding: 0 8px 3px; text-align: center; }
  .direct-preview, .source-editor { min-height: 70vh; padding: 14px; }
  .source-editor .resume-paper { min-height: 820px; padding: 36px 25px; }
}

/* Keep dashboard density overrides last so catalogue breakpoints cannot undo them. */
@media (min-width: 1101px) {
  #dashboardView .archive-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #dashboardView .archive-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboardView .archive-stats article,
  #dashboardView .archive-stats article:last-child { min-height: 88px; grid-column: auto; }
}

.billing-phone { max-width: 560px; margin: 22px auto 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); }
.billing-phone span,.billing-phone small { display: block; }
.billing-phone span { font-weight: 800; }
.billing-phone small { margin: 5px 0 13px; color: var(--muted); line-height: 1.45; }
.billing-phone input { width: 100%; min-height: 50px; margin-bottom: 12px; padding: 0 15px; color: var(--paper); border: 1px solid var(--line); border-radius: 12px; background: #111116; font: inherit; }
.billing-phone button { width: 100%; }
.billing-error { max-width: 720px; margin: 0 auto 18px; padding: 13px 16px; color: #ffd3d3; border: 1px solid rgba(255,96,96,.35); border-radius: 12px; background: rgba(142,25,25,.22); line-height: 1.45; }