/* ============ shared app bits ============ */
.app-toolbar { display:flex; align-items:center; gap:8px; padding:0 12px; height:53px; flex:none; background:var(--toolbar-bg); -webkit-backdrop-filter:blur(25px); backdrop-filter:blur(25px); border-bottom:.5px solid var(--border); position:relative; }
.app-toolbar .tb-title { font-size:13px; font-weight:600; }
.tb-btn { width:28px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:var(--text-2); border:none; background:transparent; }
.tb-btn:hover { background:var(--hover); color:var(--text); }
.tb-btn.lit { background:var(--hover); color:var(--accent); }
.tb-btn:disabled { opacity:.35; }
.tb-btn svg { width:16px; height:16px; }
.sidebar { background:var(--sidebar-bg); -webkit-backdrop-filter:blur(30px) saturate(1.7); backdrop-filter:blur(30px) saturate(1.7); border-right:.5px solid var(--border); overflow-y:auto; flex:none; padding:8px 6px; }
.sb-cat { font-size:11px; font-weight:600; color:var(--text-3); padding:8px 9px 3px; }
.sb-item { display:flex; align-items:center; gap:7px; padding:3.5px 9px; border-radius:6px; font-size:13px; color:var(--text); }
.sb-item:hover:not(.sel) { background:var(--hover); }
.sb-item.sel { background:var(--sel); }
.sb-item .sb-ic { width:17px; height:17px; display:flex; align-items:center; justify-content:center; flex:none; color:#0a82ff; }
.sb-item .sb-ic svg { width:15px; height:15px; }
.sb-item .sb-tag { margin-left:auto; font-size:11px; color:var(--text-3); }
.statusbar { height:24px; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-3); border-top:.5px solid var(--border); background:var(--toolbar-bg); }
.empty-hint { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-3); gap:8px; font-size:13px; }
.empty-hint svg { width:44px; height:44px; opacity:.5; }

/* ============ Finder ============ */
.finder { display:flex; flex:1; min-height:0; }
.finder-main { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--content-bg); }
.finder-view { flex:1; overflow:auto; position:relative; }
.f-icons { display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; padding:14px; }
.f-icon { width:88px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; border-radius:8px; }
.f-icon .fi-img { width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
.f-icon .fi-img svg { width:48px; height:48px; }
.f-icon .fi-label { font-size:12px; text-align:center; line-height:1.2; max-width:88px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; padding:0 4px; border-radius:4px; }
.f-icon.sel { background:var(--sel); }
.f-icon.sel .fi-label { background:var(--label-sel); color:#fff; }
.f-icon.renaming .fi-label { background:#fff; color:#000; -webkit-line-clamp:1; }
.f-list { font-size:12px; }
.f-list table { width:100%; border-collapse:collapse; }
.f-list th { text-align:left; font-weight:500; color:var(--text-2); padding:4px 10px; border-bottom:.5px solid var(--border); border-right:.5px solid var(--border); position:sticky; top:0; background:var(--content-bg); font-size:11.5px; white-space:nowrap; }
.f-list th:last-child { border-right:none; }
.f-list th.sorted { color:var(--text); }
.f-list td { padding:3px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; border-right:.5px solid transparent; }
.f-list tr { border-radius:4px; }
.f-list tr.sel td { background:var(--sel); }
.f-list tr.sel td .fl-name { color:var(--text); }
.f-list tr:nth-child(even) td { background:rgba(120,120,128,.06); }
.f-list tr.sel:nth-child(even) td { background:var(--sel); }
.f-list .fl-name { display:flex; align-items:center; gap:7px; font-size:12.5px; }
.f-list .fl-name svg { width:16px; height:16px; flex:none; }
.f-list .fl-meta { color:var(--text-3); }
.f-cols { display:flex; height:100%; overflow-x:auto; }
.f-col { width:230px; flex:none; border-right:.5px solid var(--border); overflow-y:auto; padding:4px 0; }
.f-col .fc-row { display:flex; align-items:center; gap:7px; padding:3px 10px; font-size:12.5px; margin:0 4px; border-radius:5px; }
.f-col .fc-row svg { width:16px; height:16px; flex:none; }
.f-col .fc-row .fc-arrow { margin-left:auto; color:var(--text-3); font-size:10px; }
.f-col .fc-row.sel { background:var(--accent); color:#fff; }
.f-col .fc-row.sel .fc-arrow { color:rgba(255,255,255,.8); }
.f-col.preview { display:flex; flex-direction:column; align-items:center; padding-top:36px; gap:8px; }
.f-col.preview .pv-icon { width:64px; height:64px; }
.f-col.preview .pv-icon svg { width:100%; height:100%; }
.f-col.preview .pv-name { font-size:13px; font-weight:600; text-align:center; }
.f-col.preview .pv-meta { font-size:11px; color:var(--text-3); text-align:center; }
.f-gallery { display:flex; flex-direction:column; height:100%; }
.fg-main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.fg-main .fg-icon { width:180px; height:180px; }
.fg-main .fg-icon svg { width:100%; height:100%; }
.fg-main .fg-name { font-size:14px; font-weight:600; }
.fg-main .fg-meta { font-size:11.5px; color:var(--text-3); }
.fg-strip { height:56px; flex:none; border-top:.5px solid var(--border); display:flex; align-items:center; gap:8px; padding:6px 10px; overflow-x:auto; }
.fg-thumb { width:44px; height:44px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex:none; }
.fg-thumb.sel { box-shadow:0 0 0 2px var(--accent); }
.fg-thumb svg { width:38px; height:38px; }

/* ============ Notes ============ */
.notes { display:flex; flex:1; min-height:0; }
.notes-list { width:230px; flex:none; border-right:.5px solid var(--border); overflow-y:auto; background:var(--content-bg); }
.nl-item { padding:9px 13px; border-bottom:.5px solid var(--border); }
.nl-item.sel { background:#f8d743; }
html[data-theme="dark"] .nl-item.sel { background:#7a6410; }
.nl-item .nl-title { font-size:13px; font-weight:600; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nl-item .nl-sub { font-size:11px; color:var(--text-3); display:flex; gap:7px; }
.nl-item .nl-sub .prev { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.nl-item.sel .nl-sub { color:rgba(0,0,0,.55); }
html[data-theme="dark"] .nl-item.sel .nl-sub { color:rgba(255,255,255,.6); }
.notes-editor { flex:1; display:flex; flex-direction:column; background:var(--content-bg); }
.notes-editor .ne-date { text-align:center; font-size:11px; color:var(--text-3); padding:9px 0 4px; flex:none; }
.notes-editor textarea { flex:1; border:none; outline:none; resize:none; padding:4px 26px 26px; font-size:14px; line-height:1.55; background:transparent; color:var(--text); font-family:inherit; }

/* ============ TextEdit ============ */
.textedit { flex:1; display:flex; flex-direction:column; background:var(--content-bg); }
.textedit textarea { flex:1; border:none; outline:none; resize:none; padding:16px 20px; font-size:13px; line-height:1.5; background:transparent; color:var(--text); font-family:ui-monospace,"SF Mono",Menlo,monospace; }

/* ============ Calculator ============ */
.calc { display:flex; flex-direction:column; flex:1; background:var(--content-bg); }
.calc-display { padding:14px 14px 6px; text-align:right; font-size:34px; font-weight:300; color:var(--text); overflow:hidden; white-space:nowrap; min-height:56px; }
.calc-grid { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); padding:1px; }
.calc-grid button { border:none; font-size:17px; background:#e8e8ea; color:#111; display:flex; align-items:center; justify-content:center; }
html[data-theme="dark"] .calc-grid button { background:#5a5a5e; color:#fff; }
.calc-grid button:active { filter:brightness(1.25); }
.calc-grid button.fn { background:#c9c9cd; }
html[data-theme="dark"] .calc-grid button.fn { background:#454549; }
.calc-grid button.op { background:#ff9f0a; color:#fff; font-size:19px; }
.calc-grid button.op.lit { background:#fff; color:#ff9f0a; }
.calc-grid button.zero { grid-column:span 2; }
.calc { border-radius:0 0 11px 11px; }

/* ============ Safari ============ */
.safari { display:flex; flex-direction:column; flex:1; min-height:0; background:var(--content-bg); position:relative; }
.sf-side { position:absolute; left:0; top:44px; bottom:0; width:200px; background:var(--sidebar-bg); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); border-right:.5px solid var(--border); z-index:20; overflow:auto; }
.sf-side-h { font-size:11px; font-weight:600; color:var(--text-3); padding:10px 12px 4px; }
.sf-side-item { display:flex; align-items:center; gap:9px; padding:5px 12px; font-size:12.5px; color:var(--text); cursor:default; }
.sf-side-item:hover { background:var(--hover); }
.sf-side-item .fav-ic { width:22px; height:22px; border-radius:6px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none; }
.sf-tabsbar { display:flex; align-items:flex-end; gap:4px; flex:1; min-width:0; overflow:hidden; height:32px; padding:0 6px; }
.sf-tab { display:flex; align-items:center; gap:6px; height:28px; padding:0 8px 0 10px; border-radius:7px 7px 0 0; font-size:11.5px; min-width:110px; max-width:170px; background:transparent; color:var(--text-2); position:relative; }
.sf-tab.on { background:var(--window-bg); color:var(--text); box-shadow:0 0 0 .5px var(--border); border-radius:7px; }
.sf-tab .t-fav { width:13px; height:13px; flex:none; }
.sf-tab .t-favic { display:inline-flex; width:14px; height:14px; border-radius:4px; align-items:center; justify-content:center; font-size:8.5px; font-weight:700; }
.sf-tab .t-t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-tab .t-x { width:14px; height:14px; border-radius:4px; display:none; align-items:center; justify-content:center; font-size:11px; flex:none; }
.sf-tab:hover .t-x { display:flex; }
.sf-tab .t-x:hover { background:var(--active); }
.sf-addr { flex:1; max-width:560px; margin:0 auto; position:relative; }
.sf-addr input { width:100%; text-align:center; font-size:13px; padding:5px 12px; border-radius:8px; border:none; outline:none; background:var(--hover); color:var(--text); box-shadow:inset 0 0 0 .5px var(--border-strong); }
.sf-addr input:focus { box-shadow:inset 0 0 0 .5px var(--accent), 0 0 0 3px rgba(var(--accent-rgb),.3); background:var(--input-bg); }
.sf-progress { position:absolute; left:2px; right:2px; bottom:-1px; height:2px; border-radius:1px; overflow:hidden; }
.sf-progress i { display:block; height:100%; width:0%; background:var(--accent); transition:width .25s ease; }
.sf-suggest { position:absolute; top:32px; left:-40px; right:-40px; background:var(--panel-bg); -webkit-backdrop-filter:blur(45px); backdrop-filter:blur(45px); border-radius:11px; box-shadow:0 10px 40px rgba(0,0,0,.3), 0 0 0 .5px var(--panel-border); padding:5px; z-index:50; }
.sf-suggest .ss-row { display:flex; align-items:center; gap:8px; padding:5px 9px; border-radius:7px; font-size:13px; }
.sf-suggest .ss-row.sel { background:var(--accent); color:#fff; }
.sf-suggest .ss-cat { font-size:11px; color:var(--text-3); padding:5px 9px 2px; font-weight:600; }
.sf-content { flex:1; overflow:auto; position:relative; }
.sf-start { padding:36px 44px; max-width:860px; margin:0 auto; }
.sf-start h2 { font-size:19px; font-weight:700; margin:26px 0 13px; }
.sf-fav-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:18px 10px; }
.sf-fav { display:flex; flex-direction:column; align-items:center; gap:7px; }
.sf-fav .fv-ic { width:60px; height:60px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:600; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15), inset 0 0 0 .5px rgba(0,0,0,.08); }
.sf-fav .fv-n { font-size:11.5px; color:var(--text); }
.sf-privacy { background:var(--hover); border-radius:12px; padding:14px 16px; display:flex; gap:12px; align-items:center; font-size:12.5px; color:var(--text-2); }
.sf-privacy svg { width:30px; height:30px; flex:none; color:var(--accent); }
/* fake web */
.web-apple { min-height:100%; }
.web-apple .wa-nav { background:rgba(22,22,23,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); display:flex; justify-content:center; gap:34px; padding:11px 0; color:#f5f5f7; font-size:12px; }
.web-apple .wa-hero { text-align:center; padding:60px 20px 50px; background:#fafafa; color:#1d1d1f; }
html[data-theme="dark"] .web-apple .wa-hero { background:#000; color:#f5f5f7; }
.web-apple .wa-hero h1 { font-size:46px; font-weight:700; letter-spacing:-.5px; }
.web-apple .wa-hero h3 { font-size:21px; font-weight:400; margin-top:8px; color:#6e6e73; }
.web-apple .wa-links { margin-top:16px; display:flex; gap:22px; justify-content:center; }
.web-apple .wa-links span { color:#06c; font-size:17px; }
.web-apple .wa-device { width:70%; max-width:640px; height:190px; margin:34px auto 0; border-radius:14px; background:linear-gradient(135deg,#232526,#41484e); position:relative; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.web-apple .wa-device::after { content:""; position:absolute; inset:8px; border-radius:9px; background:linear-gradient(115deg,#0a84ff 0%,#bf5af2 45%,#ff375f 80%,#ff9f0a 100%); }
.web-wiki { max-width:850px; margin:0 auto; padding:28px 40px 60px; font-family:Georgia,'Times New Roman',serif; color:#202122; background:#fff; min-height:100%; }
html[data-theme="dark"] .web-wiki { background:#1e1e20; color:#e8e8ea; }
.web-wiki h1 { font-family:'Linux Libertine',Georgia,serif; font-weight:400; font-size:30px; border-bottom:1px solid #a2a9b1; padding-bottom:6px; margin-bottom:4px; }
.web-wiki .ww-sub { color:#54595d; font-size:12.5px; margin-bottom:18px; }
.web-wiki p { font-size:14px; line-height:1.65; margin:10px 0; }
.web-wiki h2 { font-weight:400; font-size:22px; border-bottom:1px solid #a2a9b1; margin:22px 0 8px; padding-bottom:3px; }
.web-wiki .ww-box { float:right; width:250px; border:1px solid #a2a9b1; background:#f8f9fa; margin:0 0 12px 18px; font-size:12px; }
html[data-theme="dark"] .web-wiki .ww-box { background:#2a2a2e; }
.web-wiki .ww-box .b-t { text-align:center; font-weight:600; padding:7px; border-bottom:1px solid #a2a9b1; }
.web-wiki .ww-box .b-r { display:flex; padding:5px 8px; gap:8px; }
.web-wiki .ww-box .b-r b { width:76px; flex:none; }
.web-results { max-width:640px; margin:0 auto; padding:34px 30px; }
.web-results .wr-q { font-size:13px; color:var(--text-3); margin-bottom:20px; }
.web-results .wr-item { margin-bottom:22px; }
.web-results .wr-url { font-size:12px; color:var(--text-3); }
.web-results .wr-t { font-size:17px; color:#0a5bd6; margin:1px 0 3px; }
html[data-theme="dark"] .web-results .wr-t { color:#6ea8ff; }
.web-results .wr-d { font-size:13px; color:var(--text-2); line-height:1.45; }
.web-error { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70%; text-align:center; padding:40px; }
.web-error .we-t { font-size:20px; font-weight:600; margin:14px 0 8px; }
.web-error .we-m { font-size:13px; color:var(--text-2); max-width:380px; line-height:1.5; }

/* ============ Terminal ============ */
.term { flex:1; background:rgba(20,22,26,.88); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); color:#e6e6e6; font-family:ui-monospace,"SF Mono",Menlo,Monaco,monospace; font-size:12px; padding:8px 10px; overflow-y:auto; line-height:1.45; }
.term .t-line { white-space:pre-wrap; word-break:break-all; }
.term .t-in { display:flex; }
.term .t-in .prompt { color:#7ee787; flex:none; white-space:pre; }
.term .t-in input { flex:1; background:transparent; border:none; outline:none; color:#e6e6e6; font:inherit; padding:0; caret-color:#7ee787; }
.term .dim { color:#8b949e; }
.term .err { color:#ff7b72; }
.term .blue { color:#79c0ff; }

/* ============ System Settings ============ */
.sys { display:flex; flex:1; min-height:0; }
.sys-main { flex:1; background:var(--content-bg); overflow-y:auto; padding:18px 26px 40px; }
.sys-pane-title { font-size:20px; font-weight:700; margin-bottom:16px; }
.sys-card { background:var(--hover); border-radius:10px; padding:2px 14px; margin-bottom:16px; }
.sys-row { display:flex; align-items:center; padding:9px 0; border-bottom:.5px solid var(--border); font-size:13px; gap:10px; }
.sys-row:last-child { border-bottom:none; }
.sys-row .sr-label { flex:1; }
.sys-row .sr-sub { font-size:11px; color:var(--text-3); }
.sys-row select, .sys-row .pick { font-size:12.5px; }
.appear-row { display:flex; gap:22px; padding:14px 4px; }
.appear-opt { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12.5px; }
.appear-opt .ao-prev { width:88px; height:58px; border-radius:7px; border:2.5px solid transparent; overflow:hidden; position:relative; box-shadow:0 0 0 .5px var(--border-strong), 0 2px 8px rgba(0,0,0,.12); }
.appear-opt.sel .ao-prev { border-color:var(--accent); }
.ao-prev .mb { height:7px; }
.ao-prev .win { position:absolute; left:8px; top:13px; width:52px; height:34px; border-radius:3px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.appear-light .mb { background:rgba(255,255,255,.7); } .appear-light { background:linear-gradient(135deg,#9db7d4,#d7a1b6); } .appear-light .win { background:#f5f5f7; }
.appear-dark { background:linear-gradient(135deg,#2b3245,#4a2f43); } .appear-dark .mb { background:rgba(20,20,24,.8); } .appear-dark .win { background:#2e2e32; }
.appear-auto { background:linear-gradient(90deg,#9db7d4 50%,#2b3245 50%); } .appear-auto .mb { background:linear-gradient(90deg,rgba(255,255,255,.7) 50%,rgba(20,20,24,.8) 50%); } .appear-auto .win { background:linear-gradient(90deg,#f5f5f7 50%,#2e2e32 50%); }
.accent-row { display:flex; gap:9px; padding:6px 0; }
.accent-dot { width:18px; height:18px; border-radius:50%; position:relative; }
.accent-dot.sel::after { content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; opacity:.85; }
.wp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
.wp-item { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.wp-item .wp-th { aspect-ratio:16/10; border-radius:8px; border:2.5px solid transparent; box-shadow:0 0 0 .5px var(--border-strong), 0 3px 10px rgba(0,0,0,.15); background-size:cover; background-position:center; }
.wp-item.sel .wp-th { border-color:var(--accent); }
.wifi-net { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:.5px solid var(--border); font-size:13px; }
.wifi-net:last-child { border-bottom:none; }
.wifi-net .lock { margin-left:auto; color:var(--text-3); font-size:11px; }
.wifi-net .sig { color:var(--text-3); }
.about-card { display:flex; gap:18px; align-items:center; padding:16px; }
.about-card .ac-icon { width:84px; height:84px; flex:none; }
.about-card .ac-icon svg { width:100%; height:100%; }

/* ============ Activity Monitor ============ */
.act { display:flex; flex-direction:column; flex:1; min-height:0; background:var(--content-bg); }
.act-table { flex:1; overflow:auto; font-size:12px; }
.act-table table { width:100%; border-collapse:collapse; }
.act-table th { position:sticky; top:0; background:var(--content-bg); text-align:left; font-weight:500; color:var(--text-2); padding:4px 10px; border-bottom:.5px solid var(--border); font-size:11.5px; white-space:nowrap; }
.act-table td { padding:2.5px 10px; white-space:nowrap; }
.act-table tr.sel td { background:var(--sel); }
.act-bottom { flex:none; border-top:.5px solid var(--border); display:flex; height:76px; }
.act-graph { flex:1; position:relative; }
.act-graph canvas { position:absolute; inset:0; width:100%; height:100%; }
.act-stat { padding:8px 14px; font-size:11px; color:var(--text-2); min-width:180px; border-left:.5px solid var(--border); }
.act-stat b { font-weight:600; color:var(--text); }

/* ============ misc ============ */
.getinfo { padding:14px; width:270px; font-size:11.5px; }
.getinfo .gi-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.getinfo .gi-head .gi-ic { width:44px; height:44px; }
.getinfo .gi-head .gi-ic svg { width:100%; height:100%; }
.getinfo .gi-head b { font-size:13px; }
.getinfo .gi-row { display:flex; gap:8px; padding:2.5px 0; }
.getinfo .gi-row b { width:78px; flex:none; font-weight:600; }
.getinfo .gi-row span { color:var(--text-2); }