.demo-mount { margin-top:18px; }
.algorithm-demo { --demo-accent:#39dac4; --demo-accent-rgb:57,218,196; color:#edf8f5; border:1px solid #285058; background:#071e25; box-shadow:0 24px 64px rgba(0,0,0,.18); }
.algorithm-demo.accent-orange { --demo-accent:#ff916c; --demo-accent-rgb:255,145,108; }
.algorithm-demo.accent-aqua { --demo-accent:#62d9e6; --demo-accent-rgb:98,217,230; }
.algorithm-demo.accent-blue { --demo-accent:#6eb8f2; --demo-accent-rgb:110,184,242; }
.algorithm-demo.accent-ice { --demo-accent:#99dff4; --demo-accent-rgb:153,223,244; }
.algorithm-demo.accent-violet { --demo-accent:#ac9cff; --demo-accent-rgb:172,156,255; }
.demo-heading { min-height:132px; padding:28px 30px; display:flex; align-items:center; justify-content:space-between; gap:34px; border-bottom:1px solid #244a51; background:linear-gradient(110deg,rgba(var(--demo-accent-rgb),.09),transparent 58%); }
.demo-heading>div>span { color:var(--demo-accent); font-family:Arial,sans-serif; font-size:10px; font-weight:800; letter-spacing:.19em; }
.demo-heading h3 { margin:8px 0 7px; font-size:24px; letter-spacing:-.02em; }
.demo-heading p { max-width:820px; margin:0; color:#8da8a4; font-size:14px; line-height:1.7; }
.demo-layout { padding:18px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr); gap:18px; align-items:start; }
.demo-controls { display:grid; gap:14px; }
.demo-panel { border:1px solid #244a51; background:#09242b; }
.demo-run-panel { padding:25px; }
.demo-panel-title { display:flex; align-items:center; gap:14px; }
.demo-panel-title>i { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; color:var(--demo-accent); border:1px solid rgba(var(--demo-accent-rgb),.23); background:rgba(var(--demo-accent-rgb),.06); font-size:11px; font-style:normal; }
.demo-panel-title h4 { margin:0; font-size:19px; }
.demo-panel-title p { margin:5px 0 0; color:#6f8d89; font-size:12px; }
.demo-input-flow { margin:24px 0; display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr); gap:7px; align-items:center; }
.demo-input-flow>div { min-height:80px; padding:14px; display:flex; flex-direction:column; justify-content:center; border:1px solid #285058; background:#071f26; }
.demo-input-flow small { color:#597773; font:700 9px/1 Arial,sans-serif; letter-spacing:.09em; }
.demo-input-flow strong { margin-top:8px; color:#d8e9e6; font-size:12px; line-height:1.45; }
.demo-input-flow>i { color:var(--demo-accent); font-size:18px; font-style:normal; text-align:center; }
.demo-input-flow.flow-four { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr); gap:5px; }
.demo-input-flow.flow-four>div { min-height:76px; padding:10px; }
.demo-input-flow.flow-four strong { font-size:11px; }
.demo-select-label { display:grid; gap:9px; color:#78928e; font-size:11px; }
.demo-case-select { width:100%; height:48px; padding:0 14px; color:#e6f2ef; border:1px solid #31706b; border-radius:0; outline:0; background:#0a2a31; font:600 13px "Microsoft YaHei",sans-serif; }
.demo-case-select:focus { border-color:var(--demo-accent); box-shadow:0 0 0 3px rgba(var(--demo-accent-rgb),.08); }
.demo-case-description { min-height:42px; margin:12px 0 0; color:#8ca5a1; font-size:12px; line-height:1.75; }
.demo-run-button { width:100%; height:50px; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:12px; color:#061c21; border:0; background:linear-gradient(90deg,var(--demo-accent),rgba(var(--demo-accent-rgb),.78)); cursor:pointer; font-weight:800; }
.demo-run-button:hover:not(:disabled) { filter:brightness(1.08); }
.demo-run-button:disabled { cursor:wait; opacity:.64; }
.demo-run-button>i { font-size:17px; font-style:normal; }
.demo-progress { padding:20px 22px; }
.demo-progress>div { display:flex; justify-content:space-between; gap:20px; font-size:12px; }
.demo-progress>div span { color:var(--demo-accent); }
.demo-progress>i { height:6px; margin-top:14px; display:block; overflow:hidden; background:#061c22; }
.demo-progress>i b { width:0; height:100%; display:block; background:linear-gradient(90deg,var(--demo-accent),rgba(var(--demo-accent-rgb),.72)); box-shadow:0 0 16px rgba(var(--demo-accent-rgb),.35); transition:width .25s ease; }
.demo-progress>p { margin:11px 0 0; color:#78928e; font-size:11px; line-height:1.55; }
.demo-result-panel { min-height:650px; padding:25px; position:sticky; top:20px; }
.demo-result-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.demo-result-heading small { color:var(--demo-accent); font:800 9px/1 Arial,sans-serif; letter-spacing:.18em; }
.demo-result-heading h4 { margin:8px 0 0; font-size:21px; }
.demo-result-badge { padding:7px 10px; color:#7f9a96; border:1px solid #2c555b; font-size:10px; white-space:nowrap; }
.demo-result-badge.success { color:var(--demo-accent); border-color:rgba(var(--demo-accent-rgb),.35); background:rgba(var(--demo-accent-rgb),.06); }
.demo-empty-result { min-height:540px; display:grid; place-content:center; justify-items:center; text-align:center; }
.demo-empty-result>strong { margin-top:24px; font-size:15px; }
.demo-empty-result>p { margin:9px 0 0; color:#637f7b; font-size:11px; }
.demo-scanner { width:138px; height:138px; position:relative; border:1px solid rgba(var(--demo-accent-rgb),.19); border-radius:50%; background:radial-gradient(circle,rgba(var(--demo-accent-rgb),.1),transparent 65%); }
.demo-scanner::before,.demo-scanner::after { content:""; position:absolute; inset:25px; border:1px solid rgba(var(--demo-accent-rgb),.15); border-radius:50%; }
.demo-scanner::after { inset:50px; }
.demo-scanner>i { position:absolute; inset:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:var(--demo-accent); box-shadow:0 0 16px var(--demo-accent); }
.demo-scanner>b { position:absolute; left:50%; top:50%; width:63px; height:63px; transform-origin:0 0; background:conic-gradient(from -15deg,rgba(var(--demo-accent-rgb),.3),transparent 34%); clip-path:polygon(0 0,100% 0,0 100%); animation:demo-sweep 3s linear infinite; }
.demo-result-content { margin-top:20px; }
.demo-result-tabs { padding:4px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; background:#061c22; }
.demo-result-tabs button { min-height:38px; padding:0 8px; color:#6f8b87; border:0; background:transparent; cursor:pointer; font-size:11px; }
.demo-result-tabs button.active { color:#eaf8f5; background:rgba(var(--demo-accent-rgb),.11); box-shadow:inset 0 0 0 1px rgba(var(--demo-accent-rgb),.2); }
.demo-image-stage { height:420px; margin:12px 0 0; display:grid; place-items:center; overflow:hidden; border:1px solid #203f46; background:#04171d; }
.demo-image-stage img { width:100%; height:100%; display:block; object-fit:contain; }
.demo-metrics { margin:12px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:7px; }
.demo-metrics>div { min-width:0; padding:12px; border:1px solid #24474e; background:#071f26; }
.demo-metrics dt { color:#607d79; font-size:9px; }
.demo-metrics dd { margin:6px 0 0; overflow:hidden; color:#e0eeeb; font-size:12px; font-weight:700; line-height:1.4; text-overflow:ellipsis; }
.demo-downloads { margin-top:10px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.demo-downloads:empty { display:none; }
.demo-downloads a { min-height:42px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#d9efeb; border:1px solid rgba(var(--demo-accent-rgb),.28); background:rgba(var(--demo-accent-rgb),.06); text-decoration:none; font-size:11px; }
.demo-downloads a:hover { border-color:var(--demo-accent); background:rgba(var(--demo-accent-rgb),.11); }
.demo-downloads a span { color:var(--demo-accent); font-size:16px; }
.live-algorithm-label { margin-top:24px; }
.fusion-algorithm-heading { margin:24px 0 10px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.fusion-algorithm-heading span { color:#cfe4e0; font-size:12px; font-weight:700; }
.fusion-algorithm-heading small { color:#6d8985; font-size:10px; }
.fusion-algorithm-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.fusion-algorithm-card { min-height:76px; padding:11px; display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; color:#cfe1de; border:1px solid #264951; background:#071f26; text-align:left; cursor:pointer; }
.fusion-algorithm-card:last-child { grid-column:1/-1; }
.fusion-algorithm-card>i { width:28px; height:28px; display:grid; place-items:center; color:#78928e; border:1px solid #2a5157; font-size:9px; font-style:normal; }
.fusion-algorithm-card>span { min-width:0; display:grid; gap:5px; }
.fusion-algorithm-card strong { font-size:11px; line-height:1.45; }
.fusion-algorithm-card small { color:#66827e; font-size:9px; line-height:1.5; }
.fusion-algorithm-card:hover { border-color:rgba(var(--demo-accent-rgb),.55); }
.fusion-algorithm-card.active { border-color:var(--demo-accent); background:rgba(var(--demo-accent-rgb),.09); box-shadow:inset 3px 0 0 var(--demo-accent); }
.fusion-algorithm-card.active>i { color:var(--demo-accent); border-color:rgba(var(--demo-accent-rgb),.45); }
.fusion-preprocess-note { margin:10px 0 0; padding:10px 12px; color:#76918d; border-left:2px solid rgba(var(--demo-accent-rgb),.55); background:rgba(var(--demo-accent-rgb),.035); font-size:9px; line-height:1.7; }
.fusion-preprocess-note strong { margin-right:8px; color:#a7c4bf; font-weight:700; }
.live-preset-field { grid-column:1/-1; }
.live-file-field select { width:100%; min-height:44px; margin-top:8px; padding:0 12px; color:#d8e9e6; border:1px solid #2a5157; border-radius:0; outline:none; background:#071f26; font:inherit; }
.live-file-field select:focus { border-color:var(--demo-accent); }
.live-input-flow { margin:18px 0; }
.live-file-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.live-file-field { min-height:92px; padding:14px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; color:#cfe4e0; border:1px dashed rgba(var(--demo-accent-rgb),.38); background:#071f26; cursor:pointer; }
.live-file-field:hover { border-color:var(--demo-accent); background:rgba(var(--demo-accent-rgb),.06); }
.live-file-field>span { font-size:12px; font-weight:700; }
.live-file-field>small { margin-top:8px; overflow:hidden; color:#6f8f8a; font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.live-file-field input { width:1px; height:1px; position:absolute; opacity:0; pointer-events:none; }
.live-file-field:focus-within { outline:2px solid rgba(var(--demo-accent-rgb),.35); outline-offset:2px; }
.live-service-state { min-height:18px; margin:12px 0 0; color:#78928e; font-size:10px; line-height:1.6; text-align:center; }
.live-input-summary { margin:4px 0 22px; padding:16px; border-left:2px solid var(--demo-accent); background:rgba(var(--demo-accent-rgb),.05); }
.live-input-summary strong { color:#e0f1ee; font-size:13px; }
.live-input-summary p { margin:7px 0 0; color:#87a39f; font-size:11px; line-height:1.75; }
.live-result-tools { margin-top:12px; }
.ice-month-control { padding:13px 14px; border:1px solid #24474e; background:#071f26; }
.ice-month-control>div { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ice-month-control strong { color:var(--demo-accent); font-size:14px; }
.ice-month-control span { color:#6f8d89; font-size:10px; }
.ice-month-slider { width:100%; margin-top:12px; accent-color:var(--demo-accent); cursor:pointer; }
.ice-live-heading { min-height:148px; }
.ice-mode-switch { padding:4px; display:grid; grid-template-columns:1fr 1fr; gap:4px; flex:0 0 auto; border:1px solid #2b5057; background:#061c22; }
.ice-mode-switch button { min-width:142px; min-height:40px; padding:0 14px; color:#78928e; border:0; background:transparent; cursor:pointer; font:600 11px "Microsoft YaHei",sans-serif; }
.ice-mode-switch button.active { color:#062027; background:var(--demo-accent); font-weight:800; }
.ice-live-mode { padding:18px; }
.ice-history-panel { padding:26px; }
.ice-history-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ice-history-heading>div { display:flex; align-items:center; gap:14px; }
.ice-history-heading i { width:42px; height:42px; display:grid; place-items:center; color:var(--demo-accent); border:1px solid rgba(var(--demo-accent-rgb),.3); background:rgba(var(--demo-accent-rgb),.06); font-size:12px; font-style:normal; }
.ice-history-heading span { display:grid; gap:5px; }
.ice-history-heading strong { font-size:18px; }
.ice-history-heading small { color:#78928e; font-size:11px; font-weight:400; }
.ice-history-state { padding:7px 10px; color:#d7ad62; border:1px solid rgba(215,173,98,.3); font-size:10px; font-weight:500; }
.ice-history-state.ready { color:var(--demo-accent); border-color:rgba(var(--demo-accent-rgb),.36); background:rgba(var(--demo-accent-rgb),.06); }
.ice-history-state.error { color:#ff8b81; border-color:rgba(255,139,129,.35); }
.ice-history-controller { margin:25px 0 20px; display:grid; grid-template-columns:40px 1fr 40px; gap:13px; align-items:end; }
.ice-history-controller>div>div { margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; color:#66827e; font-size:10px; }
.ice-history-controller>div>div strong { color:#e3f0ed; font-size:14px; }
.ice-history-controller button { width:40px; height:40px; color:#8da8a4; border:1px solid #285058; background:#071f26; cursor:pointer; font-size:22px; }
.ice-history-controller button:hover:not(:disabled) { color:var(--demo-accent); border-color:var(--demo-accent); }
.ice-history-controller button:disabled { opacity:.35; cursor:not-allowed; }
.ice-history-controller input { width:100%; accent-color:var(--demo-accent); cursor:pointer; }
.ice-history-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ice-history-compare figure { margin:0; padding:13px; border:1px solid #24474e; background:#061b22; }
.ice-history-compare figcaption { margin-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.ice-history-compare figcaption span { color:var(--demo-accent); font:800 9px/1 Arial,sans-serif; letter-spacing:.16em; }
.ice-history-compare figcaption strong { font-size:12px; }
.ice-history-compare figure>div { min-height:460px; display:grid; place-items:center; overflow:hidden; background:#03151c; }
.ice-history-compare img { width:100%; height:100%; max-height:620px; display:block; object-fit:contain; }
.ice-history-legend { margin-top:16px; display:flex; align-items:center; justify-content:center; gap:8px; color:#698580; font-size:9px; }
.ice-history-legend i { width:64px; height:7px; margin:0 -8px; background:linear-gradient(90deg,#052137,#26a6c7,#f2fbfc); }
.ice-history-legend b { margin-left:14px; padding:3px 7px; color:#8c979a; background:#262d30; font-weight:500; }
.fusion-demo-section { margin-top:34px; }
.fusion-demo-heading { min-height:72px; padding-bottom:17px; display:flex; align-items:end; justify-content:space-between; gap:28px; border-bottom:1px solid #21474d; }
.fusion-demo-heading>div { display:flex; align-items:baseline; gap:15px; }
.fusion-demo-heading span { color:#34d7c1; font-size:10px; }
.fusion-demo-heading h3 { margin:0; font-size:30px; }
.fusion-demo-heading small { color:#557671; font-size:9px; letter-spacing:.18em; }
[hidden] { display:none !important; }
@keyframes demo-sweep { to { transform:rotate(360deg); } }

@media (max-width:1050px) {
  .demo-layout { grid-template-columns:1fr; }
  .demo-result-panel { position:relative; top:auto; }
}
@media (max-width:680px) {
  .demo-heading { padding:23px 20px; align-items:flex-start; flex-direction:column; }
  .demo-layout { padding:10px; gap:10px; }
  .demo-run-panel,.demo-result-panel { padding:19px; }
  .demo-input-flow { grid-template-columns:1fr; }
  .demo-input-flow.flow-four { grid-template-columns:1fr; }
  .demo-input-flow>i { transform:rotate(90deg); }
  .demo-image-stage { height:330px; }
  .demo-result-tabs { grid-auto-flow:row; grid-template-columns:1fr; }
  .demo-result-tabs button { min-height:34px; }
  .demo-empty-result { min-height:420px; }
  .fusion-demo-heading { align-items:flex-start; flex-direction:column; }
  .live-file-grid { grid-template-columns:1fr; }
  .fusion-algorithm-grid { grid-template-columns:1fr; }
  .fusion-algorithm-card:last-child { grid-column:auto; }
  .ice-month-control>div { align-items:flex-start; flex-direction:column; gap:4px; }
  .ice-live-heading { align-items:stretch; }
  .ice-mode-switch { width:100%; }
  .ice-mode-switch button { min-width:0; }
  .ice-live-mode { padding:10px; }
  .ice-history-panel { padding:18px; }
  .ice-history-heading { align-items:flex-start; }
  .ice-history-heading small { line-height:1.55; }
  .ice-history-compare { grid-template-columns:1fr; }
  .ice-history-compare figure>div { min-height:330px; }
  .ice-history-legend { flex-wrap:wrap; }
}
