/* static/styles.css */
/* Layout and interaction styles. Palette lives in theme-mist.css. */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-underline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:28px;line-height:1.35;font-weight:600;letter-spacing:-.02em}h2{font-size:17px;font-weight:600;line-height:1.5}h3{font-size:15px;font-weight:600}b,strong{font-weight:600}button,a,input,textarea,select,summary{touch-action:manipulation}.icon,.empty-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}button .icon{vertical-align:middle}button:focus-visible,a:focus-visible,summary:focus-visible,.task-list-shell:focus-visible{outline:2px solid var(--blue);outline-offset:3px}[hidden]{display:none!important}.skip-link{position:absolute;top:-60px;left:15px;z-index:20;background:var(--ink);color:var(--surface);padding:10px}.skip-link:focus{top:10px}.topbar{background:var(--surface);border-bottom:1px solid var(--line)}.topbar-inner{max-width:1340px;margin:auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;text-decoration:none;white-space:nowrap}.brand img{border-radius:8px}.top-actions{display:flex;align-items:center;gap:8px}#connection{font-size:12px;color:var(--muted);margin-right:14px}#connection.connected:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:500}.button:hover:not(:disabled){background:var(--hover)}.button.primary{background:var(--ink);color:var(--surface);border-color:var(--ink)}.button.primary:hover:not(:disabled){opacity:.86}.button.subtle{border-color:transparent;background:transparent;font-size:13px}.button.subtle:hover{background:var(--hover)}.text-button{border:0;background:transparent;color:var(--muted);padding:6px 3px;font-size:12px;line-height:1.5;white-space:nowrap}.text-button:hover:not(:disabled){color:var(--ink);text-decoration:underline;text-underline-offset:3px}.icon-button{width:32px;height:32px;display:inline-grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--muted);flex:none}.icon-button:hover{color:var(--ink);background:var(--hover)}.page{max-width:1340px;margin:auto;padding:32px 28px 20px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.page-heading p{color:var(--muted);margin-top:7px}.heading-note{color:var(--muted);font-size:12px;white-space:nowrap}.success-pulse{display:flex;align-items:center;gap:20px;padding:14px 0 20px;margin-bottom:22px;border-bottom:1px solid var(--line);font-size:12px}.success-pulse>div:first-child{display:flex;align-items:center;gap:9px;white-space:nowrap}.success-pulse strong{font-size:18px;font-variant-numeric:tabular-nums}.success-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}.success-trail{display:flex;align-items:center;gap:4px;flex:1;max-width:280px;height:22px}.trail-mark{display:block;flex:1;min-width:3px;max-width:8px;height:12px;border-radius:2px;background:var(--track)}.trail-mark.succeeded{height:20px;background:var(--green)}.trail-mark.failed,.trail-mark.canceled{height:8px;background:var(--muted)}.trail-mark.running{height:16px;background:var(--blue)}.trail-mark.paused{height:12px;background:var(--amber)}#success-summary{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}.workspace-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}.panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}.form-panel h2{margin-bottom:24px}.field-group{margin-bottom:23px}.label-line,.split{display:flex;align-items:center;justify-content:space-between;gap:12px}label{font-size:13px;font-weight:500}.label-line{margin-bottom:8px}.input-action{display:flex;align-items:center;gap:8px;height:42px}input,textarea,select{min-width:0;width:100%;border:1px solid var(--line-strong);border-radius:8px;background:var(--field);color:var(--ink);padding:10px 12px;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--blue);outline:1px solid var(--blue)}input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}textarea{resize:vertical;min-height:90px;line-height:1.75;font-size:13px}#tokens{font-family:var(--sans)}input:disabled,textarea:disabled{color:var(--muted)}fieldset{border:0;margin:0;padding:0;min-width:0}fieldset:disabled{opacity:.64}.field-meta{font-size:12px;color:var(--muted);margin-top:8px}.balance{display:flex;gap:20px;margin-top:10px;font-size:12px;color:var(--muted)}.balance b{font-size:17px;color:var(--ink);margin-left:5px;font-variant-numeric:tabular-nums}.payment-method{display:flex;align-items:center;justify-content:space-between;margin-top:8px;background:var(--subtle);padding:13px;border-radius:8px}.payment-method span{font-size:12px;color:var(--muted)}.advanced{padding-top:16px;border-top:1px solid var(--line)}.advanced summary{cursor:pointer;color:var(--muted);font-size:13px}.advanced-body{display:grid;gap:8px;padding-top:15px}.advanced-body label:not(:first-child){margin-top:10px}.submit-area{padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}.submit-area .split{font-size:13px}.submit-button{margin-top:14px;width:100%;min-height:44px}.submission-note{text-align:center;color:var(--muted);font-size:12px;margin-top:10px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}.count-badge{font-size:12px;font-weight:400;color:var(--muted);margin-left:6px}.task-tools{display:flex;align-items:center;gap:12px}.task-filters{display:flex;gap:3px;overflow-x:auto;border-bottom:1px solid var(--line);padding:0 0 9px;margin-bottom:5px;scrollbar-width:thin}.filter{font-size:12px;color:var(--muted);background:transparent;border:0;border-radius:6px;padding:6px 9px;white-space:nowrap}.filter.active{background:var(--hover);color:var(--ink)}.filter b{font-weight:400;margin-left:6px;font-variant-numeric:tabular-nums}.task-list-shell{height:350px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}.task-list{display:grid;gap:0}.task-card{padding:12px 10px;border-bottom:1px solid var(--line);border-radius:4px;background:transparent}.task-card.selected{background:var(--selected)}.task-card:hover{background:var(--hover)}.task-card-head{display:flex;align-items:center;gap:6px}.task-select{display:flex;align-items:center;gap:9px;min-width:0;flex:1;background:transparent;border:0;padding:3px 0;color:var(--ink);text-align:left}.task-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:13px}.state-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--muted)}.state-dot.running{background:var(--blue)}.state-dot.succeeded{background:var(--green)}.state-dot.failed{background:var(--danger)}.state-dot.paused{background:var(--amber)}.status-label{font-size:12px;color:var(--muted);white-space:nowrap}.succeeded .status-label,.status-label.succeeded{color:var(--green)}.failed .status-label,.status-label.failed{color:var(--danger)}.task-card-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;margin:4px 0 0 16px}.task-card-meta span:last-child{font-variant-numeric:tabular-nums}.task-row-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:3px}.task-row-actions .text-button{padding:2px 0}.task-card-progress{margin:9px 0 0 16px;width:calc(100% - 16px);height:3px}.detail-progress{width:100%;height:5px;margin:15px 0 5px}progress{display:block;appearance:none;-webkit-appearance:none;border:0;border-radius:5px;background:var(--track);overflow:hidden}progress::-webkit-progress-bar{background:var(--track);border-radius:5px}progress::-webkit-progress-value{background:var(--blue);border-radius:5px}progress::-moz-progress-bar{background:var(--blue);border-radius:5px}progress.succeeded::-webkit-progress-value{background:var(--green)}progress.succeeded::-moz-progress-bar{background:var(--green)}progress.failed::-webkit-progress-value{background:var(--danger)}.empty-state{height:100%;min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:30px 18px}.empty-icon{width:30px;height:30px;color:var(--muted);margin-bottom:4px}.empty-state p{max-width:300px;font-size:13px;color:var(--muted)}.task-detail{padding-top:20px;margin-top:8px;border-top:1px solid var(--line)}.detail-head{display:flex;align-items:center;gap:8px}.detail-head h3{overflow-wrap:anywhere;min-width:0}.detail-head .status-label{margin-left:auto}.detail-sub{font-size:12px;color:var(--muted);margin-top:3px}.detail-progress-note{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.detail-proxy{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);padding:12px 0;flex-wrap:wrap}.detail-proxy span{overflow-wrap:anywhere}.detail-steps{padding:12px 0 0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;border-top:1px solid var(--line);font-size:12px}.detail-steps li{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted)}.detail-steps li.done{color:var(--green)}.detail-steps li.current{color:var(--blue)}.step-marker{width:20px;height:20px;display:inline-grid;place-items:center;flex:none;font-size:11px;font-variant-numeric:tabular-nums}.step-marker .icon{width:14px;height:14px}.step-state{font-size:11px;margin-left:auto}.detail-log{max-height:140px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;margin-top:18px;padding-top:10px;border-top:1px solid var(--line)}.log-row{display:flex;gap:10px;font-size:12px;line-height:1.7;color:var(--muted)}.log-row time{font-variant-numeric:tabular-nums;flex:none}.log-row span{min-width:0;overflow-wrap:anywhere}.detail-actions{display:flex;justify-content:flex-end;gap:18px;margin-top:10px}.result-box{background:var(--success-bg);padding:15px;border-radius:8px;margin:4px 0 18px}.result-box strong{color:var(--green);font-size:13px}.result-link{display:block;overflow-wrap:anywhere;font-size:12px;color:var(--ink);margin-top:12px}.result-expiry{font-size:12px;font-variant-numeric:tabular-nums;color:var(--green)}.result-expiry.expired{color:var(--danger)}.result-qr{display:flex;align-items:center;gap:14px;margin-top:12px}.result-qr img{background:white;padding:5px;border-radius:5px;object-fit:contain;flex:none}.result-qr p{font-size:12px}.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.result-actions .button{font-size:12px}.inline-error{color:var(--danger);background:var(--error-bg);border-radius:8px;padding:12px;font-size:13px;margin:14px 0}.inline-error p{margin-top:5px}.inline-error small{display:block;overflow-wrap:anywhere;margin-top:6px}.notice{background:var(--subtle);border-radius:8px;padding:12px 14px;margin:12px 0;font-size:12px;color:var(--muted)}#demo-notice{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.tasks-footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding-top:15px;margin-top:16px}.page-footer{padding-top:24px;color:var(--muted);font-size:12px}.muted{color:var(--muted)}.toast{position:fixed;right:24px;bottom:24px;z-index:30;max-width:min(460px,calc(100vw - 32px));padding:12px 18px;border:1px solid var(--line-strong);border-radius:10px;background:var(--ink);color:var(--surface);font-size:13px}dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:12px;max-width:min(430px,calc(100vw - 32px));padding:24px}dialog::backdrop{background:#0009}#qr-large{display:block;width:100%;max-width:300px;aspect-ratio:1;object-fit:contain;background:white;margin:20px auto;padding:15px}#qr-expiry{text-align:center;margin-bottom:12px}dialog p{font-size:13px}.clipboard-fallback{position:fixed;left:-9999px;top:0}::selection{background:var(--selection)}*{scrollbar-color:var(--scrollbar) transparent}
@media(max-width:1000px){.workspace-grid{grid-template-columns:minmax(280px,330px) minmax(0,1fr);gap:16px}.panel{padding:18px}.task-tools{gap:8px}.detail-steps{grid-template-columns:1fr}.step-state{display:none}.success-trail{max-width:180px}.heading-note{display:none}.topbar-inner,.page{padding-left:20px;padding-right:20px}}
@media(max-width:760px){.workspace-grid{grid-template-columns:1fr}.topbar-inner{flex-wrap:wrap;padding:12px 16px;gap:8px}.top-actions{gap:2px}.brand{font-size:16px}.brand img{width:26px;height:26px}#connection{display:none}.page{padding:24px 16px}.page-heading h1{font-size:25px}.page-heading p{font-size:13px}.success-pulse{gap:12px;flex-wrap:wrap}.success-trail{max-width:none;min-width:100px}#success-summary{width:100%;text-align:left;font-size:11px}.tasks-panel{padding:16px}.task-list-shell{height:350px}.detail-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}.tasks-footer{flex-wrap:wrap}.task-card{padding-left:7px;padding-right:7px}.panel-heading{gap:6px}.task-tools{gap:8px}.top-actions .button{padding:6px 8px;font-size:12px}.detail-head h3{font-size:13px}.detail-head{flex-wrap:wrap}.result-box .split{flex-wrap:wrap}.toast{right:16px;bottom:16px}}
@media(max-width:390px){.topbar-inner{align-items:flex-start}.top-actions{margin-left:auto;flex-wrap:wrap}.task-tools{width:100%;justify-content:flex-end}.detail-steps{grid-template-columns:1fr}.task-card-head{gap:3px}.status-label{font-size:11px}.result-qr{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

#verify-cdk{flex:0 0 auto;min-width:68px;height:42px;white-space:nowrap;word-break:normal;writing-mode:horizontal-tb;text-align:center;padding:0 12px}
.input-action input{flex:1 1 0;width:0;height:42px;min-height:0;padding:8px 12px}

.payment-status-grid{display:grid;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.payment-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:7px}
.payment-status-row>span{color:var(--muted);font-size:12px}
.payment-state{font-size:12px;color:var(--blue);font-variant-numeric:tabular-nums;text-align:right}
.payment-state.succeeded{color:var(--green)}
.payment-state.failed,.payment-state.expired,.payment-state.canceled{color:var(--danger)}
.payment-sync{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;padding:0 10px}
.payment-sync>span{font-size:17px;line-height:1;display:inline-block;animation:payment-spin 1.8s linear infinite}
.payment-sync b{color:var(--ink);font-weight:500;min-width:38px;text-align:right}
@keyframes payment-spin{to{transform:rotate(-360deg)}}
.token-validation.invalid{color:var(--danger)}
.task-card-progress-row{display:flex;align-items:center;gap:8px;margin:9px 0 0 16px}
.task-card-progress-row .task-card-progress{flex:1;min-width:0;width:auto;margin:0}
.task-card-progress-value{min-width:30px;text-align:right;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;line-height:1}


/* static/theme-mist.css */
/* Neutral light/dark themes, with blue reserved for progress and green for success. */
:root{
  color-scheme:light;
  --sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --bg:#f7f7f8;--surface:#fff;--ink:#202123;--muted:#66686c;--placeholder:#717478;
  --line:#ededee;--line-strong:#d4d5d7;--field:#fff;--subtle:#f7f7f8;--hover:#f2f3f4;--selected:#f4f5f6;
  --track:#e8eaed;--blue:#3272c5;--green:#258060;--danger:#b64242;--amber:#946c20;
  --success-bg:#eff7f3;--error-bg:#fbf0f0;--selection:#cee1fa;--scrollbar:#c3c5c8;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#212121;--surface:#262626;--ink:#ececec;--muted:#b0b0b0;--placeholder:#a2a2a2;
  --line:#343434;--line-strong:#4a4a4a;--field:#2d2d2d;--subtle:#2b2b2b;--hover:#333;--selected:#323232;
  --track:#414141;--blue:#79a9ed;--green:#7dc7a9;--danger:#ef9696;--amber:#d0b276;
  --success-bg:#253b32;--error-bg:#402e2e;--selection:#385a81;--scrollbar:#626262;
}

/* static/workspace-polish.css */
/* Refine the original two-column workspace without changing its workflow. */
:root{
  --sans:"Segoe UI Variable","Inter","PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC",system-ui,sans-serif;
  --bg:#f4f6f3;--surface:#fff;--ink:#202722;--muted:#59645d;
  --line:#e0e6df;--line-strong:#c8d1c8;--field:#fcfdfa;
  --subtle:#f5f8f4;--hover:#edf3ed;--selected:#eef6ef;
  --track:#e2e9e2;--scrollbar:#bac7bc;
  --success-bg:#edf7f0;--error-bg:#fbf1f0;
}
:root[data-theme="dark"]{
  --bg:#1d231f;--surface:#252c27;--ink:#edf3ee;--muted:#b7c2b9;
  --line:#39443b;--line-strong:#546456;--field:#252e27;
  --subtle:#2b352e;--hover:#344037;--selected:#304336;
  --track:#435147;--scrollbar:#6a7d6d;
  --success-bg:#263c2d;--error-bg:#3c2c2b;
}
body{letter-spacing:0;line-height:1.6}
.topbar{box-shadow:0 1px 0 rgba(26,42,31,.025)}
.topbar-inner{padding-top:17px;padding-bottom:17px}
.brand{font-weight:700;letter-spacing:-.02em}
.page{padding-top:35px}
.page-heading{margin-bottom:18px}
.page-heading h1{font-size:30px;font-weight:700;letter-spacing:-.025em}
.page-heading p{margin-top:6px;font-size:13.5px}
.success-pulse{min-height:58px;gap:18px;margin-bottom:21px;padding:12px 17px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.success-pulse strong{font-size:17px}
.success-trail{max-width:250px}
.workspace-grid{grid-template-columns:minmax(310px,360px) minmax(0,1fr);gap:18px}
.panel{border:1px solid transparent;border-radius:15px;padding:24px;box-shadow:0 1px 2px rgba(27,41,29,.04),0 13px 34px rgba(27,41,29,.055)}
:root[data-theme="dark"] .panel{box-shadow:0 1px 2px rgba(0,0,0,.14),0 15px 34px rgba(0,0,0,.16)}
.form-panel h2,.tasks-panel h2{font-size:18px;font-weight:700;letter-spacing:-.02em}
.form-panel h2{margin-bottom:25px}
.panel-heading{margin-bottom:17px}
.count-badge{font-size:12px;font-weight:500;color:var(--muted);margin-left:4px}
.field-group{margin-bottom:22px}
.label-line{margin-bottom:9px}
label{font-size:13.5px;font-weight:600;color:var(--ink)}
.field-meta{font-size:12.5px}
input,textarea,select{border-radius:10px;background:var(--field);box-shadow:inset 0 1px 2px rgba(23,41,27,.035);transition:border-color .15s ease,box-shadow .15s ease}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent)}
fieldset:disabled{opacity:.78}
.button{border-radius:9px}
.button.primary{font-weight:600}
.button.primary:hover:not(:disabled){background:var(--ink);color:var(--surface);border-color:var(--ink);opacity:1;filter:brightness(1.12)}
.payment-method{border:1px solid var(--line);border-radius:10px;background:var(--subtle)}
.advanced{border-color:var(--line)}
.submit-area{border-color:var(--line)}
.submit-button{min-height:46px}
.tasks-panel .task-tools{gap:10px}
.tasks-panel .task-tools .text-button{font-size:12px}
.tasks-panel .task-filters{gap:3px;margin-bottom:14px;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--subtle)}
.tasks-panel .filter{padding:7px 10px;font-weight:500}
.tasks-panel .filter.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.07)}
.task-list-shell{height:auto;max-height:390px;min-height:0;overflow-y:auto;scrollbar-gutter:auto;border:1px solid color-mix(in srgb,var(--line-strong) 55%,var(--line));border-radius:11px;background:var(--surface)}
.task-list-shell .empty-state{min-height:310px}
.task-card{display:flex;align-items:center;gap:5px;min-height:84px;padding:0 14px;border-bottom:1px solid var(--line);border-radius:0;transition:background .15s ease}
.task-card:last-child{border-bottom:0}
.task-card.selected{background:var(--selected);box-shadow:inset 0 0 0 1px var(--line-strong)}
.task-card:hover{background:var(--hover)}
.task-card .task-select{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(58px,auto);align-items:center;gap:13px;min-height:83px;padding:12px 0;flex:1}
.task-state-mark{width:18px;height:18px;display:grid;place-items:center;border:2px solid var(--line-strong);border-radius:50%;color:var(--muted)}
.task-state-mark .state-dot{width:6px;height:6px;box-shadow:none;background:currentColor}
.task-card.running .task-state-mark{border-color:var(--blue);border-right-color:transparent;color:var(--blue);animation:task-spin 1.4s linear infinite}
.task-card.succeeded .task-state-mark{border-color:var(--green);color:var(--green)}
.task-card.failed .task-state-mark,.task-card.canceled .task-state-mark{border-color:var(--danger);color:var(--danger)}
.task-card.paused .task-state-mark{border-color:var(--amber);color:var(--amber)}
@keyframes task-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.task-card.running .task-state-mark{animation:none}}
.task-card-content{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.task-card .task-email{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:650;letter-spacing:-.015em}
.task-card-stage{font-size:12px;color:var(--muted)}
.task-card-aside{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0;color:var(--muted);font-size:11px;white-space:nowrap}
.task-card-aside strong{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.task-card-time{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;opacity:.85}
.task-card .copy-email{opacity:.58}
.task-card .copy-email:hover,.task-card .copy-email:focus-visible{opacity:1}
.task-detail{margin-top:25px;padding-top:0;border-top:0}
.detail-head{min-height:42px;gap:8px}
.detail-head h3{font-size:17px;letter-spacing:-.02em}
.detail-head .detail-actions{display:flex;align-items:center;gap:10px;margin:0 0 0 auto}
.detail-head .detail-actions .text-button{padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);font-size:12px;text-decoration:none}
.detail-head .detail-actions [data-action="cancel"]{border-color:color-mix(in srgb,var(--danger) 28%,var(--line));background:var(--error-bg);color:var(--danger)}
.process-card{margin-top:18px;border:1px solid color-mix(in srgb,var(--line-strong) 60%,var(--line));border-radius:12px;background:var(--surface);overflow:hidden}
.process-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:13px 17px;border-bottom:1px solid var(--line)}
.process-head>strong{font-size:14px;font-weight:700}
.process-state{padding:2px 9px;border-radius:999px;background:var(--subtle);color:var(--muted);font-size:11px;font-weight:600}
.process-state.running{color:var(--blue)}
.process-state.succeeded{color:var(--green)}
.process-state.failed,.process-state.canceled{color:var(--danger)}
.process-state.paused{color:var(--amber)}
.process-elapsed,.process-round{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.process-round{margin-left:auto}
.process-body{padding:19px 20px 21px}
.process-progress-label{color:var(--muted);font-size:13px}
.process-progress-label strong{color:var(--ink);font-variant-numeric:tabular-nums}
.process-body .detail-progress{width:100%;height:6px;margin:9px 0 7px}
.process-progress-note{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.process-body .detail-proxy{display:block;margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--subtle)}
.proxy-heading{display:flex;align-items:center;gap:8px;margin-bottom:13px;font-size:13px}
.proxy-heading .icon{width:16px;height:16px;color:var(--muted)}
.proxy-heading>span{margin-left:auto;color:var(--muted);font-size:11px}
.proxy-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.proxy-facts>div{display:flex;flex-direction:column;min-width:0;gap:3px}
.proxy-facts span{color:var(--muted);font-size:11px}
.proxy-facts strong{min-width:0;overflow-wrap:anywhere;color:var(--ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.process-body .detail-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;border-top:0}
.process-body .detail-steps li{min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}
.process-body .detail-steps li.current{border-color:color-mix(in srgb,var(--blue) 48%,var(--line));background:color-mix(in srgb,var(--blue) 7%,var(--surface));color:var(--ink)}
.process-body .detail-steps li.done{color:var(--green)}
.process-body .detail-steps li.failed{border-color:color-mix(in srgb,var(--danger) 42%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--surface));color:var(--danger)}
.process-body .detail-steps li.canceled{color:var(--muted)}
.process-body .step-marker{width:17px;height:17px;color:inherit}
.process-body .detail-log{margin-top:18px;max-height:none;overflow:visible}
.process-body[hidden],.execution-log[hidden]{display:none}
.process-body .detail-steps li.skipped{border-style:dashed;color:var(--muted)}
.process-body .detail-steps li{align-items:flex-start}
.process-body .detail-steps li>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.step-reason{display:block;font-size:11px;line-height:1.5;margin-top:4px}
.process-body .step-state{display:inline;flex:none;white-space:nowrap}
.proxy-heading{flex-wrap:wrap}
.proxy-heading>strong,.proxy-heading>span:last-child{flex-shrink:0;white-space:nowrap}
.proxy-heading>span:not(:last-child){flex:1 1 100px;min-width:0;overflow-wrap:anywhere}
.process-head .icon-button:focus-visible,.detail-log button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.execution-log{list-style:none;padding:0;margin:10px 0 0;max-height:240px;overflow:auto;scrollbar-color:var(--line-strong) var(--surface)}
.execution-log li{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12px}
.execution-log time{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.execution-log span{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
.result-box{border:1px solid color-mix(in srgb,var(--green) 20%,var(--line));border-radius:11px;padding:17px}
.payment-status-row{background:var(--surface);border-radius:8px}
.plus-recheck{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.plus-recheck input{flex:1;min-width:180px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--field);color:var(--ink);font:inherit;font-size:12.5px}
.plus-recheck .button{white-space:nowrap}
.plus-reason{display:block;margin-top:5px}
.tasks-footer{margin-top:18px}
.top-actions{flex-wrap:wrap;justify-content:flex-end}
.community-link{white-space:nowrap;text-decoration:none;color:var(--ink)}
.community-link .icon{width:17px;height:17px;color:var(--blue)}
#token-validation{white-space:pre-line;max-height:180px;overflow-y:auto;overflow-wrap:anywhere;line-height:1.7}
.inline-error .error-summary{margin-top:10px;font-size:12px;line-height:1.5;letter-spacing:.01em}
@media(max-width:1080px){
  .workspace-grid{grid-template-columns:minmax(290px,330px) minmax(0,1fr);gap:16px}
  .panel{padding:20px}
  .tasks-panel .task-filters{padding:4px}
  .tasks-panel .filter{padding:6px 8px}
}
@media(max-width:880px){
  .workspace-grid{grid-template-columns:1fr}
  .form-panel{max-width:none}
}
@media(max-width:760px){
  .topbar-inner{flex-wrap:wrap}
  .top-actions{gap:4px}
  .page{padding-top:24px}
  .page-heading h1{font-size:26px}
  .success-pulse{padding:12px 14px}
  .panel{padding:18px;border-radius:13px}
  .task-list-shell{height:auto;max-height:360px}
  .task-card{padding:0 9px}
  .task-card .task-select{gap:7px;grid-template-columns:18px minmax(0,1fr) 48px}
  .task-card .task-email{font-size:12px}
  .task-card-aside strong{font-size:12px}
  .detail-head{flex-wrap:wrap}
  .detail-head .detail-actions{width:100%;justify-content:flex-end}
  .process-body{padding:15px 13px}
  .proxy-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-body .detail-steps{grid-template-columns:1fr}
}

/* static/board.css */
/* 彩虹糖 · 成功率看板（KPI 卡 + 结果堆叠图 + 环形图） */
:root{--board-rainbow:linear-gradient(90deg,#ff8fab,#ffc971,#8ce99a,#74c0fc,#b197fc);}

.board-panel{position:relative;margin:0 0 16px;overflow:hidden;padding:11px 18px 12px;}
.board-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--board-rainbow);}

/* 折叠控制：默认收起，只留一行标题 */
.board-head{margin:0;}
.board-toggle{display:flex;align-items:center;gap:9px;width:100%;padding:2px 0;border:0;background:none;
  color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left;}
.board-toggle:hover{color:var(--blue);}
.board-caret{width:0;height:0;flex:none;border-left:6px solid var(--muted);
  border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .18s ease;}
.board-panel.open .board-caret{transform:rotate(90deg);}
.board-toggle-hint{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--muted);opacity:.78;}
.board-body{margin-top:11px;}

.board-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.board-controls select{padding:6px 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--field);color:var(--ink);font:inherit;}
.board-range{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;}
.range-btn{padding:6px 14px;border:0;background:var(--surface);color:var(--muted);font:inherit;cursor:pointer;transition:background .15s,color .15s;}
.range-btn + .range-btn{border-left:1px solid var(--line-strong);}
.range-btn:hover{background:var(--hover);}
.range-btn.active{background:var(--blue);color:#fff;}

/* KPI：紧凑药丸条，不铺满整行 */
.board-kpis{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0 12px;}
.kpi{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px;
  background:var(--subtle);border:1px solid var(--line);}
.kpi.ok{background:var(--success-bg);border-color:#bfe3d2;}
.kpi.warn{border-color:#eccfcf;}
.kpi-label{font-size:11px;color:var(--muted);}
.kpi-value{font-size:14.5px;line-height:1.2;font-weight:650;color:var(--ink);letter-spacing:-.01em;}
.kpi-value i{font-size:10px;font-style:normal;color:var(--muted);margin-left:1px;}
.kpi-value.small{font-size:12.5px;}
.kpi.ok .kpi-value{color:var(--green);}

/* 主体：左图右环 */
.board-main{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:14px;align-items:center;}
.board-chart-title{font-size:11px;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between;gap:8px;}
.board-chart-hint{opacity:.7;}

.board-bars{padding:3px 2px 0;border-bottom:1px solid var(--line);}
.board-bars svg{display:block;width:100%;height:84px;overflow:visible;}
.board-axis{display:flex;margin-top:4px;}
.board-axis span{flex:1;min-width:0;text-align:center;font-size:9.5px;color:var(--muted);white-space:nowrap;}

.board-side{display:flex;justify-content:center;align-items:center;}
.board-donut{display:flex;justify-content:center;}
.donut-num{font-size:21px;font-weight:650;fill:var(--ink);}
.donut-cap{font-size:10px;fill:var(--muted);}
/* 图例横向铺开，避免把面板撑高 */
.board-legend{display:flex;flex-wrap:wrap;gap:5px 18px;margin-top:10px;}
.lg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.lg i{width:8px;height:8px;border-radius:2.5px;flex:none;}
.lg b{color:var(--ink);font-weight:600;}
.lg em{font-style:normal;opacity:.72;}

.board-empty{color:var(--muted);font-size:12px;padding:14px 0;}

@media (max-width:820px){
  .board-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .board-main{grid-template-columns:minmax(0,1fr);}
  .board-side{justify-content:center;}
}

/* Success showcase: no failure distribution, ratio ring, or implied success rate. */
.board-success-only .board-main{grid-template-columns:minmax(0,1fr);}
.board-note{font-size:11px;line-height:1.6;color:var(--muted);margin:10px 0 0;}
@media(max-width:760px){
  .support-bar:has(> .board-success-only.open){flex-wrap:wrap;}
  .support-bar > .board-success-only.open{flex-basis:100%;min-width:0;}
}

/* static/usage-guide.css */
/* Scoped onboarding: preserve the existing workspace identity and layout. */
.usage-guide { margin: 0 0 20px; }
.usage-guide > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.guide-summary-note { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 16px; }
.guide-body { max-width: 72ch; padding-top: 18px; line-height: 1.8; font-size: 13px; overflow-wrap: anywhere; }
.guide-intro { color: var(--muted); margin-bottom: 20px; }
.guide-steps { padding-left: 24px; margin: 0; }
.guide-steps > li { padding-left: 6px; margin-bottom: 22px; }
.guide-steps > li:last-child { margin-bottom: 0; }
.guide-steps h3 { font-size: 14px; margin: 0 0 6px; }
.guide-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.guide-at { margin-top: 12px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-at summary, .guide-faq summary { cursor: pointer; font-weight: 500; }
.guide-at ol { margin: 12px 0; padding-left: 20px; }
.guide-at li { margin-bottom: 10px; padding-left: 4px; }
.guide-privacy { color: var(--muted); }
.guide-faq { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.guide-faq dt { font-weight: 600; margin-top: 14px; }
.guide-faq dd { margin: 4px 0 10px; color: var(--muted); }
#draft-status.invalid { color: var(--danger); }
.usage-guide, #guide-at { scroll-margin-top: 24px; }
@media (max-width: 760px) {
  .guide-summary-note { display: block; margin: 6px 0 0 18px; }
  .guide-body { font-size: 13px; }
  .guide-steps { padding-left: 20px; }
  .token-label-line { flex-wrap: wrap; }
}

/* static/workspace-ui.css */
/* Workbench presentation layer. Extraction and payment engines are unchanged. */
:root {
  color-scheme: light;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  --bg: #f7f7f8; --surface: #fff; --ink: #1f2328; --muted: #62666d;
  --placeholder: #697487; --line: #e7e8eb; --line-strong: #d7d9dd;
  --field: #fff; --subtle: #fafafa; --hover: #f6f6f7; --selected: #f3f3f4;
  --track: #e7ebf1; --scrollbar: #bcc5d0; --blue: #315fc4;
  --green: #167354; --danger: #b53e49; --amber: #8c5b12;
  --success-bg: #ecf6f0; --error-bg: #fdf0f1; --selection: #dce7ff;
  --warning-bg: #fff5df; --info-bg: #edf3ff; --focus: #315fc4;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17181a; --surface: #202124; --ink: #eceef1; --muted: #b3b7be;
  --placeholder: #a0adbf; --line: #33353a; --line-strong: #4b4e55;
  --field: #242528; --subtle: #252629; --hover: #2b2c30; --selected: #303136;
  --track: #344052; --scrollbar: #53627a; --blue: #97b9ff;
  --green: #80d4af; --danger: #f4a0a9; --amber: #efd092;
  --success-bg: #20362f; --error-bg: #3b2931; --selection: #314b77;
  --warning-bg: #393323; --info-bg: #25354f; --focus: #97b9ff;
}
body { font-family: var(--sans); font-size: 17px; line-height: 1.65; caret-color: var(--ink); }
button, input, textarea, select { font-family: var(--sans); }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.topbar { box-shadow: none; }
.topbar-inner, .page { max-width: 1440px; padding-left: 28px; padding-right: 28px; }
.topbar-inner { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.brand { gap: 11px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.top-actions { gap: 6px; }
.top-actions .button { color: var(--muted); font-size: 14px; min-height: 34px; }
#connection { padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--line); }
.page { padding-top: 22px; padding-bottom: 24px; }
.page-heading { margin-bottom: 16px; align-items: center; }
.page-heading h1 { font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.page-heading p { font-size: 15px; color: var(--muted); margin-top: 6px; }
.workspace-path { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--muted); }
.workspace-path li { position: relative; white-space: nowrap; }
.workspace-path li + li::before { content: ""; position: absolute; width: 5px; height: 5px; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); transform: rotate(45deg); left: -16px; top: 7px; }
.support-bar { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.support-bar > .panel { flex: 1; padding: 12px 16px; margin: 0; border-radius: 10px; background: transparent; }
.support-bar:has(details[open]) { flex-wrap: wrap; }
.support-bar > details[open] { flex-basis: 100%; }
.support-bar .usage-guide > summary, .board-toggle { font-size: 14px; font-weight: 600; }
.support-bar .guide-summary-note, .board-toggle-hint { font-size: 13px; opacity: 1; }
.board-panel::before { display: none; }
.board-body { border-top: 1px solid var(--line); padding-top: 14px; }
.board-range, .board-controls select { border-radius: 7px; }
.range-btn.active { background: var(--selected); color: var(--blue); }
.workspace-grid { grid-template-columns: minmax(380px, .38fr) minmax(0, .62fr); gap: 20px; }
.panel { border: 0; box-shadow: 0 1px 3px #17181a06, 0 8px 32px #17181a07; border-radius: 14px; padding: 24px; }
:root[data-theme="dark"] .panel { box-shadow: 0 2px 8px #0002, 0 12px 32px #0001; }
.form-panel { position: static; }
.tasks-panel { padding: 20px; }
.section-heading { margin-bottom: 18px; }
.section-heading h2, .form-panel h2, .tasks-panel h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.section-heading p { font-size: 14px; color: var(--muted); margin-top: 5px; }
.form-panel > .section-heading { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.count-badge { display: inline-block; min-width: 23px; padding: 1px 6px; margin-left: 6px; background: var(--subtle); color: var(--muted); border-radius: 5px; text-align: center; font-size: 13px; vertical-align: middle; }
label { font-size: 14px; font-weight: 600; }
.field-group { margin-bottom: 18px; }
.field-meta, .submission-note { font-size: 13px; line-height: 1.75; }
.input-action input, #verify-cdk { height: 40px; }
input, textarea, select { box-shadow: none; border-radius: 7px; padding: 10px 11px; font-size: 14px; }
input:focus, textarea:focus, select:focus { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 22%, transparent); outline-offset: 1px; box-shadow: none; }
#tokens { min-height: 162px; line-height: 1.8; }
fieldset:disabled { opacity: .65; }
.button { border-radius: 7px; min-height: 36px; font-size: 14px; border-color: var(--line-strong); }
.button.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
.button.primary:hover:not(:disabled) { background: var(--ink); color: var(--surface); border-color: var(--ink); filter: none; opacity: .86; }
.text-button { font-size: 13px; }
.balance { background: var(--subtle); border-radius: 7px; padding: 10px 12px; }
.balance b { color: var(--ink); font-size: 20px; }
.advanced { padding-top: 16px; }
.advanced summary { font-size: 14px; }
.submit-area { margin-top: 20px; padding-top: 20px; }
.submit-area .split { font-size: 14px; }
.submit-button { min-height: 42px; margin-top: 12px; }
.panel-heading { align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-heading .section-heading { margin-bottom: 0; }
.tasks-panel .task-tools { gap: 12px; padding-top: 1px; }
.tasks-panel .task-tools .text-button { font-size: 13px; }
.lifecycle-filters { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }
.tasks-panel .phase-filter { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 36px; padding: 6px 10px; border-radius: 7px; background: transparent; color: var(--muted); border: 1px solid transparent; font-size: 14px; box-shadow: none; }
.phase-filter b { font-size: inherit; color: inherit; font-variant-numeric: tabular-nums; font-weight: 400; background: transparent; }
.phase-filter:hover { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.tasks-panel .phase-filter.active { color: var(--ink); background: transparent; border-color: var(--muted); font-weight: 600; box-shadow: none; }
.phase-filter.active b { background: transparent; color: inherit; }
.filter-dot { display: block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.filter-dot.warning { background: var(--amber); } .filter-dot.info { background: var(--blue); }
.filter-dot.success { background: var(--green); } .filter-dot.danger { background: var(--danger); }
.task-list-caption { display: none; }
.task-list-caption span:last-child { padding-right: 42px; }
.task-list-shell { height: auto; max-height: 390px; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--surface); scrollbar-gutter: stable; }
.task-card { gap: 2px; min-height: 76px; padding: 0 10px 0 14px; background: transparent; }
.task-card.selected { background: var(--selected); box-shadow: none; }
.task-card:hover { background: var(--hover); }
.task-card .task-select { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(120px, auto); gap: 11px; min-height: 76px; padding: 11px 0; }
.task-card .task-state-mark { width: 21px; height: 21px; border: 0; border-radius: 0; animation: none; background: transparent; }
.task-state-mark .icon { width: 18px; height: 18px; }
.task-card.running .task-state-mark .icon { animation: task-spin 1.8s linear infinite; }
.task-card .task-email { font-size: 17px; line-height: 1.5; letter-spacing: 0; font-weight: 600; }
.task-card-content { gap: 4px; }
.task-card-stage { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.provider-chip { color: var(--muted); font-size: 12px; }
.phase-badge { display: inline-flex; align-items: center; padding: 1px 7px; line-height: 1.7; border-radius: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.task-card .tone-success, .tone-success { color: var(--green); }
.task-card .tone-info, .tone-info { color: var(--blue); }
.task-card .tone-warning, .tone-warning { color: var(--amber); }
.task-card .tone-danger, .tone-danger { color: var(--danger); }
.task-card .tone-neutral, .tone-neutral { color: var(--muted); }
.task-card .task-state-mark.tone-success { color: var(--green); }
.task-card .task-state-mark.tone-info { color: var(--blue); }
.task-card .task-state-mark.tone-warning { color: var(--amber); }
.task-card .task-state-mark.tone-danger { color: var(--danger); }
.task-card .task-state-mark.tone-neutral { color: var(--muted); }
.phase-badge.tone-success { background: var(--success-bg); }
.phase-badge.tone-info { background: var(--info-bg); }
.phase-badge.tone-warning { background: var(--warning-bg); }
.phase-badge.tone-danger { background: var(--error-bg); }
.phase-badge.tone-neutral { background: var(--subtle); }
.task-card-aside { gap: 4px; max-width: 300px; }
.task-phase-hint { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.task-card-time { font-size: 12px; opacity: 1; }
.time-separator { padding: 0 6px; }
.task-card .copy-email, .task-card .row-qr { opacity: 1; width: 28px; height: 32px; color: var(--muted); }
.task-card .copy-email:hover, .task-card .row-qr:hover { color: var(--blue); }
.task-card .icon-button .icon { width: 14px; height: 14px; }
.task-detail { margin-top: 20px; }
.detail-head { padding-bottom: 14px; min-height: 40px; }
.detail-head h3 { font-size: 22px; font-weight: 600; letter-spacing: 0; }
.detail-head .detail-actions .text-button { border: 0; color: var(--muted); }
.result-box { background: var(--surface); border: 1px solid var(--line); padding: 20px; margin: 0 0 16px; border-radius: 14px; }
.result-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.result-heading > div { display: flex; align-items: center; gap: 8px; }
.result-heading strong { color: inherit; font-size: 20px; font-weight: 600; }
.result-icon { display: inline-flex; }
.result-icon .icon { width: 19px; height: 19px; }
.result-expiry { color: var(--muted); font-size: 13px; }
.result-explanation { color: var(--muted); font-size: 14px; margin: 9px 0 0; line-height: 1.8; max-width: 75ch; }
.payment-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-top: 12px; padding-top: 10px; border: 0; border-top: 1px solid var(--line); }
.payment-status-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 4px 10px; min-width: 0; border: 0; background: transparent; border-radius: 0; padding: 6px 0; min-height: 36px; }
.payment-status-row + .payment-status-row { padding-left: 16px; border-left: 1px solid var(--line); }
.payment-status-row .payment-state { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.payment-status-row > span { font-size: 13px; }
.payment-status-row .payment-state { font-size: 13px; color: var(--blue); }
.payment-status-row .payment-state.succeeded { color: var(--green); }
.payment-status-row .payment-state.expired, .payment-status-row .payment-state.failed { color: var(--danger); }
.payment-sync { margin: 0; padding: 0; font-size: 12px; gap: 4px; white-space: nowrap; }
.payment-sync .icon { width: 13px; height: 13px; }
.payment-sync b { min-width: 34px; }
.payment-status-grid > small.muted { grid-column: 1 / -1; font-size: 13px; line-height: 1.8; }
.payment-instructions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.qr-preview { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; color: #62666d; display: grid; gap: 5px; justify-items: center; font-size: 12px; }
.qr-preview img { display: block; }
.payment-link-area:only-child { grid-column: 1 / -1; }
.field-caption { color: var(--muted); font-size: 13px; }
.result-link { font-size: 13px; margin-top: 5px; color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result-link:hover, .result-link:focus { color: var(--blue); }
.result-actions { margin-top: 12px; }
.result-actions .button { font-size: 13px; min-height: 32px; }
.link-archive { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; color: var(--muted); font-size: 13px; }
.link-archive summary { cursor: pointer; }
.link-archive .text-button { margin: 6px 12px 0 0; }
.process-card { border-color: var(--line); margin-top: 16px; border-radius: 14px; }
.process-head { padding: 14px 18px; background: var(--surface); }
.process-head > strong { font-size: 17px; }
.process-state { border-radius: 5px; }
.process-body { padding: 20px; }
.process-body .detail-proxy { border: 1px solid var(--line); border-radius: 14px; background: var(--subtle); padding: 20px; margin-top: 24px; }
.process-body .detail-steps li { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 8px 0; min-height: 36px; }
.process-body .detail-steps li.current, .process-body .detail-steps li.failed { background: transparent; }
.process-body .detail-steps li.skipped { border-style: solid; }
.tasks-footer { border: 0; margin-top: 14px; padding-top: 0; font-size: 12px; }
.page-footer { padding-top: 22px; font-size: 13px; text-align: center; }
.task-list-shell .empty-state { min-height: 330px; }
.mobile-new-task { display: none; }
.empty-state .empty-icon { color: var(--blue); }
.toast { background: var(--ink); color: var(--surface); border: 0; box-shadow: 0 8px 28px #0002; font-size: 14px; }
dialog { padding: 24px; border: 0; border-radius: 14px; box-shadow: 0 24px 80px #0005; width: 390px; }
dialog::backdrop { background: #10172099; }
#qr-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 13px; }
#qr-expiry { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--blue); }
#qr-expiry.expired { color: var(--danger); }
#qr-warning { font-size: 14px; text-align: center; line-height: 1.8; }
.qr-inactive { opacity: .24; }
@media (min-width: 1500px) { .task-list-shell { max-height: 390px; } }
@media (max-width: 1200px) {
  .topbar-inner, .page { padding-left: 24px; padding-right: 24px; }
  .workspace-grid { grid-template-columns: minmax(360px, .38fr) minmax(0, .62fr); gap: 18px; }
  .panel { padding: 20px; }
  .lifecycle-filters { gap: 4px; }
  .task-card .task-select { grid-template-columns: 20px minmax(0,1fr); }
  .task-card-aside { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; max-width: none; gap: 6px; }
  .task-card .task-select { gap: 7px 10px; }
  .task-state-mark { grid-row: 1 / 3; }
  .task-card-aside .task-phase-hint { max-width: 50%; }
  .task-list-caption span:last-child { display: none; }
  .workspace-path { gap: 20px; }
}
@media (max-width: 960px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .form-panel { position: static; }
  .has-tasks .tasks-panel { order: -1; }
  .mobile-new-task { display: inline-flex; }
  .workspace-path { display: none; }
  .task-card .task-select { grid-template-columns: 22px minmax(0,1fr) minmax(150px,auto); gap: 11px; }
  .task-state-mark { grid-row: auto; }
  .task-card-aside { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 6px; }
  .task-card-aside .task-phase-hint { max-width: 100%; }
}
@media (max-width: 600px) {
  .topbar-inner { padding: 12px 16px; gap: 10px; }
  .brand { font-size: 22px; }
  .top-actions { gap: 1px; justify-content: flex-start; }
  .top-actions .button { font-size: 13px; padding: 6px 8px; }
  .page { padding: 22px 12px; }
  .page-heading { padding: 0 4px; margin-bottom: 18px; }
  .page-heading h1 { font-size: 28px; }
  .page-heading p { font-size: 14px; }
  .support-bar { gap: 8px; }
  .support-bar > .panel { padding: 10px 12px; }
  .guide-summary-note, .board-toggle-hint { display: none; }
  .panel { padding: 18px 16px; border-radius: 12px; }
  .tasks-panel { padding: 18px 12px; }
  .tasks-panel .panel-heading { padding: 0 3px; }
  .tasks-panel .task-tools { gap: 8px; width: 100%; justify-content: flex-end; }
  .lifecycle-filters { gap: 4px; margin-bottom: 12px; }
  .tasks-panel .phase-filter { min-height: 38px; font-size: 13px; }
  .task-card { padding: 0 9px; }
  .task-card .task-select { grid-template-columns: 19px minmax(0, 1fr); gap: 5px 8px; padding: 9px 0; }
  .task-card .task-email { font-size: 15px; }
  .task-state-mark { grid-row: 1 / 3; }
  .task-card-aside { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; max-width: none; gap: 4px; }
  .task-phase-hint { font-size: 12px; max-width: 45%; }
  .task-card-aside .task-phase-hint { max-width: 45%; }
  .task-card-time { font-size: 12px; }
  .time-separator { padding: 0 3px; }
  .task-card .row-qr { display: none; }
  .task-card .copy-email { width: 23px; }
  .task-card-content { gap: 5px; }
  .phase-badge { font-size: 12px; }
  .task-list-shell { max-height: 360px; }
  .detail-head { gap: 5px; }
  .detail-head h3 { font-size: 18px; }
  .detail-head .detail-actions { width: auto; }
  .result-box { padding: 15px 12px; }
  .result-heading strong { font-size: 16px; }
  .result-explanation { font-size: 13px; }
  .payment-instructions { grid-template-columns: 1fr; gap: 14px; }
  .qr-preview { justify-self: center; }
  .payment-status-row { gap: 8px; }
  .payment-state { max-width: 75%; overflow-wrap: anywhere; }
  .process-head { padding: 10px 12px; }
  .process-body { padding: 13px; }
  .tasks-footer { font-size: 12px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.task-sync-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 14px; line-height: 1.6; }
.task-sync-notice[hidden] { display: none; }
.task-sync-notice > span { min-width: 0; overflow-wrap: anywhere; }
.task-sync-notice .text-button { flex-shrink: 0; }

/* Quiet, readable task typography; progress is explicitly extraction-only. */
.task-card-time { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0 5px; }
.task-card-aside .task-extraction-percent { width: auto; margin-right: 4px; text-align: right; color: var(--ink); font-size: 16px; line-height: 1.35; font-weight: 600; }
.task-phase-hint { font-size: 13px; }
.task-card .task-card-aside { position: relative; }
.task-card .task-phase-hint { order: 2; }
.task-card .task-card-time { order: 1; }
.process-progress-label, .process-progress-note, .proxy-facts, .detail-steps li { font-size: 14px; }
.proxy-heading strong { font-size: 17px; }
.proxy-facts strong { font-size: 14px; font-weight: 400; }
.proxy-heading > span, .process-state, .process-elapsed, .process-round { font-size: 13px; }
.detail-progress { height: 8px; accent-color: var(--ink); }
.detail-progress::-webkit-progress-value { background: var(--ink); }
.detail-progress::-moz-progress-bar { background: var(--ink); }
/* 进度条平滑过渡：轮询是离散的，没有过渡就会一格一格跳，看起来"卡"。 */
progress { transition: none; }
progress::-webkit-progress-value { transition: width .55s cubic-bezier(.4, 0, .2, 1); }
progress::-moz-progress-bar { transition: width .55s cubic-bezier(.4, 0, .2, 1); }
.task-card-progress::-webkit-progress-value { transition: width .55s cubic-bezier(.4, 0, .2, 1); }
.task-card-progress::-moz-progress-bar { transition: width .55s cubic-bezier(.4, 0, .2, 1); }
.process-progress-label strong { transition: color .3s ease; }
.plus-recovery { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; color: var(--ink); }
.recovery-heading { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.recovery-heading > span { color: var(--muted); font-size: 13px; }
.recovery-heading .button { flex-shrink: 0; }
.recovery-form { margin-top: 18px; padding: 20px; background: var(--subtle); border: 1px solid var(--line); border-radius: 12px; }
.recovery-form label { font-size: 14px; }
.recovery-form p { font-size: 13px; color: var(--muted); margin: 8px 0 12px; max-width: 75ch; }
.recovery-form textarea { display: block; width: 100%; min-height: 100px; resize: vertical; font-size: 14px; }
.recovery-form .recovery-error { color: var(--danger); }
.recovery-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.recovery-actions a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
@media (max-width: 1200px) {
  .task-card-aside .task-extraction-percent { width: auto; font-size: 14px; margin-right: 4px; }
  .task-card .task-phase-hint { order: 0; }
  .task-card .task-card-time { font-size: 12px; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .task-card-aside .task-extraction-percent { width: auto; font-size: 16px; }
  .task-card .task-phase-hint { order: 2; }
}
@media (max-width: 600px) {
  .task-card-time time, .task-card-time .time-separator { display: none; }
  .task-card-aside { gap: 6px; }
  .task-card .task-card-time { font-size: 11px; }
  .task-card-aside .task-extraction-percent { font-size: 13px; }
  .task-card .task-email { line-height: 1.5; }
  .recovery-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .recovery-form { padding: 14px; }
  .recovery-actions .button { width: 100%; }
}

/* Payment and Plus remain separate facts, but share one compact summary band. */
@media (max-width: 1200px) {
  .payment-status-row { grid-template-columns: auto minmax(0, 1fr); }
  .payment-status-row > .payment-sync { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .payment-status-grid { gap: 6px 10px; }
  .payment-status-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 5px 0; }
  .payment-status-row + .payment-status-row { padding-left: 10px; }
  .payment-status-row .payment-state { max-width: 100%; text-align: left; }
  .payment-sync { font-size: 11px; white-space: normal; flex-wrap: wrap; justify-content: flex-start; }
  .payment-sync b { min-width: 30px; }
}

/* Explicit task pages preserve full totals without hundreds of DOM cards. */
.task-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;}
.task-pagination[hidden]{display:none;}
.task-page-actions{display:flex;gap:8px;flex:none;}
.task-pagination .field-meta{margin:0;}
@media(max-width:600px){.task-pagination{flex-wrap:wrap;}.task-page-actions{margin-left:auto;}}

/* ============================================================
   视觉升级：图标 / 微动效 / 高级质感
   原则：只用现有的 CSS 变量，改动克制，不干扰信息密度。
   ============================================================ */

/* ---- 1. 字段标签带图标 ---- */
.field-group > label,
.label-line label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.field-group .icon,
.label-line .icon,
.advanced summary .icon,
.submit-area .icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: color .25s ease, transform .25s ease;
}
.field-group:focus-within > label .icon,
.field-group:focus-within .label-line .icon {
  color: var(--blue);
  transform: translateY(-1px);
}

/* ---- 2. 面板入场：轻微上浮 ---- */
@keyframes rc-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* 只给【静态、不会重建】的元素做入场动画。
   任务卡片每 3 秒被轮询重建一次，如果也挂 rc-rise，
   每次重建都会从 opacity:0 淡入 —— 看起来就是不停闪烁。 */
.form-panel {
  animation: rc-rise .34s cubic-bezier(.22, .8, .3, 1) both;
}

/* ---- 3. 卡片悬停微抬（不改变布局尺寸）---- */
.task-card {
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.task-card:hover {
  transform: translateX(2px);
  box-shadow: inset 2px 0 0 var(--blue);
}

/* ---- 4. 输入框聚焦光晕 ---- */
input, textarea, select {
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

/* ---- 5. 提交按钮：流光扫过 + 悬停抬升 ---- */
.submit-button {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .22s ease, opacity .18s ease;
}
.submit-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--ink) 45%, transparent);
}
.submit-button:active:not(:disabled) { transform: translateY(0); }
.submit-button .icon { color: currentColor; }
.submit-button:not(:disabled)::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  animation: rc-sheen 3.4s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}
@keyframes rc-sheen {
  0%, 62% { left: -60%; }
  92%, 100% { left: 130%; }
}

/* ---- 6. 进度条：滚动微光（表示"正在动"）---- */
@keyframes rc-flow {
  from { background-position: 0 0; }
  to   { background-position: 34px 0; }
}
progress.running::-webkit-progress-value,
progress:not(.succeeded):not(.failed)::-webkit-progress-value {
  background-image: linear-gradient(
    115deg,
    var(--blue) 0 12px,
    color-mix(in srgb, var(--blue) 68%, white) 12px 22px,
    var(--blue) 22px 34px
  );
  background-size: 34px 100%;
  animation: rc-flow 1.1s linear infinite;
}
progress.running::-moz-progress-bar,
progress:not(.succeeded):not(.failed)::-moz-progress-bar {
  background-image: linear-gradient(
    115deg,
    var(--blue) 0 12px,
    color-mix(in srgb, var(--blue) 68%, white) 12px 22px,
    var(--blue) 22px 34px
  );
  background-size: 34px 100%;
  animation: rc-flow 1.1s linear infinite;
}

/* ---- 7. 运行中的状态点 ----
   这里刻意【不做】缩放/呼吸动画：任务卡片每 3 秒被重建一次，
   任何会被重启的非无缝动画都会造成肉眼可见的闪烁。 */
.state-dot.running { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }

/* ---- 8. 统计数字变化时轻微弹跳 ---- */
@keyframes rc-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); color: var(--blue); }
  100% { transform: scale(1); }
}
.balance b, #cost { transition: color .2s ease; }
.balance b.rc-changed, #cost.rc-changed { animation: rc-pop .42s cubic-bezier(.3, 1.4, .5, 1); }

/* ---- 9. 高级设置展开动画 ---- */
.advanced[open] .advanced-body { animation: rc-rise .26s ease both; }
.advanced summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .2s ease;
}
.advanced summary:hover { color: var(--ink); }
.advanced summary::-webkit-details-marker { display: none; }

/* ---- 10. 尊重"减少动效"偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  .form-panel,
  .submit-button::after,
  progress::-webkit-progress-value, progress::-moz-progress-bar,
  .balance b.rc-changed, #cost.rc-changed, .advanced[open] .advanced-body {
    animation: none !important;
  }
  .task-card, .submit-button { transition: none !important; }
}

/* 防复提提示：8 小时冷却的道理就写在界面上，不靠人记 */
.reuse-hint {
  display: block;
  margin-top: 8px;
  padding: 8px 11px;
  border-left: 3px solid #d97706;
  border-radius: 6px;
  background: color-mix(in srgb, #d97706 8%, transparent);
  line-height: 1.6;
}
.reuse-hint b { color: #b45309; }

/* ============================================================
   步骤面板：冲刺中的动感
   ⚠️ 这个列表每次轮询（3 秒）都会重建 DOM，所以这里所有 keyframe
   都必须是【首尾状态一致】的无缝循环 —— 位移量正好等于图案周期、
   透明度回到原值，这样动画重启时看不出断点。
   反过来，任何"从 0 淡入"的动画都会变成每 3 秒闪一次。
   ============================================================ */

/* ① 当前步骤：能量光带横扫（位移 == 图案周期 → 无缝） */
@keyframes rc-sprint-flow {
  from { background-position: 0 0; }
  to   { background-position: 96px 0; }
}
.detail-steps li.current {
  position: relative;
  background-image: linear-gradient(100deg,
    transparent 0 40%,
    color-mix(in srgb, var(--blue) 14%, transparent) 50%,
    transparent 60% 100%);
  background-size: 96px 100%;
  background-repeat: repeat-x;
  animation: rc-sprint-flow 1.15s linear infinite;
}

/* ② 当前步骤：左侧能量竖条上下流动（位移 == 200% → 无缝） */
@keyframes rc-sprint-bar {
  from { background-position: 0 200%; }
  to   { background-position: 0 0; }
}
.detail-steps li.current::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, transparent, var(--blue), transparent);
  background-size: 100% 200%;
  background-repeat: no-repeat;
  animation: rc-sprint-bar 1.15s linear infinite;
}

/* ③ 当前步骤的圆点：外圈脉冲涟漪（首尾回到同一状态 → 无缝） */
@keyframes rc-sprint-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 42%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
.detail-steps li.current .step-marker {
  border-radius: 999px;
  color: var(--blue);
  animation: rc-sprint-ring 1.5s ease-out infinite;
}

/* ④ 当前步骤的图标：转圈 */
.detail-steps li.current .step-marker .icon { animation: task-spin 1.05s linear infinite; }

/* ⑤ 当前步骤的状态文字：柔和呼吸（1 → 0.5 → 1 → 无缝） */
@keyframes rc-sprint-badge {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
.detail-steps li.current .step-state { animation: rc-sprint-badge 1.5s ease-in-out infinite; }

/* ⑥ 未开始的步骤：极轻的等待呼吸（暗示"排队等着冲"） */
@keyframes rc-sprint-wait {
  0%, 100% { opacity: .5; }
  50%      { opacity: .85; }
}
.detail-steps li:not(.done):not(.current):not(.failed):not(.skipped):not(.canceled) .step-marker {
  animation: rc-sprint-wait 2.8s ease-in-out infinite;
}

/* ⑦ 已完成的步骤：静态落地光环（刻意不加 keyframe，避免每次重建重播） */
.detail-steps li.done .step-marker {
  color: var(--green);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green) 45%, transparent));
}

/* ⑧ 尊重"减少动效"偏好 */
@media (prefers-reduced-motion: reduce) {
  .detail-steps li.current,
  .detail-steps li.current::before,
  .detail-steps li.current .step-marker,
  .detail-steps li.current .step-marker .icon,
  .detail-steps li.current .step-state,
  .detail-steps li:not(.done):not(.current):not(.failed):not(.skipped):not(.canceled) .step-marker {
    animation: none !important;
  }
}
/* 代理探测失败：状态标签用醒目色，悬停可看完整原因（title） */
.detail-proxy .proxy-heading .proxy-bad {
  color: var(--danger);
  font-weight: 600;
}

/* 前台 CDK 合并面板：跟"更换 CDK"并排，点开才展开 */
.merge-panel { margin: 8px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--blue) 4%, transparent); }
.merge-panel .merge-copy { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.merge-panel textarea { width: 100%; min-height: 84px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; resize: vertical; }
.merge-panel .merge-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* 提示音设置浮层：三种音色 + 音量 + 试听 */
.sound-panel { position: fixed; top: 62px; right: 18px; z-index: 60; width: 268px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 18px 44px rgba(0,0,0,.16); display: grid; gap: 10px; }
.sound-panel[hidden] { display: none; }
.sound-panel-head { display: flex; align-items: center; justify-content: space-between; }
.sound-panel-head strong { font-size: 14px; }
.sound-close { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.sound-row { display: grid; gap: 6px; font-size: 13px; color: var(--ink); }
.sound-row:has(input[type=checkbox]) { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
.sound-row b { color: var(--muted); font-weight: 500; justify-self: end; margin-top: -20px; }
.sound-panel select, .sound-panel input[type=range] { width: 100%; }
.sound-panel input[type=range] { accent-color: var(--blue); }
.sound-panel .button { justify-content: center; }
/* static/announcement.css */
.site-announcement {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 12px;
}
.site-announcement[hidden] { display: none !important; }
.site-announcement h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.site-announcement p { margin: 0; max-width: 75ch; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .site-announcement { margin-bottom: 16px; padding: 14px 16px; }
}

/* static/success-sound-20261028-r1/style.css */
.sound-readiness-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
#sound-readiness { color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.success-notice { margin:0 0 16px; padding:14px 16px; border:1px solid var(--line-strong,var(--line)); border-radius:12px; background:var(--surface); }
.success-notice[hidden] { display:none !important; }
.success-notice h3 { margin:0 0 5px; color:var(--ink); font-size:15px; font-weight:600; line-height:1.5; }
.success-notice p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.success-notice-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:10px; }
.sound-test-status { display:block; margin-top:8px; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.task-tools #sound-settings { white-space:nowrap; flex-shrink:0; }
@media(max-width:600px) { .success-notice { padding:12px 14px; } .sound-readiness-row { align-items:flex-start; } }

/* static/own-proxy-20261028-r1.css */
.own-proxy-panel { margin-block: 14px 20px; padding: 14px; border: 1px solid var(--border, #d8dee5); border-radius: 12px; }
.own-proxy-panel[hidden], #cdk-panel[hidden] { display: none; }
.own-proxy-panel textarea { width: 100%; margin-block: 8px; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
#access-mode { width: 100%; }
#own-session-state { margin-bottom: 0; }

/* static/ui-smooth-20261030-r1/smooth.css */
/* Keep the existing visual language; isolate list painting and avoid decorative layout work. */
.task-card { contain: layout style; }
.task-list-shell { scrollbar-gutter: stable; }
#submit-task[aria-busy="true"] { cursor: progress; }
#board-sync-status { display: block; margin: 0; padding: 0 18px 8px; font-size: 12px; color: var(--muted); }
#board-sync-status[hidden] { display: none; }
.count-badge, .task-extraction-percent, #remaining, #reserved, #cost { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .task-card, .task-card * { animation: none !important; }
}

/* static/ui-filter-20261030-r2/style.css */
/* Filter feedback is independent of network completion. No new entrance animations. */
.filter[data-loading] { cursor: progress; }
#task-list[aria-busy="true"] { cursor: progress; }
#task-sync-notice[data-state="loading"] { min-height: 34px; }

/* static/ui-batch-20261030-r1/style.css */
.task-card .task-progress-history { order: 2; color: var(--muted); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .task-card .task-card-aside:has(.task-progress-history) { flex-wrap: wrap; }
  .task-card .task-progress-history { flex-basis: 100%; text-align: right; }
}

/* Workbench Studio r2: authored typography + continuous editing surface.
   Presentation only. No task/payment/state definitions are changed. */
@font-face { font-family: "Manrope UI"; src: url("/static/ui-studio-20261107-r2/fonts/manrope-latin.woff2") format("woff2"); font-weight: 350 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto UI SC"; src: url("/static/ui-studio-20261107-r2/fonts/noto-sans-sc-ui.woff2") format("woff2"); font-weight: 350 700; font-style: normal; font-display: swap; unicode-range: U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF,U+2000-206F; }
:root {
  --sans: "Manrope UI", "Noto UI SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --bg: #f6f7fb; --surface: #ffffff; --ink: #232436; --muted: #657086;
  --placeholder: #707a8d; --line: #e8eaf2; --line-strong: #d6dbe8;
  --field: #ffffff; --subtle: #f5f6fb; --hover: #f1f0fa; --selected: #f0eefb;
  --track: #eaeaf5; --scrollbar: #bfc5d7; --blue: #6252cc; --focus: #6252cc;
  --selection: #e0dcff; --green: #168068; --danger: #bd4965; --amber: #956519;
  --success-bg: #e8f7f1; --error-bg: #fbeff2; --warning-bg: #fff6e7; --info-bg: #efedff;
  --studio-accent: #6654d9; --studio-on-accent: #ffffff; --studio-tint: #eeebff;
  --studio-editor: #fafbfe; --studio-quiet: #f8f9fc; --studio-radius: 12px;
  --studio-control: 44px; --studio-control-border: #8a91a6; --studio-ease: cubic-bezier(.16,1,.3,1);
}
:root[data-theme="dark"] {
  --bg: #11131b; --surface: #1c1e2a; --ink: #eaeaf3; --muted: #a5acc0;
  --placeholder: #9ca5bd; --line: #303344; --line-strong: #464b63;
  --field: #191b27; --subtle: #242737; --hover: #2b2b41; --selected: #302b4e;
  --track: #323246; --scrollbar: #5d627d; --blue: #b8aaff; --focus: #b8aaff;
  --selection: #44376d; --green: #7bdbb7; --danger: #f4a1b6; --amber: #e7c27f;
  --success-bg: #1c382f; --error-bg: #402b39; --warning-bg: #3c3326; --info-bg: #342c51;
  --studio-accent: #b6a6ff; --studio-on-accent: #211838; --studio-tint: #312a4e;
  --studio-editor: #191b27; --studio-quiet: #202331; --studio-control-border: #727d9a;
}
html { scroll-padding-top: 24px; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.65; font-weight: 450; font-synthesis: none; -webkit-font-smoothing: antialiased; caret-color: var(--studio-accent); }
button, input, textarea, select { font-family: var(--sans); font-weight: 450; }
::selection { background: var(--selection); color: var(--ink); }
button, a, summary, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
* { scrollbar-color: var(--scrollbar) transparent; scrollbar-width: thin; }
.topbar { position: relative; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: none; }
.topbar-inner, .page { max-width: 1480px; padding-left: 36px; padding-right: 36px; }
.topbar-inner { min-height: 74px; padding-top: 12px; padding-bottom: 12px; gap: 24px; }
.brand { gap: 11px; font-family: var(--sans); font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.brand img { width: 29px; height: 29px; }
.studio-wordmark { display: inline-flex; align-items: center; gap: 17px; }
.studio-wordmark > span { color: var(--muted); border-left: 1px solid var(--line); padding-left: 17px; font-size: 13px; font-weight: 500; letter-spacing: -.015em; }
.top-actions { gap: 4px; align-items: center; }
.top-actions .button, .top-actions a { min-height: 36px; padding: 7px 9px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; transition: color 140ms ease, background-color 140ms ease; }
.top-actions a:hover, .top-actions .button:hover { color: var(--ink); background: var(--subtle); }
#connection { padding: 5px 10px; margin-right: 7px; border: 1px solid var(--line); border-radius: 20px; font-size: 11px; }
.page { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 30px; align-items: start; padding-top: 28px; padding-bottom: 42px; }
.page-heading { grid-column: 1; margin: 0 0 22px; padding: 0; align-self: center; }
.page-heading h1 { font-family: var(--sans); font-size: 33px; line-height: 1.28; font-weight: 650; letter-spacing: -.035em; }
.support-bar { grid-column: 2; align-self: center; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; }
.support-bar > .panel { flex: none; background: transparent; border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 13px; box-shadow: none; }
.support-bar .usage-guide > summary, .support-bar .board-toggle { min-height: 24px; font-size: 12px; font-weight: 500; }
.support-bar .count-badge { background: var(--surface); color: var(--muted); font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; }
.support-bar:has(> details[open]), .support-bar:has(#board-body:not([hidden])) { grid-column: 1/-1; width: 100%; margin-top: -10px; }
.support-bar > details[open], .support-bar:has(#board-body:not([hidden])) > .board-panel { flex: 1; background: var(--surface); }
.site-announcement { grid-column: 1/-1; }
.workspace-grid { grid-column: 1/-1; grid-template-columns: minmax(380px,.36fr) minmax(0,.64fr); gap: 0; align-items: stretch; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; overflow: clip; }
.workspace-grid > .panel { min-width: 0; padding: 26px 28px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.workspace-grid > .form-panel { background: var(--studio-editor); border-right: 1px solid var(--line); }
.section-heading { align-items: center; }
.form-panel > .section-heading, .tasks-panel > .panel-heading { min-height: 36px; margin-bottom: 14px; padding-bottom: 0; border: 0; }
.section-heading h2, #tasks-title { font-size: 19px; font-weight: 650; letter-spacing: -.025em; line-height: 1.4; }
.studio-heading-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--studio-accent); margin-right: 10px; vertical-align: middle; }
.studio-heading-icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
.count-badge { font-family: "Manrope UI",sans-serif; font-size: 11px; font-weight: 600; border-radius: 5px; background: var(--subtle); color: var(--muted); margin-left: 7px; padding: 2px 6px; }
.field-group { margin-bottom: 16px; }
.field-group > label, .label-line label, .own-proxy-panel label { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.label-line { align-items: center; gap: 8px; margin-bottom: 9px; }
.label-line label { margin-bottom: 0; }
.field-group .icon, .label-line .icon, .advanced summary .icon { width: 15px; height: 15px; color: var(--muted); stroke-width: 1.6; }
.form-panel input:not([type="checkbox"]):not([type="range"]), .form-panel select, .form-panel textarea { min-height: var(--studio-control); border: 1px solid var(--line-strong); background: var(--field); border-radius: 10px; padding: 11px 13px; color: var(--ink); font-size: 14px; line-height: 1.6; box-shadow: none; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.form-panel input::placeholder, .form-panel textarea::placeholder { color: var(--placeholder); opacity: 1; }
.form-panel input:hover:not(:disabled), .form-panel textarea:hover:not(:disabled), .form-panel select:hover:not(:disabled) { border-color: var(--muted); }
.form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus { outline: 0; border-color: var(--studio-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--studio-accent) 12%,transparent); }
.form-panel input:disabled, .form-panel textarea:disabled, .form-panel select:disabled { opacity: 1; background: var(--studio-quiet); color: var(--muted); cursor: not-allowed; }
.input-action { gap: 8px; }
.studio-token-area { position: relative; }
.studio-token-area #tokens { height: 128px; min-height: 128px; font-family: "Manrope UI", "Noto UI SC",sans-serif; font-size: 13px; line-height: 1.85; padding: 14px; background: var(--surface); }
.studio-token-area:focus-within .label-line label { color: var(--studio-accent); }
.field-meta { margin-top: 8px; font-size: 11px; color: var(--muted); line-height: 1.65; }
#token-hint { margin-top: 10px; }
#token-count { color: var(--ink); font-size: 13px; font-weight: 650; }
#draft-status { font-size: 10px; color: var(--muted); }
#token-validation { max-height: 150px; overflow: auto; scrollbar-gutter: stable; }
.balance { display: flex; gap: 22px; align-items: center; padding: 11px 0 0; margin-top: 8px; border: 0; border-radius: 0; background: transparent; font-size: 11px; color: var(--muted); }
.balance[hidden] { display: none; }
.balance b { font-family: "Manrope UI",sans-serif; margin-left: 7px; font-size: 18px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.button { min-height: 36px; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink); box-shadow: none; border: 1px solid var(--line-strong); transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 100ms ease; }
.button:hover:not(:disabled) { background: var(--subtle); border-color: var(--muted); }
.button.primary { background: var(--studio-accent); color: var(--studio-on-accent); border-color: var(--studio-accent); }
.button.primary:hover:not(:disabled) { background: color-mix(in srgb,var(--studio-accent) 88%,var(--ink)); border-color: transparent; box-shadow: none; transform: none; }
.button.primary:disabled { background: var(--subtle); color: var(--muted); border-color: var(--line-strong); opacity: 1; cursor: not-allowed; }
.button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: scale(.98); }
#verify-cdk { min-height: 44px; padding: 10px 17px; background: var(--studio-tint); color: var(--studio-accent); border: 1px solid transparent; }
.text-button { font-size: 11px; font-weight: 500; color: var(--muted); border-radius: 5px; transition: color 140ms ease; }
.text-button:hover { color: var(--studio-accent); }
.icon-button { width: 30px; height: 30px; border: 1px solid transparent; color: var(--muted); border-radius: 7px; }
.icon-button:hover { color: var(--ink); background: var(--subtle); border-color: var(--line); }
.icon-button .icon { width: 15px; height: 15px; }
.advanced { margin-top: 6px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.advanced summary { font-size: 12px; color: var(--muted); gap: 8px; }
.advanced[open] .advanced-body { animation: none; }
.submit-area { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
.submit-area > .split { font-size: 11px; margin-bottom: 13px; }
#cost { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.submit-button { display: flex; width: 100%; justify-content: center; align-items: center; min-height: 48px; gap: 10px; margin-top: 0; font-size: 14px; font-weight: 600; border-radius: 10px; }
.submit-button .icon { width: 17px; height: 17px; }
.submit-button::after { display: none; }
.tasks-panel > .panel-heading { align-items: center; gap: 10px; }
.task-tools { gap: 6px; align-items: center; }
.task-tools .text-button { font-size: 10px; }
.task-tools .button { min-height: 30px; padding: 4px 7px; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.sound-readiness-row { font-size: 10px; margin-top: -10px; margin-bottom: 17px; color: var(--muted); }
.sound-readiness-row .text-button { font-size: 10px; }
.lifecycle-filters { position: relative; isolation: isolate; display: flex; gap: 2px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; width: fit-content; max-width: 100%; background: var(--studio-quiet); }
.lifecycle-filters .filter { position: relative; z-index: 1; min-height: 33px; padding: 6px 10px; gap: 6px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 500; box-shadow: none; white-space: nowrap; }
.lifecycle-filters .filter:hover { color: var(--ink); background: transparent; border-color: transparent; }
.lifecycle-filters .filter.active { color: var(--ink); background: transparent; border: 1px solid var(--line-strong); font-weight: 650; box-shadow: none; }
.lifecycle-filters:has(.studio-tab-indicator) .filter.active { border-color: transparent; }
.lifecycle-filters .filter b { font-family: "Manrope UI",sans-serif; font-size: 10px; font-weight: 500; padding: 0; color: var(--muted); background: none; }
.studio-tab-indicator { position: absolute; z-index: 0; pointer-events: none; left: 0; top: 0; border: 1px solid var(--line-strong); border-radius: 7px; background: transparent; box-sizing: border-box; transform-origin: top left; }
.task-list-shell { border: 1px solid var(--line); border-radius: 12px; max-height: 384px; background: var(--surface); scrollbar-gutter: stable; }
.task-list-shell::-webkit-scrollbar { width: 4px; }
.task-card { padding: 0 10px 0 14px; min-height: 76px; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); animation: none; box-shadow: none; transition: background-color 160ms ease; }
.task-card:hover { background: var(--studio-quiet); box-shadow: none; }
.task-card.selected { background: var(--selected); box-shadow: none; }
.task-card .task-select { min-height: 76px; grid-template-columns: 22px minmax(0,1fr) minmax(120px,auto); gap: 9px; padding: 11px 0; }
.task-card .task-email { font-family: "Manrope UI", "Noto UI SC", sans-serif; font-size: 14px; font-weight: 650; line-height: 1.6; letter-spacing: -.015em; }
.task-card .task-card-stage { gap: 7px; margin-top: 3px; }
.task-card .phase-badge { border-radius: 5px; font-size: 10px; line-height: 1.65; padding: 1px 5px; font-weight: 500; }
.task-card .provider-chip { font-size: 10px; font-weight: 500; color: var(--muted); }
.task-card .task-state-mark { width: 18px; height: 18px; color: var(--muted); background: transparent; box-shadow: none; animation: none; }
.task-card .task-state-mark .icon { width: 17px; height: 17px; }
.task-card .task-state-mark.tone-processing { color: var(--studio-accent); }
.task-card .task-extraction-percent { font-family: "Manrope UI",sans-serif; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.task-card .task-card-time { font-size: 10px; line-height: 1.7; color: var(--muted); gap: 5px; }
.task-card .task-phase-hint { font-size: 11px; line-height: 1.7; color: var(--muted); }
.task-card .task-progress-history { font-size: 10px; }
.task-card .copy-email { width: 26px; height: 26px; }
.task-pagination { padding: 12px 0 16px; }
.task-pagination .field-meta { margin: 0; font-size: 10px; }
.task-pagination .button { min-height: 30px; padding: 5px 8px; border-color: transparent; background: transparent; font-size: 10px; }
.task-detail { margin-top: 0; padding-top: 0; }
.detail-head { gap: 8px; padding-top: 20px; margin-bottom: 17px; border-top: 1px solid var(--line); }
.detail-head h3 { font-family: "Manrope UI", "Noto UI SC",sans-serif; font-size: 19px; font-weight: 650; line-height: 1.5; letter-spacing: -.03em; overflow-wrap: anywhere; }
.detail-actions { margin-left: auto; }
.detail-actions .text-button { font-size: 11px; }
.process-card { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; background: var(--surface); overflow: clip; }
.process-head { min-height: 58px; padding: 14px 16px; gap: 8px; background: var(--studio-quiet); }
.process-head > strong { font-size: 13px; font-weight: 600; }
.process-state { font-size: 10px; font-weight: 500; border-radius: 5px; }
.process-elapsed, .process-round { font-size: 10px; color: var(--muted); }
.process-body { padding: 18px 16px; border-top: 1px solid var(--line); }
.process-progress-label { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.process-progress-label strong { color: var(--studio-accent); font-family: "Manrope UI",sans-serif; font-size: 14px; font-weight: 650; }
.detail-progress { height: 5px; border-radius: 99px; background: var(--track); }
.detail-progress::-webkit-progress-bar { background: var(--track); border-radius: 99px; }
.detail-progress::-webkit-progress-value { background: var(--studio-accent); border-radius: 99px; animation: none; transition: none; }
.detail-progress.running::-webkit-progress-value { background: var(--studio-accent); background-image: none; animation: none; }
.detail-progress::-moz-progress-bar { background: var(--studio-accent); border-radius: 99px; }
.process-progress-note { margin-top: 8px; font-size: 10px; line-height: 1.7; color: var(--muted); }
.detail-proxy { border: 0; border-radius: 10px; background: var(--studio-quiet); padding: 14px; margin: 20px 0 14px; box-shadow: none; }
.proxy-heading { gap: 6px; margin-bottom: 13px; }
.proxy-heading strong { font-size: 12px; font-weight: 600; }
.proxy-heading > span { font-size: 10px; color: var(--muted); }
.proxy-heading .icon { width: 14px; height: 14px; }
.proxy-facts { gap: 12px 14px; }
.proxy-facts > div > span { margin-bottom: 4px; font-size: 10px; color: var(--muted); }
.proxy-facts > div > strong { font-size: 11px; line-height: 1.6; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.detail-steps { gap: 0 16px; }
.detail-steps li { min-height: 40px; padding: 8px 0; gap: 7px; font-size: 11px; line-height: 1.6; border-color: var(--line); }
.detail-steps li.current { background: transparent; box-shadow: none; }
.detail-steps li.current::before { display: none; content: none; animation: none; }
.detail-steps .step-marker { width: 17px; height: 17px; background: transparent; border: 0; box-shadow: none; }
.detail-steps li.current .step-marker { color: var(--studio-accent); background: transparent; border: 0; box-shadow: none; animation: none; }
.detail-steps li.done .step-marker { filter: none; }
.detail-steps li.current .step-marker .icon { animation: task-spin 1.2s linear infinite; }
.detail-steps li.current .step-state { animation: none; color: var(--studio-accent); }
.detail-steps .step-state { font-size: 10px; }
.detail-log { padding-top: 13px; }
.execution-log { border-radius: 8px; background: var(--studio-quiet); font-size: 11px; }
.execution-log li { gap: 10px; border-color: var(--line); }
.result-box { padding: 20px; border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.result-heading strong { font-size: 19px; font-weight: 650; }
.result-expiry, .field-caption, .result-explanation { font-size: 11px; }
.result-link { font-family: "Manrope UI",sans-serif; font-size: 12px; overflow-wrap: anywhere; }
.result-actions .button { min-height: 36px; }
.payment-status-grid { border-color: var(--line); }
.payment-status-row > span { font-size: 11px; }
.payment-status-row strong { font-size: 13px; font-weight: 600; }
.inline-error { padding: 12px 14px; border-radius: 8px; font-size: 12px; line-height: 1.7; }
.success-notice { padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--studio-quiet); box-shadow: none; }
.success-notice h3 { font-size: 12px; font-weight: 600; }
.success-notice p { font-size: 11px; }
.empty-state { padding: 70px 28px; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.empty-state[hidden] { display: none; }
.empty-state .empty-icon { width: 42px; height: 42px; padding: 0; color: var(--line-strong); border: 0; border-radius: 0; background: none; box-shadow: none; }
.empty-state h3 { margin-top: 18px; font-size: 16px; font-weight: 600; color: var(--ink); }
.empty-state p { max-width: 32ch; margin: 8px auto 18px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.visual-preview-note { padding: 7px 20px; color: var(--muted); background: var(--studio-editor); border-bottom: 1px solid var(--line); font-size: 10px; text-align: center; }
.toast { border-radius: 10px; font-size: 12px; box-shadow: 0 10px 28px rgba(20,20,40,.12); }
/* Finish review: readable operational detail, generous hit areas, quiet progress. */
.form-panel input:not([type="checkbox"]):not([type="range"]), .form-panel select, .form-panel textarea { border-color: var(--studio-control-border); }
.form-panel .field-group { margin-bottom: 12px; }
.form-panel .label-line, .form-panel .field-group > label { margin-bottom: 7px; }
.form-panel .balance { padding-top: 7px; margin-top: 3px; }
.button, .text-button, .icon-button, .task-tools .button, .task-tools .text-button, .lifecycle-filters .filter { min-height: 44px; }
.icon-button, .task-card .copy-email { width: 44px; height: 44px; min-width: 44px; }
.task-tools .button, .task-tools .text-button, .sound-readiness-row, .sound-readiness-row .text-button,
.task-card .provider-chip, .task-card .phase-badge, .task-card .task-card-time, .task-card .task-phase-hint,
.process-elapsed, .process-round, .process-progress-note, .proxy-facts > div > span,
.detail-steps li, .detail-steps .step-state, .detail-log, .execution-log { font-size: 12px; }
.task-card .task-select { min-height: 82px; }
.detail-steps li.current { animation: none; }
.workspace-grid progress:not(.succeeded):not(.failed)::-webkit-progress-value { background: var(--studio-accent); background-image: none; background-size: auto; animation: none; transition: none; }
.workspace-grid progress:not(.succeeded):not(.failed)::-moz-progress-bar { background: var(--studio-accent); background-image: none; background-size: auto; animation: none; transition: none; }
.workspace-grid .detail-steps li:not(.done):not(.current):not(.failed):not(.skipped):not(.canceled) .step-marker { animation: none; opacity: 1; }
.studio-filter-hint { display: none; }
@media (max-width: 1190px) {
  .topbar-inner, .page { padding-left: 24px; padding-right: 24px; }
  .workspace-grid { grid-template-columns: minmax(340px,.37fr) minmax(0,.63fr); }
  .workspace-grid > .panel { padding: 23px 22px; }
  .tasks-panel > .panel-heading { flex-wrap: wrap; }
  .task-tools { margin-left: auto; }
  .studio-wordmark > span { display: none; }
}
@media (max-width: 960px) {
  .page { grid-template-columns: 1fr; }
  .page-heading { grid-column: 1; margin-bottom: 18px; }
  .support-bar { grid-column: 1; justify-self: start; margin-bottom: 22px; }
  .workspace-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
  .workspace-grid > .form-panel { border-right: 0; border-top: 1px solid var(--line); }
  .workspace-grid > .panel { padding: 24px; }
  .topbar-inner { flex-wrap: wrap; gap: 10px; }
  .top-actions { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  body { font-size: 14px; }
  .topbar-inner, .page { padding-left: 16px; padding-right: 16px; }
  .topbar-inner { min-height: 64px; padding-top: 14px; padding-bottom: 8px; gap: 8px; }
  .brand { font-size: 18px; }
  .brand img { width: 27px; height: 27px; }
  .top-actions { width: 100%; gap: 0 2px; justify-content: start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .top-actions .button, .top-actions a { min-height: 44px; font-size: 12px; padding: 6px 8px; flex-shrink: 0; }
  .page { padding-top: 26px; padding-bottom: 24px; }
  .page-heading h1 { font-size: 29px; }
  .support-bar { gap: 8px; width: 100%; }
  .support-bar > .panel { padding: 8px 10px; flex: 1; }
  .support-bar .board-toggle, .support-bar .usage-guide > summary { font-size: 11px; }
  .workspace-grid { border-radius: 14px; }
  .workspace-grid > .panel { padding: 20px 16px; }
  .section-heading h2, #tasks-title { font-size: 18px; }
  .studio-heading-icon { width: 30px; height: 30px; border-radius: 9px; margin-right: 8px; }
  .studio-heading-icon svg { width: 17px; height: 17px; }
  .form-panel > .section-heading, .tasks-panel > .panel-heading { margin-bottom: 22px; }
  .task-tools { width: 100%; gap: 4px; justify-content: space-between; flex-wrap: wrap; }
  .task-tools .button, .task-tools .text-button { min-height: 44px; font-size: 12px; }
  .task-tools .mobile-new-task { display: flex; flex-basis: 100%; min-height: 44px; align-items: center; justify-content: center; padding: 8px 12px; margin-bottom: 6px; border: 1px solid var(--studio-accent); border-radius: 8px; color: var(--studio-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
  .form-panel input:not([type="checkbox"]):not([type="range"]), .form-panel select { font-size: 16px; }
  .form-panel #tokens { font-size: 13px; height: 160px; min-height: 160px; }
  .lifecycle-filters { width: 100%; padding: 3px; gap: 1px; overflow-x: auto; scrollbar-width: thin; margin-bottom: 4px; }
  .lifecycle-filters::-webkit-scrollbar { height: 3px; }
  .lifecycle-filters .filter { flex: 1 0 auto; font-size: 12px; padding: 6px 9px; gap: 5px; min-height: 44px; }
  .studio-filter-hint { display: block; margin: 0 0 12px; color: var(--muted); font-size: 12px; }
  .lifecycle-filters .filter b { font-size: 10px; }
  .task-card { padding-left: 11px; padding-right: 7px; }
  .task-card .task-select { grid-template-columns: 17px minmax(0,1fr); min-height: 92px; gap: 5px 8px; }
  .task-card .task-email { font-size: 13px; }
  .task-card .task-card-aside { grid-column: 2; width: 100%; padding-left: 0; }
  .task-card .task-phase-hint { font-size: 12px; }
  .task-list-shell { max-height: 380px; }
  .task-pagination .field-meta { font-size: 10px; }
  .detail-head { gap: 7px; padding-top: 18px; }
  .detail-head h3 { font-size: 17px; }
  .process-head { padding: 12px; gap: 7px; flex-wrap: wrap; }
  .process-head > strong { font-size: 12px; }
  .process-body { padding: 15px 12px; }
  .detail-proxy { padding: 12px; }
  .detail-steps { grid-template-columns: 1fr; }
  .detail-steps li { min-height: 40px; }
  .process-round { margin-left: auto; font-size: 12px; }
  .process-elapsed { font-size: 12px; }
  .result-box { padding: 16px; }
  .result-heading strong { font-size: 17px; }
  .result-actions .button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Manual task management, using the established studio tokens. */
.task-bulk-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 0; margin:0 0 14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.task-bulk-controls[hidden],.task-retry-control[hidden] { display:none; }
.task-bulk-controls .button { min-height:44px; }
.task-bulk-note,.task-bulk-status { flex-basis:100%; margin:0; font-size:12px; color:var(--muted); line-height:1.7; }
.task-bulk-status:empty { display:none; }
.bulk-cancel { color:var(--danger); }
.task-row-controls:has(> .task-retry-control:not([hidden])) { padding:0 12px 10px 34px; }
.task-row-controls:not(:has(> .task-retry-control:not([hidden]))) { display:none; }
.retry-task { min-height:44px; color:var(--studio-accent,var(--blue)); background:var(--studio-tint,var(--subtle)); border-color:transparent; }
.task-retry-dialog { width:min(520px,calc(100vw - 32px)); padding:28px; border:1px solid var(--line-strong); border-radius:16px; background:var(--surface); color:var(--ink); font-family:var(--sans); }
.task-retry-dialog::backdrop { background:rgba(15,18,30,.48); }
.task-retry-dialog h2 { font-size:22px; margin:0 0 8px; }
.task-retry-dialog p,.task-retry-dialog label { font-size:13px; line-height:1.8; }
#retry-account { overflow-wrap:anywhere; font-weight:600; }
.task-retry-dialog textarea { display:block; width:100%; min-height:120px; padding:12px; border:1px solid var(--studio-control-border,var(--line-strong)); border-radius:8px; background:var(--field); color:var(--ink); font-family:var(--sans); font-size:13px; resize:vertical; }
.retry-unpaid { display:flex; align-items:flex-start; gap:10px; margin:16px 0; }
.retry-unpaid input { margin-top:6px; width:18px; height:18px; flex-shrink:0; }
.retry-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
#retry-error { color:var(--danger); font-size:13px; overflow-wrap:anywhere; }
@media(max-width:600px){.task-bulk-controls{gap:6px}.task-bulk-controls .button{flex:1;font-size:12px;padding:8px}.task-retry-dialog{padding:22px}.task-retry-dialog textarea{font-size:16px}}

/* Compact announcement hub; no task, payment, or sound behavior changes. */
.announcement-hub { position:relative; grid-column:1/-1; margin:0 0 20px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); min-width:0; }
.announcement-hub .site-announcement { margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.announcement-hub .site-announcement[hidden] { display:none; }
.announcement-hub .site-announcement h2, .announcement-fallback { min-height:36px; margin:0 0 6px; padding:5px 240px 0 0; font-size:15px; line-height:1.65; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.announcement-fallback { margin-bottom:0; }
.announcement-hub:has(> .site-announcement:not([hidden])) > .announcement-fallback { display:none; }
.announcement-hub .support-bar { position:absolute; top:14px; right:14px; display:flex; gap:8px; width:auto; margin:0; align-items:flex-start; }
.announcement-hub .support-bar > .panel { flex:none; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.announcement-hub .support-bar .usage-guide > summary, .announcement-hub .support-bar .board-toggle { min-height:36px; padding:5px 7px; border:0; border-radius:6px; background:transparent; color:var(--blue); font-size:12px; font-weight:500; }
.announcement-hub .support-bar .usage-guide > summary:hover, .announcement-hub .support-bar .board-toggle:hover { background:var(--subtle); }
.announcement-hub .support-bar .count-badge { font-size:11px; padding:1px 4px; margin-left:4px; }
.announcement-hub .support-bar:has(> details[open]), .announcement-hub .support-bar:has(#board-body:not([hidden])) { position:static; display:flex; flex-wrap:wrap; width:100%; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); }
.announcement-hub .support-bar > details[open], .announcement-hub .support-bar > .board-panel:has(#board-body:not([hidden])) { flex:1 0 100%; background:transparent; }
.announcement-hub:has(.support-bar > details[open]) .site-announcement h2, .announcement-hub:has(#board-body:not([hidden])) .site-announcement h2 { padding-right:0; }
.sound-readiness-row { min-height:0; margin:0; padding:0; }
.sound-readiness-row:has(#enable-success-sound:not([hidden])) { margin-bottom:12px; }
/* Retain the live status for assistive tech; no permanent fine print or empty row. */
.sound-readiness-row #sound-readiness { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.sound-readiness-row:has(#enable-success-sound:disabled) #sound-readiness { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:normal; color:var(--danger); }
@media(max-width:600px) {
 .announcement-hub { padding:12px; margin-bottom:16px; }
 .announcement-hub .support-bar { top:10px; right:8px; gap:4px; }
 .announcement-hub .site-announcement h2, .announcement-fallback { padding-right:194px; font-size:14px; min-height:36px; }
 .announcement-hub .support-bar .usage-guide > summary, .announcement-hub .support-bar .board-toggle { padding:5px 4px; font-size:12px; }
 .announcement-hub .support-bar .count-badge { margin-left:2px; }
}

/* Align task actions with lifecycle filters; execution scope remains unchanged. */
.task-filter-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 12px; margin-bottom:14px; min-width:0; }
.task-filter-toolbar > .lifecycle-filters { flex:0 1 auto; margin:0; max-width:100%; min-width:0; }
.task-filter-toolbar > .task-bulk-controls { flex:0 0 auto; display:flex; flex-wrap:nowrap; gap:6px; margin:0 0 0 auto; padding:0; border:0; }
.task-filter-toolbar > .task-bulk-controls[hidden] { display:none; }
.task-filter-toolbar .task-bulk-controls .button { min-height:44px; padding:8px 12px; white-space:nowrap; }
.filter-action-status { margin:0 0 12px; }
.filter-action-status:empty { display:none; }
@media(max-width:600px) {
 .task-filter-toolbar { gap:8px; margin-bottom:4px; }
 .task-filter-toolbar > .lifecycle-filters { width:100%; }
 .task-filter-toolbar .task-bulk-controls .button { flex:none; padding:8px 14px; }
}

/* A compact notice strip, not a second page header. Content remains complete. */
.page { padding-top:14px; }
.announcement-hub { padding:8px 12px; margin-bottom:12px; border-radius:8px; }
.announcement-hub > .site-announcement:not([hidden]) { display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:start; gap:12px; padding-right:224px; }
.announcement-hub .site-announcement h2 { min-height:28px; margin:0; padding:2px 0; font-size:14px; line-height:1.5; }
.announcement-hub #site-announcement-content { margin:0; font-size:13px; line-height:1.45; white-space:pre-line; }
.announcement-hub .support-bar { top:6px; right:8px; }
.announcement-hub .support-bar .usage-guide > summary, .announcement-hub .support-bar .board-toggle { min-height:28px; padding:3px 5px; }
.announcement-hub .announcement-fallback { min-height:28px; margin:0; padding:2px 224px 0 0; font-size:14px; line-height:1.5; }
.announcement-hub:has(.support-bar > details[open]) > .site-announcement, .announcement-hub:has(#board-body:not([hidden])) > .site-announcement { padding-right:0; }
@media(max-width:960px) {
 .announcement-hub > .site-announcement:not([hidden]) { display:block; padding-right:0; }
 .announcement-hub .site-announcement h2 { min-height:32px; margin-bottom:3px; padding-right:200px; }
 .announcement-hub .support-bar .usage-guide > summary, .announcement-hub .support-bar .board-toggle { min-height:32px; }
 .announcement-hub #site-announcement-content { line-height:1.5; }
}
@media(max-width:600px) {
 .page { padding-top:12px; }
 .announcement-hub { padding:8px 10px; margin-bottom:10px; }
 .announcement-hub .site-announcement h2, .announcement-hub .announcement-fallback { min-height:32px; padding-right:190px; }
 .announcement-hub .support-bar .usage-guide > summary, .announcement-hub .support-bar .board-toggle { padding:3px 4px; }
}

/* One-line public notice, with static utility shortcuts outside the moving area. */
.announcement-hub { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding:6px 10px; }
.announcement-hub > .site-announcement:not([hidden]) { display:grid; grid-column:1; grid-template-columns:max-content minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; padding:0; }
.announcement-hub .site-announcement h2, .announcement-hub .announcement-fallback { min-height:0; margin:0; padding:0; font-size:13px; line-height:28px; white-space:nowrap; }
.announcement-hub .announcement-fallback { grid-column:1; }
.notice-viewport { min-width:0; height:28px; overflow:hidden; line-height:28px; border-radius:3px; }
.notice-track { display:flex; align-items:center; gap:48px; width:max-content; min-width:100%; height:28px; }
.announcement-hub #site-announcement-content, .notice-ticker-copy { display:block; flex:none; width:max-content; max-width:none; margin:0; padding:0; font-size:13px; line-height:28px; white-space:nowrap; }
.notice-scroll-toggle { display:inline-grid; place-items:center; width:28px; height:28px; padding:5px; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; }
.notice-scroll-toggle[hidden] { display:none; }
.notice-scroll-toggle:hover { background:var(--subtle); color:var(--ink); }
.notice-scroll-toggle svg { width:14px; height:14px; stroke:currentColor; stroke-width:1.7; fill:none; }
.notice-scroll-toggle .notice-play { display:none; }
.notice-scroll-toggle[aria-pressed="true"] .notice-play { display:block; }
.notice-scroll-toggle[aria-pressed="true"] .notice-pause { display:none; }
.announcement-hub .support-bar { position:static; grid-column:2; align-self:center; display:flex; align-items:center; flex-wrap:nowrap; width:auto; min-width:0; margin:0; padding:0; border:0; gap:6px; }
.announcement-hub .support-bar .usage-guide > summary, .announcement-hub .support-bar .board-toggle { min-height:28px; padding:3px 5px; white-space:nowrap; }
.announcement-hub .support-bar:has(> details[open]), .announcement-hub .support-bar:has(#board-body:not([hidden])) { grid-column:1/-1; position:static; flex-wrap:wrap; align-items:flex-start; width:100%; margin:0; padding-top:8px; border-top:1px solid var(--line); }
.announcement-hub .support-bar > details[open], .announcement-hub .support-bar > .board-panel:has(#board-body:not([hidden])) { flex:1 0 100%; }
.announcement-hub:has(.support-bar > details[open]) > .site-announcement, .announcement-hub:has(#board-body:not([hidden])) > .site-announcement { grid-column:1/-1; padding:0; }
@media(max-width:600px) {
 .announcement-hub { gap:6px; padding:6px 8px; }
 .announcement-hub > .site-announcement:not([hidden]) { grid-template-columns:minmax(0,1fr) auto; gap:3px; }
 .announcement-hub .site-announcement h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
 .announcement-hub .support-bar { gap:2px; }
 .announcement-hub .support-bar .usage-guide > summary, .announcement-hub .support-bar .board-toggle { padding:3px; font-size:11px; }
 .announcement-hub .support-bar .count-badge { padding:1px 3px; font-size:10px; }
 .notice-scroll-toggle { width:24px; }
}
@media(prefers-reduced-motion:reduce) {
 .notice-viewport { overflow-x:auto; scrollbar-width:thin; }
 .notice-ticker-copy { display:none; }
}