/* ===== Apps: Settings, Browser, Software, Clocks, Image Viewer, System Monitor, Welcome, Screenshot ===== */

/* ---------- Settings ---------- */
.settings-root { display:flex; height:100%; background:var(--win-bg); }
.settings-side {
  width:230px; flex:none; background:var(--sidebar-bg); border-right:1px solid var(--border);
  padding:10px 8px; overflow-y:auto;
}
.settings-search { margin-bottom:8px; }
.settings-nav .snav-item {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:7px 11px; border-radius:9px; border:none; background:transparent; cursor:pointer;
  font-size:13.5px; color:var(--fg); margin-bottom:1px;
}
.settings-nav .snav-item:hover { background:var(--hover-row); }
.settings-nav .snav-item.active { background:var(--selected-row); font-weight:500; }
.settings-nav .snav-item .sym { width:16.5px; height:16.5px; fill:currentColor; opacity:.85; flex:none; }
.settings-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.settings-panel { flex:1; overflow-y:auto; padding:22px 30px 40px; }
.settings-panel h2 { font-size:17px; font-weight:700; margin-bottom:18px; }
.settings-panel h3 { font-size:13px; font-weight:700; color:var(--fg-dim); margin:20px 0 8px; letter-spacing:.3px; }
.set-group {
  background:var(--card-bg); border-radius:12px; box-shadow:inset 0 0 0 1px var(--border);
  margin-bottom:14px; overflow:hidden;
}
.set-row {
  display:flex; align-items:center; gap:14px; padding:11px 15px; min-height:48px;
}
.set-row + .set-row { border-top:1px solid var(--border); }
.set-row .sr-icon { width:17px; height:17px; fill:var(--fg-dim); flex:none; }
.set-row .sr-main { flex:1; min-width:0; }
.set-row .sr-title { font-size:13.5px; }
.set-row .sr-sub { font-size:12px; color:var(--fg-dim); margin-top:1px; }
.set-row select, .set-row .gentry { max-width:220px; }

.appear-cards { display:flex; gap:14px; margin-bottom:6px; }
.style-card {
  width:132px; cursor:pointer; border-radius:12px; overflow:hidden;
  box-shadow:inset 0 0 0 1.5px transparent, 0 1px 4px rgba(0,0,0,.18);
  transition:box-shadow .15s ease; background:transparent; border:none; padding:0;
}
.style-card.selected { box-shadow:inset 0 0 0 2.5px var(--accent), 0 1px 4px rgba(0,0,0,.18); }
.style-card .sc-preview { height:86px; position:relative; }
.style-card.light .sc-preview { background:#f5f5f5; }
.style-card.dark .sc-preview { background:#222; }
.style-card .sc-mini-win {
  position:absolute; left:14px; right:14px; top:16px; height:52px; border-radius:7px;
}
.style-card.light .sc-mini-win { background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.style-card.dark .sc-mini-win { background:#333; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.style-card .sc-mini-hb { height:14px; border-radius:7px 7px 0 0; background:#e8e8e8; }
.style-card.dark .sc-mini-hb { background:#3c3c3c; }
.style-card .sc-dot { position:absolute; right:6px; top:3px; width:8px; height:8px; border-radius:99px; background:var(--accent); }
.style-card .sc-label { display:block; text-align:center; font-size:13px; font-weight:500; padding:8px 0 10px; color:var(--fg); }
.accent-row { display:flex; gap:12px; flex-wrap:wrap; padding:4px 2px; }
.accent-swatch {
  width:44px; height:44px; border-radius:99px; cursor:pointer; border:none; position:relative;
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.22), inset 0 1px 2px rgba(255,255,255,.35);
  transition:transform .1s ease;
}
.accent-swatch:hover { transform:scale(1.08); }
.accent-swatch.selected::after {
  content:''; position:absolute; inset:-5px; border-radius:99px;
  border:2.5px solid var(--fg);
}
.wall-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:12px; }
.wall-thumb {
  aspect-ratio:16/9.6; border-radius:10px; overflow:hidden; cursor:pointer; border:none; padding:0;
  background-size:cover; background-position:center; position:relative;
  box-shadow:inset 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,.2);
  transition:transform .12s ease;
}
.wall-thumb:hover { transform:scale(1.03); }
.wall-thumb.selected::after {
  content:''; position:absolute; inset:0; border-radius:10px;
  box-shadow:inset 0 0 0 3px var(--accent);
}
.wall-thumb .wt-check {
  position:absolute; right:7px; top:7px; width:22px; height:22px; border-radius:99px;
  background:var(--accent); color:#fff; display:none; align-items:center; justify-content:center;
}
.wall-thumb.selected .wt-check { display:flex; }
.wall-thumb .wt-check svg { width:12px; height:12px; fill:#fff; }
.wifi-row { cursor:pointer; }
.wifi-row:hover { background:var(--hover-row); }
.signal-bars { display:inline-flex; align-items:flex-end; gap:1.5px; height:13px; }
.signal-bars i { width:3px; border-radius:1px; background:var(--fg); opacity:.9; }
.signal-bars i.off { opacity:.22; }
.about-logo-row { display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 0 16px; }
.about-logo-row svg { width:84px; height:84px; }
.about-grid { display:grid; grid-template-columns:auto 1fr; gap:7px 26px; font-size:13.5px; }
.about-grid dt { color:var(--fg-dim); }
.about-grid dd { user-select:text; }
.user-avatar-big { width:88px; height:88px; border-radius:99px; overflow:hidden; }
.user-avatar-big img, .user-avatar-big svg { width:100%; height:100%; }
.panel-back-btn { display:none; }

/* ---------- Browser (Firefox-like) ---------- */
.browser-root { display:flex; flex-direction:column; height:100%; background:var(--win-bg); }
.br-tabbar {
  display:flex; align-items:flex-end; gap:1px; padding:6px 8px 0; background:var(--hb-bg);
  overflow-x:auto; scrollbar-width:none; flex:none;
}
.br-tabbar::-webkit-scrollbar { display:none; }
.br-tab {
  display:flex; align-items:center; gap:8px; min-width:130px; max-width:200px; flex:none;
  padding:7px 9px; border-radius:9px 9px 0 0; cursor:pointer; font-size:12.5px;
  background:transparent; color:var(--fg-dim); position:relative;
}
.br-tab.active { background:var(--view-bg); color:var(--fg); box-shadow:inset 0 0 0 1px var(--border), inset 0 2px var(--view-bg); }
.br-tab:not(.active):hover { background:var(--hover-row); }
.br-tab .bt-fav { width:15px; height:15px; flex:none; border-radius:3px; }
.br-tab .bt-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.br-tab .bt-close {
  width:19px; height:19px; border-radius:5px; border:none; background:transparent; color:inherit;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.br-tab .bt-close:hover { background:var(--selected-row); }
.br-tab .bt-close svg { width:10px; height:10px; fill:currentColor; }
.br-newtab {
  width:30px; height:30px; border-radius:8px; border:none; background:transparent; color:var(--fg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; margin-bottom:2px;
}
.br-newtab:hover { background:var(--hover-row); }
.br-newtab svg { width:14px; height:14px; fill:currentColor; }
.br-navbar {
  display:flex; align-items:center; gap:6px; padding:5px 9px; background:var(--view-bg);
  border-bottom:1px solid var(--border); flex:none;
}
.br-url {
  flex:1; height:32px; border-radius:99px; border:1px solid var(--border-strong);
  background:var(--entry-bg); display:flex; align-items:center; padding:0 6px 0 12px; gap:7px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.br-url:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.br-url .padlock { width:13px; height:13px; fill:var(--fg-dim); flex:none; }
.br-url input { flex:1; border:none; outline:none; background:transparent; font-size:13px; user-select:text; min-width:0; }
.br-loadingbar { height:2.5px; background:var(--view-bg); overflow:hidden; flex:none; position:relative; }
.br-loadingbar.on::after {
  content:''; position:absolute; left:-40%; top:0; bottom:0; width:40%;
  background:var(--accent); animation:brload .9s ease-in-out infinite;
}
@keyframes brload { to { left:105%; } }
.br-viewport { flex:1; overflow-y:auto; background:#fff; user-select:text; }
body[data-theme="dark"] .br-viewport { background:#fff; }
.br-page { min-height:100%; color:#1c1b22; font-size:14px; line-height:1.55; }

/* start page */
.br-start { min-height:100%; background:linear-gradient(180deg,#f9f9fb 0%,#eef0f4 100%); display:flex; flex-direction:column; align-items:center; padding-top:9vh; }
.br-start .logo-row { display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.br-start .logo-row svg { width:44px; height:44px; }
.br-start .logo-row .t { font-size:24px; font-weight:700; color:#42425a; }
.br-start-box { width:min(560px, 86%); }
.br-start-search {
  display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; padding:0 16px; height:50px;
  box-shadow:0 3px 14px rgba(60,60,90,.14), inset 0 0 0 1px rgba(70,70,110,.12);
}
.br-start-search svg { width:17px; height:17px; fill:#7a7a95; flex:none; }
.br-start-search input { flex:1; border:none; outline:none; font-size:15px; background:transparent; color:#1c1b22; }
.br-tiles { display:grid; grid-template-columns:repeat(auto-fill, 96px); gap:14px; justify-content:center; margin-top:34px; }
.br-tile { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; }
.br-tile .bt-img {
  width:76px; height:76px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(60,60,90,.16), inset 0 0 0 1px rgba(70,70,110,.08);
  transition:transform .12s ease, box-shadow .12s ease; overflow:hidden;
}
.br-tile:hover .bt-img { transform:translateY(-3px); box-shadow:0 6px 16px rgba(60,60,90,.22); }
.br-tile .bt-img img, .br-tile .bt-img svg { width:42px; height:42px; }
.br-tile .bt-label { font-size:12px; color:#42425a; max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* mock site pages */
.site-hero { padding:64px 8% 54px; color:#fff; }
.site-hero h1 { font-size:38px; line-height:1.15; margin-bottom:14px; }
.site-hero p { font-size:16px; opacity:.92; max-width:520px; }
.site-section { padding:36px 8%; }
.site-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.site-card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 10px rgba(30,30,60,.1); }
.site-card h4 { margin-bottom:6px; font-size:15px; }
.site-card p { font-size:13px; color:#555; }
.err-page { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; background:#f9f9fb; color:#1c1b22; }
.err-page h1 { font-size:22px; margin-bottom:10px; }
.err-page p { color:#555; max-width:420px; margin-bottom:6px; }
.search-results-page { padding:26px 9%; max-width:720px; }
.sr-hit { margin-bottom:22px; }
.sr-hit .u { font-size:12.5px; color:#3c4043; }
.sr-hit .t { font-size:17px; color:#1a0dab; cursor:pointer; margin:2px 0; }
.sr-hit .t:hover { text-decoration:underline; }
.sr-hit .d { font-size:13px; color:#4d5156; }

/* ---------- App Center / Software ---------- */
.soft-root { display:flex; flex-direction:column; height:100%; background:var(--win-bg); }
.soft-topbar { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); flex:none; }
.soft-body { flex:1; overflow-y:auto; padding:18px 22px 40px; }
.soft-banner {
  border-radius:16px; overflow:hidden; position:relative; margin-bottom:20px; cursor:pointer;
  min-height:170px; display:flex; align-items:flex-end; background-size:cover; background-position:center;
}
.soft-banner .sb-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,5,16,0) 20%, rgba(10,5,16,.82)); }
.soft-banner .sb-text { position:relative; padding:18px 20px; color:#fff; z-index:1; }
.soft-banner .sb-kicker { font-size:11.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; opacity:.85; }
.soft-banner .sb-title { font-size:23px; font-weight:700; margin:2px 0 4px; }
.soft-banner .sb-sub { font-size:13px; opacity:.9; }
.soft-section-title { font-size:15px; font-weight:700; margin:18px 0 10px; }
.app-card-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.app-card {
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; cursor:pointer;
  background:var(--card-bg); box-shadow:inset 0 0 0 1px var(--border);
  transition:transform .12s ease, box-shadow .12s ease;
}
.app-card:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--border), 0 6px 16px rgba(0,0,0,.14); }
.app-card img, .app-card svg.app-svg { width:52px; height:52px; flex:none; }
.app-card .ac-main { flex:1; min-width:0; }
.app-card .ac-name { font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-card .ac-sub { font-size:11.5px; color:var(--fg-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-card .ac-action { flex:none; }
.chip-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.chip {
  border:none; border-radius:99px; padding:6px 14px; font-size:12.5px; font-weight:500; cursor:pointer;
  background:color-mix(in srgb, var(--fg) 9%, transparent); color:var(--fg);
}
.chip.active { background:var(--accent); color:var(--accent-fg); }
.detail-hero { display:flex; gap:20px; align-items:flex-start; margin-bottom:18px; }
.detail-hero img, .detail-hero svg.app-svg { width:96px; height:96px; flex:none; }
.detail-hero .dh-main { flex:1; min-width:0; }
.detail-hero h2 { font-size:21px; margin-bottom:2px !important; }
.detail-hero .dh-pub { color:var(--fg-dim); font-size:13px; margin-bottom:8px; }
.stars { display:inline-flex; gap:1px; vertical-align:-2px; }
.stars svg { width:14px; height:14px; fill:#e5a50a; }
.stars svg.empty { fill:color-mix(in srgb, var(--fg) 25%, transparent); }
.rating-num { font-size:12.5px; color:var(--fg-dim); margin-left:6px; }
.shot-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:14px; }
.shot-row .shot {
  flex:none; width:250px; aspect-ratio:16/10; border-radius:10px; background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px var(--border);
}
.install-btn { min-width:120px; position:relative; }
.meta-table { display:grid; grid-template-columns:auto 1fr; gap:6px 22px; font-size:13px; background:var(--card-bg); border-radius:12px; padding:14px 16px; box-shadow:inset 0 0 0 1px var(--border); }
.meta-table dt { color:var(--fg-dim); }
.updates-list .app-card { margin-bottom:10px; }
.progress-ring { width:17px; height:17px; }

/* ---------- Clocks ---------- */
.clocks-root { display:flex; flex-direction:column; height:100%; background:var(--win-bg); }
.clocks-tabs { display:flex; gap:4px; padding:8px 12px 0; flex:none; }
.clocks-tabs button {
  border:none; background:transparent; color:var(--fg-dim); font-size:13px; font-weight:700;
  padding:6px 14px; border-radius:99px; cursor:pointer;
}
.clocks-tabs button.active { background:var(--selected-row); color:var(--fg); }
.clocks-body { flex:1; overflow-y:auto; padding:18px; }
.world-clock { display:flex; align-items:center; gap:14px; padding:12px 6px; border-bottom:1px solid var(--border); }
.world-clock:last-child { border-bottom:none; }
.world-clock .wc-city { flex:1; }
.world-clock .wc-city .n { font-size:15px; font-weight:700; }
.world-clock .wc-city .d { font-size:12px; color:var(--fg-dim); }
.world-clock .wc-time { font-size:26px; font-weight:300; font-variant-numeric:tabular-nums; }
.analog-face { width:150px; height:150px; margin:6px auto 16px; }
.timer-display { text-align:center; font-size:56px; font-weight:300; font-variant-numeric:tabular-nums; padding:16px 0; }
.timer-controls { display:flex; justify-content:center; gap:12px; padding-bottom:10px; }
.stopwatch-laps { max-height:160px; overflow-y:auto; margin-top:10px; }
.lap-row { display:flex; justify-content:space-between; padding:5px 8px; font-size:13px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }

/* ---------- Image Viewer ---------- */
.eog-root { display:flex; flex-direction:column; height:100%; background:#232028; }
.eog-stage { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; position:relative; }
.eog-stage img { max-width:none; transition:transform .12s ease; box-shadow:0 6px 30px rgba(0,0,0,.5); }
.eog-toolbar {
  display:flex; align-items:center; justify-content:center; gap:6px; padding:7px;
  background:rgba(20,18,24,.92); border-top:1px solid rgba(255,255,255,.09); flex:none;
}
.eog-toolbar .icon-btn { color:#eee; }
.eog-toolbar .icon-btn:hover { background:rgba(255,255,255,.12); }
.eog-zoom-label { color:#bbb; font-size:12px; min-width:46px; text-align:center; }
.eog-count { color:#999; font-size:12px; margin-left:10px; }

/* ---------- System Monitor ---------- */
.sysmon-root { display:flex; flex-direction:column; height:100%; background:var(--win-bg); }
.sysmon-tabs { display:flex; gap:4px; padding:8px 12px 0; border-bottom:1px solid var(--border); flex:none; }
.sysmon-tabs button {
  border:none; background:transparent; color:var(--fg-dim); font-size:13px; font-weight:700;
  padding:7px 14px; cursor:pointer; border-radius:8px 8px 0 0;
}
.sysmon-tabs button.active { color:var(--fg); box-shadow:inset 0 -2.5px var(--accent); background:transparent; }
.proc-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.proc-table th { text-align:left; padding:7px 10px; color:var(--fg-dim); font-size:11.5px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--win-bg); }
.proc-table td { padding:5px 10px; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.proc-table tr:hover td { background:var(--hover-row); }
.proc-bar { display:inline-block; width:56px; height:5px; border-radius:3px; background:color-mix(in srgb, var(--fg) 14%, transparent); vertical-align:middle; margin-left:7px; overflow:hidden; }
.proc-bar i { display:block; height:100%; background:var(--accent); }
.res-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; }
.res-card { background:var(--card-bg); border-radius:12px; padding:12px 14px; box-shadow:inset 0 0 0 1px var(--border); }
.res-card h4 { font-size:12.5px; font-weight:700; color:var(--fg-dim); margin-bottom:8px; display:flex; justify-content:space-between; }
.res-card canvas { width:100%; height:110px; display:block; }
.res-legend { display:flex; gap:14px; font-size:11.5px; color:var(--fg-dim); margin-top:6px; }
.res-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }

/* ---------- Welcome ---------- */
.welcome-root { padding:26px 30px; text-align:center; overflow-y:auto; }
.welcome-root svg.big-logo { width:92px; height:92px; margin-bottom:10px; }
.welcome-root h1 { font-size:22px; margin-bottom:6px; }
.welcome-root .sub { color:var(--fg-dim); font-size:13.5px; margin-bottom:20px; }
.welcome-tips { display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; margin-bottom:20px; }
.welcome-tip { background:var(--card-bg); border-radius:12px; padding:13px 15px; box-shadow:inset 0 0 0 1px var(--border); }
.welcome-tip .t { font-weight:700; font-size:13px; margin-bottom:3px; display:flex; gap:8px; align-items:center; }
.welcome-tip .t svg { width:15px; height:15px; fill:var(--accent); }
.welcome-tip .d { font-size:12.5px; color:var(--fg-dim); line-height:1.4; }
kbd.key {
  font-family:var(--font-ui); font-size:11.5px; background:var(--btn-bg); border:1px solid var(--border-strong);
  border-bottom-width:2px; border-radius:5px; padding:1px 6px;
}

/* ---------- Screenshot UI ---------- */
.shot-ui {
  position:fixed; inset:0; z-index:8500; display:none; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.25); padding-bottom:60px;
}
.shot-ui.show { display:flex; }
.shot-panel {
  background:color-mix(in srgb, #2a2733 94%, transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; color:#fff;
  box-shadow:0 16px 50px rgba(0,0,0,.5); animation:dialog-in .18s cubic-bezier(.3,1.1,.4,1);
}
.shot-modes { display:flex; gap:8px; justify-content:center; }
.shot-mode {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 16px; border-radius:12px;
  border:none; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-size:11.5px;
}
.shot-mode.selected { background:var(--accent); }
.shot-mode svg { width:22px; height:22px; fill:currentColor; }
.shot-capture {
  align-self:center; width:52px; height:52px; border-radius:99px; border:3px solid #fff;
  background:rgba(255,255,255,.15); cursor:pointer; transition:transform .1s ease;
}
.shot-capture:hover { transform:scale(1.06); }