* { box-sizing: border-box; }
:root { color-scheme: dark; --ink: #f4f5f7; --muted: #a3a7b0; --subtle: #777e89; --line: rgba(220,231,244,.12); --glass: rgba(20,23,28,.56); --field: rgba(4,6,9,.46); --focus: #cadce3; --danger: #ffaaa5; --success: #acd9c9; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-color: #414750 #090b0f; }
body { margin: 0; min-height: 100svh; color: var(--ink); isolation: isolate; background: #06080b; font: 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing: antialiased; }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { background: radial-gradient(ellipse at 81% -19%,transparent 39%,rgba(92,129,140,.11) 41%,rgba(172,204,211,.28) 42%,rgba(57,93,107,.18) 42.6%,transparent 45%), radial-gradient(ellipse at 3% 50%,rgba(58,75,86,.15),transparent 57%), radial-gradient(ellipse at 97% 72%,rgba(75,108,119,.09),transparent 48%); }
body::after { background-image: linear-gradient(rgba(204,218,230,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(204,218,230,.028) 1px,transparent 1px); background-size: 128px 128px; mask-image: linear-gradient(transparent,#000 28%,#000 70%,transparent); }
::selection { background: #d0e0e7; color: #111820; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { transition: background .18s,border-color .18s,box-shadow .18s; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.brand-logo, .result-logo { display: block; height: auto; filter: brightness(0) invert(1); }
.brand-logo { width: 226px; max-width: 100%; }
.page-header { max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 102px; border-bottom: 1px solid var(--line); }
.brand-link { display: inline-block; flex-shrink: 0; text-decoration: none; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 42px 0 35px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 5px; height: 5px; background: #c8dce1; box-shadow: 0 0 12px #c8dce155; }
.page-intro h1 { margin: 0 0 9px; font-size: clamp(27px,3.1vw,39px); line-height: 1.2; letter-spacing: -1.5px; font-weight: 500; }
.page-intro p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; }
.intro-tag { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin-bottom: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; color: #c1c6cf; background: rgba(255,255,255,.025); font-size: 10px; letter-spacing: .7px; }
.intro-tag svg { width: 13px; height: 13px; }
.workspace { display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: start; gap: 26px; max-width: 1380px; margin: 0 auto; padding: 0 40px 60px; }
.sidebar, .form-shell, .section-card, .auth-card, .account-dialog, .result-dialog { border: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(120%); backdrop-filter: blur(26px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255,255,255,.065),0 20px 60px rgba(0,0,0,.13); }
.sidebar { position: sticky; top: 24px; padding: 24px 12px 19px; border-radius: 12px; }
.menu-heading { margin: 0 12px 18px; color: var(--subtle); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; }
.section-menu { display: grid; gap: 5px; }
.menu-link { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 11px; line-height: 1.45; transition: background .18s,color .18s; }
.menu-link:hover { color: var(--ink); background: rgba(255,255,255,.035); }
.menu-link[aria-current="location"] { background: linear-gradient(110deg,rgba(223,236,243,.12),rgba(223,236,243,.03)); border-color: rgba(223,236,243,.09); color: var(--ink); }
.menu-number { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid var(--line); border-radius: 5px; color: #888f9a; font-size: 9px; font-variant-numeric: tabular-nums; }
.menu-link[aria-current="location"] .menu-number { color: #d7e3e8; border-color: #c5dae133; background: #c5dae10a; }
.progress-block { margin: 23px 12px 0; padding-top: 19px; border-top: 1px solid var(--line); }
.progress-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 10px; }
.progress-label strong { color: #d6dce4; font-weight: 500; font-variant-numeric: tabular-nums; }
.progress-track { height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.1); }
.progress-fill { display: block; width: 0; height: 100%; background: #d0e4eb; box-shadow: 0 0 9px #d0e4eb66; transition: width .2s; }
.sidebar-note { margin: 19px 12px 0; color: var(--subtle); font-size: 10px; line-height: 1.7; }
.form-shell { min-width: 0; padding: 26px; border-radius: 14px; background: rgba(19,22,28,.4); }
.form-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.form-heading h2 { margin: 0 0 5px; font-size: 19px; font-weight: 500; letter-spacing: -.5px; }
.form-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.studio-badge { padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; color: #cbd3dc; background: rgba(255,255,255,.025); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.section-card { min-width: 0; margin-bottom: 18px; padding: 26px; border-radius: 10px; background: rgba(22,26,32,.46); scroll-margin-top: 28px; }
.section-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.section-number { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 6px; background: rgba(235,244,252,.025); color: #bac5ce; font-size: 10px; font-variant-numeric: tabular-nums; }
.section-heading h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.2px; }
.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.fields-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; row-gap: 20px; }
.field { display: grid; min-width: 0; align-content: start; gap: 8px; }
.field-wide { grid-column: 1/-1; }
.field-label { color: #bdc2cb; font-size: 11px; font-weight: 400; }
.required-mark { color: #d3e4ea; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 45px; padding: 11px 13px; border: 1px solid rgba(220,231,244,.14); border-radius: 6px; outline: none; background: var(--field); color: var(--ink); transition: border-color .18s,box-shadow .18s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(220,231,244,.25); }
.field textarea { resize: vertical; min-height: 108px; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder { color: #858b95; font-size: 11px; }
.field select:has(option:checked[value=""]) { color: #9197a1; }
.field select option { background: #181c23; color: #f4f5f7; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #b5d1db; box-shadow: 0 0 0 3px #b5d1db12; }
.field input:user-invalid, .field select:user-invalid { border-color: #d78c88; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 18px; margin-top: 25px; padding-top: 23px; border-top: 1px solid var(--line); }
.feature-grid.feature-only { margin-top: 0; padding-top: 0; border: 0; }
.lazer-scope { max-width: 420px; margin-bottom: 23px; }
.feature { display: flex; align-items: center; gap: 10px; min-height: 30px; color: #b6bdc7; cursor: pointer; font-size: 11px; }
.feature input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: relative; flex: 0 0 32px; width: 32px; height: 18px; border: 1px solid #ffffff29; border-radius: 20px; background: #ffffff07; transition: background .15s,border-color .15s; }
.switch-track::after { position: absolute; content: ""; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #707986; transition: transform .15s,background .15s; }
.feature input:checked + .switch-track { background: #bdcdd7; border-color: #bdcdd7; }
.feature input:checked + .switch-track::after { background: #1c2630; transform: translateX(14px); }
.feature input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 3px; }
.notes-count { margin: 0; text-align: right; font-size: 10px; color: var(--subtle); }
.generate-section { display: grid; justify-items: center; padding: 10px 0 0; }
.generate-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: min(100%,480px); min-height: 47px; padding: 13px 24px; border: 1px solid #ffffff70; border-radius: 6px; background: linear-gradient(135deg,#f2f5f7,#c6cdd4); color: #10141a; box-shadow: inset 0 1px 0 #fff,0 4px 18px #0002; cursor: pointer; font-size: 12px; font-weight: 600; }
.generate-button:hover { background: linear-gradient(135deg,#fff,#e0e7eb); box-shadow: inset 0 1px 0 #fff,0 0 24px #bdcdd712; }
#status { margin: 14px 0 0; min-height: 18px; color: var(--muted); font-size: 11px; text-align: center; }
#status[data-state="error"] { color: var(--danger); }
.result-dialog { width: min(780px,calc(100% - 32px)); max-height: 88svh; padding: 30px; border-radius: 14px; background: rgba(17,20,26,.91); color: var(--ink); }
.result-dialog[open] { display: flex; flex-direction: column; }
.result-dialog > .result-logo, .result-dialog > .eyebrow, .result-dialog > h2, .result-dialog > footer { flex-shrink: 0; }
.result-dialog::backdrop, .account-dialog::backdrop { background: rgba(0,2,5,.65); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.result-dialog h2 { margin: 8px 0 24px; font-size: 28px; font-weight: 500; letter-spacing: -1px; }
.result-logo { width: 185px; max-width: 100%; margin-bottom: 28px; }
.result-details { min-height: 0; overflow: auto; padding: 0; }
#result { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.27); font-size: 13px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
#result p { margin: 0 0 16px; }
#result p:last-child { margin-bottom: 0; }
.result-actions { display: flex; flex: 0 0 auto; gap: 8px; }
#copy-status { margin-top: 5px; color: var(--success); }
.result-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.result-dialog footer p { margin: 0; color: var(--muted); font-size: 10px; }
.result-dialog button { padding: 10px 15px; border: 1px solid var(--line); border-radius: 6px; background: #ffffff08; color: var(--ink); cursor: pointer; font-size: 11px; }
.result-dialog #copy-caption { background: #dfe5e9; color: #11161c; }
.result-dialog button:hover { border-color: #c4d6e155; }
.site-footer { display: flex; justify-content: space-between; gap: 18px; max-width: 1300px; margin: 0 auto; padding: 21px 0 28px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 10px; letter-spacing: .4px; }
@media (max-width:1100px) { .page-header { padding-inline: 28px; } .workspace { grid-template-columns: 210px minmax(0,1fr); gap: 18px; padding-inline: 28px; } .form-shell { padding: 21px; } .section-card { padding: 22px; } .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .site-footer { margin-inline: 28px; } }
@media (max-width:800px) { .page-header { padding-inline: 22px; } .topbar { min-height: 88px; flex-wrap: wrap; padding-block: 23px; } .brand-logo { width: 198px; } .page-intro { padding: 30px 0; } .intro-tag { display: none; } .workspace { display: block; padding-inline: 22px; } .sidebar { z-index: 10; top: 0; margin: 0 -22px 18px; padding: 11px 22px; border-radius: 0; border-inline: 0; background: rgba(10,13,18,.89); } .menu-heading, .progress-block, .sidebar-note { display: none; } .section-menu { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; } .menu-link { flex: 0 0 auto; white-space: nowrap; padding: 8px 10px; font-size: 10px; } .menu-number { flex-basis: 22px; height: 22px; font-size: 8px; } .section-card { scroll-margin-top: 84px; } }
@media (max-width:560px) { .page-header { padding-inline: 18px; } .topbar { gap: 21px; } .page-intro h1 { font-size: 28px; letter-spacing: -1px; } .page-intro p:not(.eyebrow) { font-size: 12px; } .workspace { padding-inline: 16px; padding-bottom: 35px; } .sidebar { margin-inline: -16px; padding-inline: 16px; } .form-shell { padding: 16px; border-radius: 11px; } .form-heading { margin-bottom: 20px; } .form-heading h2 { font-size: 17px; } .form-heading p { font-size: 10px; } .section-card { padding: 18px; border-radius: 8px; } .fields-grid { grid-template-columns: 1fr; row-gap: 18px; } .feature-grid { grid-template-columns: 1fr; gap: 9px; } .feature { font-size: 12px; } .section-heading h3 { font-size: 14px; } .section-heading p { font-size: 10px; } .result-dialog { padding: 22px; } #result { padding: 18px; } .result-dialog footer { align-items: stretch; flex-direction: column; } .result-actions button { flex: 1; } .site-footer { margin-inline: 18px; font-size: 9px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }