/* ============================================================
   PDS Precision Cockpit
   仅重塑配置页。所有规则都挂在 device-connected 下，连接页保持原样。
   目标是连续的仪器面，而不是在网格里堆一组彼此独立的卡片。
   ============================================================ */

body.device-connected{overflow-x:hidden}

body.device-connected .topbar{
  height:76px;padding:0 30px;
  background:color-mix(in srgb,var(--glass-2) 84%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
}
body.device-connected .brand{gap:12px;font-size:19px;letter-spacing:.015em}
body.device-connected .brandmark{width:40px;height:40px;border-radius:10px;font-size:17px}
body.device-connected .brand small{margin-left:10px;padding-left:18px;border-left:1px solid var(--line-hi)}
body.device-connected .connection{font-size:13px}
body.device-connected .outline-button{padding:10px 16px}

body.device-connected .app-shell{
  position:relative;max-width:none;min-height:calc(100vh - 76px);
  margin:0;padding:0 0 68px;
}

/* 档案栏钉在右侧工作区顶部；主标题让位给产品本身。 */
body.device-connected .command-bar{
  position:absolute;z-index:5;top:0;left:200px;right:0;height:68px;
  margin:0;padding:0 40px;align-items:center;justify-content:flex-end;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
body.device-connected .command-bar>div:first-child{display:none}
body.device-connected .profiles{gap:18px}
body.device-connected .profiles>span{font-size:13px}
body.device-connected .profiles>div{gap:10px}
body.device-connected .profiles button{min-width:104px;padding:11px 18px}

body.device-connected .console{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;
  min-height:calc(100vh - 76px - 68px);align-items:stretch;
}

/* 功能轨是整块控制台的骨架。选中态只用一条亮边和一层低对比底。 */
body.device-connected .rail{
  position:relative;top:auto;min-height:100%;padding:40px 0 150px;
  gap:7px;border-right:0;background:color-mix(in srgb,var(--bg) 93%,var(--surface));
}
body.device-connected .rail::after{
  content:"PDS\A为玩家，\A也为专注的你。";white-space:pre;
  position:absolute;left:40px;right:28px;bottom:34px;padding-top:24px;
  border-top:1px solid var(--line);color:var(--muted);
  font:500 12px/1.8 var(--font);letter-spacing:.04em;
}
body.device-connected .rail-item{
  min-height:78px;padding:14px 24px 14px 38px;border-radius:0;
  grid-template-columns:28px minmax(0,1fr);gap:15px;
}
body.device-connected .rail-item i{opacity:.7}
body.device-connected .rail-item svg{width:22px;height:22px}
body.device-connected .rail-item b{font-size:16px}
body.device-connected .rail-item small{font-size:12px;margin-top:5px}
body.device-connected .rail-item[aria-selected=true]{
  background:#17181d;
}
html[data-theme="light"] body.device-connected .rail-item[aria-selected=true]{background:#e7e8ec}
body.device-connected .rail-item[aria-selected=true]::before{
  left:0;top:0;width:4px;height:100%;transform:none;border-radius:0 4px 4px 0;
  box-shadow:0 0 18px rgba(var(--accent-rgb),.55);
}

body.device-connected .stage{
  min-width:0;padding:68px 40px 30px;border-left:1px solid var(--line);
}
body.device-connected .panel-split{
  grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr);
  gap:0;min-height:calc(100vh - 76px - 68px - 98px);
}

/* 产品舞台与参数区共用一张连续底板，只靠发丝线区分。 */
body.device-connected .device-view,
body.device-connected .key-panel{
  border-radius:0;background:transparent;box-shadow:none;
}
body.device-connected .device-view{
  padding:10px 34px 14px 4px;border:0;border-right:1px solid var(--line);
  color:var(--text);overflow:visible;
}
body.device-connected .key-panel{
  padding:10px 0 0 34px;border:0;
}
body.device-connected .device-view::before,
body.device-connected .key-panel::before{display:none}
body.device-connected .device-view .device-heading h2{
  margin-top:6px;color:var(--text);font-size:44px;line-height:1;letter-spacing:-.055em;
}
body.device-connected .device-view .ready-state{color:var(--muted)}
body.device-connected .mouse-canvas{margin:10px 0 12px}
body.device-connected .mouse-frame{height:clamp(390px,51vh,560px)}
body.device-connected .slot-strip{display:none}
body.device-connected .model-switch{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:color-mix(in srgb,var(--well) 76%,transparent);
}
body.device-connected .model-switch button{padding:15px 14px}

body.device-connected .key-panel .section-title{
  align-items:center;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--line);
}
body.device-connected .key-panel .section-title h2{font-size:32px;letter-spacing:-.045em;margin-top:5px}
body.device-connected .key-now{padding:5px 15px 5px 5px}
body.device-connected .key-now b{width:32px;height:32px;font-size:14px}
body.device-connected .key-now i{font-size:14px}
body.device-connected .key-panel-body{
  grid-template-columns:214px minmax(0,1fr);gap:28px;min-height:0;
}
body.device-connected .fn-list{gap:7px;padding-right:20px}
body.device-connected .fn-item{min-height:58px;padding:13px 14px;font-size:15px}
body.device-connected .fn-item svg{width:20px;height:20px}
body.device-connected .fn-item[aria-checked=true]{
  background:#17181d;
}
html[data-theme="light"] body.device-connected .fn-item[aria-checked=true]{background:#e7e8ec}
body.device-connected .fn-item[aria-checked=true]::before{height:28px}
body.device-connected .fn-detail{padding:8px 0 0}
body.device-connected .fn-head h3{font-size:20px}
body.device-connected .fn-head p{font-size:14px;margin-top:10px;line-height:1.75}
body.device-connected .fn-body{margin-top:22px}
body.device-connected .fn-foot{padding:18px 0 16px;font-size:12px}
body.device-connected .key-hint{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* 其余面板仍一次只显示一个，但使用同一块大工作台。 */
body.device-connected .panel-fill{min-height:calc(100vh - 76px - 68px - 98px)}
body.device-connected .panel-fill>.surface{
  min-height:100%;padding:38px;border-radius:0;border-color:var(--line);
  background:color-mix(in srgb,var(--card-base) 72%,transparent);box-shadow:none;
}
body.device-connected .panel-fill .section-title h2,
body.device-connected .firmware-copy h2{font-size:30px;letter-spacing:-.04em}

body.device-connected footer{
  left:200px;height:68px;padding:0 40px;
  background:color-mix(in srgb,var(--glass-2) 88%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
body.device-connected .apply-button{min-width:184px;padding:10px 12px 10px 18px}

/* 这层本来会给每张卡片加聚光和悬停描边。连续工作台不需要卡片跳出来。 */
body.device-connected .device-view.spotlight::before,
body.device-connected .key-panel.spotlight::before{opacity:0!important}
body.device-connected .key-panel:hover,
body.device-connected .key-panel:focus-within{border-color:transparent;box-shadow:none}

@media(max-width:1180px){
  body.device-connected .command-bar{position:relative;left:auto;right:auto;height:auto;padding:22px 24px}
  body.device-connected .console{grid-template-columns:1fr;min-height:auto}
  body.device-connected .rail{
    min-height:0;padding:0 24px 12px;flex-direction:row;overflow-x:auto;
    border-bottom:1px solid var(--line);
  }
  body.device-connected .rail::after{display:none}
  body.device-connected .rail-item{min-height:54px;padding:10px 15px;border-radius:10px;grid-template-columns:auto auto}
  body.device-connected .rail-item[aria-selected=true]::before{
    left:50%;top:auto;bottom:-13px;width:24px;height:3px;transform:translateX(-50%);border-radius:3px 3px 0 0;
  }
  body.device-connected .stage{padding:28px 24px;border-left:0}
  body.device-connected .panel-split{grid-template-columns:1fr;gap:22px;min-height:0}
  body.device-connected .device-view{padding:24px;border:1px solid var(--line);border-radius:var(--r-stage)}
  body.device-connected .key-panel{padding:24px;border:1px solid var(--line);border-radius:var(--r-card)}
  body.device-connected .slot-strip{display:grid}
  body.device-connected footer{left:0;padding:0 24px}
}

@media(max-width:760px){
  body.device-connected .topbar{height:64px;padding:0 14px}
  body.device-connected .brandmark{width:34px;height:34px}
  body.device-connected .command-bar{padding:16px 14px}
  body.device-connected .profiles{display:block;width:100%}
  body.device-connected .profiles>div{gap:5px}
  body.device-connected .profiles button{min-width:0;padding:9px 7px}
  body.device-connected .rail{padding-left:14px;padding-right:14px}
  body.device-connected .rail-item{min-height:46px;padding:9px 12px}
  body.device-connected .rail-item svg{width:18px;height:18px}
  body.device-connected .stage{padding:18px 14px 24px}
  body.device-connected .device-view,body.device-connected .key-panel{padding:18px}
  body.device-connected .mouse-frame{height:clamp(270px,50vh,390px)}
  body.device-connected .key-panel .section-title h2{font-size:25px}
  body.device-connected .key-panel-body{grid-template-columns:1fr;gap:16px}
  body.device-connected .fn-list{padding-right:0}
  body.device-connected .fn-item[aria-checked=true]::before{
    left:50%;top:auto;bottom:0;width:18px;height:2px;transform:translateX(-50%);
  }
  body.device-connected footer{
    position:relative;left:auto;right:auto;bottom:auto;height:70px;padding:0 14px;
    border-top:1px solid var(--line);
  }
}