/* Experimental layout. The production stylesheet and release remain untouched. */
:root {
  --page: #f5f7fc;
  --surface: #fff;
  --soft: #f8faff;
  --ink: #15243b;
  --muted: #53647c;
  --subtle: #60718a;
  --line: #d9e2f1;
  --input: #fff;
  --input-border: #aabbd3;
  --hover-surface: #eef4ff;
  --success-bg: #eef5ff;
  --success-border: #c8dcff;
  --success-text: #164990;
  --extension-attention-bg: #fff8eb;
  --extension-attention-border: #ebcb95;
  --extension-attention-dot: #bb711d;
  --extension-attention-halo: #bb711d33;
  --extension-attention-halo-peak: #bb711d66;
}
:root[data-theme="dark"] {
  --page: #0f1728;
  --surface: #152136;
  --soft: #192740;
  --ink: #eef4ff;
  --muted: #bdcbe0;
  --subtle: #a9bbd3;
  --line: #334561;
  --input: #101b2e;
  --input-border: #60738e;
  --hover-surface: #203657;
  --success-bg: #162e53;
  --success-border: #345d95;
  --success-text: #b7d3ff;
  --extension-attention-bg: #2b281f;
  --extension-attention-border: #816338;
  --extension-attention-dot: #f4aa49;
  --extension-attention-halo: #f4aa4933;
  --extension-attention-halo-peak: #f4aa4966;
}
body.experimental {font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.5;}
.experiment-banner {min-height:34px; padding:7px 18px; display:flex; align-items:center; justify-content:center; gap:12px; background:#143a87; color:#fff; font-size:12px; line-height:1.35; text-align:center;}
.experiment-banner span:first-child {font-size:10px; font-weight:800; letter-spacing:.12em; background:#ffffff24; border:1px solid #ffffff60; border-radius:100px; padding:3px 8px; white-space:nowrap;}
.experiment-banner span:last-child {opacity:.78;}
.site-header {box-shadow:0 1px 0 #09245009;}
.header-inner {max-width:1080px; min-height:74px; padding:14px 24px;}
.header-inner nav {gap:18px;}
.container {width:min(calc(100% - 40px), 960px); max-width:960px;}
.downloader {padding:24px 0 24px; text-align:left;}
.hero {max-width:800px; margin:0 auto 20px; text-align:center;}
.eyebrow {display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.075em; text-transform:uppercase;}
.eyebrow::before {content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);}
.eyebrow {display:none;}
h1 {font-size:clamp(30px,4.2vw,43px); line-height:1.12; letter-spacing:-.045em; margin:0 0 10px;}
.subtitle {max-width:670px; margin:0 auto; color:var(--muted); font-size:16px; line-height:1.45;}
.generator-card {overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 18px 60px #143a8712, 0 2px 7px #143a8708;}
.generator-step {padding:20px 28px 22px; border-bottom:1px solid var(--line);}
#download-form .generator-step:last-child {border-bottom:0;}
.step-heading {display:flex; align-items:flex-start; gap:15px; margin-bottom:12px;}
.step-heading .step-number {width:30px; height:30px; flex:0 0 30px; background:var(--step-bg); border:1px solid var(--success-border); color:var(--accent); border-radius:9px; font-size:14px; font-weight:800;}
.step-heading h2 {font-size:19px; letter-spacing:-.02em; margin:1px 0 0;}
.step-heading p {font-size:14px; color:var(--muted); margin:4px 0 0;}
.extension-card {max-width:none; margin:0; padding:12px 16px; border:1px solid var(--success-border); border-radius:11px; background:var(--success-bg); gap:14px;}
.extension-card strong {font-size:15px; color:var(--ink);}
.extension-card #extension-detail {font-size:13px; color:var(--muted); line-height:1.45;}
.extension-card .connection-dot {width:11px; height:11px; background:var(--extension-attention-dot); box-shadow:0 0 0 4px var(--extension-attention-halo);}
.extension-card:is([data-state="missing"],[data-state="outdated"]) {background:var(--extension-attention-bg); border-color:var(--extension-attention-border);}
.extension-card[data-state="ready"] {background:var(--soft); border-color:var(--line);}
.extension-card[data-state="ready"] .connection-dot {background:#3f9e88; box-shadow:0 0 0 4px #3f9e8822;}
.extension-card[data-state="checking"] .connection-dot {background:var(--neutral-dot); box-shadow:0 0 0 4px #8e9cb32a;}
.extension-card[data-state="unsupported"] {padding:20px; border:2px solid #b73232; border-inline-start-width:6px; background:#fff0ef; align-items:flex-start;}
.extension-card[data-state="unsupported"]>div {flex:1; min-width:0;}
.extension-card[data-state="unsupported"] strong {font-size:19px; color:#8f2020; line-height:1.4;}
.extension-card[data-state="unsupported"] #extension-detail {margin-top:5px; font-size:15px; color:#6c3030;}
.extension-card[data-state="unsupported"] .connection-dot {display:grid; place-items:center; width:28px; height:28px; margin-top:1px; border:2px solid currentColor; background:transparent; color:#a52b2b; box-shadow:none;}
.extension-card[data-state="unsupported"] .connection-dot::after {content:"!"; font-size:19px; font-weight:700; line-height:1;}
:root[data-theme="dark"] .extension-card[data-state="unsupported"] {background:#341f27; border-color:#ef9692;}
:root[data-theme="dark"] .extension-card[data-state="unsupported"] strong,
:root[data-theme="dark"] .extension-card[data-state="unsupported"] .connection-dot {color:#ffb4ae;}
:root[data-theme="dark"] .extension-card[data-state="unsupported"] #extension-detail {color:#f0cecb;}
@media(prefers-reduced-motion:no-preference) {
  @keyframes extension-attention-pulse {
    0%,100% {box-shadow:0 0 0 4px var(--extension-attention-halo);}
    50% {box-shadow:0 0 0 8px var(--extension-attention-halo-peak);}
  }
  .extension-card:is([data-state="missing"],[data-state="outdated"]) .connection-dot {animation:extension-attention-pulse 1.8s ease-in-out infinite;}
}
.extension-card .small-button {min-height:44px; background:var(--button-bg); color:var(--button-text); border-color:var(--button-bg); font-size:13px; text-decoration:none;}
.extension-card .small-button:hover {background:var(--button-hover); border-color:var(--button-hover);}
.extension-help {display:flex; flex-wrap:wrap; gap:8px 20px; margin:8px 0 0 45px;}
.extension-help .inline-button {font-size:13px;}
.preview-note {margin:8px 0 0 45px; max-width:650px; color:var(--subtle); font-size:12px; line-height:1.45;}
/* Once setup is complete, leave a compact, accessible confirmation strip. */
.prerequisite:has(#extension-card[data-state="ready"]) {display:flex; align-items:center; gap:10px; padding:9px 28px;}
.prerequisite:has(#extension-card[data-state="ready"]) .step-heading {flex:0 0 30px; margin:0;}
.prerequisite:has(#extension-card[data-state="ready"]) .step-heading>div {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.prerequisite:has(#extension-card[data-state="ready"]) .extension-card {flex:1; padding:7px 0; border:0; background:transparent;}
.prerequisite:has(#extension-card[data-state="ready"]) #extension-detail,
.prerequisite:has(#extension-card[data-state="ready"]) .preview-note {display:none;}
.input-label {display:block; margin:0 0 7px 45px; color:var(--ink); font-size:14px; font-weight:700;}
.input-row {max-width:none; margin-left:45px;}
.input-row input {height:56px; border-radius:9px; padding:0 16px; font-size:16px; box-shadow:none;}
.input-row input:focus {border-color:var(--accent); box-shadow:0 0 0 3px #2170e525; outline:none;}
#form-error {max-width:none; margin:12px 0 0 45px; padding:11px 14px; background:#bf26260e; border:1px solid #bf262644; border-radius:8px; font-size:14px;}
:root[data-theme="dark"] #form-error {background:#ffaaa70e; border-color:#ffaaa755;}
.form-info {margin:12px 0 0 45px; padding:11px 14px; background:var(--success-bg); border:1px solid var(--success-border); border-radius:8px; color:var(--success-text); font-size:14px;}
.format-choice {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:12px; margin:0 0 0 45px; font-size:14px;}
.format-card {display:block; position:relative; cursor:pointer; min-width:0;}
.format-card input {position:absolute; opacity:0; width:1px; height:1px;}
.format-card-content {position:relative; display:flex; flex-direction:column; justify-content:center; gap:9px; min-height:104px; padding:15px 17px 15px 51px; border:1.5px solid var(--line); border-radius:11px; background:var(--surface); color:var(--muted); line-height:1.4; transition:background .15s,border-color .15s,box-shadow .15s;}
.format-card-content::before {position:absolute; content:""; width:19px; height:19px; left:18px; top:19px; border:2px solid var(--input-border); border-radius:50%; background:var(--surface);}
.format-card input:checked + .format-card-content {background:var(--success-bg); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.format-card input:checked + .format-card-content::before {border-color:var(--accent); background:radial-gradient(circle,var(--accent) 0 5px,transparent 6px);}
.format-card input:focus-visible + .format-card-content {outline:3px solid var(--focus); outline-offset:3px;}
.format-card:hover .format-card-content {border-color:var(--accent);}
.format-card-heading {display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:4px 8px; color:var(--ink);}
.format-card strong {font-size:17px; line-height:1.2;}
.format-card em {font-size:12px; font-style:normal; font-weight:800; line-height:1.4; color:var(--accent); border:1px solid var(--success-border); border-radius:100px; padding:3px 8px;}
.format-card-content>span:last-child {font-size:14px;}
.youtube-session-option {display:flex; align-items:flex-start; gap:10px; margin:13px 0 0 45px; color:var(--ink); cursor:pointer; font-size:13px; line-height:1.4;}
.youtube-session-option input {flex:none; margin:2px 0 0; accent-color:var(--accent);}
.youtube-session-option span {display:grid; gap:3px;}
.youtube-session-option small {color:var(--muted); font-size:12px;}
.submit-row {margin:15px 0 0 45px;}
.submit-row .button {min-width:290px; border-radius:9px; font-size:15px;}
.submit-row .button:disabled {cursor:not-allowed; opacity:1; background:var(--line); color:var(--muted);}
#format-description:not([hidden]) {margin:12px 0 0 45px; color:var(--muted); font-size:13px;}
.capture-card {max-width:none; margin:0; padding:24px 32px 26px 77px; border:0; border-top:1px solid var(--line); border-radius:0; background:var(--soft);}
.capture-card .small-text {font-size:13px!important; color:var(--muted);}
.result-card {align-items:center; flex-wrap:nowrap; gap:15px; background:var(--success-bg);}
.result-card .result-check {margin-left:-45px; flex:0 0 34px; width:34px; height:34px;}
.result-content {flex:1; min-width:0;}
.result-content>strong {font-size:14px; margin:0 0 3px;}
.result-content>a {display:block; font-size:14px; overflow-wrap:anywhere; text-decoration:underline;}
.result-card>.small-button {flex-shrink:0; min-height:40px;}
.account-invite {max-width:none; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:3px 9px; margin:19px auto 0; color:var(--muted); font-size:13px; line-height:1.5; text-align:center;}
.account-invite>span {display:inline; color:var(--muted); font-size:13px;}
.account-invite .inline-button {font-size:13px; white-space:nowrap;}
#account-invite {justify-content:space-between; gap:12px 18px; margin-top:16px; padding:15px 18px; border:1px solid var(--success-border); border-radius:12px; background:var(--success-bg); text-align:left;}
#account-invite>span:first-child {flex:1 1 300px; color:var(--ink); font-size:14px; line-height:1.45;}
#account-invite [data-auth="signup"] {display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 15px; border:1px solid var(--accent); border-radius:8px; background:var(--surface); color:var(--accent); font-size:14px; font-weight:700; line-height:1.3; text-align:center; text-decoration:none; white-space:normal; overflow-wrap:anywhere;}
#account-invite [data-auth="signup"]:hover {background:var(--hover-surface); text-decoration:none;}
.preview-account-note {color:var(--subtle)!important; font-size:12px!important;}
.header-inner nav .text-button:disabled,.account-invite .inline-button:disabled {cursor:not-allowed; opacity:.52; text-decoration:none;}
.install-panel,.account-panel,.admin-panel {margin-top:22px; border-radius:12px; background:var(--surface);}
.privacy {max-width:960px; margin:38px 0 32px; padding-top:18px; border-top:1px solid var(--line); font-size:13px;}
.site-footer {padding:20px 0;}
@media(max-width:700px) {
  .downloader {padding:12px 0 20px;}
  .hero {margin-bottom:10px;}
  .subtitle {font-size:15px;}
  .generator-step {padding:17px 22px 19px;}
  .input-label,.input-row,.format-choice,.youtube-session-option,.submit-row,#form-error,.form-info,#format-description:not([hidden]) {margin-left:0;}
  .format-choice {grid-template-columns:1fr;}
  .format-card-content {min-height:102px;}
  .capture-card {padding:20px 22px;}
  .result-card {flex-wrap:wrap; gap:12px;}
  .result-card .result-check {margin-left:0;}
  .result-content {flex-basis:calc(100% - 50px);}
  .result-card>.small-button {margin-left:46px;}
  .extension-help,.preview-note {margin-left:0;}
}
@media(max-width:480px) {
  #account-invite {padding:14px;}
  #account-invite>span:first-child {flex-basis:100%;}
  #account-invite [data-auth="signup"] {width:100%;}
  .experiment-banner {flex-direction:column; gap:3px; padding:7px 12px;}
  .header-inner {padding:12px 15px;}
  .header-inner nav {gap:9px;}
  .container {width:calc(100% - 28px);}
  .hero {text-align:left;}
  .eyebrow {font-size:10px;}
  h1 {font-size:clamp(28px,7.8vw,34px);}
  .subtitle {font-size:15px;}
  .generator-card {border-radius:13px;}
  .generator-step {padding:16px 16px 18px;}
  .step-heading {gap:10px; margin-bottom:12px;}
  .prerequisite .step-heading p {display:none;}
  .step-heading h2 {font-size:17px;}
  .step-heading p {font-size:13px;}
  .extension-card {padding:11px; align-items:flex-start;}
  .extension-card>div {flex-basis:calc(100% - 30px);}
  .extension-card .small-button {width:100%; margin:1px 0 0;}
  .extension-card #extension-detail {font-size:12px;}
  .prerequisite:has(#extension-card[data-state="ready"]) {padding:9px 16px;}
  .prerequisite:has(#extension-card[data-state="ready"]) .extension-card {width:auto; padding:5px 0;}
  .generator-card:has(#extension-card[data-state="ready"]) #download-form .generator-step {padding-top:10px; padding-bottom:12px;}
  .generator-card:has(#extension-card[data-state="ready"]) .step-heading {margin-bottom:8px;}
  .generator-card:has(#extension-card[data-state="ready"]) .submit-row {margin-top:6px;}
  .format-card-content {padding:13px 13px 13px 43px; gap:6px; min-height:98px;}
  .format-card-content::before {left:13px; top:16px;}
  .format-card strong {font-size:16px;}
  .submit-row .button {width:100%; min-width:0;}
  .result-card>.small-button {margin-left:0; width:100%;}
  .account-invite {align-items:flex-start; text-align:left; justify-content:flex-start;}
}
@media(prefers-reduced-motion:reduce) {.format-card-content {transition:none;}}
.history-main {display:flex; align-items:center; gap:15px; min-width:0; flex:1;}
.history-info {min-width:0;}
.history-thumbnail {width:112px; height:63px; flex:0 0 112px; object-fit:cover; border:1px solid var(--line); border-radius:7px; background:var(--soft);}
.history-list .history-format-badge {display:inline-flex; width:max-content; margin-top:6px; padding:2px 8px; border:1px solid var(--line); border-radius:100px; background:var(--soft); color:var(--muted); font-size:11px; font-weight:700; line-height:1.4;}
.history-list .history-format-badge.premium {border-color:var(--success-border); background:var(--success-bg); color:var(--accent);}
.history-list .history-meta {margin-top:6px;}
.history-page-size {display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap;}
.history-page-size select {min-height:38px; min-width:68px; padding:6px 9px; border:1px solid var(--input-border); border-radius:7px; background:var(--input); color:var(--ink); font:inherit; cursor:pointer;}
.history-pagination {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:18px; padding-top:17px; border-top:1px solid var(--line);}
.history-pagination[hidden] {display:none;}
.history-pagination span {color:var(--muted); font-size:13px; text-align:center;}
.history-pagination .small-button:disabled {opacity:.45; cursor:default;}
#history-retry:not([hidden]) {display:inline-block; margin:3px 0 8px;}
.preferences-option {display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); cursor:pointer;}
.preferences-option span {min-width:0;}
.preferences-option strong,.preferences-option small {display:block;}
.preferences-option strong {font-size:14px;}
.preferences-option small {margin-top:4px; color:var(--muted); font-size:12px; line-height:1.5;}
.preferences-option input {width:20px; height:20px; margin:2px 1px 0 0; flex:0 0 20px; accent-color:var(--accent); cursor:pointer;}
#save-preferences {width:100%; min-height:46px; margin-top:20px; font-size:14px;}
.preferences-footer {display:flex; justify-content:flex-end; margin-top:22px; padding-top:16px; border-top:1px solid var(--line);}
@media(max-width:480px) {.history-main {gap:11px;}.history-thumbnail {width:84px; height:48px; flex-basis:84px;}.history-list li {gap:10px;}.history-heading {align-items:flex-start; flex-wrap:wrap; gap:9px;}.history-page-size {margin-left:auto;}.history-pagination {gap:8px;}.history-pagination .small-button {min-height:36px; padding:6px 10px;}}
.history-actions {flex-direction:column; align-items:flex-end; gap:6px;}
.history-action-buttons {display:flex; gap:16px;}
.history-video-link {font-size:12px; font-weight:600; line-height:1.5; white-space:nowrap;}
#preferences-dialog {position:fixed; inset:auto; margin:0; z-index:20; width:min(440px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; padding:24px 28px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); box-shadow:0 16px 48px #0b162733;}
#preferences-dialog .panel-heading {display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
#preferences-dialog h2 {font-size:21px; margin:0 0 4px;}
#preferences-dialog .close-button {flex:0 0 30px; width:30px; height:30px;}
.preferences-field {padding:18px 0; border-bottom:1px solid var(--line);}
.preferences-field label {display:block; margin-bottom:8px; font-size:14px; font-weight:700;}
.preferences-field select {width:100%; min-height:42px; padding:8px 10px; border:1px solid var(--input-border); border-radius:6px; background:var(--input); color:var(--ink); font:inherit; font-size:14px;}
.preferences-field .compatibility-note:not([hidden]) {display:block; margin-top:7px; color:var(--muted); font-size:12px; line-height:1.45;}
@media(max-width:650px) {.history-actions {align-items:flex-start;}.history-action-buttons {gap:20px;}#preferences-dialog {padding:20px 22px;}}
@media(min-width:1120px) {
  body.horizontal-layout #main {width:min(calc(100% - 48px),1380px); max-width:1380px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(390px,.85fr); column-gap:28px; align-items:start;}
  body.horizontal-layout #main>.downloader {grid-column:1; grid-row:1; min-width:0;}
  body.horizontal-layout #main>.account-panel {grid-column:2; grid-row:1; min-width:0; margin-top:24px;}
  body.horizontal-layout #main>.install-panel {grid-column:1; grid-row:2; min-width:0;}
  body.horizontal-layout #main>.admin-panel {grid-column:2; grid-row:2; min-width:0;}
  body.horizontal-layout #main>.privacy {grid-column:1/-1; grid-row:3;}
  body.horizontal-layout .header-inner {max-width:1380px;}
  body.horizontal-layout .history-list li {align-items:flex-start; flex-direction:column; gap:10px;}
  body.horizontal-layout .history-actions {align-items:flex-start; width:100%;}
  body.horizontal-layout .balance-line {align-items:flex-start; flex-direction:column; gap:4px;}
}