/* Portal 统一视觉：CSS 状态点 + chip + 按钮（不依赖 emoji）。 */
/* V1 基础层（DEV-V1-A）：仅新页面依赖；旧页面有各自内联样式且加载顺序在后，不受影响。 */
:root { --bg:#f6f7f9; --card:#fff; --ink:#1a1a1a; --muted:#666; --line:#e5e7eb; --accent:#2563eb; --ok:#16a34a; --bad:#dc2626; --warn:#d97706; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; font-size:14px; }

.pchip { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:12px; font-size:12px; white-space:nowrap; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; }
.pchip-ready { background:#dcfce7; color:#15803d; } .dot-ready { background:#16a34a; }
.pchip-proc { background:#fef3c7; color:#b45309; } .dot-proc { background:#f59e0b; }
.pchip-fail { background:#fee2e2; color:#b91c1c; } .dot-fail { background:#dc2626; }
.pchip-none { background:#f1f5f9; color:#64748b; } .dot-none { background:#cbd5e1; }

.pbtn { background:#2563eb; color:#fff; border:none; padding:5px 12px; border-radius:6px; cursor:pointer; font-size:12px; margin:2px 4px 2px 0; white-space:nowrap; }
.pbtn:hover { background:#1d4ed8; }
.pbtn:disabled { opacity:.45; cursor:not-allowed; }
.pbtn-green { background:#16a34a; } .pbtn-green:hover { background:#15803d; }
.pbtn-red { background:#dc2626; } .pbtn-red:hover { background:#b91c1c; }
.pbtn-warn { background:#d97706; } .pbtn-warn:hover { background:#b45309; }
.pbtn-ghost { background:#fff; color:#2563eb; border:1px solid #c7d2fe; }
.pbtn-ghost:hover { background:#eef2ff; }
.muted { color:#666; font-size:13px; }

.global-nav { display:flex; flex-wrap:wrap; gap:4px; }
.global-nav a { color:#666; text-decoration:none; margin-right:16px; font-size:14px; }
.global-nav a.active { color:#2563eb; font-weight:600; }

/* ============================================================
 * V1（DEV-V1-A）设计 token 与共享组件样式
 * 阶段色（15_STATES 冻结）：蓝=待用户动作 橙=进行中 绿=可推进 红=需要处理 灰=中性
 * ============================================================ */
:root {
  --stage-blue: #1F6FEB;
  --stage-orange: #B25E09;
  --stage-green: #0A6E4C;
  --stage-red: #B02A22;
  --stage-neutral: #6B7280;
  --surface-2: #f8fafc;
}
.v1-header { background:var(--card); border-bottom:1px solid var(--line); padding:14px 24px; display:flex; align-items:center; gap:20px; }
.v1-header h1.brand { font-size:17px; letter-spacing:.5px; }
.v1-main { max-width:1020px; margin:22px auto; padding:0 16px; }
.v1-card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:16px; }
.v1-h2 { font-size:16px; margin-bottom:10px; }
.v1-muted { color:var(--muted); font-size:13px; }
.stage-chip { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:10px; font-size:12px; background:#f1f5f9; color:var(--stage-neutral); }
.stage-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--stage-neutral); }
.stage-chip.tone-ready { background:#e7f5ef; color:var(--stage-blue); } .stage-chip.tone-ready .dot { background:var(--stage-blue); }
.stage-chip.tone-done { background:#e7f5ef; color:var(--stage-green); } .stage-chip.tone-done .dot { background:var(--stage-green); }
.stage-chip.tone-proc { background:#fdf1e3; color:var(--stage-orange); } .stage-chip.tone-proc .dot { background:var(--stage-orange); }
.stage-chip.tone-fail { background:#fdecea; color:var(--stage-red); } .stage-chip.tone-fail .dot { background:var(--stage-red); }
.steps4 { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.steps4 .step { padding:3px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); }
.steps4 .step.on { background:#eef4ff; border-color:#bcd3fb; color:var(--stage-blue); font-weight:600; }
.btn { display:inline-block; padding:7px 16px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:13px; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:disabled, .btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-danger { background:var(--stage-red); border-color:var(--stage-red); color:#fff; }
.row-card { display:flex; justify-content:space-between; align-items:center; gap:14px; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px; background:#fff; }
.row-main { min-width:0; }
.row-title { font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px; }
.row-meta { font-size:12px; color:var(--muted); margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row-side { text-align:right; flex-shrink:0; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.v1-field { margin-bottom:12px; }
.v1-field label { display:block; font-size:13px; color:var(--muted); margin-bottom:5px; }
.v1-input, .v1-textarea, .v1-select { width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; box-sizing:border-box; }
.v1-textarea { min-height:70px; resize:vertical; }
.v1-skeleton { background:linear-gradient(90deg,#f1f5f9 25%,#e9eef5 50%,#f1f5f9 75%); background-size:200% 100%; animation:v1sk 1.2s infinite; border-radius:8px; height:14px; margin-bottom:10px; }
@keyframes v1sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.v1-empty { text-align:center; padding:46px 16px; color:var(--muted); }
.v1-empty .big { font-size:34px; margin-bottom:10px; }
.v1-modal-mask { position:fixed; inset:0; background:rgba(15,23,42,.42); display:none; align-items:flex-start; justify-content:center; z-index:1000; padding:56px 16px; overflow:auto; }
.v1-modal-mask.show { display:flex; }
.v1-modal { background:#fff; border-radius:12px; padding:20px 24px; width:100%; max-width:560px; box-shadow:0 12px 32px rgba(15,23,42,.18); }
.v1-drawer-mask { position:fixed; inset:0; background:rgba(15,23,42,.35); display:none; z-index:1001; }
.v1-drawer-mask.show { display:block; }
.v1-drawer { position:fixed; top:0; right:-520px; width:480px; max-width:92vw; height:100%; background:#fff; z-index:1002; box-shadow:-8px 0 28px rgba(15,23,42,.16); transition:right .18s ease; padding:20px 22px; overflow:auto; box-sizing:border-box; }
.v1-drawer.show { right:0; }
.diff-line { border-top:1px dashed var(--line); padding:10px 2px; }
.diff-line .fname { font-size:13px; font-weight:600; margin-bottom:4px; }
.diff-line .was, .diff-line .now { font-size:13px; margin:2px 0; word-break:break-all; }
.diff-line .was { color:var(--muted); text-decoration:line-through; }
.diff-line .now { color:var(--stage-green); }
.avatar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.avatar-card { border:1.5px solid var(--line); border-radius:10px; padding:10px; text-align:center; cursor:pointer; font-size:13px; }
.avatar-card.checked { border-color:var(--accent); background:#eff6ff; color:var(--accent); font-weight:600; }
.radio-item { display:flex; gap:8px; align-items:flex-start; padding:7px 4px; font-size:14px; }

/* ============================================================
 * 设置页二级 Tab（B1R2 §十）——真实 Tab 组件，非「裸链接」
 *  卡片容器 + 分段式 Tab：active / hover / 统一间距 / 移动端可横滑
 * 「素材存储」由 /settings?tab=storage 深链直达（旧 URL /tenant-storage 307 跳转）
 * ============================================================ */
.settings-tabbar { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px; margin-bottom:18px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.v1-tabs { display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.v1-tab { flex:0 0 auto; padding:10px 18px; font-size:14px; line-height:1.25; color:var(--muted); text-decoration:none; border:1px solid transparent; border-radius:8px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; }
.v1-tab:hover { background:#f1f5f9; color:var(--ink); }
.v1-tab:focus-visible { outline:2px solid #93c5fd; outline-offset:1px; }
.v1-tab.active { background:#eff6ff; color:var(--accent); font-weight:600; border-color:#c7d2fe; }
@media (max-width: 560px) {
  .settings-tabbar { padding:5px; }
  .v1-tab { padding:9px 14px; font-size:13.5px; }
}

/* ============================================================
 * 素材存储面板（portal.storage.js 唯一实现，settings Tab 与旧页共用）
 * ============================================================ */
.pstorage-notice { background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.7; margin-bottom:12px; }
.pstorage-box { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:16px; }
.pstorage-box h3 { font-size:15px; margin:0 0 12px; }
.pstorage-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pstorage-modes { display:flex; gap:10px; flex-wrap:wrap; }
.pstorage-mode { border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; flex:1; min-width:260px; background:#fff; }
.pstorage-mode.sel { border-color:var(--accent); background:#eff6ff; }
.pstorage-mode b { display:block; font-size:14px; margin-bottom:4px; }
.pstorage-mode span { font-size:12px; color:var(--muted); line-height:1.6; }
.pstorage-field { display:block; font-size:12px; color:var(--muted); margin:10px 0 4px; }
.pstorage-input { border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-size:13px; background:#fff; color:var(--ink); width:100%; max-width:460px; box-sizing:border-box; }
.pstorage-chip { display:inline-block; padding:2px 8px; border-radius:8px; font-size:11px; margin-left:6px; }
.pstorage-chip.ok { background:#dcfce7; color:var(--ok); }
.pstorage-chip.warn { background:#fef3c7; color:var(--warn); }
.pstorage-chip.bad { background:#fee2e2; color:var(--bad); }
.pstorage-ok { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.7; }
.pstorage-bad { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.7; }
.pstorage-readonly { background:#f1f5f9; border:1px solid var(--line); color:#475569; border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.7; margin-bottom:12px; }
.pstorage-table { width:100%; border-collapse:collapse; font-size:13px; }
.pstorage-table th, .pstorage-table td { text-align:left; padding:7px 9px; border-bottom:1px solid var(--line); }
.pstorage-table th { color:var(--muted); font-weight:600; font-size:12px; }
.pstorage-code { background:#f3f4f6; padding:1px 5px; border-radius:4px; font-size:12px; }
.pstorage-loading { color:var(--muted); font-size:13px; }
/* §九：当前生效的键值行（不展示 binding_id 等内部 ID） */
.pstorage-kv { display:flex; gap:10px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.pstorage-kv:last-of-type { border-bottom:none; }
.pstorage-kv .k { flex:0 0 84px; color:var(--muted); }
.pstorage-kv .v { flex:1; min-width:0; word-break:break-all; }