/* Hermione 2 only. Original Hermione and the shared theme remain unchanged. */
:root {
  color-scheme: light;
  --bg:#f5f7f9; --surface:#fff; --surface-2:#f7f9fb; --surface-3:#edf2f5;
  --text-1:#172a3b; --text-2:#354b5c; --text-3:#526779; --text-4:#617688;
  --border:#e0e7ec; --border-strong:#bdcbd5; --blue-700:#145c64; --blue-600:#166c75; --blue-500:#22818a;
  --blue-200:#afd5d7; --blue-100:#d9edef; --blue-50:#f0f8f8; --green-700:#236550; --green-600:#237660;
  --grad-primary:linear-gradient(135deg,#176d75,#175d67); --grad-bar:linear-gradient(90deg,#237e87,#54aaa3);
  --shadow-sm:0 3px 18px rgba(26,48,65,.035); --shadow-focus:0 0 0 3px rgba(34,129,138,.16);
}
[data-theme="dark"] {
  color-scheme:dark;
  --bg:#101923; --surface:#172431; --surface-2:#1c2b39; --surface-3:#243744;
  --text-1:#edf3f7; --text-2:#c8d5df; --text-3:#a7b9c7; --text-4:#9aaebb;
  --border:#304352; --border-strong:#4e687b; --blue-700:#8dd5d8; --blue-600:#8dd5d8; --blue-500:#5bb1b8;
  --blue-200:#416b74; --blue-100:#294a51; --blue-50:#203b43; --green-700:#8fd5b7; --green-600:#75c5a4;
  --shadow-sm:0 3px 18px rgba(0,0,0,.08);
}
body { font-size:14px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
button:focus-visible,a:focus-visible,summary:focus-visible,[role="button"]:focus-visible { outline:3px solid var(--blue-500); outline-offset:4px; }
a { color:var(--blue-700); }
.skip-link { position:absolute; top:-80px; left:20px; z-index:100; padding:12px; background:var(--surface); }
.skip-link:focus { top:12px; }
.site-header { padding:18px max(28px,calc((100vw - 1200px)/2)); background:var(--surface); color:var(--text-1); box-shadow:none; border-bottom:1px solid var(--border); gap:20px; flex-wrap:nowrap; }
.h2-brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text-1); white-space:nowrap; font-size:21px; font-weight:750; letter-spacing:-.5px; }
.h2-brand img { width:40px; height:40px; object-fit:contain; padding:3px; background:#102b40; border-radius:11px; }
.h2-brand b { color:var(--blue-700); font-weight:500; }
.h2-header-divider { height:24px; width:1px; background:var(--border); }
.h2-header-caption { color:var(--text-3); font-size:12px; }
.h2-header-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.site-header .header-badge,.site-header .lang-toggle,.site-header .dark-toggle { background:transparent; color:var(--text-2); border-color:var(--border); border-radius:8px; letter-spacing:0; box-shadow:none; }
.site-header .header-badge:hover,.site-header .lang-toggle:hover,.site-header .dark-toggle:hover { background:var(--surface-2); }
#h2ProfileButton { display:flex; gap:8px; align-items:center; padding:8px 12px; white-space:normal; text-align:left; }
#h2ProfileButton svg { width:17px; height:17px; flex-shrink:0; }
#h2ProfileButton small { font-size:10px; color:var(--text-3); display:block; font-weight:400; }
main { max-width:1024px; padding:0 28px 48px; margin:36px auto 0; }
.h2-intro { display:flex; justify-content:space-between; gap:24px; align-items:center; margin:0 0 30px; }
.h2-eyebrow { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-700); margin-bottom:8px; }
.h2-intro h1 { font-size:30px; letter-spacing:-1.05px; font-weight:650; line-height:1.2; margin-bottom:10px; }
.h2-intro p:not(.h2-eyebrow) { color:var(--text-3); font-size:13px; }
.h2-version { display:flex; flex-direction:column; align-items:flex-end; gap:12px; white-space:nowrap; }
.h2-version a { font-size:11px; text-decoration:none; color:var(--text-3); }
.h2-chip { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:30px; background:var(--surface); padding:4px 10px; color:var(--text-3); font-size:10px; font-weight:650; white-space:nowrap; }
.wiz-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; background:transparent; margin-bottom:24px; border-bottom:1px solid var(--border); }
.wiz-pill { appearance:none; display:flex; justify-content:center; align-items:center; gap:9px; border:0; border-bottom:2px solid transparent; padding:13px 5px; margin-bottom:-1px; background:transparent; color:var(--text-3); font-size:12px; font-weight:550; }
.wiz-pill .n { width:23px; height:23px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:11px; }
.wiz-pill.active { color:var(--blue-700); border-bottom-color:var(--blue-700); font-weight:700; }
.wiz-pill.active .n { background:var(--blue-700); border-color:var(--blue-700); color:var(--surface); }
.wiz-pill.done .n { background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-700); }
.wiz-pill:disabled { opacity:.5; }
.card { border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:visible; margin-bottom:16px; }
.card-header { background:transparent; padding:28px 30px 0; border:0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card-header h2 { font-size:21px; font-weight:650; letter-spacing:-.55px; color:var(--text-1); }
.card-header h2:focus { outline:none; }
.h2-section-copy { color:var(--text-3); font-size:13px; margin-top:7px; line-height:1.6; }
.card-body { padding:24px 30px 30px; }
.btn { border-radius:9px; min-height:42px; padding:10px 17px; font-size:12px; font-weight:650; box-shadow:none; transition:background .15s,border-color .15s,box-shadow .15s; }
.btn:hover { transform:none; }
.btn-primary { background:var(--grad-primary); color:#fff; border:1px solid transparent; box-shadow:0 2px 3px rgba(20,70,75,.08); }
.btn-ghost { background:var(--surface); color:var(--text-2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-sm { min-height:34px; padding:6px 11px; font-size:11px; }
.wiz-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 0; }
#stepCounter { font-size:11px; color:var(--text-3); }
.h2-wizard-message { padding:12px; background:var(--amber-100); margin-bottom:12px; border-radius:8px; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.mode-card { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:23px; background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; text-align:left; color:var(--text-1); transition:background .15s,border-color .15s; }
.mode-card:hover,.mode-card.sel { background:var(--blue-50); border-color:var(--blue-500); }
.mode-card strong { font-size:17px; font-weight:650; }
.mode-card .desc { color:var(--text-3); font-size:13px; line-height:1.7; }
.h2-doc-icon { display:flex; padding:10px; border-radius:10px; background:var(--surface-2); color:var(--blue-700); }
.h2-doc-icon svg { width:24px; height:24px; }
.h2-card-link { font-size:12px; font-weight:650; color:var(--blue-700); margin-top:auto; padding-top:7px; }
.h2-bottom-note { color:var(--text-3); text-align:center; margin-top:24px; font-size:11px; }
.h2-notice { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 15px; background:var(--blue-50); border:1px solid var(--blue-200); border-radius:9px; font-size:12px; margin-bottom:20px; }
.drop-zone { display:flex; flex-direction:column; align-items:center; gap:7px; border:1.5px dashed var(--border-strong); border-radius:12px; padding:30px 20px; background:var(--surface-2); color:var(--text-3); font-size:13px; margin:0; cursor:pointer; }
.drop-zone strong { font-size:16px; color:var(--text-1); font-weight:600; }
.drop-zone small { color:var(--text-3); font-size:11px; margin-top:6px; }
.h2-upload-icon { width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:var(--surface); font-size:25px; color:var(--blue-700); line-height:36px; margin-bottom:7px; }
.drop-zone:hover,.drop-zone.drag { border-color:var(--blue-500); background:var(--blue-50); }
#dropZoneOther { margin-top:24px; }
.h2-detected { background:var(--surface-2); border:1px solid var(--border); padding:16px 18px; border-radius:10px; margin-top:20px; }
#detectedLang { font-size:14px; font-weight:600; }
#detectedProgram { font-size:12px; color:var(--text-3); margin-top:5px; }
#detectedOverride { margin-top:9px; }
.file-chip { background:var(--surface-2); border-color:var(--border); overflow-wrap:anywhere; }
label { font-size:12px; font-weight:600; color:var(--text-2); margin:20px 0 8px; }
input[type="text"],input[type="password"],select,textarea { background:var(--surface); color:var(--text-1); border:1px solid var(--border-strong); border-radius:8px; font-size:13px; padding:11px 12px; line-height:1.6; width:100%; }
textarea { min-height:100px; resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--text-3); opacity:.8; }
input[type="checkbox"],input[type="radio"] { accent-color:var(--blue-700); width:16px; height:16px; flex-shrink:0; }
.hint { font-size:12px; color:var(--text-3); line-height:1.7; }
.h2-guide-note { display:flex; align-items:flex-start; gap:13px; padding:17px 18px; border-radius:10px; background:var(--blue-50); margin-bottom:25px; }
.h2-guide-mark { display:flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; flex-shrink:0; background:var(--blue-100); color:var(--blue-700); }
.h2-guide-note strong { font-size:13px; color:var(--blue-700); }
.h2-guide-note p { font-size:12px; color:var(--text-3); margin-top:4px; }
.h2-guide-note summary { font-size:11px; color:var(--blue-700); cursor:pointer; margin-top:10px; }
.h2-details { border-top:1px solid var(--border); margin-top:20px; }
.h2-details > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:16px 0 0; color:var(--text-2); font-size:12px; font-weight:600; cursor:pointer; }
.h2-details > summary::-webkit-details-marker { display:none; }
.h2-details > summary::after { content:'+'; font-size:18px; color:var(--text-3); font-weight:400; }
.h2-details[open] > summary::after { content:'−'; }
.h2-details-body { padding:16px 0 0; font-size:12px; color:var(--text-3); line-height:1.8; }
.h2-option-list label { display:flex; align-items:flex-start; gap:12px; margin:4px 0 16px; }
.h2-option-list input { margin-top:3px; }
.h2-option-list strong { font-size:12px; font-weight:600; }
.h2-option-list small { display:block; font-size:12px; font-weight:400; color:var(--text-3); margin-top:3px; }
.h2-model-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.h2-provider-switch { display:flex; gap:4px; border:1px solid var(--border); background:var(--surface-2); padding:4px; border-radius:9px; }
.h2-provider-switch button { display:flex; gap:10px; padding:9px 16px; background:transparent; border:1px solid transparent; border-radius:6px; color:var(--text-3); font-weight:600; font-size:12px; }
.h2-provider-switch button[aria-pressed="true"] { background:var(--surface); border-color:var(--border); color:var(--text-1); box-shadow:var(--shadow-sm); }
.h2-provider-switch span { color:var(--text-3); font-size:10px; padding:1px 5px; background:var(--surface-3); border-radius:4px; }
.h2-text-button { border:0; background:transparent; color:var(--blue-700); padding:7px 0; font-size:12px; text-align:left; text-decoration:none; }
.h2-text-button:hover { text-decoration:underline; }
.h2-provider-help { font-size:12px; color:var(--text-3); margin:16px 0; min-height:20px; }
.h2-provider-help button { font-size:12px; }
.h2-model-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.h2-model-grid[data-provider="openai"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.h2-model-card { position:relative; margin:0; display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); cursor:pointer; transition:border-color .15s,background .15s; }
.h2-model-card:hover { border-color:var(--blue-500); }
.h2-model-card:has(input:checked) { border:2px solid var(--blue-700); padding:17px; background:var(--blue-50); }
.h2-model-card:has(input:focus-visible) { outline:3px solid var(--blue-200); outline-offset:3px; }
.h2-model-card:has(input:disabled) { opacity:.55; cursor:not-allowed; }
.h2-model-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.h2-model-name { font-size:15px; font-weight:650; color:var(--text-1); }
.h2-model-desc { font-size:11px; color:var(--text-3); font-weight:400; min-height:36px; }
.h2-model-price { color:var(--text-1); font-size:14px; font-weight:650; }
.h2-model-price small { display:block; font-weight:400; font-size:10px; color:var(--text-3); margin-top:2px; }
.h2-cache-status { display:flex; align-items:flex-start; gap:6px; font-size:10px; font-weight:500; color:var(--text-3); padding-top:10px; margin-top:auto; border-top:1px solid var(--border); line-height:1.5; }
.h2-cache-status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--border-strong); margin-top:4px; flex-shrink:0; }
.h2-cache-status[data-active="true"] { color:var(--green-700); }
.h2-cache-status[data-active="true"]::before { background:var(--green-600); }
.h2-selection-summary { margin-top:20px; padding:17px 18px; border-radius:10px; background:var(--surface-2); display:flex; justify-content:space-between; align-items:center; gap:15px; border:1px solid var(--border); }
.h2-selection-summary small { display:block; color:var(--text-3); font-size:11px; margin-bottom:4px; }
.h2-selection-summary strong { font-size:14px; font-weight:650; }
.h2-selection-summary .h2-total { text-align:right; }
.h2-selection-summary .h2-total strong { font-size:21px; letter-spacing:-.5px; }
.h2-cost-note { color:var(--text-3); font-size:11px; line-height:1.65; margin-top:10px; }
.h2-cache-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:10px 0; border-bottom:1px solid var(--border); font-size:11px; }
.h2-cache-row > div { text-align:right; }
.h2-table-scroll { overflow-x:auto; max-width:100%; margin-top:12px; }
#modelTable { min-width:550px; margin:0; font-size:12px; }
#modelTable th { font-size:10px; letter-spacing:.03em; color:var(--text-3); }
.price-input { width:78px; padding:5px 8px; background:var(--surface); border:1px solid var(--border-strong); border-radius:5px; color:var(--text-1); }
.h2-estimate-details { margin-top:16px; line-height:1.8; }
.h2-ready-summary { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:8px 20px; }
.h2-ready-item { padding:13px 0; border-bottom:1px solid var(--border); min-width:0; }
.h2-ready-item:nth-last-child(-n+2) { border-bottom:0; }
.h2-ready-item small { display:block; color:var(--text-3); font-size:11px; margin-bottom:5px; }
.h2-ready-item strong { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.h2-readiness { font-size:12px; color:var(--amber-600); margin:16px 0; }
.h2-translate { min-width:230px; font-size:13px; min-height:47px; margin-top:20px; }
.h2-readiness:not(:empty) + .h2-translate { margin-top:0; }
.h2-prompt-tools { margin-top:24px; border-top:1px solid var(--border); padding-top:14px; }
#progressSection { margin-top:28px; }
#progressLabel { font-size:13px; font-weight:600; color:var(--text-2); }
.progress-bar-bg { height:6px; background:var(--surface-3); border-radius:6px; }
.progress-bar-fill { background:var(--grad-bar); }
.log-box { max-height:260px; margin-top:14px; font-size:11px; }
.h2-download { display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid var(--border); border-radius:10px; padding:15px 17px; margin-top:12px; }
.h2-download > div { min-width:0; }
.h2-download strong { display:block; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.h2-download a { text-decoration:none; }
.h2-download .h2-record { display:inline-block; margin-top:6px; font-size:11px; color:var(--text-3); }
.h2-result-head { padding:18px; background:var(--blue-50); border:1px solid var(--blue-200); border-radius:10px; margin-top:24px; }
.h2-result-head > strong { color:var(--blue-700); font-size:16px; }
.h2-result-head p { color:var(--text-3); font-size:12px; margin-top:5px; }
.alert { border-radius:9px; font-size:12px; }
.report-toggle { font-size:12px; background:var(--surface-2); color:var(--text-2); }
.report-body { overflow-x:auto; }
.report-table { min-width:540px; }
#hermione2Profile { width:min(94vw,600px); max-height:90vh; overflow-y:auto; margin:auto; background:var(--surface); color:var(--text-1); border:1px solid var(--border); border-radius:16px; padding:0; box-shadow:0 24px 100px rgba(0,0,0,.22); }
#hermione2Profile::backdrop { background:rgba(15,30,44,.4); backdrop-filter:blur(3px); }
.h2-dialog-header { display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--border); }
.h2-dialog-header h2 { font-size:19px; letter-spacing:-.4px; font-weight:650; }
.h2-close { border:1px solid var(--border); background:var(--surface); color:var(--text-3); width:32px; height:32px; border-radius:8px; font-size:20px; }
.h2-dialog-body { padding:22px 26px 26px; }
.h2-dialog-body > p { font-size:12px; color:var(--text-3); }
.h2-dialog-section { margin-top:24px; border-top:1px solid var(--border); padding-top:22px; }
.h2-dialog-section h3 { font-size:15px; font-weight:650; }
.h2-dialog-section > .hint { margin-top:6px; }
.h2-form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
#h2OpenAIStatus { font-size:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); padding:10px 12px; margin-top:16px; }
#h2LibraryStatus { font-size:12px; color:var(--text-3); overflow-wrap:anywhere; line-height:1.9; }
footer { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:20px; padding:24px 28px; color:var(--text-3); font-size:10px; }
footer > span:first-child { font-weight:650; color:var(--text-2); }
@media(max-width:850px) { .h2-header-caption,.h2-header-divider { display:none; } .site-header { gap:12px; padding:15px 22px; } .h2-model-grid { grid-template-columns:1fr 1fr; } .h2-intro h1 { font-size:27px; } }
@media(max-width:600px) {
  .site-header { flex-wrap:wrap; padding:12px 16px; gap:12px; } .h2-brand { font-size:19px; } .h2-brand img { width:32px; height:32px; }
  .h2-header-actions { gap:6px; } .h2-header-actions .header-badge { font-size:11px; padding:7px; }
  #h2ProfileButton { width:100%; justify-content:space-between; } #h2ProfileButton small { display:inline; margin-left:8px; }
  main { padding:0 16px 30px; margin-top:26px; } .h2-intro { display:block; margin-bottom:18px; } .h2-intro h1 { font-size:26px; } .h2-intro p:not(.h2-eyebrow) { font-size:12px; }
  .h2-version { flex-direction:row; justify-content:space-between; align-items:center; margin-top:17px; }
  .wiz-steps { margin-bottom:18px; } .wiz-pill { flex-direction:column; gap:6px; padding:11px 1px; font-size:10px; } .wiz-pill .n { width:21px; height:21px; }
  .card-header { padding:22px 20px 0; } .card-header h2 { font-size:20px; } .card-body { padding:20px; }
  .mode-grid,.h2-model-grid,.h2-model-grid[data-provider="openai"],.h2-ready-summary { grid-template-columns:1fr; }
  .mode-card { padding:20px; gap:10px; } .h2-bottom-note { font-size:10px; line-height:1.8; }
  .h2-model-toolbar { align-items:flex-start; flex-direction:column; gap:7px; } .h2-provider-switch { width:100%; } .h2-provider-switch button { width:50%; justify-content:center; }
  .h2-model-card { gap:8px; } .h2-model-desc { min-height:0; } .h2-model-price small { display:inline; margin-left:6px; }
  .h2-selection-summary { align-items:flex-start; } .h2-selection-summary strong { font-size:12px; } .h2-selection-summary .h2-total strong { font-size:17px; }
  .h2-ready-item:nth-last-child(2) { border-bottom:1px solid var(--border); } .h2-translate { width:100%; min-width:0; }
  .h2-notice { align-items:flex-start; flex-direction:column; } .h2-download { align-items:flex-start; flex-direction:column; }
  .h2-dialog-header { padding:18px 20px; } .h2-dialog-body { padding:20px; } .h2-dialog-header h2 { font-size:18px; }
  footer { flex-wrap:wrap; gap:8px 18px; padding:20px; } footer span:nth-child(2) { order:3; flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }