/* polish.css —— shadcn 化细节打磨层（加载于 os.css/os2.css 之后，权威覆盖）。
   原则：焦点环安静克制（不闪动）；间距 4pt 节奏；边框/圆角/字重成体系；
   图标线性 1.75；触达区 ≥44px；色彩维持既定（bg/card/橙 accent/身份红）。 */

:root{
  --radius:12px; --radius-lg:18px; --radius-sm:8px;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --ring:var(--accent);
  --muted-fg:#9BA1AC;
  --secondary:#22252D;
}

/* ═══════ 1) 焦点环 2.0：静、准、有身体感（替代呼吸闪动橙框） ═══════ */
/* 旧三层呼吸环整体停用 */
.focus-ring{ display:none !important }
/* 统一新环：双层 box-shadow（内圈背景色隔离 + 外圈 ring），一次 160ms 落定，无循环动画 */
.focusable.foc{
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 14px 30px rgba(0,0,0,.35) !important;
  filter:none !important;
  transition:box-shadow .16s ease, transform .18s var(--spring);
}
/* 焦点落定的一次性微弹（scale 由各组件自己的 transform 管理；这里只保证不叠加发光） */
.bento.foc,.svc-card.foc,.music-card.foc,.ph-card.foc,.media-pick.foc,.style-card.foc,
.line-pill.foc,.chip.foc,.se-cat.foc,.trig-row.foc,.se-btn.foc,.at-work.foc,.preset-chip.foc,
.style-chip.foc,.sc-btn.foc,.big-btn.foc,.t-btn.foc,.album-card.foc{
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 14px 30px rgba(0,0,0,.35) !important;
}
/* 输入框焦点态同语言 */
#cp-custom.foc,#sc-prompt.foc,#hub-input:focus{
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ring) !important; outline:none;
  border-color:transparent !important;
}
/* 触屏 press 态：按入 */
.focusable:active{ transform:scale(.98) }
.bento:active,.svc-card:active,.music-card:active{ transform:scale(.985) }

/* ═══════ 2) 边框/圆角/表面 统一 ═══════ */
.bento,.svc-card,.music-card,.ph-card,.album-card,.se-card,.trig-row,.media-pick,.style-card,
#compose .panel,#scribble .panel,#storyq .panel,#letters .panel,#confirm .panel{
  border:1px solid var(--border);
}
.se-card{ border-radius:var(--radius-lg); padding:20px 22px }
.chip,.se-btn,.preset-chip,.style-chip{ border:1px solid var(--border) }
.chip:hover,.se-btn:hover,.se-cat:hover{ border-color:var(--border-strong); background:var(--card-hi) }

/* ═══════ 3) 按钮体系（shadcn 变体语义） ═══════ */
.se-btn,.big-btn,.t-btn{ border-radius:var(--radius); font-weight:500; transition:background .15s,border-color .15s,transform .12s }
.se-btn{ height:48px; padding:0 22px; font-size:15px; background:var(--secondary); color:var(--ink) }
.se-btn.primary{ background:var(--accent); border-color:var(--accent); color:#0B0C0F; font-weight:600 }
.se-btn.ghost{ background:transparent; color:var(--muted-fg) }
.se-btn:active{ transform:scale(.97) }

/* ═══════ 4) Settings 重排（间距节奏 8/12/16/24；左栏静、右栏呼吸） ═══════ */
#settings-wrap{ gap:28px; top:24px; right:34px; bottom:24px; left:34px; position:absolute }
#se-cats{ width:300px; padding:10px; gap:2px; border:1px solid var(--border) }
.se-cat{ height:52px; border-radius:10px; padding-left:44px; font-size:16px; position:relative }
.se-cat svg{ position:absolute; left:14px; top:50%; margin-top:-9px; opacity:.7 }
.se-cat.cur{ font-weight:600 }
.se-cat.cur::before{ left:0; top:14px; bottom:14px; width:3px }
/* #2 修复：settings 右栏行距——行元素直接挂在 #se-body 上，必须由它出 gap */
#se-body{ padding:2px 6px 24px 2px; display:flex; flex-direction:column; gap:12px }
#se-body > .chip-flow{ margin:2px 0 }
.se-panel.on{ gap:12px }
.se-section{ font-size:13px; font-weight:600; letter-spacing:.4px; color:var(--muted-fg);
  text-transform:uppercase; margin:12px 2px 2px }
.se-row{ display:flex; align-items:center; gap:14px; min-height:56px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--card);
  padding:10px 16px; cursor:pointer }
.se-row .ri{ color:var(--muted-fg); flex:none }
.se-row .rt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }
.se-row .ra{ font-size:15px; color:var(--ink) }
.se-row .rb{ font-size:12.5px; color:var(--muted-fg) }
.se-row .rv{ font-size:14px; color:var(--muted-fg); display:flex; align-items:center; gap:6px }
.trig-row{ min-height:76px; border-radius:var(--radius); padding:14px 92px 14px 18px }
.trig-row .tt{ font-size:16px; margin-bottom:4px }
.trig-row .td{ font-size:13px; line-height:1.45 }
/* shadcn Switch：44×24，圆滑轨道 */
.toggle{ width:44px; height:24px; border-radius:12px; right:18px; background:var(--secondary); border:1px solid var(--border-strong) }
.toggle::after{ width:18px; height:18px; border-radius:9px; top:2px; left:3px; background:#C8CDD6 }
.toggle.on{ background:var(--accent); border-color:var(--accent) }
.toggle.on::after{ left:21px; background:#0B0C0F }
#at-contrib .tgl{ width:44px; height:24px; border-radius:12px }
#at-contrib .tgl::after{ width:18px; height:18px; border-radius:9px }
#at-contrib.on .tgl::after{ left:22px; background:#0B0C0F }
/* chips（时区/语言/间隔）：紧凑、齐整 */
.chip{ height:44px; border-radius:10px; padding:0 18px; font-size:14px; background:var(--card) }
.chip.cur{ font-weight:600 }
.chip-flow{ gap:10px }
.se-hint{ font-size:12.5px; color:var(--muted-fg); margin:4px 2px }
/* about/hub 卡片内部行距 */
.se-kv{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; gap:16px;
  border-bottom:1px solid var(--border); font-size:14px }
.se-kv:last-child{ border-bottom:none }
.se-kv .k{ color:var(--muted-fg); flex:none }
.se-kv .v{ color:var(--ink); text-align:right; word-break:break-all; user-select:text }
.se-ver-badge{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px;
  border-radius:13px; border:1px solid var(--border-strong); font-size:12px; color:var(--muted-fg) }
.se-ver-badge b{ color:var(--ink); font-weight:600 }

/* ═══════ 5) 顶栏 / 返回按钮 ═══════ */
#tb-back{ width:44px; height:44px; border-radius:12px; background:transparent; border:1px solid transparent;
  color:var(--body); display:flex; align-items:center; justify-content:center; cursor:pointer }
#tb-back:hover{ background:var(--secondary); border-color:var(--border) }
#tb-title{ font-size:22px }
#topbar{ height:68px }
.screen{ top:68px }

/* ═══════ 6) 组件细节 ═══════ */
/* radial 泡：图标居中 */
.radial-bubble .bb svg{ width:30px; height:30px }
/* home 卡图标块 */
.bento .cell-icon svg{ width:56%; height:56% }
/* 相册管理按钮 */
#ph-manage{ height:44px; width:auto; padding:0 20px; border-radius:10px; font-size:15px }
#ph-selbar{ height:64px; border-radius:var(--radius) }
/* 迷你播放器按钮内 svg */
.media-btn svg{ width:18px; height:18px }
.media-btn.primary svg{ width:20px; height:20px }
/* compose 关闭钮 */
#compose .close{ width:44px; height:44px; border-radius:12px; background:transparent; border:1px solid transparent }
#compose .close:hover{ background:var(--secondary); border-color:var(--border) }
#compose .col{ gap:20px }
.sec-label{ font-size:13px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted-fg) }
#cp-actions{ padding-top:6px }
/* scribble 控制排 */
.sc-btn{ border:1px solid var(--border); border-radius:10px; height:48px }
.sc-btn svg{ opacity:.85 }
/* 音乐卡 */
.music-card .mi{ border-radius:12px }
.music-card .mi svg{ color:#0B0C0F }
/* 缩略占位图标颜色 */
.thumb-ph{ color:#5A5F6A }
/* 信箱行 */
.letter-row{ border:1px solid transparent }
.letter-row.foc{ border-color:var(--border); background:var(--secondary) }
/* toast 精致化 */
#toast{ height:44px; border-radius:12px; font-size:14px; border-color:var(--border-strong) }
/* fit 下拉 */
#fit-dd .panel{ border:1px solid var(--border-strong); padding:8px }
#fit-dd .opt{ height:46px; border-radius:8px; font-size:15px }
/* 滚动条全局隐藏（相框语境） */
*::-webkit-scrollbar{ width:0; height:0 }

/* #3 相框语境：禁选取/拖拽（含 Safari 前缀；不影响输入框） */
html,body,#stage{ -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none }
img,svg,video{ -webkit-user-drag:none; user-drag:none }
input,textarea{ -webkit-user-select:text; user-select:text }
.se-kv .v{ -webkit-user-select:none; user-select:none }

/* #4 顶排/首列焦点环被滚动容器裁剪：给滚动容器留出环的呼吸空间 */
#st-grid{ padding:10px 8px 24px 6px }
#at-gallery{ padding:8px 6px 20px }
#ph-grid{ padding-top:4px }
#mu-recs{ padding:8px 6px 12px }
.cp-row{ padding:10px 8px 12px 6px }
#compose .scroll .col > .sec-label{ margin-top:2px }
#se-cats{ overflow:visible }
.svc-card,.at-work,.mu-card,.media-pick,.style-card{ scroll-margin:12px }
.ph-cell{ scroll-margin:10px }

/* ═══════ 7) 音乐推荐（为你选的歌） ═══════ */
#music-wrap{ position:absolute; top:0; right:34px; bottom:16px; left:34px; display:flex; flex-direction:column; gap:14px; overflow:hidden }
#mu-recs-label{ display:flex; align-items:center; gap:10px; margin-top:8px }
#mu-recs-label .lb{ font-size:13px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted-fg) }
#mu-recs-label .why{ font-size:12px; color:var(--muted-fg); opacity:.8 }
#mu-recs{ display:flex; gap:12px; overflow-x:auto; padding:6px 2px 10px; scrollbar-width:none }
.mu-card{ flex:none; width:210px; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:var(--card); padding:16px; display:flex; flex-direction:column; gap:10px; cursor:pointer;
  transition:transform .16s var(--spring) }
.mu-card .cover{ width:100%; aspect-ratio:1; border-radius:10px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center }
.mu-card .cover svg{ color:rgba(255,255,255,.85); width:34px; height:34px; position:relative; z-index:2 }
.mu-card .cover .eq{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:3px; align-items:flex-end; height:22px; z-index:2 }
.mu-card .cover .eq i{ flex:1; background:rgba(255,255,255,.75); border-radius:2px; height:30% }
.mu-card.playing .cover .eq i{ animation:eq-b 1.1s ease-in-out infinite }
.mu-card.playing .cover .eq i:nth-child(2){ animation-delay:.15s } .mu-card.playing .cover .eq i:nth-child(3){ animation-delay:.3s }
.mu-card.playing .cover .eq i:nth-child(4){ animation-delay:.45s } .mu-card.playing .cover .eq i:nth-child(5){ animation-delay:.6s }
@keyframes eq-b{ 0%,100%{ height:24% } 50%{ height:88% } }
.mu-card .mt2{ font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mu-card .ma2{ font-size:12.5px; color:var(--muted-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mu-card .reason{ font-size:11.5px; color:var(--muted-fg); opacity:.85; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.mu-card .row2{ display:flex; gap:8px; margin-top:2px }
.mu-btn{ flex:1; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--secondary);
  color:var(--ink); font-size:13px; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer }
.mu-btn.primary{ background:var(--accent); border-color:var(--accent); color:#0B0C0F; font-weight:600 }
.mu-btn.saved{ color:var(--ok); border-color:rgba(52,199,89,.4) }
.mu-btn svg{ width:15px; height:15px }
#mu-classic{ flex:1; overflow-y:auto }
#mu-classic #music-grid{ position:static; transform:none; width:auto; max-width:none; padding-top:6px }

@media (prefers-reduced-motion:reduce){ .mu-card.playing .cover .eq i{ animation:none } }

/* demo 图叠层淡入（占位永在底、图加载完淡入盖住） */
.svc-card .demo-box{ position:relative; margin:2px; aspect-ratio:16/9; border-radius:16px 16px 0 0;
  overflow:hidden; background:#14161C }
.svc-card .demo-box .demo{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
  margin:0; opacity:0; transition:opacity .4s ease; aspect-ratio:auto }
.svc-card .demo-box.ok .demo{ opacity:1 }
.svc-card .demo-box .demo-ph{ position:absolute; top:0; left:0; width:100%; height:100%; margin:0;
  aspect-ratio:auto; display:flex; align-items:center; justify-content:center }

/* ═══════ 8) Compose 2.0 四幕向导（P001） ═══════ */
#cpx-head{ display:flex; align-items:center; gap:16px; padding-bottom:6px }
#cpx-crumbs{ margin-left:auto; display:flex; gap:8px; align-items:center; padding-right:56px }
#cpx-crumbs i{ width:8px; height:8px; border-radius:4px; background:var(--secondary);
  border:1px solid var(--border-strong); transition:all .3s }
#cpx-crumbs i.on{ width:22px; background:var(--accent); border-color:var(--accent) }
#cpx-crumbs i.done{ background:var(--muted-fg); border-color:transparent }
#cpx-stage{ position:relative; min-height:430px; overflow:hidden }
.cpx-scene{ position:absolute; inset:0; display:flex; flex-direction:column; gap:18px;
  opacity:0; transform:translateX(46px); transition:opacity .3s ease, transform .3s var(--spring) }
.cpx-scene.enter-back{ transform:translateX(-46px) }
.cpx-scene.in{ opacity:1; transform:translateX(0) }
.cpx-scene.leave-fwd{ opacity:0 !important; transform:translateX(-46px) !important; pointer-events:none }
.cpx-scene.leave-back{ opacity:0 !important; transform:translateX(46px) !important; pointer-events:none }
.cpx-q{ font-size:clamp(20px,2.8vh,27px); font-weight:600; color:var(--ink); letter-spacing:.3px }
.cpx-empty{ color:var(--muted-fg); font-size:15px; padding:20px 4px }

/* 横向大卡片带（media / style 幕）：一维焦点，tvOS 卡片手感 */
.cpx-strip{ display:flex; gap:16px; overflow-x:auto; padding:14px 10px 22px 8px; scrollbar-width:none;
  align-items:stretch; min-height:300px }
.cpx-card{ position:relative; flex:none; width:340px; height:270px; border-radius:16px; overflow:hidden;
  background:var(--card-hi); border:1px solid var(--border); cursor:pointer;
  transition:transform .18s var(--spring), box-shadow .18s ease; scroll-margin:16px }
.cpx-card img,.cpx-card video{ width:100%; height:100%; object-fit:cover; display:block }
.cpx-card.cpx-foc{ transform:scale(1.06); z-index:2;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 18px 34px rgba(0,0,0,.4) }
.cpx-card.pressed{ transform:scale(.98) }
.cpx-card.sel::after{ content:""; position:absolute; inset:0; border-radius:16px;
  border:3px solid var(--accent); pointer-events:none }
.cpx-card .badge{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:17px;
  background:var(--accent); color:#0B0C0F; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center; z-index:2 }
.cpx-card .cpx-cap{ position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
  color:#fff; font-size:16px; font-weight:600 }
.cpx-style-type{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:18px }
.cpx-style-type span{ font-size:30px; font-weight:700; color:rgba(255,255,255,.92); text-align:center;
  letter-spacing:1px; line-height:1.3 }
.cpx-card.next-pill{ width:190px; background:var(--secondary); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; color:var(--body); font-size:16px; font-weight:600 }
.cpx-card.next-pill svg{ color:var(--accent) }

/* prompt 幕：纵向大行（预设/自己写/行动），一维焦点 */
.cpx-vlist{ display:flex; flex-direction:column; gap:12px; padding:10px 8px 20px 6px; max-width:820px }
.cpx-row{ display:flex; align-items:center; gap:14px; min-height:64px; padding:0 22px;
  border-radius:14px; background:var(--card-hi); border:1px solid var(--border); cursor:pointer;
  font-size:18px; color:var(--ink); transition:transform .16s var(--spring); scroll-margin:12px }
.cpx-row svg{ color:var(--muted-fg); flex:none }
.cpx-row.sel{ border-color:var(--accent) }
.cpx-row.sel svg{ color:var(--accent) }
.cpx-row.cpx-foc{ transform:scale(1.015);
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 12px 26px rgba(0,0,0,.35) }
.cpx-row.custom input{ flex:1; height:100%; min-height:62px; background:none; border:none;
  color:var(--ink); font-size:18px }
.cpx-actions{ display:flex; gap:14px; margin-top:10px }
/* 行动钮：未获焦=安静的次级面（N03：强调色只做焦点墨水）；获焦=点亮填充+微弹，无叠环 */
.cpx-go{ flex:1; max-width:420px; height:76px; border-radius:18px;
  background:var(--secondary); border:1px solid var(--border-strong);
  color:var(--ink); font-size:21px; font-weight:700; cursor:pointer;
  transition:transform .16s var(--spring), background .16s ease, color .16s ease; scroll-margin:12px }
.cpx-lucky{ width:260px; height:76px; border-radius:18px; cursor:pointer;
  background:transparent; border:1.5px solid rgba(238,52,46,.55); color:#F0837D;
  font-size:19px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .16s var(--spring), background .16s ease, color .16s ease; scroll-margin:12px }
.cpx-lucky .star{ animation:lucky-star 1.7s ease-in-out infinite }
.cpx-go.cpx-foc,.cpx-go:hover{ background:var(--accent); border-color:var(--accent); color:#0B0C0F }
.cpx-lucky.cpx-foc,.cpx-lucky:hover{ background:linear-gradient(95deg,var(--identity),#B3241B);
  border-color:transparent; color:#fff }
.cpx-go.cpx-foc,.cpx-lucky.cpx-foc{ transform:scale(1.03); box-shadow:0 14px 28px rgba(0,0,0,.4) }
/* 行元素焦点：环收敛、影子变轻（修"选框溢出/沉重"观感） */
.cpx-row.cpx-foc{ transform:none;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--ring), 0 6px 16px rgba(0,0,0,.28) }
.cpx-vlist{ padding-left:8px }
/* 面板收窄一点，四幕内容不需要满屏高（七法：留白）；舞台高度 flex 自适应防裁切 */
#compose .panel{ top:8vh }
#compose .scroll{ overflow:hidden; display:flex }
#compose .scroll > .col{ flex:1; min-height:0; width:100% }
#cpx-stage{ flex:1; min-height:0 }