/* os.css —— ANetOS Frame UI v4 的 1:1 web 主题。
   色值/圆角/间距/动效逐项对齐 device-plane/qml/Main.qml：
   深色 Bento · Fire 橙唯一强调 · 白内圈+橙辉光呼吸焦点 · 8 点转轮。 */
:root{
  --bg:#0B0C0F; --card:#17191F; --card-hi:#22252D; --ink:#FFFFFF; --body:#D7DAE0;
  --muted:#8A8F99; --line:#262A33; --accent:#FF9500; --accent-soft:#3A2A10;
  --ok:#34C759; --danger:#E5484D; --warn:#FFC000;
  --ambient-bg:#0B0D10;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--font);-webkit-font-smoothing:antialiased;user-select:none;touch-action:manipulation}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
input{font-family:inherit;outline:none}
#stage{position:fixed;inset:0;overflow:hidden}

/* ———— 焦点描边（FocusRing：白内圈 + 橙辉光呼吸 + 轻微浮动）———— */
.focusable{position:relative}
.focus-ring{position:absolute;inset:-6px;border-radius:24px;pointer-events:none;display:none;z-index:5}
.focusable.foc>.focus-ring{display:block;animation:focus-float 1.8s ease-in-out infinite}
.focus-ring::before{content:"";position:absolute;inset:-6px;border-radius:inherit;
  border:8px solid var(--accent);opacity:.5;animation:focus-glow 1.8s ease-in-out infinite}
.focus-ring::after{content:"";position:absolute;inset:5px;border-radius:inherit;
  border:1.5px solid #FFD9A0;opacity:.85}
.focus-ring .fr-main{position:absolute;inset:-1px;border-radius:inherit;border:3.5px solid var(--accent)}
@keyframes focus-glow{0%,100%{opacity:.31;border-width:7px}50%{opacity:.78;border-width:11px}}
@keyframes focus-float{0%,100%{transform:scale(1.0)}50%{transform:scale(1.006)}}

/* ———— 8 点转轮 ———— */
.spinner8{position:relative;display:inline-block;animation:spin8 .9s linear infinite}
.spinner8 i{position:absolute;border-radius:50%;background:var(--accent)}
@keyframes spin8{to{transform:rotate(360deg)}}

/* ———— Ambient（照片墙）———— */
#ambient{position:absolute;inset:0;background:var(--ambient-bg)}
#amb-canvas{position:absolute;inset:0;width:100%;height:100%}
#amb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#amb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:none}
/* fitMode 9 档 → object-fit/position */
.fit-fill{object-fit:cover;object-position:center center}
.fit-fit{object-fit:contain;object-position:center center}
.fit-stretch{object-fit:fill}
.fit-left{object-fit:cover;object-position:left center}
.fit-right{object-fit:cover;object-position:right center}
.fit-top{object-fit:cover;object-position:center top}
.fit-bottom{object-fit:cover;object-position:center bottom}
.fit-topleft{object-fit:cover;object-position:left top}
.fit-bottomright{object-fit:cover;object-position:right bottom}

#clock-dock{position:absolute;left:44px;bottom:56px;width:720px;max-width:70vw;z-index:8}
#amb-clock{font-size:64px;font-weight:300;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);line-height:1.1}
#amb-daterow{display:flex;align-items:center;gap:22px;margin:4px 0 8px}
#amb-date{font-size:16px;color:#fff;opacity:.8}
#amb-ticker{width:680px;max-width:64vw;height:24px;overflow:hidden;position:relative}
#amb-ticker span{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:15px;color:#fff;opacity:.72;text-shadow:0 1px 2px rgba(0,0,0,.33)}
#fest-badge{display:none;align-items:center;gap:10px;margin-top:10px;padding:6px 14px 6px 6px;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);border-radius:14px;width:max-content;max-width:64vw}
#fest-badge img{width:44px;height:33px;object-fit:cover;border-radius:9px}
#fest-badge .fb-name{font-size:14px;color:#fff;font-weight:600}
#fest-badge .fb-days{font-size:12px;color:var(--accent)}
#tap-hint{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);height:44px;line-height:44px;
  padding:0 22px;border-radius:22px;background:rgba(0,0,0,.4);color:#fff;font-size:15px;opacity:0;
  transition:opacity .25s;z-index:8;pointer-events:none}

/* 迷你音频播放器（日期一侧） */
#mini-audio{display:none;align-items:center;gap:10px}
.media-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;
  color:#fff;transition:transform .09s}
.media-btn:active{transform:scale(.92)}
.media-btn.primary{width:48px;height:48px;background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.45)}
#ma-meta{display:none;flex-direction:column;gap:7px;width:210px}
#ma-title-clip{width:210px;height:18px;overflow:hidden;position:relative}
#ma-title{position:absolute;white-space:nowrap;font-size:14px;color:#fff;opacity:.92}
#ma-progress{width:210px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
#ma-bar{height:100%;background:var(--accent);width:0}

/* ———— 顶栏 ———— */
#topbar{position:absolute;top:0;left:0;right:0;height:76px;background:var(--card);
  border-bottom:1px solid var(--line);display:none;align-items:center;gap:16px;
  padding:0 28px 0 24px;z-index:20}
#tb-back{width:52px;height:52px;border-radius:26px;background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:none}
#tb-title{font-size:26px;font-weight:600;color:var(--ink)}
#tb-spacer{flex:1}
#tb-busy{display:none;align-items:center;gap:8px;color:var(--accent);font-size:15px}
#tb-clock{font-size:18px;color:var(--body)}

/* ———— 屏幕容器 ———— */
.screen{position:absolute;top:76px;left:0;right:0;bottom:0;display:none;animation:screen-in .18s ease-out;z-index:10}
.screen.full{top:0}
@keyframes screen-in{from{opacity:0}to{opacity:1}}

/* ———— 主页 Bento ———— */
#home-grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1200px;height:430px}
.bento{position:absolute;border-radius:26px;background:var(--card);overflow:hidden;
  transition:transform .17s cubic-bezier(.34,1.3,.64,1);cursor:pointer}
.bento.foc{z-index:2}
.bento .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento .hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8) 100%)}
.bento .hero-meta{position:absolute;left:30px;bottom:30px;display:flex;flex-direction:column;gap:6px}
.bento .hero-greet{font-size:22px;color:#E8EAEE}
.bento .hero-clock{font-size:66px;font-weight:300;color:#fff;line-height:1.05}
.bento .hero-count{font-size:15px;color:var(--muted)}
.bento .cell-meta{position:absolute;left:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.bento .cell-icon{border-radius:31%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}
.bento .cell-label{font-weight:600;color:var(--ink)}
.bento .cell-sub{font-size:14px;color:var(--muted)}

/* ———— 相册 ———— */
#photos-wrap{position:absolute;inset:28px;display:flex;flex-direction:column;gap:16px}
.sec-label{font-size:17px;font-weight:600;color:var(--body)}
#ph-albums{display:none;flex-direction:column;gap:8px}
#ph-albums-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.album-card{flex:none;width:210px;height:124px;border-radius:14px;background:var(--card-hi);overflow:hidden;
  position:relative;border:1px solid var(--line);cursor:pointer}
.album-card.on{border:3px solid var(--accent)}
.album-card img{width:100%;height:100%;object-fit:cover}
.album-card .al-cap{position:absolute;left:0;right:0;bottom:0;height:42px;background:rgba(11,12,15,.7);
  color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;padding:0 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ph-toolbar{display:flex;align-items:center}
#ph-count{font-size:17px;color:var(--muted)}
#ph-manage{margin-left:auto;width:150px;height:56px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);color:var(--body);font-size:18px;font-weight:600}
#ph-manage.on{background:var(--accent);border-color:var(--accent);color:#fff}
#ph-grid{flex:1;overflow-y:auto;scrollbar-width:none;display:grid;gap:0;align-content:start}
.ph-cell{position:relative;padding:8px}
.ph-card{position:relative;width:100%;height:100%;border-radius:20px;background:var(--card);
  border:1px solid var(--line);overflow:hidden;transition:transform .15s cubic-bezier(.34,1.3,.64,1);cursor:pointer}
.ph-card img{width:100%;height:100%;object-fit:cover;display:block}
.ph-card .vid-mark{position:absolute;top:12px;right:12px;color:#fff;font-size:18px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ph-card .aud-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ph-card .aud-icon{width:72px;height:72px;border-radius:20px;background:var(--accent-soft);display:flex;
  align-items:center;justify-content:center;color:var(--accent);font-size:40px}
.ph-card .aud-name{font-size:15px;color:var(--body);text-align:center}
.ph-card .chk{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:22px;
  background:rgba(11,12,15,.7);border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;font-weight:700}
.ph-card.checked .chk{background:var(--accent);border-color:var(--accent)}
.ph-card.checked::after{content:"";position:absolute;inset:0;border-radius:20px;border:4px solid var(--accent);pointer-events:none}
#ph-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--muted);font-size:18px}
#ph-selbar{display:none;align-items:center;height:76px;border-radius:18px;background:var(--card);
  border:1px solid var(--line);padding:0 14px 0 22px;gap:10px}
#ph-selbar .sel-n{font-size:19px;font-weight:600}
#ph-selbar .spacer{flex:1}

/* ———— 创作（Studio）———— */
#studio-wrap{position:absolute;inset:34px;display:flex;flex-direction:column;gap:22px}
#st-lines{display:flex;gap:12px}
.line-pill{height:52px;border-radius:24px;padding:0 20px;background:var(--card);color:var(--body);
  font-size:17px;display:flex;align-items:center;cursor:pointer}
.line-pill.on{color:#0B0C0F;font-weight:600}
#st-pitch{font-size:15px;color:var(--muted)}
#st-grid{flex:1;overflow-y:auto;scrollbar-width:none;display:flex;flex-wrap:wrap;gap:20px;align-content:flex-start;margin-top:14px}
.svc-card{position:relative;border-radius:18px;background:var(--card);overflow:hidden;cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.3,.64,1)}
.svc-card .demo{width:calc(100% - 4px);margin:2px;aspect-ratio:16/9;object-fit:contain;background:#14161C;display:block}
.svc-card .demo-ph{width:calc(100% - 4px);margin:2px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.svc-card .demo-ph i{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:#0B0C0F;font-size:24px;font-weight:600;font-style:normal}
.svc-card .meta{padding:14px 20px 20px;display:flex;flex-direction:column;gap:8px}
.svc-card .nm{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:600;color:var(--ink)}
.svc-card .nm i{width:10px;height:10px;border-radius:5px;flex:none;font-style:normal}
.svc-card .tg{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svc-card .soon{position:absolute;top:10px;right:10px;height:32px;border-radius:10px;background:rgba(20,22,28,.8);
  border:1px solid var(--line);color:var(--muted);font-size:13px;display:flex;align-items:center;padding:0 11px;z-index:7}
.svc-card .job-skin{position:absolute;inset:0;border-radius:18px;background:rgba(11,12,15,.88);z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.svc-card .job-skin .jn{font-size:52px;font-weight:600}
.svc-card .job-skin .jbar{width:200px;height:6px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden;position:relative}
.svc-card .job-skin .jbar i{position:absolute;width:64px;height:6px;border-radius:3px;background:var(--accent);
  animation:jbar 1.3s ease-in-out infinite}
@keyframes jbar{from{left:-64px}to{left:200px}}
.svc-card .job-skin .jt{font-size:14px;color:var(--muted)}

/* ———— 音乐 ———— */
#music-grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1180px;max-width:92vw;
  display:flex;flex-wrap:wrap;gap:20px}
.music-card{width:380px;height:172px;border-radius:26px;background:var(--card);position:relative;cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.3,.64,1);padding:24px;display:flex;flex-direction:column;gap:12px}
.music-card .mi{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#0B0C0F;font-size:21px;font-weight:600}
.music-card .mt{font-size:19px;font-weight:600;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.music-card .ms{font-size:13px;color:var(--muted)}

/* ———— 时钟 ———— */
#clock-screen{background:#000}
#ck-digital{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
#ck-digital .t{font-size:230px;font-weight:100;color:#fff;line-height:1}
#ck-digital .d{font-size:26px;color:#8A8F99;margin-top:10px}
#ck-analog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#ck-flip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:26px}
.flip-card{width:300px;height:380px;border-radius:28px;background:#17191F;border:1px solid #262A33;
  position:relative;display:flex;align-items:center;justify-content:center}
.flip-card::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#000;opacity:.55;z-index:3}
.flip-card span{font-size:210px;font-weight:600;color:#fff;transition:transform .13s ease-in}
#ck-timeline{position:absolute;inset:0;background:#0B0C0F}
#ck-timeline img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.4s ease-in-out}
#tl-meta{position:absolute;left:44px;bottom:44px}
#tl-meta .t{font-size:56px;font-weight:300;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
#tl-meta .d{font-size:18px;font-weight:600;color:var(--accent);text-shadow:0 1px 3px rgba(0,0,0,.4)}
#tl-dots{position:absolute;right:44px;bottom:44px;display:flex;gap:6px}
#tl-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.3)}
#tl-dots i.on{background:var(--accent)}
#ck-ind{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:flex;flex-direction:column;gap:12px;align-items:center}
#ck-dots{display:flex;gap:12px}
#ck-dots i{width:10px;height:10px;border-radius:5px;background:#3A3E48;transition:width .16s;cursor:pointer}
#ck-dots i.on{width:26px;background:var(--accent)}
#ck-name{font-size:15px;color:#5A5F6A}

/* ———— 设置（Fire TV 双栏）———— */
#settings-wrap{position:absolute;inset:30px;display:flex;gap:26px}
#se-cats{width:320px;flex:none;border-radius:18px;background:var(--card);padding:16px;display:flex;flex-direction:column;gap:4px}
.se-cat{position:relative;height:62px;border-radius:12px;display:flex;align-items:center;padding-left:24px;
  color:var(--body);font-size:19px;cursor:pointer}
.se-cat.cur{background:var(--card-hi);color:var(--ink);font-weight:600}
.se-cat.cur::before{content:"";position:absolute;left:14px;top:14px;bottom:14px;width:4px;border-radius:2px;background:var(--accent)}
#se-body{flex:1;overflow-y:auto;scrollbar-width:none}
.se-panel{display:none;flex-direction:column;gap:16px}
.se-panel.on{display:flex}
.se-card{border-radius:16px;background:var(--card);padding:24px}
.chip{height:62px;border-radius:16px;background:var(--card);color:var(--body);font-size:16px;
  display:inline-flex;align-items:center;padding:0 24px;cursor:pointer;border:1px solid transparent}
.chip.cur{background:var(--accent);color:#0B0C0F;font-weight:600}
.chip-flow{display:flex;flex-wrap:wrap;gap:14px}
.se-hint{font-size:14px;color:var(--muted)}
.trig-row{position:relative;border-radius:16px;background:var(--card);border:1px solid var(--line);
  min-height:96px;display:flex;align-items:center;padding:16px 120px 16px 24px;cursor:pointer}
.trig-row .tt{font-size:19px;font-weight:600;color:var(--ink);margin-bottom:6px}
.trig-row .td{font-size:14px;color:var(--muted)}
.toggle{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:72px;height:38px;border-radius:19px;
  background:var(--card-hi);border:1px solid var(--line);transition:background .14s}
.toggle::after{content:"";position:absolute;top:3px;left:4px;width:30px;height:30px;border-radius:15px;background:#fff;transition:left .14s}
.toggle.on{background:var(--accent);border-color:var(--accent)}
.toggle.on::after{left:36px}
.dot-status{width:12px;height:12px;border-radius:6px;flex:none}
#hub-input,#se-input{width:100%;height:68px;border-radius:16px;background:var(--card-hi);border:1px solid var(--line);
  color:var(--ink);font-size:17px;padding:0 20px}
.se-btn{height:70px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--ink);
  font-size:18px;padding:0 30px;cursor:pointer}
.se-btn.primary{background:var(--accent);border-color:var(--accent);color:#0B0C0F;font-weight:600}
#se-qr{width:170px;height:170px;border-radius:14px;background:#fff;padding:8px}

/* fit 下拉浮层 */
#fit-dd{position:absolute;inset:0;background:rgba(0,0,0,.4);display:none;z-index:40}
#fit-dd .panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:380px;
  border-radius:18px;background:var(--card);border:1px solid var(--line);padding:18px}
#fit-dd .opt{position:relative;height:56px;border-radius:12px;display:flex;align-items:center;padding:0 24px;
  color:var(--ink);font-size:17px;cursor:pointer}
#fit-dd .opt.foc{background:var(--card-hi)}
#fit-dd .opt.foc::before{content:"";position:absolute;left:12px;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--accent)}
#fit-dd .opt.cur{color:var(--accent);font-weight:600}
#fit-dd .opt .cur-dot{margin-left:auto;color:var(--accent);font-size:12px}

/* ———— 径向菜单 ———— */
#radial{position:absolute;inset:0;display:none;z-index:50}
#radial .dim{position:absolute;inset:0;background:rgba(0,0,0,.2)}
#radial .origin{position:absolute;width:18px;height:18px;border-radius:9px;border:2px solid var(--accent);
  opacity:.9;transform:translate(-50%,-50%)}
.radial-bubble{position:absolute;width:92px;height:92px;transform:translate(-50%,-50%) scale(.2);
  transition:transform .17s cubic-bezier(.34,1.3,.64,1);cursor:pointer}
#radial.open .radial-bubble{transform:translate(-50%,-50%) scale(1)}
#radial.open .radial-bubble.hot{transform:translate(-50%,-50%) scale(1.22);z-index:2}
.radial-bubble .bb{width:92px;height:92px;border-radius:46px;background:#1D2027;border:2px solid #3A3E48;
  display:flex;align-items:center;justify-content:center;color:#E8EAEE;font-size:26px;font-weight:600}
.radial-bubble.hot .bb{background:var(--accent);border-color:#FFB44D;color:#0B0C0F}
.radial-bubble .bl{position:absolute;top:98px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;
  white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.4)}
#radial .lyric-pill{position:absolute;top:110px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 160px);
  height:66px;border-radius:16px;background:rgba(29,32,39,.9);border:1px solid #3A3E48;display:none;
  align-items:center;padding:0 28px;color:var(--accent);font-size:20px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ———— 浮层通用 ———— */
.overlay{position:absolute;inset:0;display:none;z-index:55}
.overlay .dim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.overlay.on{display:block}

/* compose：近全屏创作面板 */
#compose .panel{position:absolute;left:0;right:0;bottom:0;top:44px;border-radius:30px 30px 0 0;background:var(--card);
  overflow:hidden}
#compose .close{position:absolute;top:22px;right:26px;width:54px;height:54px;border-radius:27px;background:var(--card-hi);
  display:flex;align-items:center;justify-content:center;color:var(--body);font-size:24px;z-index:6;cursor:pointer}
#compose .scroll{position:absolute;inset:34px 0 28px;overflow-y:auto;scrollbar-width:none;padding:0 52px}
#compose .col{display:flex;flex-direction:column;gap:24px}
#cp-head{display:flex;gap:18px;align-items:center}
#cp-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:#0B0C0F;font-size:24px;font-weight:600;flex:none}
#cp-name{font-size:30px;font-weight:600;color:var(--ink)}
#cp-tag{font-size:16px;color:var(--muted)}
.cp-row{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:8px 2px}
.media-pick{position:relative;flex:none;width:184px;height:138px;border-radius:14px;background:var(--card-hi);
  border:1px solid var(--line);overflow:hidden;cursor:pointer;transition:transform .13s cubic-bezier(.34,1.3,.64,1)}
.media-pick img{width:100%;height:100%;object-fit:cover}
.media-pick.sel{border:5px solid var(--accent);transform:scale(1.04)}
.media-pick .badge{position:absolute;top:7px;right:7px;width:32px;height:32px;border-radius:16px;background:var(--accent);
  color:#0B0C0F;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center}
.media-pick .selbar{position:absolute;left:0;right:0;bottom:0;height:26px;background:rgba(255,122,24,.9);
  color:#0B0C0F;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.style-chip{position:relative;height:56px;border-radius:16px;background:var(--card-hi);border:1px solid var(--line);
  color:var(--body);font-size:16px;display:inline-flex;align-items:center;padding:0 20px;cursor:pointer}
.style-chip.on{background:var(--accent);border-color:var(--accent);color:#0B0C0F}
.style-card{position:relative;flex:none;width:252px;height:190px;border-radius:16px;background:var(--card-hi);
  border:1px solid var(--line);overflow:hidden;cursor:pointer}
.style-card.on{border:4px solid var(--accent)}
.style-card img,.style-card video{width:calc(100% - 4px);height:140px;margin:2px;object-fit:cover;display:block;background:#14161C}
.style-card .sc-ph{width:calc(100% - 4px);height:140px;margin:2px;background:#14161C;display:flex;
  align-items:center;justify-content:center;color:var(--muted);font-size:30px}
.style-card .sc-nm{position:absolute;left:12px;right:12px;bottom:12px;font-size:17px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.style-card.on .sc-nm{color:var(--accent)}
.preset-chip{position:relative;height:60px;border-radius:16px;background:var(--card-hi);border:1px solid var(--line);
  color:var(--ink);font-size:18px;display:inline-flex;align-items:center;padding:0 22px;cursor:pointer}
.preset-chip.on{background:var(--accent-soft);border-color:var(--accent)}
#cp-custom{position:relative;width:100%;height:58px;border-radius:14px;background:var(--card-hi);border:1px solid var(--line)}
#cp-custom input{width:100%;height:100%;background:none;border:none;color:var(--ink);font-size:18px;padding:0 16px}
#cp-custom .hint{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;pointer-events:none}
#cp-actions{display:flex;gap:14px;padding-bottom:8px}
#cp-go{position:relative;height:84px;border-radius:20px;background:var(--accent);color:#fff;font-size:24px;font-weight:600;
  transition:transform .12s;flex:1}
#cp-lucky{position:relative;height:84px;border-radius:20px;background:linear-gradient(90deg,#FF8A00,#FF5E3A);
  color:#fff;font-size:22px;font-weight:600;display:none;align-items:center;justify-content:center;gap:10px;
  transition:transform .12s;width:44%}
#cp-lucky .star{animation:lucky-star 1.7s ease-in-out infinite}
@keyframes lucky-star{0%,100%{opacity:1}50%{opacity:.55}}

/* scribble：白板 */
#scribble .panel{position:absolute;left:50%;top:calc(50% - 20px);transform:translate(-50%,-50%);
  width:min(calc(100vw - 100px),1600px);height:min(calc(100vh - 70px),940px);border-radius:28px;background:var(--card);
  padding:30px;display:flex;flex-direction:column;gap:16px}
#sc-head{display:flex;gap:14px;align-items:center}
#sc-board-wrap{flex:1;border-radius:14px;background:#fff;overflow:hidden}
#sc-board{width:100%;height:100%;touch-action:none;cursor:crosshair}
#sc-controls{display:flex;gap:12px;align-items:center}
.sc-btn{position:relative;height:60px;border-radius:14px;background:var(--card-hi);color:var(--body);font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:0 14px}
.sc-btn.on{background:var(--accent);color:#0B0C0F}
.sc-btn .dot{border-radius:50%;background:currentColor}
#sc-prompt{position:relative;width:330px;height:60px;border-radius:14px;background:var(--card-hi);border:1px solid var(--line)}
#sc-prompt input{width:100%;height:100%;background:none;border:none;color:var(--ink);font-size:15px;padding:0 16px}

/* restore 对比 / storyQueue */
#restore .panel,#storyq .panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#restore .dim,#storyq .dim{background:rgba(0,0,0,.85)}
.rs-col{display:flex;flex-direction:column;gap:10px;align-items:center}
.rs-label{font-size:17px;color:var(--muted)}
.rs-label.after{color:var(--accent);font-weight:600}
.rs-imgbox{width:560px;height:420px;max-width:44vw;border-radius:14px;background:var(--card);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.rs-imgbox.after{border:2px solid var(--accent)}
.rs-imgbox img{max-width:100%;max-height:100%;object-fit:contain}
.big-btn{position:relative;height:68px;border-radius:16px;font-size:19px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 40px;cursor:pointer}
.big-btn.primary{background:var(--accent);color:#0B0C0F;font-weight:600}
.big-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
#storyq .panel{width:min(calc(100vw - 120px),1480px);height:560px;border-radius:24px;background:var(--card);padding:30px;
  display:flex;flex-direction:column;gap:16px}
#sq-title{font-size:24px;font-weight:600}
#sq-row{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;flex:1}
.sq-item{flex:none;width:240px;display:flex;flex-direction:column;gap:8px}
.sq-thumb{position:relative;width:240px;height:180px;border-radius:14px;background:var(--card-hi);border:2px solid var(--line);
  overflow:hidden;cursor:pointer}
.sq-thumb img{width:100%;height:100%;object-fit:cover}
.sq-thumb.out{opacity:.35}
.sq-thumb.out .xmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px}
.sq-thumb.flagged{border-color:var(--warn)}
.sq-thumb .badge{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:15px;background:var(--accent);
  color:#0B0C0F;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center}
.sq-cap{font-size:13px;color:var(--muted);width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-cap.warn{color:var(--warn);white-space:normal}

/* 确认弹窗（删除等） */
#confirm{z-index:60}
#confirm .panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:500px;min-height:230px;
  border-radius:22px;background:var(--card);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:26px;padding:30px}
#confirm .q{font-size:22px;font-weight:600;text-align:center}
#confirm .row{display:flex;gap:18px}
#confirm .btn{width:170px;height:64px;border-radius:14px;font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#confirm .btn.cancel{background:var(--card-hi);border:1px solid var(--line);color:var(--body)}
#confirm .btn.del{background:var(--danger);color:#fff;font-weight:600}

/* ———— OSK 屏幕键盘（自绘兜底，1:1 QML 布局）———— */
#osk{z-index:70}
#osk .kb{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);
  padding:20px 0;display:flex;flex-direction:column;gap:10px;align-items:center}
#osk .krow{display:flex;gap:8px}
#osk .key{width:76px;height:62px;border-radius:12px;background:var(--card-hi);border:1px solid var(--line);
  color:var(--ink);font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .09s}
#osk .key:active{transform:scale(.94)}
#osk .key.bksp{width:130px}
#osk .key.space{width:340px;color:var(--muted);font-size:18px}
#osk .key.done{width:170px;background:var(--accent);border-color:var(--accent);color:#fff;font-size:20px;font-weight:600}

/* ———— Toast / 错误 / Splash ———— */
#toast,#errbar{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);height:52px;border-radius:16px;
  display:none;align-items:center;padding:0 22px;font-size:16px;z-index:80;white-space:nowrap}
#toast{background:var(--card-hi);border:1px solid var(--line);color:#fff}
#errbar{background:#3A1210;border:1px solid #FF6B62;color:#FF9A93;font-size:15px;cursor:pointer}
#splash{position:absolute;inset:0;background:var(--card);z-index:99;display:flex;align-items:center;justify-content:center;
  transition:opacity .3s ease-out}
#splash .col{display:flex;flex-direction:column;align-items:center;gap:24px}
#splash .logo{width:92px;height:92px;border-radius:22px;background:var(--accent);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:48px;font-weight:700;transform:scale(.5);
  animation:splash-logo .42s cubic-bezier(.34,1.3,.64,1) forwards}
@keyframes splash-logo{to{transform:scale(1)}}
#splash .nm{font-size:28px;font-weight:600;color:var(--ink);opacity:0;animation:splash-nm .42s ease-out forwards}
@keyframes splash-nm{to{opacity:1}}

/* 小屏适配：栅格缩放由 JS transform 处理，这里兜底 */
@media (max-width:900px){
  #clock-dock{left:20px;bottom:24px}
  #amb-clock{font-size:44px}
  #ck-digital .t{font-size:110px}
  .flip-card{width:150px;height:190px}
  .flip-card span{font-size:100px}
}