/* ===== App styles ===== */

/* ---- generic app scaffolding ---- */
.app-split{display:flex;flex:1;min-height:0}
.app-sidebar{width:220px;flex:none;background:var(--win-bg-2);border-right:1px solid var(--win-border);
  display:flex;flex-direction:column;overflow-y:auto;padding:8px}
.app-sidebar .sb-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;
  font-size:13.5px;color:var(--win-fg)}
.app-sidebar .sb-item svg{width:16px;height:16px;opacity:.8;flex:none}
.app-sidebar .sb-item:hover{background:rgba(0,0,0,.06)}
html.dark .app-sidebar .sb-item:hover{background:rgba(255,255,255,.07)}
.app-sidebar .sb-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.app-sidebar .sb-item.active svg{opacity:1}
.app-sidebar .sb-sep{height:1px;background:var(--menu-sep);margin:7px 6px}
.app-sidebar .sb-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--win-fg-dim);padding:10px 10px 5px}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.app-scroll{flex:1;overflow-y:auto;padding:18px 22px}
.placeholder-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--win-fg-dim);text-align:center;padding:30px}
.placeholder-page svg{width:64px;height:64px;opacity:.4}
.placeholder-page .t{font-size:17px;font-weight:600}
.placeholder-page .s{font-size:13px;max-width:320px;line-height:1.5}

/* ---- Files (Nautilus) ---- */
.files-toolbar{display:flex;align-items:center;gap:6px;padding:0 8px;flex:1;min-width:0}
.path-bar{display:flex;align-items:center;min-width:0;flex:1;overflow:hidden;background:var(--card);
  border:1px solid var(--win-border);border-radius:7px;height:32px}
.path-bar .pb{display:flex;align-items:center;height:100%;padding:0 10px;font-size:13px;font-weight:500;
  white-space:nowrap;color:var(--win-fg)}
.path-bar .pb:hover{background:rgba(0,0,0,.06)}
html.dark .path-bar .pb:hover{background:rgba(255,255,255,.07)}
.path-bar .pb.current{font-weight:700}
.path-bar .pb-sep{opacity:.45;font-size:12px;padding:0 1px}
.path-bar .pb-home svg{width:14px;height:14px}
.files-body{flex:1;overflow-y:auto;padding:10px;position:relative}
.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}
.f-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:9px;
  text-align:center;position:relative}
.f-item:hover{background:rgba(0,0,0,.05)}
html.dark .f-item:hover{background:rgba(255,255,255,.06)}
.f-item.selected{background:var(--accent-soft)}
.f-item.selected .fi-name{box-shadow:0 0 0 2px var(--accent);border-radius:5px;padding:0 4px}
.f-item .fi{width:44px;height:44px}
.f-item .fi svg{width:44px;height:44px}
.f-item .fi-name{font-size:12.5px;line-height:1.25;word-break:break-word;max-height:32px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.files-list .fl-head,.files-list .fl-row{display:grid;grid-template-columns:26px minmax(160px,1fr) 90px 130px;
  gap:10px;align-items:center;padding:5px 10px}
.files-list .fl-head{font-size:11.5px;font-weight:700;color:var(--win-fg-dim);border-bottom:1px solid var(--win-border)}
.files-list .fl-row{border-radius:7px;font-size:13px}
.files-list .fl-row:hover{background:rgba(0,0,0,.05)}
html.dark .files-list .fl-row:hover{background:rgba(255,255,255,.06)}
.files-list .fl-row.selected{background:var(--accent-soft)}
.files-list .fl-row .fi{width:18px;height:18px}
.files-list .fl-row .fi svg{width:18px;height:18px}
.files-list .fl-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files-list .fl-row .dim{color:var(--win-fg-dim);font-size:12px}
.files-statusbar{height:26px;flex:none;display:flex;align-items:center;padding:0 14px;font-size:11.5px;
  color:var(--win-fg-dim);border-top:1px solid var(--win-border);background:var(--win-bg-2)}
.files-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  gap:12px;color:var(--win-fg-dim)}
.files-empty svg{width:56px;height:56px;opacity:.35}
.files-empty .t{font-size:16px;font-weight:600}
.files-drop-hint{position:absolute;inset:0;border:3px dashed var(--accent);border-radius:10px;
  background:var(--accent-soft);display:none;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--accent)}
.files-body.dragover .files-drop-hint{display:flex}
.rename-entry{font-size:12.5px;text-align:center;border:1.5px solid var(--accent);border-radius:5px;
  background:var(--card);color:var(--win-fg);padding:2px 6px;outline:none;width:110px}

/* ---- Terminal ---- */
.term-app{flex:1;display:flex;flex-direction:column;background:rgba(48,10,36,.96);
  font-family:var(--mono);font-size:13.5px;line-height:1.45;color:#f2f0ef;overflow:hidden}
.term-scroll{flex:1;overflow-y:auto;padding:10px 12px;cursor:text}
.term-scroll pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;margin:0}
.term-line{display:flex;align-items:baseline}
.term-line .t-in{flex:1;background:none;border:0;outline:none;color:inherit;font:inherit;padding:0;caret-color:#f2f0ef}
.term-line .t-in::selection{background:rgba(255,255,255,.3)}
.t-green{color:#4ae234;font-weight:700}
.t-blue{color:#729fcf;font-weight:700}
.t-cyan{color:#34e2e2}
.t-red{color:#ef2929}
.t-dim{color:#9d9894}
.t-yellow{color:#fce94f}
.term-app a,.term-app .t-link{color:#729fcf;text-decoration:underline}

/* ---- Text Editor ---- */
.ted-app{flex:1;display:flex;flex-direction:column;min-height:0}
.ted-tabs{display:flex;align-items:flex-end;gap:2px;padding:6px 8px 0;background:var(--win-bg-2);
  border-bottom:1px solid var(--win-border);flex:none;overflow-x:auto;scrollbar-width:none}
.ted-tabs::-webkit-scrollbar{display:none}
.ted-tab{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px 8px 0 0;font-size:13px;
  background:transparent;color:var(--win-fg-dim);max-width:200px;min-width:0;position:relative}
.ted-tab .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ted-tab:hover{background:rgba(0,0,0,.05)}
html.dark .ted-tab:hover{background:rgba(255,255,255,.06)}
.ted-tab.active{background:var(--win-bg);color:var(--win-fg);box-shadow:0 -1px 0 var(--win-border) inset,1px 0 0 var(--win-border),-1px 0 0 var(--win-border)}
.ted-tab .dot{color:var(--accent);font-weight:700}
.ted-tab .x{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.ted-tab .x:hover{background:rgba(0,0,0,.12)}
html.dark .ted-tab .x:hover{background:rgba(255,255,255,.14)}
.ted-tab .x svg{width:10px;height:10px}
.ted-tab-new{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  margin-bottom:5px;flex:none;color:var(--win-fg-dim)}
.ted-tab-new:hover{background:rgba(0,0,0,.07)}
.ted-editor{flex:1;display:flex;min-height:0;position:relative}
.ted-linenos{width:52px;flex:none;text-align:right;padding:14px 10px 14px 0;font-family:var(--mono);
  font-size:13px;line-height:1.55;color:var(--win-fg-dim);background:var(--win-bg-2);overflow:hidden;user-select:none}
.ted-linenos .cur{color:var(--accent);font-weight:700}
.ted-text{flex:1;border:0;outline:none;resize:none;padding:14px 16px;font-family:var(--mono);font-size:13.5px;
  line-height:1.55;background:var(--win-bg);color:var(--win-fg);white-space:pre;overflow:auto}
.ted-statusbar{height:26px;flex:none;display:flex;align-items:center;gap:14px;padding:0 14px;font-size:11.5px;
  color:var(--win-fg-dim);border-top:1px solid var(--win-border);background:var(--win-bg-2)}
.ted-statusbar .grow{flex:1}
.ted-welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--win-fg-dim)}
.ted-welcome svg{width:72px;height:72px;opacity:.35}
.ted-welcome .t{font-size:20px;font-weight:600}
.ted-welcome .row{display:flex;gap:10px}

/* ---- Settings ---- */
.settings-app{display:flex;flex:1;min-height:0}
.settings-list{width:240px;flex:none;border-right:1px solid var(--win-border);background:var(--win-bg-2);
  display:flex;flex-direction:column;padding:10px 8px;overflow-y:auto}
.settings-search{margin:0 4px 10px}
.settings-list .sb-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;font-size:13.5px}
.settings-list .sb-item svg{width:17px;height:17px;opacity:.75}
.settings-list .sb-item:hover{background:rgba(0,0,0,.06)}
html.dark .settings-list .sb-item:hover{background:rgba(255,255,255,.07)}
.settings-list .sb-item.active{background:var(--accent);color:#fff}
.settings-list .sb-item.active svg{opacity:1}
.settings-panel{flex:1;min-width:0;display:flex;flex-direction:column}
.settings-panel .sp-scroll{flex:1;overflow-y:auto;padding:22px 28px}
.settings-panel h2{font-size:19px;font-weight:700;margin-bottom:18px}
.settings-panel h3{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--win-fg-dim);margin:24px 0 8px}
.settings-panel .card{background:var(--card);border:1px solid var(--win-border);border-radius:10px;overflow:hidden}
.settings-panel .row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--menu-sep)}
.settings-panel .row:last-child{border-bottom:0}
.settings-panel .row .r-label{flex:1;min-width:0}
.settings-panel .row .r-label .l{font-size:14px}
.settings-panel .row .r-label .s{font-size:12px;color:var(--win-fg-dim);margin-top:2px;line-height:1.4}
.settings-panel .row .r-control{display:flex;align-items:center;gap:10px;flex:none}
.settings-panel .row .chev{color:var(--win-fg-dim)}
.wallpaper-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wallpaper-thumb{aspect-ratio:16/10;border-radius:9px;background-size:cover;background-position:center;
  border:2px solid transparent;position:relative;transition:transform .12s,border .12s;overflow:hidden}
.wallpaper-thumb:hover{transform:scale(1.03)}
.wallpaper-thumb.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.accent-row{display:flex;gap:10px;flex-wrap:wrap}
.accent-dot{width:26px;height:26px;border-radius:50%;position:relative;border:2px solid transparent}
.accent-dot.selected{border-color:var(--win-fg);box-shadow:0 0 0 2px var(--card),0 0 0 4px currentColor}
.style-cards{display:flex;gap:14px}
.style-card{flex:1;border:2px solid transparent;border-radius:12px;overflow:hidden;transition:border .12s}
.style-card.selected{border-color:var(--accent)}
.style-card .sc-prev{height:74px;position:relative}
.style-card .sc-prev.light{background:linear-gradient(160deg,#f6f5f4 60%,#e95420 60%)}
.style-card .sc-prev.dark{background:linear-gradient(160deg,#1e1e1e 60%,#8a3324 60%)}
.style-card .sc-label{text-align:center;padding:9px;font-size:13px;font-weight:600;background:var(--card)}
.wifi-net{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--menu-sep)}
.wifi-net:last-child{border-bottom:0}
.wifi-net .wn-name{flex:1;font-size:14px}
.wifi-net .wn-name .s{font-size:11.5px;color:var(--win-fg-dim)}
.wifi-net svg{width:17px;height:17px;flex:none}
.wifi-net.connected{background:var(--accent-soft)}
.about-hero{display:flex;align-items:center;gap:20px;padding:10px 4px 20px}
.about-hero .logo{width:74px;height:74px}
.about-hero .logo svg{width:74px;height:74px}
.about-hero .os-name{font-size:21px;font-weight:700}
.about-hero .os-sub{color:var(--win-fg-dim);font-size:13px;margin-top:3px}
.storage-bar{height:8px;border-radius:4px;background:rgba(127,123,120,.3);overflow:hidden;width:220px}
.storage-bar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.avatar-row{display:flex;gap:10px;flex-wrap:wrap}
.avatar-pick{width:52px;height:52px;border-radius:50%;overflow:hidden;border:2.5px solid transparent;flex:none}
.avatar-pick.selected{border-color:var(--accent)}
.avatar-pick svg{width:52px;height:52px}
.perm-row .switch{margin-left:auto}
.settings-panel select.entry{padding:0 10px;min-width:150px}

/* ---- Calculator ---- */
.calc-app{flex:1;display:flex;flex-direction:column;background:var(--win-bg);padding:10px;gap:8px}
.calc-display{flex:none;min-height:86px;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:flex-end;padding:6px 14px;background:var(--card);border:1px solid var(--win-border);
  border-radius:10px;overflow:hidden}
.calc-display .expr{font-size:14px;color:var(--win-fg-dim);min-height:18px;font-variant-numeric:tabular-nums}
.calc-display .result{font-size:38px;font-weight:300;font-variant-numeric:tabular-nums;word-break:break-all;text-align:right;line-height:1.15}
.calc-keys{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;min-height:0}
.calc-keys .ck{border-radius:9px;background:var(--card);border:1px solid var(--win-border);font-size:18px;
  font-weight:500;display:flex;align-items:center;justify-content:center;transition:background .1s,transform .06s}
.calc-keys .ck:hover{background:var(--card-hover)}
.calc-keys .ck:active{background:var(--card-active);transform:scale(.96)}
.calc-keys .ck.op{color:var(--accent);font-weight:700;font-size:20px}
.calc-keys .ck.eq{background:var(--accent);color:#fff;font-weight:700}
.calc-keys .ck.eq:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}
.calc-keys .ck.fn{font-size:14px;color:var(--win-fg-dim)}

/* ---- Browser (Firefox shell) ---- */
.ff-app{flex:1;display:flex;flex-direction:column;background:var(--win-bg)}
.ff-tabbar{display:flex;align-items:flex-end;gap:3px;padding:7px 8px 0;background:var(--win-bg-2);flex:none}
.ff-tab{display:flex;align-items:center;gap:8px;min-width:0;max-width:210px;padding:8px 10px 8px 14px;
  border-radius:9px 9px 0 0;background:transparent;color:var(--win-fg-dim);font-size:12.5px;flex:1}
.ff-tab.active{background:var(--card);color:var(--win-fg);box-shadow:0 -1px 3px rgba(0,0,0,.08)}
.ff-tab .fav{width:15px;height:15px;flex:none}
.ff-tab .fav svg{width:15px;height:15px}
.ff-tab .tt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-tab .x{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.ff-tab .x:hover{background:rgba(0,0,0,.12)}
html.dark .ff-tab .x:hover{background:rgba(255,255,255,.14)}
.ff-tab .x svg{width:9px;height:9px}
.ff-newtab{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;color:var(--win-fg-dim);flex:none}
.ff-newtab:hover{background:rgba(0,0,0,.08)}
.ff-nav{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--card);
  border-bottom:1px solid var(--win-border);flex:none}
.ff-url{flex:1;display:flex;align-items:center;gap:9px;height:36px;border-radius:999px;
  background:var(--win-bg-2);border:1px solid var(--win-border);padding:0 14px;transition:border .12s,box-shadow .12s}
.ff-url:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ff-url svg{width:15px;height:15px;flex:none;opacity:.7}
.ff-url input{flex:1;border:0;outline:none;background:none;font-size:13.5px;color:var(--win-fg)}
.ff-view{flex:1;position:relative;background:var(--win-bg);overflow:hidden}
.ff-page{position:absolute;inset:0;overflow-y:auto}
.ff-loading{position:absolute;top:0;left:0;height:2.5px;background:var(--accent);z-index:5;
  animation:ffLoad 1s ease;width:0}
@keyframes ffLoad{0%{width:0}60%{width:70%}100%{width:100%}}
/* start page */
.ff-start{max-width:760px;margin:0 auto;padding:60px 30px;text-align:center}
.ff-start .ff-logo{width:76px;height:76px;margin:0 auto 18px}
.ff-start .ff-logo svg{width:76px;height:76px}
.ff-start h1{font-size:26px;font-weight:300;margin-bottom:26px}
.ff-search{display:flex;max-width:560px;margin:0 auto 42px;height:48px;border-radius:999px;
  background:var(--card);border:1px solid var(--win-border);align-items:center;padding:0 8px 0 20px;gap:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ff-search input{flex:1;border:0;outline:none;background:none;font-size:15px;color:var(--win-fg)}
.ff-search .go{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.ff-search .go svg{width:17px;height:17px;color:#fff}
.ff-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ff-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 14px;
  background:var(--card);border:1px solid var(--win-border);border-radius:12px;transition:box-shadow .15s,transform .12s}
.ff-tile:hover{box-shadow:var(--shadow-1);transform:translateY(-2px)}
.ff-tile .ti{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;font-weight:700}
.ff-tile .tn{font-size:12.5px;color:var(--win-fg)}
/* in-browser fake site */
.fake-site{max-width:820px;margin:0 auto;padding:40px 30px 60px;line-height:1.65;font-size:14.5px}
.fake-site h1{font-size:30px;margin-bottom:14px;line-height:1.2}
.fake-site h2{font-size:20px;margin:26px 0 10px}
.fake-site p{margin-bottom:12px;color:var(--win-fg)}
.fake-site .hero{border-radius:14px;margin:0 0 22px;height:230px;display:flex;align-items:center;
  justify-content:center;color:#fff;overflow:hidden}
.fake-site .hero svg{width:100%;height:100%}
.fake-site a{color:var(--link);cursor:pointer}
.ff-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;
  text-align:center;padding:30px;color:var(--win-fg)}
.ff-error .ic{width:64px;height:64px;opacity:.5}
.ff-error .ic svg{width:64px;height:64px}
.ff-error h1{font-size:22px;font-weight:600}
.ff-error p{max-width:380px;color:var(--win-fg-dim);font-size:13.5px;line-height:1.55}

/* ---- Software (App Center) ---- */
.sw-app{flex:1;display:flex;flex-direction:column;min-height:0}
.sw-nav{display:flex;gap:4px;align-items:center}
.sw-nav .nv{padding:6px 13px;border-radius:7px;font-size:13px;font-weight:600;color:var(--win-fg-dim)}
.sw-nav .nv:hover{background:rgba(0,0,0,.06)}
html.dark .sw-nav .nv:hover{background:rgba(255,255,255,.07)}
.sw-nav .nv.active{background:var(--accent-soft);color:var(--accent)}
.sw-body{flex:1;overflow-y:auto}
.sw-hero{margin:16px 22px 8px;border-radius:16px;overflow:hidden;position:relative;height:190px;
  display:flex;align-items:center;color:#fff;
  background:linear-gradient(115deg,#77216f,#e95420 130%)}
.sw-hero .h-in{padding:0 40px;position:relative;z-index:2}
.sw-hero h2{font-size:25px;font-weight:700;margin-bottom:8px}
.sw-hero p{opacity:.9;font-size:13.5px;max-width:380px}
.sw-hero .h-art{position:absolute;right:0;top:0;bottom:0;width:50%;opacity:.5}
.sw-hero .h-art svg{width:100%;height:100%}
.sw-sec{padding:16px 22px}
.sw-sec h3{font-size:17px;font-weight:700;margin-bottom:12px}
.sw-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.sw-card{width:196px;flex:none;background:var(--card);border:1px solid var(--win-border);border-radius:12px;
  padding:16px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .14s,transform .14s}
.sw-card:hover{box-shadow:var(--shadow-1);transform:translateY(-2px)}
.sw-card .ic{width:56px;height:56px}
.sw-card .ic svg{width:56px;height:56px}
.sw-card .nm{font-weight:700;font-size:14px}
.sw-card .ds{font-size:12px;color:var(--win-fg-dim);line-height:1.4;flex:1}
.sw-card .inst{align-self:flex-start}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
/* app detail */
.sw-detail{max-width:720px;margin:0 auto;padding:26px 30px 50px}
.sw-detail .top{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.sw-detail .top .ic{width:84px;height:84px}
.sw-detail .top .ic svg{width:84px;height:84px}
.sw-detail .top .nm{font-size:24px;font-weight:700}
.sw-detail .top .pub{font-size:13px;color:var(--win-fg-dim);margin-top:3px}
.sw-detail .top .meta{font-size:12px;color:var(--win-fg-dim);margin-top:7px;display:flex;gap:14px}
.sw-detail .inst{margin-left:auto}
.sw-detail .shot{border-radius:12px;overflow:hidden;height:210px;margin:8px 0 20px;border:1px solid var(--win-border)}
.sw-detail .shot svg{width:100%;height:100%}
.sw-detail p{line-height:1.65;font-size:14px;margin-bottom:12px}
.sw-detail .ver{color:var(--win-fg-dim);font-size:12.5px}
.sw-progress{height:6px;border-radius:3px;background:rgba(127,123,120,.3);overflow:hidden;margin-top:8px;width:170px}
.sw-progress i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .2s}
.inst{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:7px;font-size:13px;
  font-weight:600;background:var(--accent);color:#fff}
.inst:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}
.inst.installed{background:var(--card);color:var(--win-fg);border:1px solid var(--win-border)}
.sw-star{color:#f6b73c}

/* ---- Image viewer ---- */
.iv-app{flex:1;display:flex;flex-direction:column;background:#1e1e1e;min-height:0}
.iv-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.iv-stage img,.iv-stage svg{max-width:96%;max-height:96%;box-shadow:0 4px 30px rgba(0,0,0,.5);border-radius:4px;
  transition:transform .18s}
.iv-zoom-label{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#fff;
  background:rgba(0,0,0,.55);padding:4px 12px;border-radius:999px;font-size:12px;opacity:0;transition:opacity .2s}
.iv-zoom-label.show{opacity:1}

/* ---- System Monitor ---- */
.sysmon-app{flex:1;display:flex;flex-direction:column;min-height:0}
.sysmon-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--win-border);background:var(--win-bg-2)}
.sysmon-tabs .t{padding:9px 16px;font-size:13px;font-weight:600;color:var(--win-fg-dim);
  border-bottom:2.5px solid transparent}
.sysmon-tabs .t.active{color:var(--win-fg);border-color:var(--accent)}
.sysmon-body{flex:1;min-height:0;overflow:auto}
.proc-table{width:100%;border-collapse:collapse;font-size:12.5px}
.proc-table th{position:sticky;top:0;background:var(--win-bg);text-align:left;padding:8px 12px;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--win-fg-dim);
  border-bottom:1px solid var(--win-border);z-index:2}
.proc-table td{padding:6px 12px;border-bottom:1px solid var(--menu-sep)}
.proc-table tr.sel td{background:var(--accent-soft)}
.proc-table tr:hover td{background:rgba(0,0,0,.04)}
html.dark .proc-table tr:hover td{background:rgba(255,255,255,.05)}
.proc-table .pc{display:flex;align-items:center;gap:9px}
.proc-table .pc svg{width:17px;height:17px}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 22px}
.res-card{background:var(--card);border:1px solid var(--win-border);border-radius:10px;padding:14px 16px}
.res-card .rc-t{font-size:12.5px;color:var(--win-fg-dim);margin-bottom:4px}
.res-card .rc-v{font-size:21px;font-weight:600;margin-bottom:8px}
.res-card canvas{width:100%;height:90px;display:block}
.sysmon-foot{height:30px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;
  border-top:1px solid var(--win-border);background:var(--win-bg-2)}

/* ---- Clocks ---- */
.clocks-app{flex:1;display:flex;flex-direction:column;min-height:0}
.clocks-body{flex:1;overflow-y:auto;padding:20px 24px}
.world-list .wl-row{display:flex;align-items:center;gap:14px;padding:10px 6px;border-bottom:1px solid var(--menu-sep)}
.world-list .wl-city{flex:1}
.world-list .wl-city .c{font-weight:600;font-size:14.5px}
.world-list .wl-city .d{font-size:12px;color:var(--win-fg-dim)}
.world-list .wl-time{font-size:22px;font-weight:300;font-variant-numeric:tabular-nums}
.world-list .wl-day{font-size:11px;color:var(--win-fg-dim);width:64px;text-align:right}
.stopwatch{text-align:center;padding-top:16px}
.stopwatch .sw-time{font-size:58px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.stopwatch .sw-btns{display:flex;gap:12px;justify-content:center;margin-top:20px}
.stopwatch .laps{margin:20px auto 0;max-width:300px;font-variant-numeric:tabular-nums}
.stopwatch .laps .lap{display:flex;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--menu-sep);font-size:13px}
.timer-face{width:230px;height:230px;margin:10px auto;position:relative}
.timer-face svg{width:230px;height:230px}
.timer-face .t-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:40px;font-weight:300;font-variant-numeric:tabular-nums}
.timer-set{display:flex;gap:8px;justify-content:center;margin:8px 0 16px;font-size:15px}
.timer-set input{width:56px;text-align:center;font-size:19px;font-variant-numeric:tabular-nums}
.timer-set .col{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--win-fg-dim)}

/* ---- Mines ---- */
.mines-app{flex:1;display:flex;flex-direction:column;align-items:center;padding:14px;gap:12px;overflow:auto}
.mines-head{display:flex;align-items:center;gap:18px}
.mines-head .mh{background:var(--card);border:1px solid var(--win-border);border-radius:8px;padding:5px 14px;
  font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;min-width:70px;text-align:center}
.mines-face{width:44px;height:44px;border-radius:50%;background:#f6d32d;border:1px solid var(--win-border);
  font-size:22px;display:flex;align-items:center;justify-content:center}
.mines-grid{display:grid;gap:0;background:var(--win-border);border:1px solid var(--win-border);border-radius:6px;overflow:hidden}
.mines-cell{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:15px;
  font-weight:700;background:#c0bfbc;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.mines-cell:hover{background:#d6d5d3}
html.dark .mines-cell{background:#5e5c5a}
html.dark .mines-cell:hover{background:#6a6866}
.mines-cell.open{background:var(--win-bg)}
.mines-cell.flag{background:#c0bfbc}
html.dark .mines-cell.flag{background:#5e5c5a}
.mines-cell.boom{background:#e01b24}

/* ---- Weather ---- */
.weather-app{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:18px}
.weather-now{display:flex;align-items:center;gap:20px}
.weather-now .big{font-size:64px;font-weight:300;line-height:1}
.weather-now .cond{font-size:16px;color:var(--win-fg-dim)}
.weather-now .loc{font-size:19px;font-weight:600}
.weather-now svg{width:74px;height:74px}
.weather-hours{display:flex;gap:10px;overflow-x:auto;padding:4px 0}
.weather-hour{min-width:64px;background:var(--card);border:1px solid var(--win-border);border-radius:10px;
  padding:12px 6px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;font-size:12.5px}
.weather-hour svg{width:26px;height:26px}
.weather-days .wd{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--menu-sep);font-size:13.5px}
.weather-days .wd .d{width:52px;font-weight:600}
.weather-days .wd svg{width:22px;height:22px}
.weather-days .wd .lo{color:var(--win-fg-dim)}
.weather-days .wd .bar{flex:1;height:5px;border-radius:3px;background:rgba(127,123,120,.3);position:relative;margin:0 10px}
.weather-days .wd .bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#f6b73c,#e95420)}

/* ---- Help ---- */
.help-app{flex:1;overflow-y:auto;padding:26px 34px;line-height:1.65;font-size:14px}
.help-app h1{font-size:24px;margin-bottom:14px}
.help-app h2{font-size:17px;margin:22px 0 8px}
.help-app p{margin-bottom:10px;color:var(--win-fg)}
.help-app .kbd-hint{display:inline-block;background:var(--card);border:1px solid var(--win-border);
  border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-size:12.5px;font-family:var(--mono)}
.help-app ul{margin:0 0 10px 20px}
.help-app li{margin-bottom:5px}