/* ============================================================
   版式系统：版式A 悬浮工作台(dock) / 版式B 顶部指挥舱(cockpit)
   两套信息架构均区别于传统「侧栏+标签页」后台
   ============================================================ */

/* ---------- 版式A：悬浮工作台 ---------- */
body[data-layout="dock"] .layout{padding:14px;gap:14px}
body[data-layout="dock"] .sidebar{top:14px;height:calc(100vh - 28px);border-radius:24px;border:1px solid var(--c-border);box-shadow:var(--sh-card)}
body[data-layout="dock"] .topbar{top:14px;margin-bottom:2px;height:54px;border-radius:20px;border:1px solid var(--c-border);box-shadow:var(--sh-card);padding:0 16px}
body[data-layout="dock"] .tabsbar{display:none}
body[data-layout="dock"] .content{padding:18px 6px 30px}
body[data-layout="dock"] .sb-item{border-radius:12px;margin:3px 2px}
body[data-layout="dock"] .sb-group>b{border-radius:12px}
body[data-layout="dock"] .stat-card,body[data-layout="dock"] .card,body[data-layout="dock"] .modal{border-radius:calc(var(--r-card) + 6px)}
body[data-layout="dock"] .page-title{font-size:22px;letter-spacing:.3px}
body[data-layout="dock"] .page-head{margin-bottom:18px}

/* ---------- 版式B：顶部指挥舱 ---------- */
body[data-layout="cockpit"] .sidebar{display:none}
body[data-layout="cockpit"] .layout{display:block}
body[data-layout="cockpit"] .topbar{height:60px;padding:0 24px;gap:10px}
body[data-layout="cockpit"] #sb-toggle{display:none}
body[data-layout="cockpit"] .tabsbar{display:none}
body[data-layout="cockpit"] .main{min-height:100vh}

.cockpit-nav{display:flex;align-items:center;gap:2px;margin:0 8px;flex:1;min-width:0;overflow:visible}
.cockpit-nav .cn{position:relative;display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:10px;font-size:13.5px;color:var(--c-text-2);cursor:pointer;white-space:nowrap;user-select:none}
.cockpit-nav .cn:hover{background:var(--c-surface-2);color:var(--c-text)}
.cockpit-nav .cn.active{color:var(--c-primary-text);font-weight:600;background:var(--c-primary-soft)}
.cockpit-nav .cg{position:relative}
.cockpit-nav .cg.on>.cn{color:var(--c-primary-text);font-weight:600;background:var(--c-primary-soft)}
.cockpit-nav .drop{position:absolute;left:0;top:calc(100% + 6px);min-width:196px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;box-shadow:var(--sh-hover);padding:6px;display:none;z-index:120}
.cockpit-nav .cg:hover .drop,.cockpit-nav .cg.open .drop{display:block}
.cockpit-nav .drop a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;font-size:13px;color:var(--c-text);cursor:pointer;white-space:nowrap}
.cockpit-nav .drop a:hover{background:var(--c-surface-2)}
.cockpit-nav .drop a.on{background:var(--c-primary-soft);color:var(--c-primary-text);font-weight:600}

.subnav{display:none;align-items:center;gap:6px;padding:10px 24px;border-bottom:1px solid var(--c-border);background:var(--c-surface);overflow-x:auto;flex:none}
body[data-layout="cockpit"] .subnav.on{display:flex}
.subnav a{padding:6px 14px;border-radius:980px;font-size:13px;color:var(--c-text-2);white-space:nowrap;cursor:pointer}
.subnav a:hover{background:var(--c-surface-2)}
.subnav a.on{background:var(--c-primary);color:var(--c-on-primary);font-weight:600}

body[data-layout="cockpit"] .content{max-width:1500px;margin:0 auto;width:100%;padding:20px 24px 30px}
body[data-layout="cockpit"] .page-title{font-size:21px}

/* ---------- 版式切换器 ---------- */
.layout-switch{display:flex;gap:2px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:980px;padding:3px}
.layout-switch button{border:0;background:transparent;font-family:var(--f);font-size:12px;padding:4px 10px;border-radius:980px;cursor:pointer;color:var(--c-text-2);transition:all .2s}
.layout-switch button.on{background:var(--c-surface);color:var(--c-text);font-weight:600;box-shadow:0 1px 6px rgba(0,0,0,.12)}

/* ---------- 选版页 ---------- */
.choose-wrap{min-height:100vh;padding:52px 24px 60px;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(900px 420px at 12% 0%,var(--c-primary-soft),transparent 55%),transparent}
.choose-title{font-size:30px;font-weight:800;letter-spacing:1px;text-align:center}
.choose-sub{color:var(--c-text-3);font-size:13.5px;margin:10px 0 8px;text-align:center}
.choose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px;max-width:1120px;width:100%;margin-top:26px}
.choose-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:22px;box-shadow:var(--sh-card);padding:18px 18px 20px;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative}
.choose-card:hover{transform:translateY(-5px);box-shadow:var(--sh-hover);border-color:var(--c-primary)}
.choose-card .pick{position:absolute;right:16px;top:16px;font-size:11px;padding:3px 10px;border-radius:980px;background:var(--c-primary-soft);color:var(--c-primary-text);font-weight:600}
.choose-card h3{font-size:16.5px;margin:14px 2px 4px}
.choose-card p{font-size:12.5px;color:var(--c-text-3);margin:0 2px;line-height:1.7}
.choose-thumb{height:158px;border-radius:14px;overflow:hidden;border:1px solid var(--c-border);position:relative}
.choose-thumb i{position:absolute;display:block;border-radius:3px}
.choose-go{margin-top:14px;width:100%}
.choose-back{margin-top:26px;font-size:13px;color:var(--c-text-3);cursor:pointer}
.choose-back:hover{color:var(--c-primary-text)}