/* ============================================================================
   Playground · alittleyd —— 浏览器里的 macOS 桌面
   设计 token 与 demo-site 同源(琥珀 #F2A03D 唯一重色),但这里允许玻璃/模糊/动效。
   零外部资源:字体全系统栈,图标全 emoji/内联 SVG,壁纸纯 CSS。
   ============================================================================ */
:root{
  --ink:#0A0D14; --surface-solid:#161D2A; --surface2:#1c2432;
  --rule:rgba(255,255,255,.09); --rule-strong:rgba(255,255,255,.16);
  --text:#E6EAF2; --dim:#8B95A9; --dimmer:#5D667A;
  --signal:#F2A03D; --signal-soft:rgba(242,160,61,.16); --ok:#5FB98B; --bad:#D9615A;
  --glass:rgba(16,21,31,.58); --glass-strong:rgba(16,21,31,.84);
  --menubar:rgba(10,13,20,.5); --lp:rgba(8,11,18,.6);
  --tl-off:#5a5f6a;
  --wp-base:#0A0D14; --wp-1:#1b2b6e; --wp-2:#3a1f5f; --wp-3:rgba(242,160,61,.55); --wp-4:#0f3d5c;
  --shadow:0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
  --shadow-sm:0 10px 32px rgba(0,0,0,.4);
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --menubar-h:28px; --dock-reserve:100px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:#E9EEF6; --surface-solid:#FFFFFF; --surface2:#F1F4F9;
    --rule:rgba(0,0,0,.08); --rule-strong:rgba(0,0,0,.14);
    --text:#131820; --dim:#5C6675; --dimmer:#8A93A2;
    --signal:#B8720E; --signal-soft:rgba(184,114,14,.12); --ok:#2F7D57; --bad:#B2423C;
    --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.82);
    --menubar:rgba(255,255,255,.45); --lp:rgba(230,236,246,.55);
    --tl-off:#c9ced8;
    --wp-base:#dfe7f5; --wp-1:#a9c6ff; --wp-2:#ffd9ad; --wp-3:#d3c4ff; --wp-4:#bfe6ff;
    --shadow:0 24px 64px rgba(20,30,60,.28), 0 0 0 1px rgba(0,0,0,.06);
    --shadow-sm:0 10px 32px rgba(20,30,60,.18);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ink:#E9EEF6; --surface-solid:#FFFFFF; --surface2:#F1F4F9;
  --rule:rgba(0,0,0,.08); --rule-strong:rgba(0,0,0,.14);
  --text:#131820; --dim:#5C6675; --dimmer:#8A93A2;
  --signal:#B8720E; --signal-soft:rgba(184,114,14,.12); --ok:#2F7D57; --bad:#B2423C;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.82);
  --menubar:rgba(255,255,255,.45); --lp:rgba(230,236,246,.55);
  --tl-off:#c9ced8;
  --wp-base:#dfe7f5; --wp-1:#a9c6ff; --wp-2:#ffd9ad; --wp-3:#d3c4ff; --wp-4:#bfe6ff;
  --shadow:0 24px 64px rgba(20,30,60,.28), 0 0 0 1px rgba(0,0,0,.06);
  --shadow-sm:0 10px 32px rgba(20,30,60,.18);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#0A0D14; --surface-solid:#161D2A; --surface2:#1c2432;
  --rule:rgba(255,255,255,.09); --rule-strong:rgba(255,255,255,.16);
  --text:#E6EAF2; --dim:#8B95A9; --dimmer:#5D667A;
  --signal:#F2A03D; --signal-soft:rgba(242,160,61,.16); --ok:#5FB98B; --bad:#D9615A;
  --glass:rgba(16,21,31,.58); --glass-strong:rgba(16,21,31,.84);
  --menubar:rgba(10,13,20,.5); --lp:rgba(8,11,18,.6);
  --tl-off:#5a5f6a;
  --wp-base:#0A0D14; --wp-1:#1b2b6e; --wp-2:#3a1f5f; --wp-3:rgba(242,160,61,.55); --wp-4:#0f3d5c;
  --shadow:0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
  --shadow-sm:0 10px 32px rgba(0,0,0,.4);
  color-scheme:dark;
}
/* 壁纸预设(系统设置里切换) */
:root[data-wallpaper="sonoma"]{--wp-1:#1d4ed8;--wp-2:#0e7490;--wp-3:rgba(56,189,248,.5);--wp-4:#312e81}
:root[data-wallpaper="graphite"]{--wp-1:#2a2f3a;--wp-2:#3b4250;--wp-3:rgba(255,255,255,.18);--wp-4:#1f242e}
:root[data-theme="light"][data-wallpaper="sonoma"],
:root:not([data-theme="dark"])[data-wallpaper="sonoma"]{--wp-1:#93c5fd;--wp-2:#a5f3fc;--wp-3:#c7d2fe;--wp-4:#bae6fd}
:root[data-theme="light"][data-wallpaper="graphite"],
:root:not([data-theme="dark"])[data-wallpaper="graphite"]{--wp-1:#cbd5e1;--wp-2:#e2e8f0;--wp-3:#f1f5f9;--wp-4:#d1d9e6}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font-sans);font-size:14px;line-height:1.5;
     -webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit}
a{color:var(--signal)}
kbd{font-family:var(--font-mono);font-size:.78em;color:var(--dimmer);margin-left:.6em}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- 壁纸:纯 CSS 网格渐变,四个模糊色团缓慢漂移 ---------- */
#wallpaper{position:fixed;inset:0;background:var(--wp-base);overflow:hidden;z-index:0;
           transition:background .4s ease}
#wallpaper i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.85;will-change:transform;
             transition:background .6s ease}
#wallpaper .b1{width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;background:var(--wp-1);animation:d1 42s ease-in-out infinite alternate}
#wallpaper .b2{width:60vmax;height:60vmax;right:-20vmax;top:-10vmax;background:var(--wp-2);animation:d2 50s ease-in-out infinite alternate}
#wallpaper .b3{width:48vmax;height:48vmax;left:25vmax;bottom:-22vmax;background:var(--wp-3);animation:d3 38s ease-in-out infinite alternate}
#wallpaper .b4{width:52vmax;height:52vmax;right:10vmax;bottom:-28vmax;background:var(--wp-4);animation:d4 46s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(12vmax,8vmax)}}
@keyframes d2{to{transform:translate(-10vmax,10vmax)}}
@keyframes d3{to{transform:translate(-8vmax,-10vmax)}}
@keyframes d4{to{transform:translate(8vmax,-6vmax)}}
@media (prefers-reduced-motion:reduce){#wallpaper i{animation:none}}
:root[data-motion="reduce"] #wallpaper i{animation:none}

/* ---------- 菜单栏 ---------- */
#menubar{position:fixed;top:0;left:0;right:0;height:var(--menubar-h);z-index:9500;
         display:flex;align-items:center;gap:14px;padding:0 10px 0 6px;
         background:var(--menubar);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
         font-size:13px;user-select:none;-webkit-user-select:none}
#menubar strong{font-weight:600;letter-spacing:-.01em}
#menubar .menus{display:flex;gap:2px}
#menubar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
#menubar .mi{width:16px;height:16px;opacity:.9}
#menubar .mi.bat{width:26px;height:13px}
#menubar #clock{font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
#menubar .beian{font-family:var(--font-mono);font-size:10.5px;color:var(--dimmer);text-decoration:none;letter-spacing:.02em;
                border-bottom:1px solid transparent}
#menubar .beian:hover{color:var(--dim);border-bottom-color:var(--rule-strong)}
#themebtn{background:none;border:0;padding:0 4px;font-size:15px;line-height:1;cursor:pointer;color:var(--text);opacity:.85}
#themebtn:hover{opacity:1}
.menu{position:relative}
.menu>button{background:none;border:0;padding:3px 9px;border-radius:5px;cursor:default;color:inherit}
.menu>button.logo{font-size:15px;padding:2px 8px}
.menu.open>button,.menu>button:hover{background:var(--signal-soft)}
.menu .dd{position:absolute;top:calc(100% + 4px);left:0;min-width:210px;padding:5px;display:none;
          background:var(--glass-strong);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
          border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-sm);z-index:1}
.menu.open .dd{display:block}
.dd button,.dd a{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
                 padding:5px 10px;border-radius:5px;background:none;border:0;color:var(--text);text-decoration:none;cursor:default;font-size:13px}
.dd button:hover,.dd a:hover{background:var(--signal);color:#1a1200}
.dd button:hover kbd{color:#1a1200;opacity:.7}
.dd hr{border:0;border-top:1px solid var(--rule);margin:5px 8px}
.dd .dd-sub{font-size:11px;color:var(--dimmer);padding:6px 10px 2px;text-transform:uppercase;letter-spacing:.08em}

/* ---------- 桌面 ---------- */
#desktop{position:fixed;inset:var(--menubar-h) 0 0 0;z-index:1}
#desktop-icons{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.dicon{display:flex;flex-direction:column;align-items:center;gap:4px;width:88px;padding:6px 4px;
       background:none;border:1px solid transparent;border-radius:8px;cursor:default;color:var(--text);font-size:12px;
       text-shadow:0 1px 3px rgba(0,0,0,.6)}
:root[data-theme="light"] .dicon,:root:not([data-theme="dark"]) .dicon{text-shadow:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .dicon{text-shadow:0 1px 3px rgba(0,0,0,.6)}}
.dicon .ic{font-size:40px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.dicon:hover,.dicon:focus-visible{background:var(--signal-soft);border-color:var(--rule)}
.dicon span:last-child{line-height:1.2;text-align:center;word-break:break-all}

/* ---------- 窗口 ---------- */
#windows{position:absolute;inset:0;pointer-events:none}
.win{position:absolute;display:flex;flex-direction:column;pointer-events:auto;
     background:var(--surface-solid);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;
     min-width:360px;min-height:240px;
     opacity:0;transform:scale(.94) translateY(8px);
     transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1),width .2s ease,height .2s ease,left .2s ease,top .2s ease}
.win.in{opacity:1;transform:none}
.win.min{opacity:0;transform:scale(.6) translateY(45vh);pointer-events:none}
.win.max{border-radius:6px}
.win.dragging{transition:none;user-select:none;-webkit-user-select:none}
.win.dragging iframe,.win.dragging .body{pointer-events:none}
.titlebar{position:relative;flex:none;height:38px;display:flex;align-items:center;padding:0 12px;
          background:var(--glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
          border-bottom:1px solid var(--rule);cursor:default;touch-action:none}
.tls{display:flex;gap:8px;position:relative;z-index:1}
.tl{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--tl-off);position:relative;display:grid;place-items:center}
.win.active .tl.close{background:#FF5F57}.win.active .tl.min{background:#FEBC2E}.win.active .tl.max{background:#28C840}
.tl::after{font-size:10px;line-height:1;font-weight:700;color:rgba(0,0,0,.55);opacity:0;transition:opacity .1s}
.tls:hover .tl::after{opacity:1}
.tl.close::after{content:"×"}.tl.min::after{content:"–"}.tl.max::after{content:"+";font-size:11px}
.title{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:600;color:var(--dimmer);pointer-events:none;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 90px}
.win.active .title{color:var(--text)}
.body{flex:1;min-height:0;position:relative;background:var(--surface-solid)}
.body iframe{width:100%;height:100%;border:0;display:block;background:var(--surface-solid)}
.body .loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--dimmer);font-family:var(--font-mono);font-size:12px;pointer-events:none}
.resize{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;touch-action:none}
.resize::after{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;
               border-right:2px solid var(--rule-strong);border-bottom:2px solid var(--rule-strong);border-radius:0 0 2px 0}

/* ---------- Dock ---------- */
#dock{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:9000;
      display:flex;align-items:flex-end;gap:5px;padding:7px 9px;
      background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
      border:1px solid var(--rule);border-radius:20px;box-shadow:var(--shadow-sm);max-width:calc(100vw - 20px)}
#dock .item{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0 2px 4px;cursor:pointer}
#dock .icon{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:27px;line-height:1;
            transform:scale(var(--s,1)) translateY(calc((1 - var(--s,1)) * 30px));transform-origin:bottom center;
            transition:transform .13s ease;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 5px 12px rgba(0,0,0,.35)}
#dock .item[data-running]::after{content:"";position:absolute;bottom:-3px;width:4px;height:4px;border-radius:50%;background:var(--text);opacity:.85}
#dock .label{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
             background:var(--glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
             color:var(--text);font-size:12px;padding:4px 10px;border-radius:6px;white-space:nowrap;
             opacity:0;pointer-events:none;transition:opacity .12s;border:1px solid var(--rule);box-shadow:var(--shadow-sm)}
#dock .item:hover .label,#dock .item:focus-visible .label{opacity:1}
#dock .item:hover{z-index:2}   /* 放大时图标会溢出到邻居头上,被 hover 的项必须在最上层,否则点击会被邻居截胡 */
#dock .sep{width:1px;height:46px;background:var(--rule-strong);margin:0 4px 6px;align-self:flex-end}
#dock .item.bounce .icon{animation:bounce .5s ease}
@keyframes bounce{0%,100%{translate:0 0}40%{translate:0 -18px}70%{translate:0 -6px}}
/* 每个 App 的图标底色 */
.ic-finder{background:linear-gradient(160deg,#4fa3ff,#1657c9)}
.ic-photonicat{background:linear-gradient(160deg,#F2A03D,#b8460e)}
.ic-little-money{background:linear-gradient(160deg,#ffd166,#c77a00)}
.ic-yezi{background:linear-gradient(160deg,#5b6b82,#242c3a)}
.ic-terminal{background:linear-gradient(160deg,#2b3240,#0b0f16)}
.ic-safari{background:linear-gradient(160deg,#4cc9ff,#1467d6)}
.ic-about{background:linear-gradient(160deg,#8b95a9,#3d4658)}
.ic-settings{background:linear-gradient(160deg,#9aa3b5,#4a5364)}
.ic-launchpad{background:linear-gradient(160deg,#6ee7b7,#0f766e)}

/* ---------- 启动台 ---------- */
#launchpad{position:fixed;inset:0;z-index:9400;display:none;flex-direction:column;align-items:center;gap:26px;
           padding:calc(var(--menubar-h) + 40px) 24px var(--dock-reserve);
           background:var(--lp);-webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);
           opacity:0;transform:scale(1.06);transition:opacity .16s ease,transform .16s ease}
#launchpad.open{display:flex}
#launchpad.in{opacity:1;transform:none}
#launchpad .lp-search{width:min(320px,80vw);font:inherit;font-size:14px;padding:6px 12px;border-radius:8px;
                      background:var(--glass-strong);border:1px solid var(--rule);color:var(--text);text-align:center;outline:none}
#launchpad .grid{display:grid;grid-template-columns:repeat(auto-fit,112px);gap:26px 18px;justify-content:center;max-width:960px;width:100%}
#launchpad .app{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:6px;border-radius:12px;cursor:pointer;color:var(--text);font-size:13px}
#launchpad .app:hover,#launchpad .app:focus-visible{background:var(--signal-soft)}
#launchpad .app .icon{width:74px;height:74px;border-radius:18px;font-size:38px;line-height:1;display:grid;place-items:center;
                      box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(0,0,0,.35)}
#launchpad .app.hide{display:none}
#launchpad .hint{color:var(--dimmer);font-size:12px;font-family:var(--font-mono);margin:0}

/* ---------- Spotlight ---------- */
#spotlight{position:fixed;inset:0;z-index:9600;display:none;justify-content:center;align-items:flex-start;padding-top:16vh;background:rgba(0,0,0,.18)}
#spotlight.open{display:flex}
.sp{width:min(620px,92vw);background:var(--glass-strong);-webkit-backdrop-filter:blur(40px) saturate(1.4);backdrop-filter:blur(40px) saturate(1.4);
    border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.sp input{width:100%;font:inherit;font-size:22px;padding:14px 20px;background:none;border:0;color:var(--text);outline:none}
.sp .res{max-height:52vh;overflow:auto;border-top:1px solid var(--rule);padding:6px}
.sp .res:empty{display:none}
.sp .res button{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;
                padding:8px 10px;border-radius:8px;background:none;border:0;color:var(--text);cursor:pointer}
.sp .res button:hover,.sp .res button.on{background:var(--signal);color:#1a1200}
.sp .res .icon{width:30px;height:30px;border-radius:8px;font-size:16px;display:grid;place-items:center}
.sp .res small{color:var(--dim);font-size:12px;display:block}
.sp .res button:hover small,.sp .res button.on small{color:rgba(26,18,0,.7)}
.sp .res .kind{font-size:11px;color:var(--dimmer);font-family:var(--font-mono)}
.sp .res button:hover .kind,.sp .res button.on .kind{color:rgba(26,18,0,.6)}

/* ---------- Finder ---------- */
.finder{display:flex;height:100%}
.finder .side{width:186px;flex:none;background:var(--glass);border-right:1px solid var(--rule);padding:12px 8px;font-size:12.5px;overflow:auto}
.finder .side h4{margin:10px 10px 4px;font-size:11px;color:var(--dimmer);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.finder .side button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:5px 10px;border-radius:6px;background:none;border:0;color:var(--text);cursor:default}
.finder .side button.on{background:var(--signal-soft);color:var(--signal)}
.finder .side button:hover:not(.on){background:var(--rule)}
.finder .main{flex:1;overflow:auto;padding:14px 16px}
.finder .path{font-family:var(--font-mono);font-size:11.5px;color:var(--dimmer);margin:0 0 12px;letter-spacing:.02em}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.row+.row{margin-top:4px}
.row:hover,.row:focus-visible{background:var(--signal-soft);border-color:var(--rule)}
.row .ricon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:23px;line-height:1;flex:none}
.row h3{margin:0 0 2px;font-size:14px;font-weight:600;font-family:var(--font-mono);letter-spacing:-.01em}
.row p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5;max-width:60ch}
.row .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.row .tags span{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);border:1px solid var(--rule-strong);border-radius:3px;padding:1px 6px}
.row .tags .dom{color:var(--signal);background:var(--signal-soft);border-color:transparent;text-transform:none;letter-spacing:.02em}
.row .arrow{color:var(--dimmer);font-family:var(--font-mono)}
.row:hover .arrow{color:var(--signal)}

/* ---------- 终端 ---------- */
.term{height:100%;display:flex;flex-direction:column;background:#0b0f16;color:#d9dee8;font:13px/1.65 var(--font-mono);padding:10px 14px;cursor:text}
.term .out{flex:1;overflow:auto;white-space:pre-wrap;word-break:break-word}
.term .out>div{min-height:1.65em}
.term .line{display:flex;gap:8px;align-items:baseline}
.term .ps{color:#5FB98B;flex:none;white-space:nowrap}
.term .ps b{color:#F2A03D;font-weight:600}
.term input{flex:1;min-width:0;background:none;border:0;color:inherit;font:inherit;outline:none;padding:0;caret-color:#F2A03D}
.term .k{color:#8B95A9}.term .hit{color:#F2A03D;font-weight:600}.term .ok{color:#5FB98B}.term .err{color:#D9615A}.term .dim{color:#5D667A}

/* ---------- 关于 / 设置 ---------- */
.pane{height:100%;overflow:auto;padding:24px 28px;font-size:14px;line-height:1.75;color:var(--dim)}
.pane h1{font-family:var(--font-mono);font-size:1.5rem;margin:0 0 .4rem;color:var(--text);letter-spacing:-.02em}
.pane h1 .amber{color:var(--signal)}
.pane h2{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin:1.8rem 0 .6rem;display:flex;align-items:center;gap:.7rem}
.pane h2::after{content:"";flex:1;height:1px;background:var(--rule)}
.pane p{margin:0 0 .9rem;max-width:62ch}
.pane strong{color:var(--text);font-weight:600}
.pane code{font-family:var(--font-mono);font-size:.88em;color:var(--text);background:var(--surface2);padding:.1em .4em;border-radius:4px}
.pane .kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;font-size:13px;margin:0 0 1rem}
.pane .kv dt{color:var(--dimmer);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding-top:.2em}
.pane .kv dd{margin:0}
.pane .hero{display:flex;align-items:center;gap:16px;margin:0 0 1.2rem}
.pane .hero .big{width:64px;height:64px;border-radius:16px;font-size:34px;display:grid;place-items:center;flex:none;
                 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(0,0,0,.3)}
.pane .beianline{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:var(--dimmer);margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule)}
.pane .beianline a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.opt{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 .8rem}
.opt button{padding:7px 14px;border-radius:8px;border:1px solid var(--rule-strong);background:var(--surface2);color:var(--text);cursor:pointer;font-size:13px}
.opt button.on{background:var(--signal);border-color:var(--signal);color:#1a1200;font-weight:600}
.opt button .sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px;border:1px solid rgba(0,0,0,.2)}
.toggle{display:flex;align-items:center;gap:10px;margin:0 0 .8rem}
.toggle input{width:38px;height:22px;appearance:none;-webkit-appearance:none;border-radius:11px;background:var(--rule-strong);position:relative;cursor:pointer;margin:0;transition:background .15s}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .15s}
.toggle input:checked{background:var(--ok)}
.toggle input:checked::after{left:18px}

/* ---------- 响应式:窄屏时窗口全屏、Dock 缩小、菜单收起 ---------- */
@media (max-width:760px){
  :root{--dock-reserve:86px}
  #menubar{gap:10px;padding:0 8px 0 4px}
  #menubar .menus,#menubar .beian,#menubar .mi{display:none}
  #desktop-icons{display:none}
  .win{left:0!important;top:0!important;width:100%!important;height:calc(100% - var(--dock-reserve) + 10px)!important;border-radius:0;min-width:0}
  .win.min{transform:scale(.6) translateY(45vh)}
  .resize{display:none}
  .finder .side{display:none}
  #dock{bottom:8px;gap:3px;padding:6px 7px;border-radius:16px}
  #dock .icon{width:44px;height:44px;font-size:22px;border-radius:11px}
  #dock .sep{height:38px}
  #dock .label{display:none}
  #launchpad .grid{grid-template-columns:repeat(auto-fit,84px);gap:18px 10px}
  #launchpad .app .icon{width:60px;height:60px;font-size:30px;border-radius:15px}
  .pane{padding:18px 18px}
  .sp input{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .win,#dock .icon,#launchpad,.menu .dd{transition:none}
  #dock .item.bounce .icon{animation:none}
}
:root[data-motion="reduce"] .win,:root[data-motion="reduce"] #dock .icon,:root[data-motion="reduce"] #launchpad{transition:none}
:root[data-motion="reduce"] #dock .item.bounce .icon{animation:none}