/* ---------- shared UI: menus, window chrome, dialogs, explorer, control panel ---------- */
[hidden] { display: none !important; }
body.busy, body.busy * { cursor: progress !important; }
hr { border: 0; border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--hilite); margin: 8px 0; }
.lnk, .hlp-doc a { color: #0000ee; text-decoration: underline; cursor: pointer; }
input.in, select.in { background: #fff; font: 12px var(--ui); height: 21px; padding: 0 3px; color: #000; }
select.in { padding: 0 1px; }
input.in:disabled, select.in:disabled { background: var(--face); color: var(--shadow); }
input.num { width: 56px; }
.cap { height: 9px; margin-top: 4px; border: 1px solid #8a8a8a; background: #fff; }
.cap i { display: block; height: 100%; background: #3a6ea5; }
.cap i.full { background: linear-gradient(90deg, #ff8a1a, #d42a0a); }

/* popup menus */
.pmenu { position: fixed; z-index: 3000; padding: 2px; min-width: 150px; font: 12px var(--ui); color: #000; }
.pmenu.fx { animation: menuin .13s ease-out; }
@keyframes menuin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.pm-item { display: grid; grid-template-columns: 18px 1fr auto 14px; align-items: center; height: 20px; padding: 0 4px 0 2px; white-space: nowrap; cursor: default; }
.pm-item.act { background: var(--sel); color: #fff; }
.pm-item.dis { color: var(--shadow); text-shadow: 1px 1px var(--hilite); }
.pm-item.dis.act { color: var(--shadow); text-shadow: none; }
.pm-item.bold .pm-label { font-weight: bold; }
.pm-key { padding-left: 26px; }
.pm-arrow { font-size: 8px; text-align: right; }
.pm-chk { text-align: center; font-size: 11px; }
.pm-sep { height: 2px; margin: 3px 1px; border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--hilite); }
.menubar.live .mbi { padding: 1px 7px; cursor: default; }
.menubar .mbi.open { box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hilite) !important; }

/* window chrome */
.rz { position: absolute; z-index: 3; }
.rz-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
.rz-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize; }
.rz-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: e-resize; }
.rz-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }
.rz-ne { right: -3px; top: -3px; width: 10px; height: 10px; cursor: ne-resize; }
.rz-nw { left: -3px; top: -3px; width: 10px; height: 10px; cursor: nw-resize; }
.rz-se { right: -3px; bottom: -3px; width: 12px; height: 12px; cursor: se-resize; }
.rz-sw { left: -3px; bottom: -3px; width: 10px; height: 10px; cursor: sw-resize; }
.win.max .rz { display: none; }
.win .ti { cursor: default; }
.drag-outline { position: absolute; z-index: 9999; border: 3px solid #fff; outline: 1px dotted #000; mix-blend-mode: difference; pointer-events: none; }
#tooltip { position: fixed; z-index: 4000; background: #ffffe1; border: 1px solid #000; padding: 1px 4px 2px; font: 11px var(--ui); white-space: pre; pointer-events: none; display: none; box-shadow: 1px 1px 2px rgba(0,0,0,.25); }
#tooltip.show { display: block; animation: fadein .15s; }
@keyframes fadein { from { opacity: 0; } }
#alttab { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3500; padding: 12px; }
.at-icons { display: flex; gap: 6px; flex-wrap: wrap; max-width: 440px; justify-content: center; }
.at-icons span { padding: 4px; border: 2px solid transparent; }
.at-icons span.on { border-color: var(--sel); }
.at-icons svg { width: 32px; height: 32px; display: block; }
.at-title { margin-top: 10px; padding: 3px 8px; background: #fff; min-width: 300px; text-align: center; }

/* toolbars */
.ex-tb, .hlp-tb { gap: 1px; flex-wrap: wrap; }
.tbtn { background: none; border: 1px solid transparent; height: 26px; padding: 0 5px; display: flex; align-items: center; gap: 4px; font: 11px var(--ui); color: #000; cursor: default; }
.tbtn svg { width: 20px; height: 20px; }
.tbtn i { font-style: normal; font-size: 8px; }
.tbtn:hover:not(.off) { border-color: var(--hilite) var(--shadow) var(--shadow) var(--hilite); }
.tbtn:active:not(.off) { border-color: var(--shadow) var(--hilite) var(--hilite) var(--shadow); }
.tbtn.off { opacity: .45; filter: grayscale(1); }
.tsep { width: 2px; height: 22px; border-left: 1px solid var(--shadow); border-right: 1px solid var(--hilite); margin: 0 3px; }
.addrf { padding: 0 2px; }
.addrf input { flex: 1; border: 0; outline: 0; font: 12px var(--ui); min-width: 0; height: 17px; }
.addr .go { min-width: 0; height: 21px; padding: 0 6px; display: flex; align-items: center; gap: 3px; }
.addr .go svg { width: 14px; height: 14px; }

/* explorer views */
.files { position: relative; outline: none; }
.files.v-large { display: grid; grid-template-columns: repeat(auto-fill, 78px); gap: 8px 4px; align-content: start; padding: 8px 6px; }
.files.v-large .fi { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px; }
.files.v-large .fi svg { width: 32px; height: 32px; }
.files.v-large .fi-name { font-size: 11px; text-align: center; word-break: break-word; padding: 0 2px; max-width: 76px; line-height: 13px; }
.files.v-small, .files.v-list { display: flex; flex-wrap: wrap; align-content: flex-start; padding: 4px; gap: 2px 8px; }
.files.v-list { flex-direction: column; max-height: 100%; }
.files.v-small .fi, .files.v-list .fi { display: flex; align-items: center; gap: 4px; width: 170px; padding: 1px 2px; }
.files.v-small .fi svg, .files.v-list .fi svg { width: 16px; height: 16px; flex: none; }
.files .fi-name { overflow: hidden; text-overflow: ellipsis; }
.files .fi.sel .fi-name { background: var(--sel); color: #fff; outline: 1px dotted #000; }
.files .fi.sel svg, .icon.sel .img svg { filter: brightness(.6) sepia(1) hue-rotate(190deg) saturate(4); }
.files.v-details { display: block; padding: 0; }
.v-details .dt-head, .v-details .dt-row { display: grid; grid-template-columns: var(--gtc, minmax(150px, 2fr) repeat(3, minmax(64px, 1fr))); }
.v-details .dt-head { position: sticky; top: 0; z-index: 1; background: var(--face); }
.v-details .dt-head span { padding: 2px 6px; border: 1px solid; border-color: var(--hilite) var(--shadow) var(--shadow) var(--hilite); white-space: nowrap; overflow: hidden; }
.v-details .dt-row span { padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-details .dt-row .fi-name { display: flex; gap: 4px; align-items: center; }
.v-details .dt-row .fi-name b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; }
.v-details .dt-row svg { width: 16px; height: 16px; flex: none; }
.v-details .dt-row.sel { background: var(--sel); color: #fff; }
.v-details .dt-row.sel .redact { background: #fff; }
.guard { padding: 24px; max-width: 360px; line-height: 1.5; }
.guard b { font-size: 14px; color: #c01a1a; }
input.ren { font: 11px var(--ui); width: 100%; border: 1px solid #000; padding: 0 2px; }
.webview.tree { background: #fff; padding: 0; }
.pane-h { display: flex; justify-content: space-between; padding: 2px 6px; background: var(--face); border-bottom: 1px solid var(--shadow); }
.pane-h span { cursor: default; padding: 0 4px; }
.tn { display: flex; align-items: center; gap: 2px; white-space: nowrap; padding: 1px 4px; }
.tn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.tn > span[data-act="go"] { padding: 0 2px; cursor: default; }
.tn.cur > span[data-act="go"] { background: var(--sel); color: #fff; }
.tw { width: 9px; height: 9px; border: 1px solid #808080; font-size: 9px; line-height: 7px; text-align: center; flex: none; background: #fff; cursor: default; }
.tw:empty { border: 0; background: none; }
.hist-h { padding: 4px 6px; font-weight: bold; }
.webview .lnk { font-size: 11px; }

/* property pages */
.pp-head { display: flex; gap: 14px; align-items: center; }
.pp-head svg { width: 32px; height: 32px; flex: none; }
.pp-head input { flex: 1; }
.kv2 { display: grid; grid-template-columns: 112px 1fr; gap: 5px 10px; align-items: center; }
.pie-row { display: flex; gap: 18px; align-items: center; margin: 8px 0; }
.pie { width: 96px; height: 64px; border-radius: 50%; flex: none; background: conic-gradient(#2020d0 0 calc(var(--p) * 1%), #d000d0 0); box-shadow: 0 7px 0 #10107a; }
.sw { display: inline-block; width: 12px; height: 12px; border: 1px solid #000; vertical-align: -2px; margin-right: 4px; }
.sw.used { background: #2020d0; } .sw.free { background: #d000d0; }
.ps-tabs { display: flex; flex-wrap: wrap; padding: 6px 6px 0; position: relative; z-index: 1; }
.ps-tab { padding: 3px 8px 2px; border: 1px solid; border-bottom: none; border-color: var(--hilite) var(--dark) transparent var(--hilite); box-shadow: inset -1px 0 var(--shadow); border-radius: 3px 3px 0 0; margin-right: -2px; background: var(--face); cursor: default; white-space: nowrap; }
.ps-tab.on { padding-bottom: 4px; margin-bottom: -1px; position: relative; top: -2px; z-index: 2; }
.ps-body { padding: 0 6px; }
.ps-page { border: 1px solid; border-color: var(--hilite) var(--dark) var(--dark) var(--hilite); padding: 10px; min-height: 250px; background: var(--face); overflow: auto; max-height: calc(100vh - 160px); }
.ps-page p { margin: 3px 0 8px; line-height: 1.4; }
fieldset.grp { border: 1px solid var(--shadow); box-shadow: 1px 1px 0 var(--hilite), inset 1px 1px 0 var(--hilite); padding: 6px 8px 8px; margin: 0 0 9px; }
fieldset.grp legend { padding: 0 3px; }
fieldset.grp.sm { padding: 2px 6px; margin: 0; }
label.chk { display: flex; gap: 5px; align-items: center; margin: 3px 0; }
label.chk.dis { color: var(--shadow); }
.frow2 { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.frow2 > span:first-child:not(:empty) { min-width: 96px; }
.frow2 select, .frow2 > input.in { flex: 1; min-width: 0; }
.sl { display: flex; align-items: center; gap: 6px; flex: 1; }
.sl input { flex: 1; min-width: 0; }
.sl small { font-size: 11px; }
.btnrow { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.btnrow .btn { min-width: 0; padding: 0 10px; }
.lst { background: #fff; overflow: auto; height: 110px; padding: 2px; }
.lst > div, .lst > label { padding: 1px 4px; display: flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap; }
.lst .on { background: var(--sel); color: #fff; }
.lst svg { width: 16px; height: 16px; flex: none; }
.users > div { display: grid; grid-template-columns: 20px 1fr 1fr; }
.dlgbtns .btn[disabled], .btn:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hilite); }

/* file, find, font dialogs */
.fd { padding: 8px; width: 540px; max-width: calc(100vw - 30px); }
.fd-top { display: flex; gap: 6px; align-items: center; }
.fd-top select { flex: 1; }
.fd-top .tbtn { height: 23px; }
.fd-mid { display: flex; gap: 6px; margin: 8px 0; height: 210px; }
.fd-places { width: 84px; background: #808080; display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; flex: none; overflow: hidden; }
.fd-place { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 11px; padding: 4px 2px; text-align: center; cursor: default; }
.fd-place svg { width: 32px; height: 32px; }
.fd-place.on { background: #a0a0a0; box-shadow: inset 1px 1px #404040, inset -1px -1px #fff; }
.fd-list { flex: 1; background: #fff; overflow: auto; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; padding: 2px; }
.fd-item { display: flex; gap: 4px; align-items: center; width: 190px; padding: 1px 3px; white-space: nowrap; overflow: hidden; cursor: default; }
.fd-item svg { width: 16px; height: 16px; flex: none; }
.fd-item.sel { background: var(--sel); color: #fff; }
.fd-form { display: grid; grid-template-columns: 96px 1fr 80px; gap: 6px; align-items: center; }
.findd { padding: 10px 12px 6px; min-width: 300px; }
.fd2 { display: grid; grid-template-columns: 90px 1fr 92px; gap: 8px; align-items: center; margin-bottom: 8px; }
.fd2 .btn { min-width: 0; }
.ms-cust .fd2, .ms-cust { min-width: 0; }
.ms-cust .fd2 { grid-template-columns: 60px 70px; }
.fontd { display: grid; grid-template-columns: 1.6fr 1fr .6fr; gap: 8px; padding: 10px 10px 0; width: 420px; max-width: calc(100vw - 30px); }
.fontd > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fontd .lst { height: 110px; }
.fontd + .grp { margin: 8px 10px; }
.fsample { height: 46px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fontview { flex: 1; overflow: auto; background: #fff; padding: 10px; margin: 4px; }
.fv-head { border-bottom: 1px solid #ccc; padding-bottom: 8px; margin-bottom: 8px; line-height: 1.5; }
.np-ta { flex: 1; resize: none; background: #fff; border: 0; padding: 2px 4px; outline: none; white-space: pre; overflow: auto; color: #000; min-height: 0; tab-size: 8; }
.about { width: 380px; max-width: calc(100vw - 40px); }
.about-banner, .sd-banner { display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: linear-gradient(90deg, #000 0%, #0a1d5a 55%, #2a4ea8 100%); color: #fff; border-bottom: 3px solid #ff7a2a; }
.about-banner { margin: 0 0 10px; }
.about-banner .orb, .sd-banner .orb { width: 40px; height: 40px; }
.about-banner .w1, .sd-banner .w1 { font-size: 26px; }
.about-banner .w1 sup, .sd-banner .w1 sup { font-size: 12px; top: 2px; }
.about-banner .w2, .sd-banner .w2 { font-size: 13px; margin-top: 3px; }
.about p { line-height: 1.45; margin-bottom: 8px; }
.win.dialog .dlgbody > div:only-child { width: 100%; }

/* display properties */
.mon { width: 184px; margin: 2px auto 10px; }
.mon-screen { height: 112px; border: 10px solid #c8c4bc; border-bottom-width: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #808080; overflow: hidden; position: relative; background: #3a6ea5; }
.mon-screen canvas { width: 100%; height: 100%; display: block; }
.mon-base { width: 70px; height: 14px; margin: 0 auto; background: linear-gradient(#c8c4bc, #a8a49c); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
[data-wall="core"].mon-screen { background: radial-gradient(circle at 58% 46%, #fff3c8 0, #ffbf55 4%, #ff6c1c 9%, #b8260b 13%, rgba(80,10,0,0) 17%), radial-gradient(circle at 58% 46%, rgba(255,110,30,.3), rgba(0,0,0,0) 32%), linear-gradient(160deg, #0e2758, #050a18); }
[data-wall="none"] { background: #3a6ea5 !important; }
[data-wall="teal"] { background: #008080 !important; }
[data-wall="grid"] { background: radial-gradient(circle at 50% 50%, rgba(255,120,30,.45), rgba(255,80,20,.08) 22%, rgba(0,0,0,0) 34%), repeating-linear-gradient(0deg, rgba(120,170,255,.18) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(120,170,255,.18) 0 1px, transparent 1px 32px), #0b2a5a !important; }
[data-wall="glow"] { background: radial-gradient(ellipse at 50% 62%, #ffb04a 0, #e0500e 18%, #7a1400 45%, #1a0300 80%) !important; }
[data-wall="night"] { background: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 33% 64%, #fff, transparent), radial-gradient(1.5px 1.5px at 58% 18%, #ffd9a0, transparent), radial-gradient(1px 1px at 76% 44%, #fff, transparent), radial-gradient(1px 1px at 88% 82%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 86%, #fff, transparent), radial-gradient(1px 1px at 47% 40%, #fff, transparent), radial-gradient(1px 1px at 67% 76%, #ffd9a0, transparent), linear-gradient(#020414, #0a1640) !important; background-size: 240px 240px, 300px 300px, 360px 360px, 200px 200px, 280px 280px, 320px 320px, 180px 180px, 260px 260px, 100% 100% !important; }
[data-wall="redacted"] { background: repeating-linear-gradient(180deg, transparent 0 26px, #000 26px 40px), repeating-linear-gradient(90deg, #181818 0 160px, #000 160px 172px, #262626 172px 300px, #000 300px 312px), #000 !important; }
[data-wall="img"] { background-color: #3a6ea5 !important; }
#desktop:not([data-wall="core"]) .core-wall, #desktop:not([data-wall="core"]) .rings { display: none; }
.ap-prev { background: #3a6ea5; height: 130px; position: relative; padding: 8px; margin-bottom: 8px; overflow: hidden; }
.ap-win { position: absolute; background: var(--face); border: 1px solid; border-color: var(--hilite) var(--dark) var(--dark) var(--hilite); padding: 2px; }
.ap-inactive { left: 8px; top: 8px; width: 62%; height: 60px; }
.ap-active { left: 20px; top: 28px; width: 70%; }
.ap-msg { left: 46%; top: 66px; width: 44%; }
.ap-tb { color: #fff; font-weight: bold; font-size: 11px; padding: 1px 4px; background: linear-gradient(90deg, var(--title-a), var(--title-b)); display: flex; justify-content: space-between; }
.ap-inactive .ap-tb { background: linear-gradient(90deg, #808080, #c0c0c0); color: #d4d0c8; }
.ap-menu { display: flex; gap: 8px; padding: 2px 4px; font-size: 11px; }
.ap-dis { color: var(--shadow); } .ap-sel { background: var(--sel); color: #fff; padding: 0 3px; }
.ap-body { background: #fff; margin: 2px; padding: 4px; font-size: 11px; border: 1px solid var(--shadow); }
.ap-msg .ap-body { background: var(--face); border: 0; text-align: center; }
.ap-x { background: var(--face); color: #000; padding: 0 3px; line-height: 12px; }
.spectrum { height: 12px; margin-top: 6px; background: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red); border: 1px solid var(--shadow); }
.dt-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); background: #fff; padding: 2px; text-align: center; font-size: 11px; margin-top: 6px; }
.cal b { background: var(--shadow); color: #fff; font-weight: normal; }
.cal span { padding: 2px 0; cursor: default; }
.cal span.on { background: var(--sel); color: #fff; }
canvas.aclock { display: block; margin: 0 auto 6px; width: 130px; height: 130px; }
.dt-wrap input[type="time"] { width: 100%; }
.worldmap { margin: 8px 0; }
.worldmap svg { width: 100%; display: block; }
.tb-prev { background: #3a6ea5; height: 70px; position: relative; margin-bottom: 8px; border: 1px solid var(--shadow); }
.tbp-win { position: absolute; left: 30px; top: 8px; width: 120px; height: 34px; background: var(--face); border-top: 12px solid var(--title-a); }
.tbp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: var(--face); border-top: 1px solid #fff; display: flex; align-items: center; gap: 6px; padding: 0 3px; font-size: 10px; }
.tbp-bar span { font-weight: bold; border: 1px solid; border-color: #fff #404040 #404040 #fff; padding: 0 3px; }
.tbp-bar i { flex: 1; } .tbp-bar b { font-weight: normal; border: 1px solid; border-color: #808080 #fff #fff #808080; padding: 0 4px; }

/* control panel bits */
.sysgen { display: flex; gap: 14px; }
.sys-logo { width: 150px; background: linear-gradient(#000, #0a1d5a 70%, #2a4ea8); padding: 14px 10px; color: #fff; text-align: center; flex: none; }
.sys-logo .orb { width: 48px; height: 48px; margin: 0 auto 8px; }
.sys-logo .w1 { font-size: 20px; } .sys-logo .w1 sup { font-size: 10px; } .sys-logo .w2 { font-size: 12px; }
.sysgen p { line-height: 1.45; margin-bottom: 8px; }
.tree-lst { flex: 1; background: #fff; overflow: auto; padding: 4px; margin: 2px; }
.tree-lst > div { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
.tree-lst svg { width: 16px; height: 16px; }
.zones { display: flex; gap: 8px; background: #fff; padding: 6px; margin-bottom: 8px; }
.zones div { display: flex; flex-direction: column; align-items: center; font-size: 11px; width: 72px; text-align: center; padding: 2px; }
.zones .on span { background: var(--sel); color: #fff; }
.zones svg { width: 32px; height: 32px; }
.dbl-test { display: flex; gap: 10px; align-items: center; }
.dbl-test > div:first-child { flex: 1; }
.dbl-box { width: 50px; height: 50px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.dbl-box svg { width: 32px; height: 32px; }
.blinker { font-weight: bold; width: 20px; text-align: center; animation: caret 1s steps(1) infinite; }
.lan-act { display: flex; align-items: center; justify-content: space-around; margin: 6px 0; }
.lan-act svg { width: 32px; height: 32px; }

/* help viewer */
.hlp-tb .tbtn { flex-direction: column; height: 40px; gap: 1px; }
.hlp { flex: 1; display: flex; gap: 4px; min-height: 0; padding: 4px; }
.hlp-nav { width: 220px; display: flex; flex-direction: column; flex: none; }
.hlp-nav .ps-tabs { padding: 0; }
.hlp-pane { flex: 1; background: #fff; overflow: auto; padding: 4px; }
.hlp-pane p { margin: 4px 0; }
.hlp-doc { flex: 1; background: #fff; overflow: auto; padding: 12px 16px; user-select: text; -webkit-user-select: text; font: 12px/1.55 Verdana, Tahoma, sans-serif; cursor: auto; }
.hlp-doc h1 { font: bold 16px Verdana, sans-serif; color: #0a246a; margin: 0 0 10px; }
.hlp-doc p, .hlp-doc ul { margin: 0 0 10px; } .hlp-doc ul { padding-left: 20px; }
.htab td { padding: 2px 14px 2px 0; vertical-align: top; }
.htab td:first-child { font-weight: bold; white-space: nowrap; }
.hbook, .htopic { display: flex; gap: 4px; align-items: center; padding: 1px 2px; cursor: default; white-space: nowrap; }
.hbook svg, .htopic svg { width: 16px; height: 16px; flex: none; }
.htopics { padding-left: 16px; }
.hbook:not(.open) + .htopics { display: none; }
.htopic.on span, .htopic.on:not(:has(span)) { background: var(--sel); color: #fff; }
.hidx { margin-top: 4px; }

/* search */
.find { flex: 1; display: flex; min-height: 0; gap: 2px; }
.find-l { width: 210px; padding: 8px; background: linear-gradient(#fff, #dbe5f7); overflow: auto; flex: none; }
.find-l h3 { display: flex; gap: 6px; align-items: center; font-size: 14px; margin: 0 0 8px; }
.find-l svg { width: 24px; height: 24px; }
.find-l p { margin: 8px 0 3px; }
.find-l .in { width: 100%; }
.find-tip { margin-top: 18px !important; line-height: 1.6; }
.find-r { flex: 1; display: flex; min-width: 0; }
.find-r .files { flex: 1; background: #fff; overflow: auto; }

/* add/remove programs */
.arp { flex: 1; display: flex; min-height: 0; }
.arp-side { width: 104px; background: #808080; padding: 4px; display: flex; flex-direction: column; gap: 4px; flex: none; }
.arp-b { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; font-size: 11px; padding: 6px 2px; cursor: default; }
.arp-b.on { background: #a0a0a0; box-shadow: inset 1px 1px #404040, inset -1px -1px #fff; }
.arp-b svg { width: 32px; height: 32px; }
.arp-main { flex: 1; background: #fff; overflow: auto; padding: 6px; }
.arp-h { display: flex; justify-content: space-between; padding: 3px 4px 8px; }
.arp-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: center; padding: 4px; cursor: default; }
.arp-row svg { width: 20px; height: 20px; }
.arp-x { display: none; grid-column: 2 / -1; flex-direction: column; gap: 4px; }
.arp-row.sel { background: var(--sel); color: #fff; }
.arp-row.sel .arp-x { display: flex; }
.arp-x .btn { align-self: flex-end; }
.arp-sec { display: flex; gap: 10px; align-items: center; padding: 12px 6px; border-bottom: 1px solid #ddd; }
.arp-sec svg { width: 32px; height: 32px; flex: none; }
.arp-sec div { flex: 1; } .arp-sec p { margin-bottom: 4px; } .arp-sec p:first-child { font-weight: bold; }
.arp-main > p { margin-bottom: 6px; }

/* taskbar, tray, start menu */
#volpop { position: fixed; bottom: 34px; z-index: 650; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; }
#volpop input[type="range"] { writing-mode: vertical-lr; direction: rtl; height: 100px; width: 24px; }
#taskbar.autohide { transform: translateY(27px); transition: transform .18s; }
#taskbar.autohide:hover, body:has(#startmenu.show) #taskbar.autohide, body:has(#volpop) #taskbar.autohide { transform: none; }
#desktop.full { bottom: 3px !important; }
#tray > span { cursor: default; }
.smi .sml { white-space: nowrap; }
.smi.sm16 { height: 24px; gap: 8px; }
.smi.sm16 > svg { width: 16px; height: 16px; }
.smi .noico { width: 16px; display: inline-block; }
.smi.open > .sub { display: block; }
.sub .smi:hover > .sub { display: block; }
#startmenu.small .smbanner { display: none; }
#startmenu.small .smitems > .smi:not(.sm16) { height: 24px; }
#startmenu.small .smitems > .smi:not(.sm16) > svg { width: 16px; height: 16px; }
.sub { min-width: 180px; width: auto !important; }

/* desktop icons */
.icons { position: absolute !important; inset: 0 !important; display: block !important; height: auto !important; }
.icons .icon { position: absolute; }
.icons.dragging .icon.sel { opacity: .65; }
body.big-icons .icon .img, body.big-icons .icon .img svg { width: 48px; height: 48px; }
body.hc { filter: invert(1) hue-rotate(180deg); }
#balloonText b { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.bal-orb { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff2c0, #ff8a2a 45%, #a8200a); }
.form-x { grid-column: 1 / -1; display: grid; grid-template-columns: 80px 1fr; gap: 8px 10px; align-items: center; }
.form-x select.field { height: 21px; }
.form2 { padding: 0 14px 6px; color: #555; font-size: 11px; }
.form2:empty { display: none; }
.viewbmp { position: fixed; inset: 0; z-index: 5000; background: #000; display: flex; align-items: center; justify-content: center; cursor: default; }
.viewbmp img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.ms-grid .c.qm { font-weight: bold; }
.best { display: grid; grid-template-columns: auto auto auto; gap: 6px 18px; }
.tabpage.tp-list { display: flex; flex-direction: column; gap: 6px; }
.tabpage.tp-list .files { flex: 1; background: #fff; overflow: auto; min-height: 120px; }

@media (max-width: 640px) {
  .icons { position: absolute !important; inset: 8px 6px auto !important; display: grid !important; grid-template-columns: repeat(4, 76px); gap: 4px 8px; }
  .icons .icon { position: static; }
  .hlp-nav { width: 140px; }
  .find-l { width: 150px; }
  .arp-side { width: 74px; }
  .fd-places { display: none; }
  .fd-form { grid-template-columns: 80px 1fr; }
  .fd-form .btn { grid-column: 2; }
  .sysgen { flex-direction: column; }
  .sys-logo { width: auto; }
  .dt-wrap { grid-template-columns: 1fr; }
  .webview { display: none !important; }
}
.statusbar svg { width: 16px; height: 16px; vertical-align: -4px; margin-right: 3px; }
.statusbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  #startmenu .sub { position: fixed; left: 26px !important; right: auto !important; top: auto !important; bottom: 34px; max-height: 70vh; overflow: auto; z-index: 610; min-width: 200px; }
  #startmenu .sub .sub { left: 40px !important; bottom: 40px; }
  #startmenu .sub .sub .sub { left: 54px !important; bottom: 46px; }
}