:root { --ink:#eaf5f5; --muted:#86999e; --line:rgba(145,181,186,.17); --panel:rgba(14,28,36,.88); --teal:#61e3d3; --teal-dark:#1d9f94; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#071017; }
body { color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select,textarea { font:inherit; } button { color:inherit; }
.app-shell { min-height:100vh; background:radial-gradient(circle at 12% 0%,rgba(38,119,123,.14),transparent 31rem),radial-gradient(circle at 92% 94%,rgba(41,108,122,.11),transparent 28rem),#071017; overflow:hidden; }
.app-shell::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.08; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 65%); }
.topbar { height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:0 30px; border-bottom:1px solid var(--line); background:rgba(5,14,20,.82); backdrop-filter:blur(16px); position:relative; z-index:10; }
.topbar {grid-template-columns:1fr auto;}
.workflow-progress {position:relative;z-index:2;width:min(1540px,calc(100vw - 48px));margin:18px auto 0;padding:14px 18px;background:#fff;border:1px solid #edc7d7;border-radius:12px;}
.workflow-progress-copy {display:flex;align-items:center;gap:18px;line-height:1.5;}
.workflow-progress-copy strong {color:#a52c62;font-size:16px;white-space:nowrap;}
.workflow-progress-copy span {color:#805068;font-size:14px;}
.workflow-meter {height:6px;border-radius:6px;background:#f6dfe9;overflow:hidden;margin-top:10px;}
.workflow-meter span {display:block;width:0;height:100%;background:#d94f86;border-radius:6px;transition:width .2s ease;}
.step.completed {color:#9f2458;}
.step.completed i {background:#d94f86!important;color:#fff!important;border-color:#d94f86!important;font-size:15px;font-weight:700;}
.step.current {color:#8e1b4c;font-weight:700;}
.step.current i {border:2px solid #bf2e6a!important;box-shadow:0 0 0 3px #fce1ec;}
.step.failed {color:#aa3942;}.step.failed i {color:#aa3942!important;border-color:#aa3942!important;}
.mobile-steps {display:none;}
@media(max-width:1040px){.workflow-progress{width:calc(100vw - 28px)}.mobile-steps{display:flex;gap:8px;justify-content:space-between;margin-top:12px}.mobile-step{font-size:12px;color:#a48493;display:flex;align-items:center;gap:4px}.mobile-step i{font-style:normal;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:1px solid #e7c9d7}.mobile-step.completed{color:#a52c62}.mobile-step.completed i{color:#fff;background:#d94f86;border-color:#d94f86}.mobile-step.active i{border:2px solid #bf2e6a;color:#bf2e6a}.mobile-step.error i{color:#a7323e;border-color:#a7323e}}
@media(max-width:620px){.workflow-progress{padding:12px}.workflow-progress-copy{align-items:flex-start;flex-direction:column;gap:3px}.mobile-step{flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){.workflow-meter span{transition:none}}
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; color:var(--teal); background:rgba(97,227,211,.08); border:1px solid rgba(97,227,211,.25); transform:rotate(45deg); }
.brand-mark svg { transform:rotate(-45deg); }
.brand div { display:flex; flex-direction:column; gap:2px; }
.brand strong { font-size:15px; letter-spacing:.02em; }
.brand span { font-size:9px; letter-spacing:.13em; color:var(--muted); text-transform:uppercase; }
.stepper { display:flex; align-items:center; gap:12px; }
.step { display:flex; align-items:center; gap:7px; color:#b6c6c9; font-size:12px; white-space:nowrap; }
.step i { width:26px; height:26px; display:grid; place-items:center; border:1px solid rgba(97,227,211,.22); border-radius:50%; color:var(--teal); font-style:normal; font-size:9px; }
.step.muted { color:#516267; } .step.muted i { color:#53656a; border-color:#28383e; }
.step-line { width:46px; height:1px; background:linear-gradient(90deg,var(--teal-dark),rgba(97,227,211,.16)); } .step-line.muted { background:#27363c; }
.privacy { justify-self:end; display:flex; align-items:center; gap:8px; font-size:11px; color:#91a7aa; }
.privacy span { width:7px; height:7px; border-radius:50%; background:#56d6a4; box-shadow:0 0 12px #56d6a4; }
.workspace { position:relative; z-index:1; width:min(1540px,calc(100vw - 48px)); margin:28px auto 0; display:grid; grid-template-columns:minmax(0,1.08fr) 70px minmax(380px,.92fr); align-items:center; }
.panel { height:calc(100vh - 154px); min-height:650px; max-height:880px; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); box-shadow:0 24px 80px rgba(0,0,0,.24); }
.editor-panel { border-radius:14px 0 0 14px; } .viewer-panel { border-radius:0 14px 14px 0; }
.panel-head { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 4px; color:var(--teal); font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }
h1,h2 { margin:0; font-size:20px; font-weight:580; letter-spacing:-.02em; }
.example-menu { position:relative; display:flex; align-items:center; gap:9px; min-width:170px; height:38px; padding:0 12px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.example-menu label { color:var(--muted); font-size:10px; }
.example-menu select { flex:1; color:#d3e5e5; background:transparent; border:0; outline:0; appearance:none; font-size:11px; cursor:pointer; }
.example-menu svg { position:absolute; right:10px; pointer-events:none; color:var(--muted); }
.editor-frame { position:relative; flex:1; min-height:0; background:#f6f8f7; overflow:hidden; } .editor-frame>#jsme-container { width:100%!important; height:100%!important; }
.radical-indicator { position:absolute; z-index:4; top:58px; right:12px; width:auto!important; height:auto!important; max-width:45%; padding:7px 10px; border:1px solid #e7a5c1; border-radius:8px; color:#aa376f; background:rgba(255,241,247,.95); box-shadow:0 4px 14px rgba(153,55,98,.12); font-size:11px; font-weight:600; pointer-events:none; }
.radical-indicator[hidden] { display:none; }
.atom-charge-row {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:#fff8fb;}
.atom-charge-row span {color:#936278;font-size:12px;line-height:1.5;flex:1;min-width:180px;}
.atom-charge-row button {font-size:13px;}
.metal-controls {padding:12px 16px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#fff6fa;}
.metal-controls[hidden],.fragment-controls[hidden] {display:none;}
.metal-controls label[hidden],.assembly-section[hidden],.append-species-row[hidden] {display:none;}
.metal-controls.single-choice {grid-template-columns:minmax(0,1fr);}
.assembly-advanced {margin-top:12px;}
.assembly-advanced summary {color:#985170;cursor:pointer;font-size:14px;padding:8px 0 12px;}
.assembly-advanced > button {margin:0 0 12px;}
.drawing-hint {display:block;margin-top:5px;font-size:12px;line-height:1.4;color:#97677d;}
.advanced-drawing {background:#fff9fb;border-top:1px solid var(--line);}
.advanced-drawing > summary {padding:10px 16px;color:#985170;font-size:13px;cursor:pointer;}
.placement-purpose {display:flex;flex-direction:column;gap:7px;padding:10px 16px;color:#83546a;font-size:13px;line-height:1.5;}
.placement-purpose input {min-width:0;width:100%;height:38px;padding:8px 10px;color:#653c50;background:white;border:1px solid #edc7d7;border-radius:8px;}
.fixed-resource {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 14px;background:#fff3f8;border:1px solid #efd1de;border-radius:10px;color:#78445d;font-size:15px;}
.fixed-resource small {color:#a4778c;font-size:12px;}
button:active:not(:disabled){transform:translateY(1px);filter:brightness(.92)}
button:focus-visible{outline:3px solid #d85b90;outline-offset:3px}
button[aria-busy="true"]{cursor:progress;opacity:.8}
.action-feedback{grid-column:1/-1;font-size:14px;line-height:1.6;padding:0;color:#885268;min-height:0}
.action-feedback:not(:empty){padding:10px 12px;border-radius:9px;background:#fff0f6;border:1px solid #e8b6cc}
.action-feedback.success{color:#276954;background:#edf9f3;border-color:#b3dfcc}
.action-feedback.error{color:#a53846;background:#fff0f2;border-color:#e7b4be}
.metal-controls label {font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:5px;}
.metal-controls select {width:100%;min-width:0;height:34px;padding:4px 8px;color:#653c50;background:white;border:1px solid #edc7d7;border-radius:8px;}
.metal-controls p {grid-column:1/-1;margin:2px 0;color:#92657a;font-size:12px;line-height:1.5;}
.assembly-section {position:relative;z-index:1;width:min(1540px,calc(100vw - 48px));margin:26px auto;padding:24px;background:rgba(255,255,255,.94);border:1px solid #eed0dd;border-radius:18px;box-shadow:0 15px 40px rgba(160,67,108,.06);}
.assembly-heading p {margin:10px 0 18px;color:#94687d;font-size:14px;line-height:1.6;}
.append-species-row {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;}
.append-species-row label,.assembly-grid label {font-size:14px;line-height:1.6;color:#77495f;}
.assembly-section input,.assembly-section select {height:40px;width:100%;min-width:0;padding:8px 10px;background:#fffafb;color:#5e394b;border:1px solid #edc7d7;border-radius:8px;}
.assembly-section input:focus,.assembly-section select:focus {outline:2px solid #ed8bb0;outline-offset:1px;}
.assembly-section button {font-size:14px;min-height:40px;border-radius:8px;}
.assembly-summary {display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 16px;padding-top:18px;border-top:1px solid var(--line);}
.assembly-summary strong {font-size:15px;}
.assembly-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;}
.assembly-grid label {display:flex;flex-direction:column;gap:6px;}
.transform-controls {margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
#assembly-note {margin:16px 0 0;font-size:14px;line-height:1.65;color:#936278;}
.ghost-button.active {background:#d94f86;color:white;border-color:#bd376e;}
@media(max-width:760px) {.assembly-section{width:calc(100vw - 28px);padding:18px}.append-species-row{grid-template-columns:1fr}.assembly-grid{grid-template-columns:1fr 1fr}.assembly-summary{align-items:flex-start;flex-direction:column}.metal-controls{grid-template-columns:1fr}.assembly-section button{grid-column:auto}}
@media(max-width:420px) {.assembly-grid{grid-template-columns:1fr}}
.smiles-row { min-height:64px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 16px; border-top:1px solid var(--line); background:#0a151c; }
.smiles-row label { color:var(--teal); font:600 10px/1 ui-monospace,monospace; letter-spacing:.12em; }
.smiles-row input { height:36px; min-width:0; padding:0 11px; color:#cfe1e2; border:1px solid #263941; background:#071017; outline:none; font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.smiles-row input:focus { border-color:rgba(97,227,211,.6); box-shadow:0 0 0 2px rgba(97,227,211,.08); }
.edit-tools-row { min-height:54px; display:grid; grid-template-columns:auto auto auto auto minmax(0,1fr); gap:10px; align-items:center; padding:9px 16px; border-top:1px solid var(--line); background:#0a151c; }
.edit-tools-label { color:var(--teal); font:600 10px/1 ui-monospace,monospace; letter-spacing:.08em; }
.edit-tools-help { color:var(--muted); font-size:9px; line-height:1.35; }
.delete-atom-button { height:36px; padding:0 14px; color:#fff; border:1px solid #d94f86; border-radius:9px; background:linear-gradient(135deg,#e75e96,#c83f77); cursor:pointer; box-shadow:0 5px 16px rgba(196,52,111,.18); }
.delete-atom-button:hover,.delete-atom-button.active { background:linear-gradient(135deg,#c83f77,#a92d61); box-shadow:0 0 0 3px rgba(217,79,134,.16); }
.radical-button { height:36px; padding:0 14px; color:#ae3473; border:1px solid #e4a2bd; border-radius:9px; background:#fff0f6; cursor:pointer; white-space:nowrap; }
.radical-button:hover,.radical-button.active { color:#fff; border-color:#bd3e78; background:#d6508b; box-shadow:0 0 0 3px rgba(217,79,134,.13); }
.stop-edit-button { height:36px; }
.ghost-button,.icon-button,.export-row button { border:1px solid #2a3c43; background:#102028; cursor:pointer; transition:.18s ease; }
.ghost-button { height:36px; padding:0 13px; color:#b9cbcd; font-size:11px; }
.ghost-button:hover,.icon-button:hover,.export-row button:hover:not(:disabled) { border-color:rgba(97,227,211,.48); color:var(--teal); }
.transfer-button { position:relative; z-index:6; justify-self:center; width:58px; height:112px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; padding:0; color:#071217; border:1px solid rgba(150,255,240,.8); background:linear-gradient(180deg,#7ff0df,#45c8b9); box-shadow:0 0 0 7px #071017,0 10px 35px rgba(54,208,191,.25); cursor:pointer; }
.transfer-button::after { content:""; position:absolute; right:-6px; width:10px; height:10px; border-top:1px solid var(--teal); border-right:1px solid var(--teal); transform:rotate(45deg); }
.transfer-button span { writing-mode:vertical-rl; font-size:11px; font-weight:700; letter-spacing:.13em; }
.transfer-button:disabled { opacity:.75; cursor:progress; }
.icon-button { width:36px; height:36px; display:grid; place-items:center; color:#91a8ab; }
.viewer-frame { position:relative; flex:1; min-height:0; overflow:hidden; background:#081018; }
.viewer-frame::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 45%,transparent 0 38%,rgba(0,0,0,.18) 100%); }
.viewer-canvas { position:absolute; inset:0; }
.viewer-empty { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#536970; pointer-events:none; }
.viewer-empty[hidden] { display:none; }
.viewer-empty strong { margin-top:7px; color:#82969b; font-size:13px; } .viewer-empty span { font-size:10px; }
.viewer-hint { position:absolute; z-index:3; left:14px; bottom:12px; padding:6px 9px; color:#789096; border:1px solid rgba(255,255,255,.08); background:rgba(5,14,19,.7); font-size:9px; letter-spacing:.04em; pointer-events:none; }
.status-strip { min-height:44px; display:flex; align-items:center; gap:9px; padding:0 15px; color:#83979b; border-top:1px solid var(--line); background:#0b171e; font-size:10px; }
.status-strip.done { color:#87d7c1; } .status-strip.error { color:#f1a079; }
.status-icon { width:22px; height:22px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; }
.status-icon i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.export-row { min-height:76px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:#09141b; }
.export-row>div { display:flex; flex-direction:column; gap:4px; } .export-row strong { font-size:11px; font-weight:600; } .export-row span { color:var(--muted); font-size:9px; }
.export-row button { height:34px; display:flex; align-items:center; gap:6px; padding:0 11px; color:#a7babc; font-size:10px; } .export-row button:disabled { opacity:.32; cursor:not-allowed; }
.coordinate-import { padding:10px 15px; border-top:1px solid var(--line); background:#fff9fb; }
.coordinate-import summary { color:#9b5874; cursor:pointer; font-size:10px; font-weight:650; }
.coordinate-import p { margin:8px 0 7px; color:var(--muted); font-size:9px; line-height:1.45; }
.pd-arrangement { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; color:#7c4b60; font-size:9px; }
.pd-arrangement select { min-width:190px; height:30px; padding:0 8px; color:#70485a; border:1px solid #edd3de; border-radius:8px; background:#fff; outline:none; }
.coordinate-import textarea { width:100%; min-height:74px; resize:vertical; padding:8px 10px; color:#654052; border:1px solid #edd3de; border-radius:9px; outline:none; background:#fff; font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }
.coordinate-import textarea:focus { border-color:#df6a98; box-shadow:0 0 0 3px rgba(225,93,147,.1); }
.coordinate-import .ghost-button { width:100%; margin-top:7px; }
.footer-note { position:relative; z-index:2; height:44px; display:flex; align-items:center; justify-content:center; gap:10px; color:#5f7479; font-size:10px; }
.footer-note .dot { width:3px; height:3px; border-radius:50%; background:#355057; }
.loading-shell { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:16px; background:#071017; color:#8da1a5; }
.loading-mark { width:52px; height:52px; display:grid; place-items:center; color:var(--teal); border:1px solid var(--teal); transform:rotate(45deg); font-weight:700; }
.spin { animation:spin .85s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:1040px) { .topbar{grid-template-columns:1fr auto}.stepper{display:none}.workspace{grid-template-columns:1fr;width:min(760px,calc(100vw - 28px));gap:20px}.panel{height:720px;min-height:620px;border-radius:12px}.transfer-button{width:150px;height:46px;flex-direction:row}.transfer-button::after{right:50%;bottom:-6px;transform:translateX(50%) rotate(135deg)}.transfer-button span{writing-mode:horizontal-tb}.footer-note{height:58px} }
@media(max-width:620px) { .topbar{height:68px;padding:0 14px}.brand span,.privacy{display:none}.workspace{margin-top:14px}.panel{height:690px}.panel-head{min-height:70px;padding:12px}.example-menu{min-width:142px}.smiles-row{grid-template-columns:auto 1fr}.ghost-button{grid-column:1/-1}.edit-tools-row{grid-template-columns:1fr 1fr}.edit-tools-label,.edit-tools-help{grid-column:1/-1}.edit-tools-row .ghost-button{grid-column:auto}.footer-note{padding:0 18px;text-align:center} }
.brand-mark svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.4; }
.sparkle { width:22px; height:22px; fill:currentColor; }
.viewer-empty svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.2; }
#jsme-container, #jsme-container > div { width:100% !important; height:100% !important; }
.editor-loading { height:100%; display:grid; place-items:center; color:#6b7f82; font-size:12px; }
.chevron { position:absolute; right:11px; top:8px; color:#819497; pointer-events:none; }
.icon-button { font-size:22px; line-height:1; }
.status-strip.loading .status-icon { border-top-color:transparent; animation:spin .85s linear infinite; }
.status-strip.done .status-icon i { width:8px; height:4px; border-radius:0; background:transparent; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); }
.status-strip.error .status-icon i { width:2px; height:8px; border-radius:0; }

/* Pink laboratory theme */
:root {
  --ink:#4c2d3b;
  --muted:#9a7384;
  --line:rgba(190,87,128,.18);
  --panel:rgba(255,255,255,.9);
  --teal:#d94f86;
  --teal-dark:#bd376e;
}
html,body { background:#fff4f8; }
body { color:var(--ink); }
.app-shell {
  background:
    radial-gradient(circle at 8% 4%,rgba(255,171,202,.34),transparent 28rem),
    radial-gradient(circle at 94% 92%,rgba(244,189,219,.32),transparent 32rem),
    linear-gradient(145deg,#fff9fb 0%,#fff2f7 48%,#fdf6fb 100%);
}
.app-shell::before {
  opacity:.28;
  background-image:radial-gradient(rgba(201,88,134,.35) .75px,transparent .75px);
  background-size:23px 23px;
  mask-image:linear-gradient(to bottom,black,transparent 76%);
}
.topbar {
  background:rgba(255,250,252,.82);
  border-color:rgba(205,101,143,.18);
  box-shadow:0 8px 34px rgba(151,61,99,.045);
}
.brand-mark {
  color:#d94f86;
  background:linear-gradient(145deg,#fff,#ffe5ef);
  border-color:rgba(217,79,134,.32);
  box-shadow:0 8px 22px rgba(190,56,108,.12);
}
.brand strong { color:#442735; }
.brand span { color:#ad7a8f; }
.step { color:#82576a; }
.step i { color:#d94f86; border-color:rgba(217,79,134,.3); background:#fff8fb; }
.step.muted { color:#bda4ae; }
.step.muted i { color:#c6adb7; border-color:#edd9e1; background:#fff; }
.step-line { background:linear-gradient(90deg,#d94f86,rgba(217,79,134,.18)); }
.step-line.muted { background:#ead6df; }
.privacy { color:#9d7183; }
.privacy span { background:#e45d92; box-shadow:0 0 12px rgba(228,93,146,.55); }
.workspace { gap:0; }
.panel {
  background:rgba(255,255,255,.91);
  border-color:rgba(195,93,135,.2);
  box-shadow:0 24px 65px rgba(153,62,101,.11),0 2px 8px rgba(153,62,101,.045);
}
.editor-panel { border-radius:18px 0 0 18px; }
.viewer-panel { border-radius:0 18px 18px 0; }
.panel-head {
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,247,251,.82));
  border-color:#f1dce5;
}
.eyebrow { color:#d94f86; }
h1,h2 { color:#4a2b39; }
.example-menu {
  border-color:#efd5e0;
  background:#fff8fb;
  border-radius:10px;
}
.example-menu label { color:#ad8293; }
.example-menu select { color:#70485a; }
.chevron { color:#c47a98; }
.editor-frame { background:#fff; }
.smiles-row {
  border-color:#efd8e2;
  background:#fff8fb;
}
.smiles-row label { color:#c93f78; }
.smiles-row input {
  color:#654052;
  border-color:#edd3de;
  background:#fff;
  border-radius:9px;
}
.smiles-row input:focus {
  border-color:#df6a98;
  box-shadow:0 0 0 3px rgba(225,93,147,.1);
}
.edit-tools-row { border-color:#efd8e2; background:#fff8fb; }
.ghost-button,.icon-button,.export-row button {
  border-color:#eccfdb;
  background:#fff;
  color:#93687a;
  border-radius:9px;
}
.ghost-button:hover,.icon-button:hover,.export-row button:hover:not(:disabled) {
  border-color:#df6a98;
  color:#c63873;
  background:#fff5f9;
}
.transfer-button {
  color:#fff;
  border-color:#ff92b9;
  background:linear-gradient(180deg,#ff80ad,#e94f88);
  box-shadow:0 0 0 7px #fff3f7,0 15px 34px rgba(211,59,119,.26);
  border-radius:16px;
}
.transfer-button::after {
  border-color:#ec5a91;
  background:#fff4f8;
}
.icon-button { color:#c26d90; }
.viewer-frame { background:#fff8fb; }
.viewer-frame::after {
  background:radial-gradient(circle at 50% 45%,transparent 0 42%,rgba(226,127,166,.075) 100%);
}
.viewer-empty { color:#d5a4b8; }
.viewer-empty strong { color:#a76e86; }
.viewer-hint {
  color:#9c6e81;
  border-color:#efd9e3;
  background:rgba(255,255,255,.82);
  border-radius:8px;
}
.status-strip {
  color:#a17a8a;
  border-color:#f0dce4;
  background:#fff9fb;
}
.status-strip.done { color:#2d8a72; background:#f5fcf9; }
.status-strip.error { color:#c75567; background:#fff6f6; }
.export-row {
  border-color:#f0dce4;
  background:#fffafd;
}
.export-row strong { color:#593545; }
.export-row button { color:#985e78; }
.footer-note { color:#a77e8f; }
.footer-note .dot { background:#d994af; }
.loading-shell { background:#fff4f8; color:#a67589; }
.loading-mark { color:#d94f86; border-color:#d94f86; }
.editor-loading { color:#a77b8d; }
.gaussian-section {
  position:relative;
  z-index:2;
  width:min(1220px,calc(100vw - 48px));
  margin:26px auto 0;
  overflow:hidden;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(195,93,135,.2);
  border-radius:18px;
  box-shadow:0 24px 65px rgba(153,62,101,.09);
  transition:opacity .2s ease;
}
.gaussian-section.locked { opacity:.62; }
.gaussian-heading {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 20px;
  background:linear-gradient(180deg,#fff,#fff7fb);
  border-bottom:1px solid #f1dce5;
}
.gaussian-heading>p { margin:0; color:#a77b8d; font-size:11px; }
.workflow-preparation { padding:16px 20px; background:#fffafd; border-bottom:1px solid #f1dce5; }
.workflow-choice { display:grid; grid-template-columns:1fr minmax(260px,360px); gap:18px; align-items:end; }
.workflow-choice>div { display:flex; flex-direction:column; gap:5px; }
.workflow-choice strong { color:#654052; font-size:12px; }
.workflow-choice span { color:#a77b8d; font-size:9px; }
.workflow-choice label,.ts-geometry-prep label { display:flex; flex-direction:column; gap:7px; color:#986c7e; font-size:10px; }
.workflow-choice select,.ts-geometry-prep input { width:100%; height:38px; padding:0 10px; color:#654052; background:#fff; border:1px solid #edd3de; border-radius:9px; outline:none; }
.workflow-choice select:focus,.ts-geometry-prep input:focus { border-color:#df6a98; box-shadow:0 0 0 3px rgba(225,93,147,.1); }
.ts-geometry-prep { display:grid; grid-template-columns:minmax(230px,1.35fr) repeat(3,minmax(120px,.75fr)); gap:10px; align-items:end; margin-top:14px; padding:14px; background:linear-gradient(135deg,#fff0f6,#fff9fc); border:1px solid #e9bfd0; border-radius:13px; }
.ts-geometry-prep[hidden] { display:none; }
.ts-prep-copy { display:flex; flex-direction:column; align-self:center; gap:5px; }
.ts-prep-copy strong { color:#bd376e; font-size:11px; }
.ts-prep-copy span { color:#956d7e; font-size:9px; line-height:1.5; }
.ts-distance { display:flex; flex-direction:column; justify-content:center; gap:5px; min-height:38px; padding:7px 10px; background:#fff; border:1px solid #edd3de; border-radius:9px; }
.ts-distance span { color:#a77b8d; font-size:8px; }
.ts-distance strong { color:#765061; font:9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ts-adjust-button { height:38px; padding:0 14px; color:#fff; background:linear-gradient(180deg,#ef6999,#db477f); border:1px solid #df4f85; border-radius:9px; cursor:pointer; }
.ts-geometry-prep>p { grid-column:1/-1; margin:0; color:#956d7e; font-size:9px; line-height:1.55; }
.gaussian-body { display:grid; grid-template-columns:minmax(340px,.72fr) minmax(420px,1.28fr); min-height:310px; }
.gaussian-settings { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; padding:20px; border-right:1px solid #f1dce5; }
.gaussian-settings label { display:flex; flex-direction:column; gap:7px; color:#986c7e; font-size:10px; }
.gaussian-settings select,.gaussian-settings input {
  width:100%; height:38px; padding:0 10px; color:#654052; background:#fffafb;
  border:1px solid #edd3de; border-radius:9px; outline:none;
}
.ts-settings { display:flex; flex-direction:column; gap:11px; padding:13px; background:linear-gradient(135deg,#fff3f8,#fff); border:1px solid #edcbd9; border-radius:12px; }
.ts-settings[hidden] { display:none; }
.ts-settings-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ts-settings-head strong { color:#bd376e; font-size:11px; }
.ts-settings-head span { color:#ad7b8f; font-size:9px; }
.ts-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ts-settings textarea { width:100%; min-height:82px; resize:vertical; padding:9px 10px; color:#654052; background:#fff; border:1px solid #edd3de; border-radius:9px; outline:none; font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ts-settings textarea:focus { border-color:#df6a98; box-shadow:0 0 0 3px rgba(225,93,147,.1); }
.ts-settings p { margin:0; color:#956d7e; font-size:9px; line-height:1.55; }
.ts-settings p strong { color:#bd376e; }
.checkbox-setting { flex-direction:row!important; align-items:center; align-self:end; min-height:38px; padding:8px 10px; color:#765061!important; background:#fff; border:1px solid #edd3de; border-radius:9px; line-height:1.4; }
.checkbox-setting input { width:16px!important; height:16px!important; accent-color:#d94f86; }
.gaussian-settings select:focus,.gaussian-settings input:focus { border-color:#df6a98; box-shadow:0 0 0 3px rgba(225,93,147,.1); }
.gaussian-settings .wide-setting { grid-column:1/-1; }
.template-switch { display:grid; grid-template-columns:1fr 1.35fr; gap:12px; }
.template-switch label { display:flex; flex-direction:column; gap:7px; color:#986c7e; font-size:10px; }
.template-advice { display:flex; flex-direction:column; gap:5px; padding:12px 13px; color:#8e6677; background:linear-gradient(135deg,#fff2f7,#fff); border:1px solid #edcbd9; border-radius:10px; font-size:9px; line-height:1.55; }
.template-advice strong { color:#bd376e; font-size:10px; }
.gaussian-settings select:disabled { color:#8a6575; background:#fff5f9; opacity:.82; cursor:not-allowed; }
.filename-control { display:flex; align-items:center; width:100%; height:38px; color:#a87389; background:#fffafb; border:1px solid #edd3de; border-radius:9px; overflow:hidden; }
.filename-control:focus-within { border-color:#df6a98; box-shadow:0 0 0 3px rgba(225,93,147,.1); }
.filename-control input { flex:1; min-width:0; height:36px; border:0; border-radius:0; box-shadow:none!important; }
.filename-control span { padding:0 12px 0 5px; font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.gaussian-preview { min-width:0; display:flex; flex-direction:column; padding:20px; background:#fffafd; }
.preview-head { display:flex; justify-content:space-between; margin-bottom:9px; color:#6c4557; font-size:11px; }
.preview-head span:last-child { color:#a77b8d; font-size:10px; }
.gaussian-preview textarea {
  flex:1; width:100%; min-height:238px; resize:vertical; padding:14px; color:#604252;
  background:#fff; border:1px solid #edd8e1; border-radius:10px; outline:none;
  font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.gaussian-actions { min-height:66px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 20px; border-top:1px solid #f1dce5; background:#fff8fb; }
.gaussian-actions>span { margin-right:auto; color:#a77b8d; font-size:10px; }
.gaussian-actions button { height:38px; padding:0 15px; color:#925e75; background:#fff; border:1px solid #eccfdb; border-radius:9px; cursor:pointer; }
.gaussian-actions button:last-child { color:#fff; background:linear-gradient(180deg,#ef6999,#db477f); border-color:#df4f85; }
.gaussian-actions button:disabled { opacity:.38; cursor:not-allowed; }
.submit-section {
  position:relative; z-index:2; width:min(1220px,calc(100vw - 48px)); margin:26px auto 0;
  overflow:hidden; background:rgba(255,255,255,.92); border:1px solid rgba(195,93,135,.2);
  border-radius:18px; box-shadow:0 24px 65px rgba(153,62,101,.09); transition:opacity .2s ease;
}
.submit-section.locked { opacity:.62; }
.submit-heading {
  min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 20px; background:linear-gradient(180deg,#fff,#fff7fb); border-bottom:1px solid #f1dce5;
}
.submit-heading>p { margin:0; color:#a77b8d; font-size:11px; }
.submit-body { display:grid; grid-template-columns:340px 1fr; }
.submit-details { display:grid; align-content:start; gap:1px; padding:20px; border-right:1px solid #f1dce5; background:#fffafd; }
.submit-details>div { display:flex; flex-direction:column; gap:5px; padding:13px 14px; background:#fff; border:1px solid #f3e1e8; }
.submit-details span { color:#a77b8d; font-size:9px; }
.submit-details strong { color:#654052; font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.submit-console { display:flex; flex-direction:column; gap:16px; padding:20px; }
.bridge-state { display:flex; align-items:center; gap:9px; padding:11px 13px; color:#8b6476; background:#fff8fb; border:1px solid #efd8e2; border-radius:10px; font-size:10px; }
.bridge-state i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#d5a3b8; box-shadow:0 0 0 4px #faeaf1; }
.bridge-state.ready { color:#497567; background:#f5fbf8; border-color:#d5e9e0; }
.bridge-state.ready i { background:#58a987; box-shadow:0 0 0 4px #dff2e9; }
.bridge-state.error { color:#9b5262; background:#fff5f6; border-color:#f0d3d9; }
.bridge-state.error i { background:#dd647d; box-shadow:0 0 0 4px #f9dfe5; }
.bridge-state.checking i { animation:pulse 1.2s ease-in-out infinite; }
.submit-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.submit-flow>div { min-width:0; padding:14px 12px; background:#fff; border:1px solid #f2dfe7; border-radius:12px; }
.submit-flow>div>span { width:26px; height:26px; display:grid; place-items:center; margin-bottom:10px; color:#c9467b; background:#fff0f6; border-radius:50%; font-size:9px; }
.submit-flow p { margin:0; }
.submit-flow strong { display:block; color:#654052; font-size:10px; }
.submit-flow small { display:block; margin-top:5px; color:#a77b8d; font-size:9px; line-height:1.5; }
.job-result { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:13px; background:#f6fbf8; border:1px solid #d8e9e1; border-radius:11px; }
.job-result>div { display:flex; flex-direction:column; gap:4px; }
.job-result .wide { grid-column:1/-1; }
.job-result span { color:#7d9a8e; font-size:9px; }
.job-result strong { color:#376252; font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.submit-error { padding:11px 13px; color:#9b5262; background:#fff5f6; border:1px solid #f0d3d9; border-radius:10px; font-size:10px; line-height:1.55; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.82); } }
.submit-actions { min-height:66px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 20px; border-top:1px solid #f1dce5; background:#fff8fb; }
.submit-actions>span { margin-right:auto; color:#a77b8d; font-size:10px; }
.submit-actions button { height:38px; display:inline-flex; align-items:center; padding:0 16px; border-radius:9px; cursor:pointer; text-decoration:none; }
.submit-actions button { color:#fff; background:linear-gradient(180deg,#ef6999,#db477f); border:1px solid #df4f85; }
.submit-actions button:disabled { opacity:.38; cursor:not-allowed; }
.result-section {
  position:relative; z-index:2; width:min(1220px,calc(100vw - 48px)); margin:26px auto 30px;
  overflow:hidden; background:rgba(255,255,255,.92); border:1px solid rgba(195,93,135,.2);
  border-radius:18px; box-shadow:0 24px 65px rgba(153,62,101,.09); transition:opacity .2s ease;
}
.result-section.locked { opacity:.62; }
.result-heading {
  min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 20px; background:linear-gradient(180deg,#fff,#fff7fb); border-bottom:1px solid #f1dce5;
}
.result-heading>p { margin:0; color:#a77b8d; font-size:11px; }
.result-body { display:grid; grid-template-columns:minmax(390px,.9fr) minmax(420px,1.1fr); }
.high-settings { padding:20px; border-right:1px solid #f1dce5; background:#fffafd; }
.high-settings h3 { margin:0 0 14px; color:#654052; font-size:12px; font-weight:650; }
.high-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.high-grid label { display:flex; flex-direction:column; gap:7px; color:#986c7e; font-size:10px; }
.high-grid select { width:100%; height:38px; padding:0 10px; color:#654052; background:#fff; border:1px solid #edd3de; border-radius:9px; outline:none; }
.high-grid select:focus { border-color:#df6a98; box-shadow:0 0 0 3px rgba(225,93,147,.1); }
.route-card { display:flex; flex-direction:column; gap:7px; margin-top:14px; padding:12px; background:#fff; border:1px solid #f0dbe4; border-radius:10px; }
.route-card span { color:#a77b8d; font-size:9px; }
.route-card code { color:#684456; font:10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.high-settings>p { margin:12px 2px 0; color:#a77b8d; font-size:9px; line-height:1.55; }
.high-settings>p strong { color:#c53f75; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.result-console { display:flex; flex-direction:column; gap:14px; padding:20px; }
.pipeline-state { display:flex; align-items:center; gap:9px; padding:11px 13px; color:#8b6476; background:#fff8fb; border:1px solid #efd8e2; border-radius:10px; font-size:10px; }
.pipeline-state i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#d5a3b8; box-shadow:0 0 0 4px #faeaf1; }
.pipeline-state.running i { background:#dc6391; box-shadow:0 0 0 4px #f9dfe9; animation:pulse 1.2s ease-in-out infinite; }
.pipeline-state.done { color:#497567; background:#f5fbf8; border-color:#d5e9e0; }
.pipeline-state.done i { background:#58a987; box-shadow:0 0 0 4px #dff2e9; }
.pipeline-state.error { color:#9b5262; background:#fff5f6; border-color:#f0d3d9; }
.pipeline-state.error i { background:#dd647d; box-shadow:0 0 0 4px #f9dfe5; }
.reference-match { display:flex; flex-direction:column; gap:5px; padding:12px 13px; color:#6f6571; background:#fff8e9; border:1px solid #eed9ac; border-radius:10px; font-size:9px; line-height:1.55; }
.reference-match[hidden] { display:none; }
.reference-match strong { color:#956716; font-size:10px; }
.ts-result { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; }
.ts-result[hidden] { display:none; }
.ts-result>div { display:flex; flex-direction:column; gap:5px; min-width:0; padding:12px 13px; background:#fff7fb; border:1px solid #edcad9; border-radius:10px; }
.ts-result span { color:#a77b8d; font-size:9px; }
.ts-result strong { color:#bd376e; font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.energy-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.energy-grid>div { display:flex; flex-direction:column; gap:5px; min-width:0; padding:13px; background:#fff; border:1px solid #f2dfe7; border-radius:10px; }
.energy-grid span { color:#a77b8d; font-size:9px; }
.energy-grid strong { color:#654052; font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.energy-grid .final-energy { grid-column:1/-1; padding:16px; background:linear-gradient(135deg,#fff5f9,#fff); border-color:#eabfd1; }
.final-energy strong { color:#bd376e; font-size:19px; }
.final-energy small { color:#ac7c90; font-size:9px; }
.pipeline-error { padding:11px 13px; color:#9b5262; background:#fff5f6; border:1px solid #f0d3d9; border-radius:10px; font-size:10px; line-height:1.55; }
.history-panel { border-top:1px solid #f1dce5; background:#fffafd; }
.history-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px 13px; }
.history-head h3 { margin:0; color:#654052; font-size:12px; }
.history-head p { margin:5px 0 0; color:#a77b8d; font-size:9px; }
.history-head button { height:34px; padding:0 13px; color:#925e75; background:#fff; border:1px solid #eccfdb; border-radius:9px; cursor:pointer; }
.history-head button:hover { color:#c63873; border-color:#df6a98; background:#fff5f9; }
.history-table-wrap { overflow-x:auto; padding:0 20px 20px; }
.history-table { width:100%; min-width:1120px; border-collapse:separate; border-spacing:0; color:#654052; background:#fff; border:1px solid #efdce4; border-radius:11px; overflow:hidden; }
.history-table th { padding:10px 11px; color:#9a7182; background:#fff5f9; border-bottom:1px solid #efdce4; font-size:9px; font-weight:600; text-align:left; white-space:nowrap; }
.history-table td { padding:11px; border-bottom:1px solid #f3e4ea; vertical-align:top; }
.history-table tbody tr:last-child td { border-bottom:0; }
.history-table td strong { display:block; max-width:270px; color:#654052; font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.history-table td small { display:block; margin-top:4px; color:#ad8293; font-size:8px; }
.history-table .number-cell strong { white-space:nowrap; }
.history-table .final-cell strong { color:#bd376e; font-weight:700; }
.history-empty td { padding:24px; color:#ae8495; font-size:10px; text-align:center; }
@media(max-width:1040px) {
  .workspace { gap:20px; }
  .panel { border-radius:18px; }
  .transfer-button { border-radius:14px; }
  .gaussian-section { width:min(760px,calc(100vw - 28px)); }
  .gaussian-body { grid-template-columns:1fr; }
  .gaussian-settings { border-right:0; border-bottom:1px solid #f1dce5; }
  .ts-geometry-prep { grid-template-columns:1fr 1fr; }
  .submit-section { width:min(760px,calc(100vw - 28px)); }
  .submit-body { grid-template-columns:1fr; }
  .submit-details { grid-template-columns:1fr 1fr; border-right:0; border-bottom:1px solid #f1dce5; }
  .result-section { width:min(760px,calc(100vw - 28px)); }
  .result-body { grid-template-columns:1fr; }
  .high-settings { border-right:0; border-bottom:1px solid #f1dce5; }
}
@media(max-width:620px) {
  .gaussian-heading { align-items:flex-start; flex-direction:column; gap:7px; }
  .gaussian-settings { grid-template-columns:1fr; }
  .workflow-choice,.ts-geometry-prep { grid-template-columns:1fr; }
  .ts-settings-grid,.ts-result { grid-template-columns:1fr; }
  .template-switch { grid-template-columns:1fr; }
  .gaussian-actions { align-items:stretch; flex-direction:column; }
  .gaussian-actions>span { margin:0 0 4px; }
  .submit-heading { align-items:flex-start; flex-direction:column; gap:7px; }
  .submit-details { grid-template-columns:1fr; }
  .submit-flow { grid-template-columns:1fr; }
  .submit-actions { align-items:stretch; flex-direction:column; }
  .submit-actions>span { margin:0 0 4px; }
  .result-heading { align-items:flex-start; flex-direction:column; gap:7px; }
  .high-grid,.energy-grid { grid-template-columns:1fr; }
  .energy-grid .final-energy { grid-column:auto; }
  .history-head { align-items:flex-start; }
}

#draft-status{font-size:.85rem;color:#a56681;margin-right:1rem}.workflow-progress-copy{flex-wrap:wrap}.result-downloads{margin-top:1rem}.download-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0}.completion-reminder{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem}.completion-reminder small,#download-feedback{color:#a56681}.result-downloads summary{cursor:pointer;color:#ae3f70}