:root{
      color-scheme: light;
      --panel:#ffffff;
      --border:#d8e0ea;
      --border-strong:#b8c5d5;
      --text:#172033;
      --muted:#647084;
      --accent:#2f6fed;
      --accent-strong:#1d4ed8;
      --accent-soft:#edf4ff;
      --teal:#0f8a83;
      --amber:#b86b00;
      --ok:#067647;
      --warn:#b54708;
      --bad:#b42318;
      --bg:#eef3f8;
      --panel-soft:#f7f9fd;
      --control:#fbfdff;
      --shadow:0 18px 42px rgba(23,32,51,.10);
      --shadow-soft:0 8px 22px rgba(23,32,51,.07);
      --shadow-hover:0 18px 38px rgba(23,32,51,.14);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:
        linear-gradient(135deg,rgba(47,111,237,.07) 0 25%,transparent 25% 50%,rgba(15,138,131,.06) 50% 75%,transparent 75%) 0 0/34px 34px,
        linear-gradient(180deg,#f8fbff 0%,var(--bg) 42%,#e7edf5 100%);
      color:var(--text);
      font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }
    .wrap{
      max-width:1520px;margin:0 auto;padding:28px 24px 104px;
      display:grid;grid-template-columns:minmax(0,1.08fr) minmax(392px,.92fr);gap:20px;align-items:start
    }
    .hero,.panel{
      border:1px solid rgba(216,224,234,.92);
      border-radius:12px;
      background:rgba(255,255,255,.96);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px)
    }
    .hero{
      position:relative;overflow:hidden;
      display:flex;
      gap:18px;
      justify-content:space-between;
      padding:26px 28px;
      align-items:flex-start;
      background:linear-gradient(135deg,#ffffff 0%,#f8fbff 48%,#eef8f6 100%)
    }
    .hero::before{
      content:"";position:absolute;inset:0 0 auto 0;height:4px;
      background:linear-gradient(90deg,var(--accent),var(--teal),var(--amber))
    }
    .hero > *{position:relative;z-index:1}
    h1{margin:0;font-size:30px;line-height:1.12;letter-spacing:0;font-weight:820}
    .sub{margin:10px 0 0;color:var(--muted);max-width:78ch;font-size:14px}
    .hero-right{min-width:280px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
    .badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 11px;border-radius:999px;border:1px solid rgba(47,111,237,.18);
      background:rgba(237,244,255,.86);color:var(--accent-strong);font-size:12px;font-weight:700;white-space:nowrap
    }
    .status{
      width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--border);
      background:rgba(247,249,253,.92);color:var(--muted)
    }
    .status.ok{border-color:rgba(6,118,71,.22);background:rgba(6,118,71,.06);color:var(--ok)}
    .status.warn{border-color:rgba(181,71,8,.22);background:rgba(181,71,8,.06);color:var(--warn)}
    .status.bad{border-color:rgba(180,35,24,.22);background:rgba(180,35,24,.06);color:var(--bad)}
    .panel{margin-top:0;padding:20px 20px 22px}
    .panel h2{margin:0 0 14px;font-size:17px;line-height:1.2;font-weight:780}
    .grid{display:grid;gap:12px}
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .hero,.connection-panel{grid-column:1/-1}
    .composer-panel,.prompt-gallery-panel,.advanced-panel{grid-column:1}
    .result-panel{grid-column:2;grid-row:3 / span 5;position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable}
    .connection-panel .grid-4{grid-template-columns:1fr minmax(220px,1.35fr) minmax(260px,1.5fr) 1fr}
    .composer-panel > .grid-2{grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr)}
    .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
    .section-title h2{margin:0}
    .section-title .small{white-space:nowrap}
    .field{display:flex;flex-direction:column;gap:8px;min-width:0}
    label{font-size:12px;color:var(--text);font-weight:760;line-height:1.25;min-height:34px}
    .label-main{display:block;white-space:nowrap}
    .label-note{display:block;margin:2px 0 0;color:var(--muted);font-weight:500;font-size:11px;white-space:nowrap}
    .field-hint{font-size:11px;color:var(--muted);margin-top:-2px}
    input,select,textarea{
      width:100%;border:1px solid var(--border);background:var(--control);color:var(--text);
      border-radius:10px;padding:10px 12px;min-height:44px;font:inherit;outline:none;
      box-shadow:0 1px 0 rgba(23,32,51,.03),inset 0 1px 0 rgba(255,255,255,.65);
      transition:border-color .16s ease,box-shadow .16s ease,background .16s ease
    }
    textarea{min-height:120px;resize:vertical}
    #prompt{min-height:232px;line-height:1.6}
    input:focus,select:focus,textarea:focus{
      border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(47,111,237,.13)
    }
    .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    .action-bar{
      position:sticky;bottom:12px;z-index:20;margin:18px -6px -6px;padding:11px 12px;
      border:1px solid rgba(216,224,234,.86);border-radius:12px;background:rgba(255,255,255,.94);
      box-shadow:0 16px 34px rgba(23,32,51,.14);backdrop-filter:blur(10px)
    }
    .action-bar .primary{min-width:128px}
    .connection-actions button{min-width:88px}
    button{
      border:1px solid var(--border);background:#fff;color:var(--text);
      border-radius:10px;padding:10px 13px;font:700 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      cursor:pointer;transition:transform .12s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease
    }
    button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-color:var(--accent);color:#fff}
    button.primary{box-shadow:0 10px 20px rgba(47,111,237,.22)}
    button.ghost{background:var(--panel-soft)}
    button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 18px rgba(23,32,51,.10);border-color:var(--border-strong)}
    button.primary:hover:not(:disabled){box-shadow:0 12px 24px rgba(47,111,237,.28)}
    button:disabled{opacity:.6;cursor:not-allowed}
    .small{font-size:12px;color:var(--muted)}
    .mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}
    .progress{height:8px;border-radius:999px;background:#e7edf5;overflow:hidden;position:relative}
    .progress > div{
      width:0;height:100%;background:linear-gradient(90deg,var(--accent),#60a5fa);
      transition:width 280ms cubic-bezier(.4,.0,.2,1);
      position:relative;overflow:hidden
    }
    .progress.running > div{
      background:linear-gradient(90deg,var(--accent) 0%,#60a5fa 50%,var(--accent) 100%);
      background-size:200% 100%;
      animation:progress-flow 1.6s linear infinite
    }
    .progress.running > div::after{
      content:"";position:absolute;inset:0;
      background-image:linear-gradient(45deg,
        rgba(255,255,255,.25) 25%,transparent 25%,
        transparent 50%,rgba(255,255,255,.25) 50%,
        rgba(255,255,255,.25) 75%,transparent 75%,transparent);
      background-size:18px 18px;
      animation:progress-stripe 1s linear infinite
    }
    .progress.done > div{
      background:linear-gradient(90deg,var(--ok),#10b981)
    }
    .progress.failed > div{
      background:linear-gradient(90deg,var(--bad),#f87171)
    }
    @keyframes progress-flow{
      from{background-position:200% 0}
      to{background-position:0 0}
    }
    @keyframes progress-stripe{
      from{background-position:0 0}
      to{background-position:36px 0}
    }
    .file-list{display:flex;flex-wrap:wrap;gap:8px}
    .file-pill{
      display:inline-flex;align-items:center;gap:8px;padding:6px 10px;
      border:1px solid var(--border);border-radius:999px;background:#fff;
      font-size:12px;color:var(--muted);max-width:100%
    }
    .prompt-gallery{margin-top:0}
    .prompt-gallery-panel{background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
    .prompt-gallery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
    .prompt-gallery-head h2{margin:0;font-size:18px;line-height:1.2}
    .prompt-gallery-count{padding:6px 10px;border:1px solid rgba(15,138,131,.18);border-radius:999px;background:rgba(237,250,248,.9);color:var(--teal);font-weight:700;white-space:nowrap}
    .prompt-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:10px;margin-bottom:12px}
    .prompt-toolbar input{background:#fbfdff}
    .prompt-tabs{display:flex;gap:7px;overflow:auto;padding:1px 2px 8px;margin-bottom:13px;border-bottom:1px solid rgba(216,224,234,.72)}
    .prompt-tabs button{flex:0 0 auto;padding:7px 12px;border-radius:999px;font-size:12px;background:var(--panel-soft);box-shadow:none}
    .prompt-tabs button.active{background:linear-gradient(135deg,var(--accent),var(--teal));border-color:transparent;color:#fff}
    .prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:620px;overflow:auto;padding:2px 2px 4px}
    .prompt-card{border:1px solid rgba(216,224,234,.92);border-radius:12px;background:#fff;padding:14px;display:grid;gap:9px;align-content:start;box-shadow:var(--shadow-soft);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
    .prompt-card:hover{transform:translateY(-2px);border-color:rgba(47,111,237,.32);box-shadow:var(--shadow-hover)}
    .prompt-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-weight:760;font-size:14px}
    .prompt-card-title span{min-width:0;word-break:break-word}
    .prompt-card-desc{color:var(--muted);font-size:12px;line-height:1.45;min-height:34px}
    .prompt-card-text{color:#344054;font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;background:#f7f9fd;border:1px solid #e9eef6;border-radius:10px;padding:9px}
    .prompt-card-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:22px}
    .prompt-tag{padding:3px 8px;border-radius:999px;background:#edf4ff;color:#315a9f;font-size:11px;font-weight:700}
    .prompt-card-actions{display:flex;gap:8px;align-items:center;margin-top:2px}
    .prompt-card-actions button{padding:8px 10px;font-size:12px;flex:1}
    .prompt-empty{border:1px dashed var(--border);border-radius:8px;padding:18px;color:var(--muted);text-align:center;background:var(--panel-soft);grid-column:1/-1}
    .result-grid{
      display:grid;gap:12px;
      grid-template-columns:repeat(auto-fill,minmax(220px,1fr))
    }
    .load-more-results{grid-column:1/-1;display:flex;justify-content:center;padding:6px 0 2px}
    .load-more-results button{width:100%;max-width:260px;background:var(--panel-soft)}
    .empty-state{
      min-height:240px;border:1px dashed #c7d0dc;border-radius:12px;background:linear-gradient(180deg,#fbfdff,#f4f7fb);
      display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
      gap:8px;padding:28px;color:var(--muted)
    }
    .empty-state strong{color:var(--text);font-size:15px}
    .empty-state.is-failed{border-color:rgba(180,35,24,.35);background:rgba(180,35,24,.05)}
    .empty-state.is-stopped{border-color:rgba(181,71,8,.35);background:rgba(181,71,8,.05)}
    .empty-state.is-busy::before{
      content:"";width:22px;height:22px;border-radius:50%;border:3px solid #d9e3f7;border-top-color:var(--accent);
      animation:spin .9s linear infinite;margin-bottom:4px
    }
    @keyframes spin{to{transform:rotate(360deg)}}
    .card{
      border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;
      transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease
    }
    .card .img-wrap{position:relative;background:#f1f5f9}
    .card .img-wrap.missing-wrap{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#334155,#111827)}
    .missing-preview{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;color:#dbeafe;border:1px solid rgba(255,255,255,.12)}
    .missing-preview::before{content:"";width:34px;height:34px;border-radius:50%;border:2px solid rgba(219,234,254,.72);background:rgba(15,23,42,.42)}
    .missing-preview strong{color:#fff;font-size:15px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)}
    .missing-preview span{max-width:15em;color:#bfdbfe;font-size:12px;line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,.28)}
    .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--border-strong)}
    .card img{
      display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f1f5f9;
      cursor:zoom-in;transition:filter .2s ease
    }
    .card .img-wrap:hover img{filter:brightness(.92)}
    .res-badge{
      position:absolute;left:8px;top:8px;
      padding:3px 7px;border-radius:6px;
      background:rgba(15,23,42,.7);color:#fff;
      font:600 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
      letter-spacing:.2px;pointer-events:none;
      backdrop-filter:blur(2px)
    }
    .res-badge.loading{background:rgba(15,23,42,.45)}
    .res-badge.error{background:rgba(180,35,24,.85)}
    .card .meta{padding:10px;display:grid;gap:8px;font-size:12px;color:var(--muted)}
    .lightbox{
      position:fixed;inset:0;z-index:1000;
      display:flex;flex-direction:column;
      align-items:center;justify-content:flex-start;
      padding:20px 24px 16px;
      background:rgba(8,15,28,.88);
      cursor:zoom-out;opacity:0;pointer-events:none;
      transition:opacity .18s ease
    }
    .lightbox.show{opacity:1;pointer-events:auto}
    .lightbox-inner{
      flex:1 1 auto;display:flex;align-items:center;justify-content:center;
      min-height:0;width:100%;
      max-height:calc(100vh - 220px)
    }
    .lightbox .lb-img{
      max-width:100%;max-height:100%;
      border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.5);
      cursor:default;background:#0f172a;object-fit:contain
    }
    .lightbox-meta{
      flex:0 0 auto;width:min(92vw,720px);max-height:min(40vh,340px);
      display:flex;flex-direction:column;gap:8px;margin-top:10px;
      pointer-events:none
    }
    .lightbox-info{
      padding:8px 14px;border-radius:8px;
      background:rgba(15,23,42,.72);color:rgba(255,255,255,.92);
      font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
      backdrop-filter:blur(6px);
      white-space:normal;overflow:hidden;text-overflow:ellipsis;
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical
    }
    .lightbox-curl{
      margin:0;padding:10px 12px;border-radius:8px;overflow:auto;max-height:min(32vh,260px);
      background:rgba(10,18,32,.95);color:rgba(255,255,255,.93);
      font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
      white-space:pre-wrap;word-break:break-all;text-align:left;
      border:1px solid rgba(255,255,255,.1);
      pointer-events:auto;cursor:text;tab-size:2
    }
    .lightbox-actions{
      position:absolute;top:16px;right:16px;display:flex;gap:8px
    }
    .lightbox-actions a,.lightbox-actions button{
      width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
      border-radius:50%;border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);color:#fff;
      font-size:16px;text-decoration:none;cursor:pointer
    }
    .lightbox-actions a:hover,.lightbox-actions button:hover{
      background:rgba(255,255,255,.16)
    }
    .kv{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
    .kv-item{
      border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#fff,#f7f9fd);padding:11px;min-height:72px
    }
    .kv-item span{display:block;margin-bottom:4px;font-size:11px;color:var(--muted)}
    .kv-item strong{display:block;font-size:13px;word-break:break-all}
    .log{min-height:140px;white-space:pre-wrap;overflow:auto}
    .switch{
      display:inline-flex;gap:6px;padding:4px;border:1px solid var(--border);border-radius:10px;background:#fff
    }
    .inline-checks{flex-basis:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    .check-card{margin:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;color:var(--text);font-weight:700}
    .check-card input{width:auto;min-height:0;flex:0 0 auto}
    .check-card .label-note{display:inline;margin:0;font-size:11px}
    .switch button{padding:8px 10px;border:0;background:transparent;border-radius:6px}
    .switch button.active{background:var(--accent-soft);color:var(--accent-strong)}
    details.panel-summary{margin-top:16px}
    details.panel-summary > summary{
      list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
      font-weight:700;font-size:16px;color:var(--text);margin:-2px 0 0
    }
    details.panel-summary > summary::-webkit-details-marker{display:none}
    details.panel-summary > summary::after{content:"展开";font-size:12px;color:var(--muted);font-weight:600}
    details.panel-summary[open] > summary::after{content:"收起"}
    details.panel-summary > summary + *{margin-top:14px}
    .access-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;padding:4px;border:1px solid rgba(125,211,252,.18);border-radius:14px;background:rgba(2,6,23,.28)}
    .access-mode-row button{min-height:38px;border-radius:10px;background:transparent;box-shadow:none;color:#94a3b8}
    .access-mode-row button.active{background:linear-gradient(135deg,#e0f2fe,#7dd3fc);color:#082f49;border-color:rgba(186,230,253,.8)}
    .access-key-field #accessKeyBalance{color:#93c5fd}
    .key-row{display:flex;gap:8px;align-items:stretch}
    .key-row input{min-width:0}
    .key-row button{flex:0 0 auto;padding:0 12px}
    .danger-text{color:var(--bad)}
    @media (max-width: 980px){
      .hero{flex-direction:column}
      .hero-right{min-width:0;align-items:stretch}
      .wrap{display:block;padding:14px 14px 92px}
      .panel,.hero,details.panel-summary{margin-top:14px}
      .result-panel{position:static;max-height:none;overflow:visible}
      .grid-2,.grid-3,.grid-4,.kv,.connection-panel .grid-4,.composer-panel > .grid-2{grid-template-columns:1fr}
      .action-bar{bottom:8px}
      .actions button,.actions select{flex:1 1 auto}
      .result-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
      .prompt-toolbar{grid-template-columns:1fr}
      .prompt-grid{grid-template-columns:1fr;max-height:none}
      .label-main,.label-note{white-space:normal}
      .inline-checks{grid-template-columns:1fr}
      #prompt{min-height:160px}
    }
    .b64-preview-card .img-wrap{
      min-height:200px;
      display:flex;
      align-items:center;
      justify-content:center
    }
    .b64-preview-card .img-wrap img{
      aspect-ratio:auto;
      max-height:320px;
      width:100%;
      object-fit:contain
    }
    .hidden{display:none!important}
    .test-table{
      border-collapse:collapse;font-size:12px;width:100%;min-width:520px
    }
    .test-table th,.test-table td{
      border:1px solid var(--border);padding:6px 8px;text-align:center;white-space:nowrap;
      background:#fff;color:var(--text)
    }
    .test-table th{background:#f1f5f9;font-weight:600;color:var(--muted)}
    .test-table td.ok{background:rgba(6,118,71,.08);color:var(--ok);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
    .test-table td.bad{background:rgba(180,35,24,.08);color:var(--bad);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}
    .test-table td.same{font-weight:600}
    .test-table td .sub{display:block;font-size:10px;color:var(--muted);font-family:ui-monospace,monospace;margin-top:2px}
    .test-gallery{
      display:grid;gap:10px;
      grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
      margin-bottom:14px
    }
    .test-card{
      border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;
      display:flex;flex-direction:column
    }
    .test-card-img{
      position:relative;aspect-ratio:1/1;background:#f1f5f9;
      display:flex;align-items:center;justify-content:center;cursor:zoom-in;overflow:hidden
    }
    .test-card-img img{width:100%;height:100%;object-fit:contain;display:block;background:#0f172a}
    .test-card[data-status="pending"] .test-card-img{
      background:linear-gradient(135deg,#eef3f9 25%,#f7f9fc 50%,#eef3f9 75%);
      background-size:200% 200%;
      animation:test-shimmer 1.4s linear infinite
    }
    .test-card[data-status="fail"] .test-card-img{background:rgba(180,35,24,.08)}
    .test-card-spinner{font-size:11px;color:var(--muted);font-family:ui-monospace,monospace}
    .test-card-fail{font-size:11px;color:var(--bad);font-weight:600;font-family:ui-monospace,monospace;text-align:center;padding:8px}
    .test-card-meta{padding:8px 10px;display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
    .test-card-meta .head{color:var(--text);font-weight:600;font-size:11px}
    .test-card-meta .mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
    .test-card-meta .badge-ok{color:var(--ok)}
    .test-card-meta .badge-warn{color:var(--warn)}
    .test-card-meta .badge-bad{color:var(--bad)}
    @keyframes test-shimmer{
      from{background-position:200% 0}
      to{background-position:0 0}
    }

    /* Modern AI workstation skin. Overrides the base layout without touching behavior. */
    :root{
      color-scheme: dark;
      --panel:rgba(11,18,32,.78);
      --border:rgba(127,167,255,.22);
      --border-strong:rgba(96,239,255,.42);
      --text:#eaf2ff;
      --muted:#9fb2d4;
      --accent:#67e8f9;
      --accent-strong:#38bdf8;
      --accent-soft:rgba(103,232,249,.13);
      --teal:#5eead4;
      --amber:#fbbf24;
      --ok:#34d399;
      --warn:#fbbf24;
      --bad:#fb7185;
      --bg:#07111f;
      --panel-soft:rgba(15,27,48,.72);
      --control:rgba(5,12,24,.76);
      --shadow:0 22px 70px rgba(0,0,0,.34);
      --shadow-soft:0 14px 36px rgba(0,0,0,.22);
      --shadow-hover:0 24px 74px rgba(1,10,22,.44);
    }
    body{
      min-height:100%;
      background:
        linear-gradient(rgba(103,232,249,.035) 1px,transparent 1px) 0 0/36px 36px,
        linear-gradient(90deg,rgba(103,232,249,.035) 1px,transparent 1px) 0 0/36px 36px,
        radial-gradient(circle at 15% 8%,rgba(56,189,248,.22),transparent 34%),
        radial-gradient(circle at 78% 4%,rgba(94,234,212,.18),transparent 30%),
        radial-gradient(circle at 70% 78%,rgba(99,102,241,.16),transparent 34%),
        linear-gradient(180deg,#07111f 0%,#091827 48%,#07111f 100%);
    }
    body::before{
      content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
      background:
        linear-gradient(120deg,transparent 0 42%,rgba(103,232,249,.08) 46%,transparent 50%),
        linear-gradient(240deg,transparent 0 55%,rgba(94,234,212,.07) 58%,transparent 62%);
      opacity:.9;
    }
    .wrap{max-width:1540px;padding-top:30px;gap:22px}
    .hero,.panel{
      border-color:var(--border);
      background:linear-gradient(180deg,rgba(15,27,48,.86),rgba(8,15,28,.78));
      box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter:blur(18px);
    }
    .hero{
      min-height:148px;padding:30px 32px;
      background:
        linear-gradient(135deg,rgba(18,31,56,.94),rgba(8,15,28,.82)),
        linear-gradient(90deg,rgba(103,232,249,.18),transparent 42%,rgba(94,234,212,.14));
    }
    .hero::before{height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--teal),transparent)}
    .hero::after{
      content:"";position:absolute;right:26px;bottom:18px;width:280px;height:92px;pointer-events:none;
      background:
        linear-gradient(90deg,rgba(103,232,249,.14) 1px,transparent 1px) 0 0/18px 18px,
        linear-gradient(rgba(103,232,249,.10) 1px,transparent 1px) 0 0/18px 18px;
      mask-image:linear-gradient(90deg,transparent,#000 22%,#000 72%,transparent);opacity:.72;
    }
    h1{
      font-size:36px;font-weight:860;color:#f8fbff;
      text-shadow:0 0 28px rgba(103,232,249,.22);
    }
    .sub{font-size:15px;color:#b6c7e6;max-width:82ch}
    .badge{
      color:#dffcff;background:rgba(103,232,249,.12);border-color:rgba(103,232,249,.32);
      box-shadow:inset 0 0 18px rgba(103,232,249,.08);
    }
    .status{
      color:#c7d7f4;background:rgba(5,12,24,.58);border-color:rgba(127,167,255,.24);
    }
    .panel{padding:22px;border-radius:14px}
    .panel h2,.section-title h2{color:#f5f9ff;font-size:18px}
    .section-title .small{color:#8eeaf5}
    label{color:#dce8ff}
    .label-note,.field-hint,.small{color:var(--muted)}
    input,select,textarea{
      color:#f2f7ff;background:var(--control);border-color:rgba(127,167,255,.24);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 0 rgba(255,255,255,.03);
    }
    input::placeholder,textarea::placeholder{color:#7183a3}
    input:focus,select:focus,textarea:focus{
      border-color:var(--accent);background:rgba(7,16,31,.92);
      box-shadow:0 0 0 4px rgba(103,232,249,.13),0 0 28px rgba(103,232,249,.12);
    }
    button{
      color:#eaf2ff;background:linear-gradient(180deg,rgba(24,38,66,.92),rgba(10,21,39,.9));
      border-color:rgba(127,167,255,.25);
    }
    button.primary{
      background:linear-gradient(135deg,#22d3ee,#3b82f6 58%,#6366f1);
      border-color:rgba(103,232,249,.55);color:#04111f;
      box-shadow:0 14px 34px rgba(34,211,238,.22),0 0 0 1px rgba(255,255,255,.1) inset;
    }
    button.ghost{background:rgba(15,27,48,.76)}
    button:hover:not(:disabled){border-color:var(--border-strong);box-shadow:0 14px 30px rgba(0,0,0,.24),0 0 20px rgba(103,232,249,.12)}
    .action-bar{
      background:rgba(7,16,31,.84);border-color:rgba(103,232,249,.24);
      box-shadow:0 18px 44px rgba(0,0,0,.42),0 0 32px rgba(103,232,249,.10);
    }
    .progress{height:10px;background:rgba(5,12,24,.78);border:1px solid rgba(127,167,255,.18)}
    .progress > div{background:linear-gradient(90deg,#22d3ee,#60a5fa,#5eead4);box-shadow:0 0 24px rgba(103,232,249,.38)}
    .prompt-gallery-panel,.prompt-card,.card,.kv-item,.test-card{
      background:linear-gradient(180deg,rgba(15,27,48,.78),rgba(8,15,28,.68));
      border-color:rgba(127,167,255,.22);
    }
    .prompt-gallery-count,.prompt-tag{
      color:#dffcff;background:rgba(103,232,249,.12);border-color:rgba(103,232,249,.28);
    }
    .prompt-tabs{border-bottom-color:rgba(127,167,255,.18)}
    .prompt-tabs button{background:rgba(15,27,48,.72)}
    .prompt-tabs button.active{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#06111f}
    .prompt-card-text{
      color:#cbd8f0;background:rgba(5,12,24,.55);border-color:rgba(127,167,255,.16);
    }
    .prompt-card-desc,.card .meta{color:#a8badb}
    .empty-state{
      background:linear-gradient(180deg,rgba(15,27,48,.68),rgba(5,12,24,.62));
      border-color:rgba(103,232,249,.24);color:#9fb2d4;
    }
    .empty-state strong{color:#f4f8ff}
    .kv-item span{color:#8ea2c4}
    .kv-item strong{color:#f3f8ff}
    .switch,.check-card,.file-pill{
      color:#eaf2ff;background:rgba(5,12,24,.62);border-color:rgba(127,167,255,.22);
    }
    .switch button.active{background:rgba(103,232,249,.14);color:#e4feff}
    details.panel-summary > summary{color:#f5f9ff}
    details.panel-summary.advanced-panel{
      background:linear-gradient(180deg,rgba(11,20,38,.70),rgba(6,13,26,.62));
      border-style:dashed;border-color:rgba(103,232,249,.20);
      box-shadow:0 12px 32px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04);
    }
    details.panel-summary.advanced-panel > summary{
      min-height:48px;padding-left:34px;position:relative;
    }
    details.panel-summary.advanced-panel > summary::before{
      content:"";position:absolute;left:0;top:50%;width:18px;height:18px;transform:translateY(-50%);
      border-radius:6px;background:linear-gradient(135deg,#22d3ee,#6366f1);
      box-shadow:0 0 18px rgba(103,232,249,.24);
    }
    details.panel-summary.advanced-panel > summary::after{
      content:"打开工具";padding:5px 9px;border:1px solid rgba(103,232,249,.20);border-radius:999px;
      background:rgba(103,232,249,.08);color:#bff7ff;
    }
    details.panel-summary.advanced-panel[open] > summary::after{content:"收起工具"}
    details.panel-summary.advanced-panel > p.small{
      padding:10px 12px;border:1px solid rgba(127,167,255,.14);border-radius:10px;
      background:rgba(5,12,24,.36);line-height:1.65;
    }
    #gvtOutput{
      background:rgba(3,8,18,.92)!important;border-color:rgba(103,232,249,.22)!important;color:#dceaff!important;
    }
    .test-table th,.test-table td{background:rgba(8,15,28,.78);color:#dce8ff;border-color:rgba(127,167,255,.2)}
    .test-table th{background:rgba(15,27,48,.9);color:#9fb2d4}
    @media (min-width:1200px){
      .wrap{
        grid-template-columns:300px minmax(520px,1fr) 420px;
        grid-auto-flow:dense;
        align-items:start;
      }
      .hero{grid-column:1 / -1;grid-row:1}
      .connection-panel{
        grid-column:1;grid-row:2 / span 4;
        position:sticky;top:22px;max-height:calc(100vh - 44px);overflow:auto;
      }
      .composer-panel{grid-column:2;grid-row:2}
      .prompt-gallery-panel{grid-column:2;grid-row:3}
      .result-panel{
        grid-column:3;grid-row:2 / span 6;
        position:sticky;top:22px;max-height:calc(100vh - 44px);overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;
      }
      .advanced-panel{grid-column:2}
      .connection-panel .grid-4{grid-template-columns:1fr}
      .connection-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
      .connection-actions button{min-width:0;width:100%}
      .connection-panel .small{line-height:1.6}
      .key-row{display:grid;grid-template-columns:minmax(0,1fr) auto}
      .key-row button{min-width:64px}
      .composer-panel > .grid-2{grid-template-columns:1fr}
      #prompt{min-height:260px}
      .composer-panel .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
      #openaiPanel.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
      .prompt-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:520px}
      .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
      .result-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
      .action-bar{bottom:18px}
    }
    @media (max-width:980px){
      h1{font-size:30px}
      .hero{padding:24px 20px}
      .panel{padding:18px}
    }

    /* Refined product skin: restrained dark SaaS, less cyber noise, clearer hierarchy. */
    :root{
      --panel:rgba(15,23,42,.82);
      --border:rgba(148,163,184,.18);
      --border-strong:rgba(125,211,252,.34);
      --text:#eef4ff;
      --muted:#94a3b8;
      --accent:#7dd3fc;
      --accent-strong:#38bdf8;
      --accent-soft:rgba(125,211,252,.11);
      --teal:#5eead4;
      --bg:#090e1a;
      --panel-soft:rgba(30,41,59,.58);
      --control:rgba(2,6,23,.52);
      --shadow:0 18px 58px rgba(0,0,0,.30);
      --shadow-soft:0 10px 28px rgba(0,0,0,.20);
      --shadow-hover:0 18px 42px rgba(0,0,0,.28);
    }
    body{
      background:
        radial-gradient(circle at 18% 0%,rgba(56,189,248,.14),transparent 34%),
        radial-gradient(circle at 88% 12%,rgba(94,234,212,.10),transparent 28%),
        linear-gradient(180deg,#0b1020 0%,#090e1a 52%,#070b14 100%);
    }
    body::before{
      background:linear-gradient(rgba(148,163,184,.028) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(148,163,184,.024) 1px,transparent 1px) 0 0/48px 48px;
      opacity:.55;
    }
    .wrap{gap:18px}
    .hero,.panel{
      border-color:var(--border);
      background:linear-gradient(180deg,rgba(15,23,42,.84),rgba(15,23,42,.72));
      box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.045);
    }
    .hero{
      min-height:132px;background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(17,24,39,.80));
      border-color:rgba(125,211,252,.20);
    }
    .hero::before{height:1px;background:linear-gradient(90deg,transparent,rgba(125,211,252,.80),transparent)}
    .hero::after{display:none}
    h1{font-size:34px;font-weight:820;letter-spacing:0;text-shadow:none}
    .sub{color:#a8b5ca;font-size:14px;line-height:1.65}
    .badge{
      background:rgba(14,165,233,.10);border-color:rgba(125,211,252,.22);
      color:#bae6fd;box-shadow:none;
    }
    .status{
      background:rgba(2,6,23,.34);border-color:rgba(148,163,184,.18);color:#aab8cf;
    }
    .panel{border-radius:16px;padding:22px}
    .panel h2,.section-title h2{font-size:17px;font-weight:760;color:#f8fafc}
    .section-title{margin-bottom:16px}
    .section-title .small{color:#93c5fd;font-weight:650}
    label{color:#dbe7fb;font-weight:700}
    input,select,textarea{
      min-height:44px;border-radius:12px;background:rgba(2,6,23,.46);
      border-color:rgba(148,163,184,.20);color:#f8fafc;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }
    input:focus,select:focus,textarea:focus{
      background:rgba(2,6,23,.62);border-color:rgba(125,211,252,.56);
      box-shadow:0 0 0 3px rgba(125,211,252,.12);
    }
    textarea{line-height:1.62}
    button{
      border-radius:12px;background:rgba(30,41,59,.64);
      border-color:rgba(148,163,184,.18);color:#dbeafe;font-weight:720;
      box-shadow:none;
    }
    button.primary{
      background:linear-gradient(135deg,#e0f2fe,#7dd3fc 48%,#38bdf8);
      color:#082f49;border-color:rgba(186,230,253,.74);
      box-shadow:0 12px 26px rgba(14,165,233,.20);
    }
    button.ghost{background:rgba(15,23,42,.72);color:#bfdbfe}
    button:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(125,211,252,.34);box-shadow:0 10px 24px rgba(0,0,0,.18)}
    button.primary:hover:not(:disabled){box-shadow:0 14px 30px rgba(14,165,233,.24)}
    .connection-actions button:not(.primary),#stopBtn,#clearBtn,#saveBtn,#exportBtn,#importBtn,#resetBtn{
      background:rgba(15,23,42,.58);color:#cbd5e1;
    }
    .action-bar{
      background:rgba(15,23,42,.84);border-color:rgba(148,163,184,.18);
      box-shadow:0 18px 40px rgba(0,0,0,.28);
    }
    .prompt-gallery-panel,.prompt-card,.card,.kv-item,.test-card{
      background:linear-gradient(180deg,rgba(15,23,42,.72),rgba(15,23,42,.58));
      border-color:rgba(148,163,184,.16);box-shadow:var(--shadow-soft);
    }
    .prompt-card,.card{border-radius:16px}
    .prompt-card:hover,.card:hover{border-color:rgba(125,211,252,.28);box-shadow:var(--shadow-hover)}
    .prompt-card-text{background:rgba(2,6,23,.34);border-color:rgba(148,163,184,.12);color:#cbd5e1}
    .prompt-tag,.prompt-gallery-count{
      background:rgba(14,165,233,.10);border-color:rgba(125,211,252,.20);color:#bae6fd;
    }
    .prompt-tabs button{background:rgba(15,23,42,.60);color:#b6c6dc}
    .prompt-tabs button.active{background:#e0f2fe;color:#082f49;border-color:#bae6fd}
    .progress{height:8px;background:rgba(2,6,23,.58);border-color:rgba(148,163,184,.14)}
    .progress > div{background:linear-gradient(90deg,#7dd3fc,#38bdf8);box-shadow:none}
    .kv-item{border-radius:14px}
    .kv-item span{color:#8fa2bd}
    .kv-item strong{font-size:14px;color:#f8fafc}
    .empty-state{
      min-height:260px;background:rgba(2,6,23,.25);border-color:rgba(148,163,184,.18);
    }
    .card img{background:#020617}
    .card .meta{padding:12px;color:#9fb0c8}
    .card .actions{gap:8px;margin-top:2px}
    .result-download-btn{
      width:100%;min-height:38px;padding:9px 12px;border-radius:11px;
      border:1px solid rgba(125,211,252,.28);
      background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(56,189,248,.12));
      color:#dff7ff;font-weight:760;box-shadow:none;
    }
    .result-download-btn:hover:not(:disabled){
      border-color:rgba(125,211,252,.48);
      background:linear-gradient(135deg,rgba(14,165,233,.26),rgba(56,189,248,.18));
      box-shadow:0 10px 22px rgba(14,165,233,.12);
    }
    .result-remix-btn{
      width:100%;min-height:38px;padding:9px 12px;border-radius:11px;
      border:1px solid rgba(94,234,212,.24);
      background:rgba(20,184,166,.12);color:#ccfbf1;font-weight:760;box-shadow:none;
    }
    .result-remix-btn:hover:not(:disabled){
      border-color:rgba(94,234,212,.44);background:rgba(20,184,166,.18);
      box-shadow:0 10px 22px rgba(20,184,166,.10);
    }
    .switch,.check-card,.file-pill{
      background:rgba(2,6,23,.34);border-color:rgba(148,163,184,.18);color:#dbeafe;
    }
    .switch button.active{background:rgba(125,211,252,.13);color:#bae6fd}
    details.panel-summary.advanced-panel{
      background:rgba(15,23,42,.50);border-color:rgba(148,163,184,.14);border-style:solid;
    }
    details.panel-summary.advanced-panel > summary::before{
      background:#334155;box-shadow:none;
    }
    details.panel-summary.advanced-panel > summary::after{
      background:rgba(15,23,42,.76);border-color:rgba(148,163,184,.18);color:#bfdbfe;
    }
    @media (min-width:1200px){
      .wrap{grid-template-columns:304px minmax(540px,1fr) 424px}
      .connection-panel,.result-panel{top:18px;max-height:calc(100vh - 36px)}
    }