/* ============================================================
 * 排版整改 切片 I7 —— 设置页强化（M10 全局设置中心，settings.html）
 * 只增量挂接：不改 workbench.html / style.css / 既有 js / 其他 rectify_*
 * 颜色全部复用既有 hex / rgba 派生（浅蓝白体系），零深色引入
 * 复用：v10-card / v10-btn / v10-inp / v10-chip / v10-mask / v10-modal（v10_common.injectTheme）
 * ============================================================ */

/* ---------- 骨架屏（21 骨架：浅蓝呼吸块） ---------- */
.i7-skeleton{position:fixed;inset:0;background:linear-gradient(165deg,#e6f4ff 0%,#DEEBFB 45%,#CEE2F8 100%);z-index:200;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease;}
.i7-skeleton.i7-hide{opacity:0;pointer-events:none;}
.i7-sk-box{width:min(920px,92vw);}
.i7-sk-line{height:16px;border-radius:8px;background:rgba(56,189,248,.18);margin-bottom:14px;animation:i7Breath 1.1s ease-in-out infinite;}
.i7-sk-line.i7-sk-w60{width:60%;}
.i7-sk-line.i7-sk-w40{width:40%;}
.i7-sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px;}
.i7-sk-card{height:150px;border-radius:16px;background:rgba(56,189,248,.14);animation:i7Breath 1.1s ease-in-out infinite;}
@keyframes i7Breath{0%,100%{opacity:.55;}50%{opacity:1;}}

/* ---------- 分组折叠卡片（21 折叠组件：箭头统一 + 本地记忆） ---------- */
.i7-group{margin-bottom:16px;overflow:hidden;}
.i7-group-head{
  display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  padding:4px 4px;
}
.i7-group-head .i7-arrow{
  flex:none;width:22px;height:22px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(56,189,248,.14);color:#1d2129;font-size:12px;transition:transform .2s ease;
}
.i7-group.i7-collapsed .i7-arrow{transform:rotate(-90deg);}
.i7-group-head .i7-gtitle{font-size:16px;font-weight:600;flex:1;}
.i7-group-head .i7-gtip{font-size:12px;color:#606266;}
.i7-group-body{padding-top:12px;}
.i7-group.i7-collapsed .i7-group-body{display:none;}

/* ---------- 设置行（label + 控件两端对齐） ---------- */
.i7-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed #f5f7fa;}
.i7-row:last-child{border-bottom:0;}
.i7-row .i7-row-lab{font-size:14px;color:#303133;}
.i7-row .i7-row-sub{display:block;font-size:12px;color:#606266;margin-top:2px;}
.i7-row .i7-ctl{flex:none;display:flex;align-items:center;gap:8px;}

/* ---------- 全局 Toggle（复刻 byok-toggle 视觉，浅蓝体系） ---------- */
.i7-toggle{position:relative;display:inline-block;width:40px;height:22px;flex:none;}
.i7-toggle input{opacity:0;width:0;height:0;position:absolute;}
.i7-toggle .i7-tk{
  position:absolute;inset:0;border-radius:999px;background:#D8E4F2;cursor:pointer;transition:background .18s ease;
}
.i7-toggle .i7-tk::before{
  content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:999px;background:#fff;
  box-shadow:0 1px 3px rgba(79,100,130,.25);transition:transform .18s ease;
}
.i7-toggle input:checked + .i7-tk{background:linear-gradient(90deg,#38BDF8,#38BDF8);}
.i7-toggle input:checked + .i7-tk::before{transform:translateX(18px);}
.i7-toggle input:focus-visible + .i7-tk{box-shadow:0 0 0 3px rgba(56,189,248,.25);}

/* ---------- Range 滑块（缩放速度 / 间距） ---------- */
.i7-range{width:170px;accent-color:#0958d9;cursor:pointer;}
.i7-range-val{font-size:13px;color:#1d2129;min-width:46px;text-align:right;font-variant-numeric:tabular-nums;}
.i7-num{width:84px;padding:7px 10px;border:1px solid #f5f7fa;border-radius:12px;font-size:13px;outline:none;background:#ffffff;}
.i7-num:focus{border-color:#38BDF8;box-shadow:0 0 0 3px rgba(56,189,248,.15);}

/* ---------- 分段选择（语速预设：快/标准/慢） ---------- */
.i7-seg{display:inline-flex;background:#e6f4ff;border-radius:12px;padding:3px;gap:2px;}
.i7-seg button{
  border:0;background:transparent;padding:6px 14px;border-radius:8px;font-size:13px;cursor:pointer;color:#606266;transition:all .15s;
}
.i7-seg button.i7-on{background:#fff;color:#1d2129;font-weight:600;box-shadow:0 1px 3px rgba(79,100,130,.12);}

/* ---------- 导出字段 chips 区（复用 v10-chip） ---------- */
.i7-chips{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- 操作条（保存 / 恢复默认） ---------- */
.i7-actionbar{
  position:sticky;bottom:0;margin-top:8px;padding:14px 18px;border-radius:16px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(56,189,248,.18);box-shadow:0 6px 22px rgba(29,33,41,.10);
  display:flex;align-items:center;gap:12px;
}
.i7-actionbar .i7-dirty-hint{flex:1;font-size:13px;color:#606266;}
.i7-btn-disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3);}
.i7-btn-disabled:hover{filter:grayscale(.3);}

/* ---------- 安全分组说明 ---------- */
.i7-sec-note{font-size:13px;color:#606266;line-height:1.9;}
.i7-sec-note b{color:#303133;}
.i7-key-badge{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;background:#e6f4ff;color:#1d2129;border-radius:8px;padding:2px 8px;font-size:12px;}

/* ---------- 快捷键总表弹窗（复用 v10-mask/v10-modal 三区：头/体/脚） ---------- */
.i7-kb-modal{width:min(760px,94vw);max-height:84vh;display:flex;flex-direction:column;}
.i7-kb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.i7-kb-head h3{font-size:16px;}
.i7-kb-x{border:0;background:#e6f4ff;color:#606266;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;}
.i7-kb-x:hover{background:#DFEBF9;color:#1d2129;}
.i7-kb-body{overflow-y:auto;flex:1;padding-right:4px;}
.i7-kb-group-title{font-size:13px;font-weight:700;color:#1d2129;margin:14px 0 6px;}
.i7-kb-group-title:first-child{margin-top:0;}
.i7-kb-table{width:100%;border-collapse:collapse;font-size:13px;}
.i7-kb-table td{padding:6px 8px;border-bottom:1px dashed #f5f7fa;}
.i7-kb-table td:first-child{color:#606266;width:38%;}
.i7-kb-key{
  display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  background:#e6f4ff;border:1px solid #D8E4F2;border-bottom-width:2px;border-radius:8px;padding:1px 7px;color:#1d2129;
}
.i7-kb-foot{margin-top:12px;display:flex;justify-content:flex-end;}

/* ---------- 高危确认弹窗（25 号） ---------- */
.i7-confirm-modal{width:min(400px,92vw);}
.i7-confirm-modal .i7-cf-title{font-size:16px;font-weight:700;color:#f53f3f;margin-bottom:8px;}
.i7-confirm-modal .i7-cf-msg{font-size:14px;color:#303133;line-height:1.8;}
.i7-confirm-modal .i7-cf-btns{margin-top:18px;display:flex;justify-content:flex-end;gap:10px;}

/* ---------- Toast（自包含，本页无全局 toast） ---------- */
.i7-toast-wrap{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;}
.i7-toast{
  background:#fff;border:1px solid rgba(56,189,248,.25);border-radius:12px;padding:9px 16px;font-size:14px;
  box-shadow:0 10px 30px rgba(60,100,160,.18);display:flex;align-items:center;gap:8px;animation:i7ToastIn .2s ease;
}
.i7-toast.i7-ok{color:#1d2129;}
.i7-toast.i7-warn{color:#ff7d00;}
.i7-toast.i7-err{color:#f53f3f;}
@keyframes i7ToastIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

@media (max-width:860px){
  .i7-sk-grid{grid-template-columns:1fr;}
}