:root {
  --bg:#101212;
  --surface:#181b1b;
  --line:#2b3030;
  --text:#ecefe9;
  --muted:#949e99;
  --accent:#c7f872;
  --danger:#ff9992;
  font-family:Inter,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;
  font-size:14px;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:disabled { opacity:.45; cursor:not-allowed; }
[hidden] { display:none!important; }
.app-shell { min-height:100dvh; }
.sidebar {
  width:180px;
  position:fixed;
  inset:0 auto 0 0;
  padding:24px 16px 18px;
  border-right:1px solid var(--line);
  background:#131616;
  display:flex;
  flex-direction:column;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; letter-spacing:-.4px; }
.brand-mark { width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; border-radius:9px; background:var(--accent); color:#182010; font-size:20px; font-weight:900; position:relative; }
.brand-mark span { font-size:13px; position:absolute; top:0; right:1px; }
.brand-light { display:block; font-size:12px; font-weight:400; color:#a5afaa; line-height:1.2; }
.nav-label,.tiny-label { font-size:9px; letter-spacing:1.6px; color:#76817b; font-weight:600; }
.nav-label { margin:36px 8px 13px; }
.nav-current { display:flex; align-items:center; gap:8px; background:#242c20; border:1px solid #35402a; color:var(--accent); padding:12px 9px; border-radius:7px; font-size:11px; font-weight:600; white-space:nowrap; }
.nav-icon { font-size:19px; line-height:1; }
.nav-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; margin-left:auto; }
.sidebar-note { margin-top:36px; padding:0 6px; }
.sidebar-note ol { padding:0; list-style:none; margin:20px 0; color:#89948e; font-size:10px; }
.sidebar-note li { margin:0 0 18px; display:flex; align-items:center; gap:9px; }
.sidebar-note li span { color:#6c796f; font-family:Consolas,monospace; font-size:10px; }
.sidebar-bottom { margin-top:auto; border-top:1px solid var(--line); padding-top:18px; display:flex; align-items:center; gap:7px; color:#929f97; font-size:9px; }
.version { margin-left:auto; color:#66746c; }
.live-dot,.success-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.muted { background:#84918b; }
.main-shell { margin-left:180px; }
.topbar { height:52px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 24px; font-size:11px; color:#7f8b84; }
.topbar strong { margin-left:8px; font-weight:500; color:#c4ccc7; }
.topbar-actions { display:flex; align-items:center; gap:14px; min-width:0; }
.topbar-actions>.text-button { font-size:10px; }
.connection { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:20px; padding:6px 10px; font-size:10px; color:#b5c1b8; white-space:nowrap; }
main { max-width:1640px; margin:0 auto; padding:16px 22px 12px; display:flex; flex-direction:column; gap:12px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:34px; flex-shrink:0; }
.eyebrow,.subtitle { display:none; }
h1 { font-size:23px; letter-spacing:-.6px; font-weight:650; margin:0; line-height:1.4; }
.title-dot { color:var(--accent); margin-left:4px; }
.platform-badge { font-family:Consolas,monospace; letter-spacing:1px; color:#95a18f; font-size:9px; border:1px solid #35402f; padding:7px 10px; border-radius:4px; white-space:nowrap; }
.platform-badge span { color:var(--accent); margin-left:10px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:start; gap:16px; min-width:0; }
.panel { border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; min-width:0; }
.panel-heading { min-height:46px; flex-shrink:0; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; }
.panel-heading>div { display:flex; align-items:center; gap:9px; }
.section-index { font-size:10px; color:#8a987f; border:1px solid #394332; border-radius:4px; padding:2px 5px; font-family:Consolas,monospace; }
h2 { font-size:13px; font-weight:600; margin:0; letter-spacing:.2px; }
.text-button { background:none; border:0; color:#a9b69f; font-size:11px; padding:4px 0; white-space:nowrap; }
.text-button:hover { color:var(--accent); }
.input-panel { display:flex; flex-direction:column; min-height:0; }
.mode-switch { display:flex; flex-shrink:0; background:#111515; border:1px solid #2a302c; border-radius:7px; padding:3px; margin:10px 16px; }
.mode { flex:1; border:0; background:none; border-radius:4px; padding:7px 5px; font-size:11px; color:#8e9992; white-space:nowrap; }
.mode.active { background:#303b27; color:var(--accent); font-weight:600; }
#request-form { display:flex; flex-direction:column; flex:1; min-height:0; margin:0; }
.form-fields { padding:0 16px 8px; }
.setup-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-bottom:12px; align-items:end; }
.setup-row>.field { margin-bottom:0; }
.device-field>label { min-height:20px; display:flex; align-items:center; }
.device-field .field-note { display:none; }
.field { margin-bottom:12px; min-width:0; }
.field label,.field-label { display:block; font-size:11px; font-weight:500; color:#d8dfd9; margin-bottom:6px; }
.required { color:var(--accent); margin-left:3px; }
.label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:20px; margin-bottom:6px; }
.label-row label,.label-row .field-label { margin-bottom:0; }
.label-row>.text-button { padding:0; font-size:10px; }
.field-tag { font-size:9px; color:#818e84; font-family:Consolas,monospace; letter-spacing:.5px; white-space:nowrap; }
.field-note { font-size:10px; color:#89958d; line-height:1.7; margin:7px 0 0; }
.mono,pre { font-family:"Cascadia Code",Consolas,"SFMono-Regular",monospace; font-size:11px; line-height:1.6; }
input,textarea,select { background:#121616; color:#d5ded5; border:1px solid #343d36; border-radius:6px; width:100%; min-width:0; padding:8px 10px; }
input,select { height:35px; }
input::placeholder,textarea::placeholder { color:#627168; opacity:1; font-size:11px; }
textarea { resize:vertical; min-height:52px; vertical-align:top; }
#pssh { height:56px; min-height:48px; }
select { appearance:auto; color:#bcc8bd; font-size:11px; }
input:focus,textarea:focus,select:focus { outline:0; border-color:#94bc55; box-shadow:0 0 0 3px #c7f8720c; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input[type=file] { height:auto; font-size:10px; padding:6px; }
input[type=file]::file-selector-button { background:#2c3728; color:#c6d7ba; border:0; border-radius:3px; padding:5px 8px; margin-right:8px; font-size:10px; }
.profile-section { min-width:0; }
.header-rows { display:grid; gap:8px; }
.header-row { display:grid; grid-template-columns:minmax(125px,.8fr) minmax(0,1.25fr) 22px; gap:8px; background:#121713; border:1px solid #343f30; border-radius:6px; padding:8px; }
.header-name-box { grid-column:1; grid-row:1; min-width:0; }
.header-value-box { grid-column:2; grid-row:1; min-width:0; }
.header-row label { font-size:9px; color:#aebca5; margin-bottom:5px; }
.header-row input { font-size:11px; }
.header-row input[readonly] { color:#b6d59d; border-color:#3d4d33; }
.header-value-input { display:flex; align-items:stretch; height:35px; border:1px solid #343d36; border-radius:6px; background:#121616; }
.header-value-input:focus-within { border-color:#94bc55; }
.header-value-input>input { height:33px; flex:1; border:0; background:none; }
.header-value-input>input:focus { box-shadow:none; }
.header-reveal { flex-shrink:0; padding:0 8px; font-size:10px; }
.header-remove { grid-column:3; grid-row:1; align-self:end; height:35px; font-size:20px; }
.headers-json { margin-top:9px; font-size:10px; color:#a0b090; }
.headers-json summary { cursor:pointer; padding:2px 0; }
.headers-json[open] summary { margin-bottom:8px; }
.headers-json textarea { margin-bottom:5px; }
.advanced { border-top:1px solid var(--line); margin:0; }
.advanced summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0 2px; cursor:pointer; color:#b4bfb7; font-size:11px; }
.advanced summary::-webkit-details-marker,.info-card summary::-webkit-details-marker { display:none; }
.chevron { color:#809278; font-size:15px; }
.advanced[open] .chevron,.info-card[open] .chevron { transform:rotate(180deg); }
.advanced-body { padding-top:14px; }
.field-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.field-row .field { margin-bottom:12px; }
.request-actions { flex-shrink:0; border-top:1px solid var(--line); padding:10px 16px; background:var(--surface); }
.button { border:1px solid transparent; border-radius:6px; padding:9px 14px; font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:36px; white-space:nowrap; flex-shrink:0; }
.primary { background:var(--accent); color:#223016; }
.primary:hover { background:#d5ff91; }
.secondary { background:#232c20; color:#c6d4bd; border-color:#3b4a32; }
.secondary:hover { border-color:#8da870; }
.submit { width:100%; justify-content:space-between; height:40px; font-size:12px; }
#submit-arrow { font-size:20px; font-weight:400; }
.submit-note { text-align:center; font-size:9px; color:#73816e; margin:6px 0 0; line-height:1.4; }
.result-column { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px; min-width:0; min-height:0; }
.result-panel { display:flex; flex-direction:column; min-height:0; }
.status-pill { border:1px solid #384133; border-radius:20px; background:#242b21; padding:4px 8px; font-size:9px; color:#9aaa8c; white-space:nowrap; }
.status-pill.success { color:var(--accent); border-color:#4b6234; }
.status-pill.error { color:var(--danger); border-color:#6c403b; background:#33231f; }
.empty-state { min-height:340px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:28px 18px; }
.empty-illustration { width:88px; height:88px; position:relative; margin:0 0 24px; display:grid; place-items:center; flex-shrink:0; }
.orbit { position:absolute; inset:0; border:1px dashed #49583d; border-radius:50%; transform:rotate(-20deg); }
.empty-illustration:before { content:""; position:absolute; inset:13px; background:#222b20; border:1px solid #3a4731; border-radius:50%; }
.key-symbol { z-index:1; color:var(--accent); font-family:"Segoe UI Symbol",sans-serif; font-size:40px; line-height:1; transform:rotate(-30deg); }
.orbit-dot { position:absolute; right:3px; top:18px; width:7px; height:7px; background:var(--accent); border:2px solid #4b6437; border-radius:50%; box-shadow:0 0 0 4px #1e271b; }
.empty-state h3 { font-size:14px; font-weight:500; margin:0 0 10px; letter-spacing:.3px; }
.empty-state p { font-size:11px; color:#88958b; text-align:center; line-height:1.8; margin:0; }
.empty-tags { display:flex; gap:9px; align-items:center; margin-top:22px; }
.empty-tags span { font-family:Consolas,monospace; font-size:9px; letter-spacing:1px; padding:4px 7px; background:#1f2520; border:1px solid #313c2e; border-radius:4px; color:#9aad8d; }
.empty-tags .tag-arrow { border:0; background:none; color:#6b7d61; padding:0; }
.info-card { border:1px solid #333e2c; border-radius:8px; background:#1c2319; min-width:0; }
.info-card summary { display:flex; align-items:center; gap:9px; list-style:none; cursor:pointer; padding:11px 14px; color:#b9c9ac; font-size:10px; }
.info-card summary .chevron { margin-left:auto; }
.info-icon { display:grid; place-items:center; flex-shrink:0; border:1px solid #657c4d; border-radius:50%; width:14px; height:14px; font-family:Georgia,serif; font-size:10px; color:var(--accent); }
.info-card p { margin:0; padding:0 14px 12px; color:#8b9c7f; font-size:10px; line-height:1.8; }
.result-body { padding:16px; min-height:0; }
.result-summary { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:12px; }
.result-summary strong { font-weight:500; }
.result-summary>span:last-child { margin-left:auto; font-size:10px; color:#8a9d7e; white-space:nowrap; }
.key-list { margin:0; background:#121713; border:1px solid #364430; border-radius:7px; padding:12px; min-width:0; max-width:100%; font-family:Consolas,monospace; font-size:12px; color:#c5d8b9; line-height:1.9; white-space:pre; overflow-x:auto; }
.key-list:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.output-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:14px; }
.command-details { border-top:1px solid var(--line); margin-top:18px; padding-top:13px; }
.command-details summary { font-size:11px; color:#afc19f; cursor:pointer; }
.command-details pre { background:#111610; padding:10px; border:1px solid #303b29; border-radius:5px; white-space:pre-wrap; word-break:break-all; color:#aec798; }
.error-box { margin:16px; padding:14px; border:1px solid #71423a; background:#30211e; border-radius:7px; }
.error-box strong { color:#ffc0b3; font-size:12px; }
.error-box p { color:#d6afa3; font-size:11px; line-height:1.8; overflow-wrap:anywhere; margin:8px 0; }
.error-box code { color:#ab7e70; font-size:10px; overflow-wrap:anywhere; }
#license-form { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
#license-form>.text-button { margin-left:14px; }
.output { color:#a9c294; }
#challenge-result>.field-note { margin-bottom:12px; }
#challenge-output { height:78px; }
#license-input { height:68px; }
footer { display:flex; justify-content:space-between; gap:12px; flex-shrink:0; border-top:1px solid var(--line); padding:8px 0 0; font-size:9px; line-height:1.4; color:#78877c; }
.footer-separator { color:#4b5a4d; margin:0 6px; }
.auth-panel { border:1px solid #546842; border-radius:8px; background:#222c1e; padding:11px 15px; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); align-items:center; gap:16px; flex-shrink:0; }
.auth-panel h2 { font-size:12px; color:#d9f2bb; }
.auth-panel p { font-size:10px; line-height:1.6; color:#a0b68c; margin:5px 0 0; }
#auth-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; margin:0; }
#auth-form input { font-size:12px; min-width:0; }
#auth-form button { min-width:106px; white-space:nowrap; flex-shrink:0; }
.profile-dialog { position:fixed; inset:0; margin:auto; width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:0; color:var(--text); background:var(--surface); border:1px solid #4c603a; border-radius:12px; box-shadow:0 24px 90px #0009; }
.profile-dialog[open] { display:flex; flex-direction:column; }
.profile-dialog::backdrop { background:#070b07b3; backdrop-filter:blur(3px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
.dialog-heading h2 { font-size:15px; }
.dialog-close { font-size:25px; padding:0 4px; line-height:1; }
.dialog-body { padding:18px 20px; overflow:auto; min-height:0; }
.dialog-body>#profile-note { margin:0 0 18px; }
.dialog-body .field { margin-bottom:16px; }
.dialog-error { margin:0 0 14px; border:1px solid #71423a; border-radius:6px; padding:10px 12px; color:#ffc0b3; background:#30211e; font-size:11px; line-height:1.7; }
.checkbox-label { display:flex; align-items:center; gap:8px; color:#b8c7ad; font-size:11px; }
.checkbox-label input { width:15px; height:15px; margin:0; accent-color:var(--accent); }
.dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; border-top:1px solid var(--line); flex-shrink:0; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); border:1px solid #627b47; border-radius:7px; background:#2b3a21; color:#dcf7c0; font-size:12px; padding:12px 20px; box-shadow:0 8px 35px #0005; z-index:20; max-width:90vw; text-align:center; }
.spinner { height:17px; width:17px; border:2px solid #6f944a; border-top-color:#24371b; border-radius:50%; animation:spin .7s linear infinite; }
.manual-mode .auto-only { display:none!important; }
.manual-mode .setup-row { grid-template-columns:1fr; }
.sr-only,.clipboard-helper { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.clipboard-helper { top:0; left:0; }
.busy { cursor:progress; }
@keyframes spin { to { transform:rotate(360deg); } }

/* A desktop workspace uses the viewport; expanded fields and long results scroll inside their panel. */
@media (min-width:960px) and (min-height:700px) {
  body { overflow:hidden; }
  main { height:calc(100dvh - 52px); }
  .workspace-grid { flex:1; min-height:0; align-items:stretch; }
  .form-fields { flex:1; min-height:0; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; }
  .result-column { height:100%; }
  .result-body { flex:1; overflow:auto; overscroll-behavior:contain; }
  .empty-state { flex:1; min-height:0; }
}
@media (max-width:1180px) {
  .sidebar { width:72px; align-items:center; padding:22px 12px; }
  .brand>span:last-child,.nav-label,.sidebar-note,.nav-current,.sidebar-bottom { display:none; }
  .main-shell { margin-left:72px; }
  main { padding-left:18px; padding-right:18px; }
  .topbar { padding-left:18px; padding-right:18px; }
}
@media (min-width:960px) and (min-height:700px) and (max-height:800px) {
  .topbar { height:46px; }
  main { height:calc(100dvh - 46px); padding-top:12px; padding-bottom:8px; gap:10px; }
  h1 { font-size:21px; }
  .page-heading { min-height:29px; }
  footer { display:none; }
}
@media (max-width:959px),(max-height:699px) {
  main { padding-top:18px; }
  .result-column { align-self:start; }
  .platform-badge { font-size:8px; }
  .auth-panel { grid-template-columns:1fr; gap:10px; }
}
@media (max-width:820px) {
  .sidebar { display:none; }
  .main-shell { margin-left:0; }
  .topbar { height:48px; padding:0 16px; }
  main { padding:16px 14px; gap:14px; }
  .workspace-grid { grid-template-columns:1fr; gap:14px; }
  h1 { font-size:23px; }
  .platform-badge { display:none; }
  .empty-state { min-height:270px; }
  .result-column { width:100%; }
  .form-fields { padding-bottom:12px; }
  .auth-panel { padding:13px; }
  footer { flex-wrap:wrap; gap:8px; }
}
@media (max-width:480px) {
  .topbar { font-size:10px; padding:0 12px; }
  .topbar strong { margin-left:3px; }
  .topbar-actions { gap:8px; }
  .topbar-actions>.text-button { font-size:9px; }
  .connection { font-size:9px; padding:5px 7px; gap:5px; }
  main { padding:14px 10px; }
  h1 { font-size:22px; }
  .panel-heading { padding:0 13px; }
  .mode-switch { margin-left:13px; margin-right:13px; }
  .form-fields { padding-left:13px; padding-right:13px; }
  .setup-row { gap:9px; }
  .header-row { grid-template-columns:minmax(0,1fr) 22px; }
  .header-name-box { grid-column:1; }
  .header-value-box { grid-column:1/-1; grid-row:2; }
  .header-remove { grid-column:2; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .result-body { padding:13px; }
  .result-summary { font-size:11px; }
  .result-summary>span:last-child { font-size:9px; }
  #auth-form button { min-width:102px; padding-left:11px; padding-right:11px; }
  .dialog-heading,.dialog-actions { padding:14px 16px; }
  .dialog-body { padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none!important; transition:none!important; }
}