/* Ὁρμή launcher layout */
body.launcher {
  position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  --cols: 8; --icon-base: 72px; --iscale: 1; --label-h: 30px; --label-size: 12.5px;
  --icon: calc(var(--icon-base) * var(--iscale));
  --row: calc(var(--icon) + var(--label-h));
  --rgap: clamp(14px, 2.6vh, 30px); --cgap: clamp(12px, 2.4vw, 36px);
  --pad-x: clamp(18px, 5.2vw, 84px);
}
@media (max-width: 1023px) { body.launcher { --cols: 6; } }
@media (max-width: 699px) { body.launcher { --cols: 4; --icon-base: 60px; --label-size: 11.5px; --label-h: 26px; --pad-x: 18px; --cgap: 14px; --rgap: 16px; } }
@media (max-height: 760px) and (min-width: 700px) { body.launcher { --icon-base: 64px; --rgap: clamp(10px, 2vh, 20px); } }
body[data-isize="s"] { --iscale: 0.86; }
body[data-isize="l"] { --iscale: 1.14; }
body[data-labels="off"] { --label-h: 6px; }
body[data-spacing="compact"] { --rgap: clamp(8px, 1.5vh, 16px); --cgap: clamp(8px, 1.4vw, 20px); }
body[data-spacing="spacious"] { --rgap: clamp(20px, 3.8vh, 44px); --cgap: clamp(16px, 3.4vw, 52px); }

/* ---------- background ---------- */
#bg, #bg > * { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#bg { z-index: 0; background: var(--base); }
#bg-image { background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 0.5s; }
#bg-video, #bg-anim { object-fit: cover; opacity: 0; transition: opacity 0.6s; }
#bg-anim:not([src]) { display: none; }
body[data-bg="image"] #bg-image { opacity: 1; }
body[data-bg="video"].bg-video-ready #bg-video { opacity: 1; }
body[data-bg="animated"] #bg-anim { opacity: 1; }
#bg-shade { background: #04070f; opacity: 0; transition: opacity 0.3s; }
#bg-grain { opacity: 0.18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
#bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 18%, var(--glow1), transparent 50%), radial-gradient(ellipse at 86% 82%, var(--glow2), transparent 44%), linear-gradient(180deg, rgba(4, 6, 12, 0.2), rgba(4, 6, 12, 0) 22%, rgba(4, 6, 12, 0) 70%, rgba(4, 6, 12, 0.35)); }
body:not([data-bg="ambient"]) #bg::after { background: linear-gradient(180deg, rgba(4, 6, 12, 0.3), rgba(4, 6, 12, 0) 20%, rgba(4, 6, 12, 0) 70%, rgba(4, 6, 12, 0.4)); }
#bg-haze, #bg-still { display: none; }
/* swipe parallax: far layers are a little wider and trail the pages (offset set by bg.js) */
body.fx-parallax #bg-haze, body.fx-parallax #bg-image, body.fx-parallax #bg-video, body.fx-parallax #bg-anim, body.fx-parallax #bg-still { left: -48px; width: calc(100% + 96px); translate: var(--bgx, 0px) 0; }
body[data-bg="ambient"]:not(.oled) #bg-haze { display: block; }
body[data-bg="animated"].bg-frozen #bg-still { display: block; }
body[data-bg="animated"].bg-frozen #bg-anim { display: none; }

/* ---------- power: OLED black, saver without glass blur ---------- */
body.oled { --base: #000; }
body.oled #bg { background: #000; }
body.oled #bg-grain, body.oled[data-bg="ambient"] #bg::after { display: none; }
body.glass-lite .tile.widget > .wg, body.glass-lite .dock, body.glass-lite .top-actions .icon-btn, body.glass-lite .live-pill, body.glass-lite .pill-btn,
body.glass-lite .folder-icon, body.glass-lite .lib-search, body.glass-lite .lib-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.noblur *, body.noblur *::before, body.noblur *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.noblur .top-actions .icon-btn, body.noblur .live-pill, body.noblur .pill-btn:not(.primary) { background: rgba(22, 26, 39, 0.78); }
body.noblur .folder-icon { background: linear-gradient(150deg, rgba(70, 76, 102, 0.85), rgba(32, 37, 54, 0.92)); }
body.noblur:not([data-dock="clear"]):not([data-dock="solid"]) .dock { background: linear-gradient(135deg, rgba(42, 47, 64, 0.94), rgba(26, 30, 44, 0.95)); }
body.noblur .lib-search { background: rgba(28, 32, 46, 0.9); }
body.noblur .lib-card { background: linear-gradient(140deg, rgba(44, 49, 70, 0.9), rgba(22, 27, 42, 0.94)); }
body.noblur .folder-backdrop { background: rgba(3, 6, 12, 0.82); }
body.noblur .folder-panel { background: rgba(34, 38, 56, 0.97); }
body.noblur .spot-backdrop, body.noblur .sheet-backdrop { background: rgba(3, 5, 11, 0.78); }
body.noblur .spotlight-panel, body.noblur .ctx-menu { background: rgba(26, 29, 43, 0.98); }

/* ---------- shell ---------- */
.shell { position: relative; z-index: 2; height: 100dvh; height: 100vh; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); opacity: 0; transition: opacity 0.35s; }
@supports (height: 100dvh) { .shell { height: 100dvh; } }
body.ready .shell { opacity: 1; }
.topbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 10px calc(var(--pad-x) - 6px) 4px max(var(--pad-x), env(safe-area-inset-left)); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 3px 13px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(225, 230, 240, 0.08); }
.brand-name { font-size: 14px; font-weight: 720; letter-spacing: 0.2em; }
.brand-sub { font-size: 10.5px; letter-spacing: 0.16em; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions .icon-btn { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.045); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.top-actions .icon-btn .g { width: 18px; height: 18px; }
.edit-only { display: none; }
body.editing .edit-only { display: flex; }
body.editing .normal-only { display: none; }
.live-pill { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 13px; color: #dcdce8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); }
.live-pill .sep { color: var(--muted); }
@media (max-width: 860px) { .live-pill { display: none; } }
@media (max-width: 600px) {
  .topbar { min-height: 58px; padding-top: 6px; }
  .brand-sub { display: none; }
  .studio-link span { display: none; }
  .studio-link { width: 44px; padding: 0; justify-content: center; }
  .pill-btn span { display: none; }
  .pill-btn { padding: 0 13px; }
  .pill-btn.primary span, #btn-done { display: inline-flex; }
  .top-actions { gap: 6px; }
}

/* ---------- pages ---------- */
.viewport { flex: 1; min-height: 0; overflow: hidden; position: relative; touch-action: pan-y; }
.track { height: 100%; display: flex; will-change: transform; }
/* Page transitions. Layers are prepared ahead of time (not at the first touch), so a swipe never
   starts with a re-render hitch. Jelly: app icons lag behind by column (vars set by fx.js). */
body[data-pagefx="jelly"] .page.home > .grid > .tile.app, body[data-pagefx="jelly"] .page.home > .grid > .tile.folder { will-change: transform; }
body[data-pagefx="jelly"].paging .page.home > .grid > .tile.app, body[data-pagefx="jelly"].paging .page.home > .grid > .tile.folder { transform: translate3d(calc(var(--jxp, 0px) * var(--cl, 0) + var(--jxn, 0px) * var(--cr, 0)), 0, 0); }
body[data-pagefx="depth"] #track > .page, body[data-pagefx="cube"] #track > .page { will-change: transform, opacity; backface-visibility: hidden; }
.page { flex: 0 0 100%; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: clamp(6px, 1.6vh, 18px) max(var(--pad-x), env(safe-area-inset-right)) 28px max(var(--pad-x), env(safe-area-inset-left)); }
.page::-webkit-scrollbar { display: none; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--row); gap: var(--rgap) var(--cgap); grid-auto-flow: row dense; align-content: start; min-height: 100%; position: relative; }
/* home pages: a fixed number of rows that stretch to fill the screen (like iPadOS); extra items scroll */
.page.home > .grid { grid-template-rows: repeat(var(--rows, 4), minmax(var(--row), 1fr)); }
.empty-hint { grid-column: 1 / -1; grid-row: span 3; display: grid; place-items: center; border: 1.5px dashed rgba(220, 225, 255, 0.2); border-radius: 26px; color: var(--sub); font-size: 14px; text-align: center; padding: 20px; }
.empty-hint.quiet { border-color: transparent; color: var(--muted); }

/* ---------- tiles ---------- */
.tile { position: relative; min-width: 0; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.tile.app, .tile.folder { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0; text-align: center; border-radius: 18px; align-self: start; }
/* press: squish (and lean toward the finger), then spring back with a bounce — curves from fx.js */
.tile.app .icon, .tile.folder .icon { transition: transform var(--pop-ms, 480ms) var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.3s; }
.tile.pressing .icon { transform: scale(0.88); transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
body.fx-tilt .tile.pressing .icon { transform: perspective(380px) rotateX(calc(var(--ty, 0) * -14deg)) rotateY(calc(var(--tx, 0) * 14deg)) scale(0.88); }
body.fx-tilt .tile.hovering:not(.pressing) .icon { transform: perspective(380px) rotateX(calc(var(--ty, 0) * 9deg)) rotateY(calc(var(--tx, 0) * -9deg)) translateY(-3px) scale(1.06); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.16); }
/* light glare that follows the finger / cursor across the icon */
body.fx-tilt .tile.pressing .icon::after, body.fx-tilt .tile.hovering .icon::after {
  background: radial-gradient(circle at calc(50% + var(--tx, 0) * 46%) calc(50% + var(--ty, 0) * 46%), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0) 62%), linear-gradient(135deg, rgba(255, 255, 255, 0.11), transparent 40%, transparent 76%, rgba(185, 170, 238, 0.07));
}
/* tapping an app: a quick pop with a glow ring (the background ripples too) */
.tile.launching .icon { animation: launch-pop 0.62s var(--ease-pop, ease-out) both; }
@keyframes launch-pop {
  0% { transform: scale(0.88); }
  38% { transform: scale(1.16); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 42px color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { transform: scale(1); }
}
.label { max-width: 100%; font-size: var(--label-size); line-height: 1.25; color: #e6e7f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); padding: 0 2px; }
body[data-labels="off"] .grid .label { display: none; }
.tile.unlinked .icon::before { content: ""; position: absolute; right: 7%; top: 7%; width: 9px; height: 9px; border-radius: 50%; background: #f5c26b; box-shadow: 0 0 0 2px rgba(10, 12, 20, 0.7); z-index: 2; }
body .tile.tile.menu-target .icon, body .tile.tile.menu-target .wg { transform: scale(1.06); filter: brightness(1.12); }

/* folder icon */
.folder-icon { background: linear-gradient(150deg, rgba(120, 128, 160, 0.34), rgba(40, 46, 66, 0.5)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.folder-minis { position: absolute; inset: 14%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8%; }
.folder-minis .icon.mini { width: 100%; height: 100%; }
.folder-minis .icon.mini { border-width: 0.5px; }
.folder-minis .icon.mini > .g { width: 58%; height: 58%; }

/* badges */
.badge { position: absolute; z-index: 5; top: -7px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(228, 230, 242, 0.96); color: #1c1f2c; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
.badge .g { width: 15px; height: 15px; stroke-width: 2.6; }
.tile.app .badge, .tile.folder .badge { left: calc(50% - var(--icon) / 2 - 9px); }
.dock .tile.app .badge { left: -8px; top: -8px; }
.tile.widget .badge { left: -8px; top: -8px; }
.badge::before { content: ""; position: absolute; inset: -9px; }

/* edit mode */
@keyframes jiggle { 0% { transform: rotate(-1.4deg); } 100% { transform: rotate(1.4deg); } }
@keyframes jiggle-w { 0% { transform: rotate(-0.5deg); } 100% { transform: rotate(0.5deg); } }
body.editing .grid .tile.app .icon, body.editing .grid .tile.folder .icon, body.editing #dock-apps .icon { animation: jiggle 0.26s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0s) * -1); }
body.editing .grid .tile.widget .wg { animation: jiggle-w 0.3s ease-in-out infinite alternate; }
body.editing .grid .tile, body.editing #dock-apps .tile { touch-action: none; cursor: grab; }
body.editing .grid { min-height: calc(100% - 4px); }
@media (prefers-reduced-motion: reduce) {
  body.editing .grid .tile .icon, body.editing .grid .tile.widget .wg, body.editing #dock-apps .icon { animation: none; outline: 1.5px dashed rgba(255, 255, 255, 0.35); outline-offset: 3px; }
}

/* drag */
#drag-layer { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.drag-ghost { position: fixed; left: 0; top: 0; margin: 0; pointer-events: none; z-index: 401; transition: none; will-change: transform; }
.drag-ghost .icon, .drag-ghost .wg { transition: transform var(--pop-ms, 0.4s) var(--ease-pop, var(--spring)), box-shadow 0.2s; animation: none !important; }
.drag-ghost.lifted .icon, .drag-ghost.lifted .wg { transform: scale(1.1); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
.drag-ghost.lifted .label { opacity: 0; }
.drag-ghost.settling { transition: transform var(--sheet-ms, 0.3s) var(--ease-sheet, var(--ease)); }
.tile.drag-source { opacity: 0.22; }
.tile.drag-source .icon, .tile.drag-source .wg { animation: none !important; }
.tile.merge-target .icon { transform: scale(1.16); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent), 0 12px 30px rgba(0, 0, 0, 0.4); }
body.dragging { cursor: grabbing; }
body.dragging .page { overflow: hidden; }

/* ---------- bottom: dots + dock ---------- */
.bottom { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 16px calc(12px + env(safe-area-inset-bottom)); position: relative; z-index: 3; }
.dots { display: flex; align-items: center; gap: 4px; min-height: 26px; }
.dot { width: 26px; height: 26px; display: grid; place-items: center; position: relative; color: rgba(205, 207, 224, 0.5); }
.dot::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; transition: width var(--snap-ms, 0.3s) var(--ease-snap, var(--spring)), background 0.2s; }
.dot.on { color: #eceaf8; }
.dot.on::before { width: 22px; }
.dot.lib::before { display: none; }
.dot.lib .g { width: 16px; height: 16px; stroke-width: 1.8; }
body.dragging .dot:not(.lib) { background: rgba(255, 255, 255, 0.06); border-radius: 9px; }
.dock {
  --n: 6; --dock-icon: min(56px, calc((100vw - 120px - (var(--n) - 1) * 12px) / var(--n)));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 28px; max-width: calc(100vw - 24px);
  border: 1px solid rgba(224, 227, 252, 0.16);
  background: linear-gradient(135deg, rgba(110, 120, 145, 0.18), rgba(55, 63, 87, 0.22) 55%, rgba(129, 104, 146, 0.14));
  -webkit-backdrop-filter: blur(36px) saturate(1.2); backdrop-filter: blur(36px) saturate(1.2);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.1);
}
body[data-dock="solid"] .dock { background: rgba(15, 19, 31, 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(206, 217, 242, 0.2); }
body[data-dock="clear"] .dock { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; }
.dock-apps { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: var(--dock-icon); }
/* dock magnification (touch: slide along the dock · trackpad: hover) */
.dock { touch-action: none; }
.dock-apps .tile, .dock-lib { transform-origin: 50% 100%; transition: transform var(--pop-ms, 0.45s) var(--ease-pop, var(--spring)); }
.dock.magnifying .dock-apps .tile, .dock.magnifying .dock-lib { transition: transform 0.07s linear; }
.dock .tile.app { gap: 0; }
.dock .tile.app .label { display: none; }
.dock .icon { --sz: var(--dock-icon); border-radius: var(--radius); }
.dock-rule { width: 1px; height: 38px; background: rgba(196, 200, 232, 0.24); flex: none; }
.dock-lib { width: var(--dock-icon); height: var(--dock-icon); border-radius: var(--radius); display: grid; place-items: center; background: rgba(120, 126, 157, 0.16); border: 1px solid rgba(212, 216, 243, 0.14); flex: none; }
.dock-lib .g { width: 46%; height: 46%; stroke-width: 1.5; }
.dock-empty { font-size: 12.5px; color: var(--muted); padding: 0 10px; white-space: nowrap; }
@media (max-width: 699px) {
  .dock { --dock-icon: min(54px, calc((100vw - 64px - (var(--n) - 1) * 10px) / var(--n))); gap: 10px; padding: 10px 12px; border-radius: 26px; }
  .dock-apps { gap: 10px; }
  .dock-rule, .dock-lib { display: none; }
  .bottom { gap: 8px; }
}
body.on-library .dock { opacity: 0.94; }

/* ---------- App Library ---------- */
.page.library { padding-top: clamp(4px, 1.2vh, 14px); }
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.18em; color: var(--sub); font-weight: 640; }
.lib-head h2 { margin: 0; font-size: clamp(32px, 4.4vw, 54px); font-weight: 300; letter-spacing: -0.045em; line-height: 1.05; }
.dot-accent { color: var(--accent2); }
.lib-head-actions { display: flex; gap: 8px; }
.lib-search { display: flex; align-items: center; gap: 12px; height: 50px; margin: clamp(14px, 2.4vh, 24px) 0 clamp(16px, 2.6vh, 26px); padding: 0 16px; border-radius: 15px; background: rgba(200, 206, 230, 0.08); border: 1px solid var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.lib-search:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.lib-search .g { color: var(--sub); }
.lib-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--fg); }
.lib-search input::placeholder { color: #8f94aa; }
.lib-search kbd { font: 12px var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
@media (hover: none) { .lib-search kbd { display: none; } }
.lib-search.small { height: 46px; margin: 0 0 12px; }
.lib-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 178px), 1fr)); gap: clamp(12px, 1.8vw, 20px); padding-bottom: 20px; }
@media (max-width: 699px) { .lib-cats { grid-template-columns: 1fr 1fr; } }
.lib-card { border-radius: 26px; padding: 14px; background: linear-gradient(140deg, rgba(77, 83, 114, 0.26), rgba(26, 33, 52, 0.4)); border: 1px solid rgba(218, 222, 255, 0.11); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); display: grid; gap: 10px; }
.lib-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lib-quad .tile.app { --icon: 100%; gap: 0; }
.lib-quad .tile.app .icon { --sz: 100%; height: auto; aspect-ratio: 1; }
.lib-quad .tile.app .label { display: none; }
.lib-cluster { aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding: 9%; border-radius: var(--radius); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(220, 225, 255, 0.1); }
.lib-cluster .icon.mini > .g { width: 54%; height: 54%; }
.lib-card-title { display: flex; justify-content: space-between; align-items: center; min-height: 32px; padding: 0 4px; font-size: 14px; font-weight: 560; color: #e8e8f2; text-align: left; }
.lib-card-title small { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 12.5px; }
.lib-card-title .g { width: 14px; height: 14px; }
.lib-results { padding-bottom: 24px; display: grid; gap: 14px; }
.tile.app.row { flex-direction: row; justify-content: flex-start; gap: 14px; width: 100%; padding: 8px 10px; border-radius: 16px; text-align: left; align-self: auto; }
.tile.app.row:hover { background: rgba(255, 255, 255, 0.06); }
.tile.app.row .icon { --sz: 46px; }
.row-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.row-text b { font-weight: 560; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-text small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-chev { width: 16px; height: 16px; color: var(--muted); }
.calc-row { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); font-size: 18px; color: var(--sub); }
.calc-row b { font-size: 30px; font-weight: 400; color: var(--fg); font-variant-numeric: tabular-nums; }
.web-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--line-strong); color: var(--sub); font-size: 14.5px; text-align: left; }
.web-row span { flex: 1; }
.sheet-grid { --icon: 64px; --cols: 4; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: auto; gap: 20px 10px; min-height: 0; }
.sheet-grid .tile.app .label { font-size: 12px; }
.az { position: sticky; top: -14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0; background: linear-gradient(#1c2030 70%, transparent); }
.az button { min-width: 34px; height: 30px; border-radius: 8px; font-size: 13px; color: var(--sub); background: rgba(255, 255, 255, 0.05); }
.az-head { margin: 14px 4px 4px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- folder overlay ---------- */
.folder-layer { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; }
.folder-backdrop { position: absolute; inset: 0; background: rgba(3, 6, 12, 0.5); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; transition: opacity 0.22s; }
.folder-panel { position: relative; width: min(560px, 92vw); padding: 22px 22px 16px; border-radius: 34px; background: rgba(60, 66, 92, 0.32); border: 1px solid rgba(230, 233, 255, 0.16); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45); opacity: 0; transform: scale(0.72); transition: opacity 0.18s, transform var(--sheet-ms, 0.3s) var(--ease-sheet, var(--spring)); }
.folder-layer.open .folder-backdrop { opacity: 1; }
.folder-layer.open .folder-panel { opacity: 1; transform: none; }
.folder-name { width: 100%; margin-bottom: 18px; border: 0; background: transparent; font-size: 24px; font-weight: 640; letter-spacing: -0.02em; color: var(--fg); outline: none; text-align: center; border-radius: 10px; padding: 4px; }
.folder-layer.editing .folder-name { background: rgba(255, 255, 255, 0.08); }
.folder-grid { --cols: 4; min-height: 0; grid-auto-rows: var(--row); }
@media (min-width: 700px) { .folder-grid { --cols: 4; } }
.folder-hint { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--muted); }

/* ---------- spotlight ---------- */
.spotlight { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: center; align-items: flex-start; padding: max(9vh, calc(env(safe-area-inset-top) + 20px)) 16px 16px; }
.spot-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 11, 0.45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transition: opacity 0.18s; }
.spotlight-panel { position: relative; width: min(640px, 100%); max-height: 76dvh; display: flex; flex-direction: column; border-radius: 24px; background: rgba(26, 29, 43, 0.92); border: 1px solid rgba(232, 235, 255, 0.15); -webkit-backdrop-filter: blur(36px); backdrop-filter: blur(36px); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(-14px) scale(0.96); transition: opacity 0.16s, transform var(--sheet-ms, 0.3s) var(--ease-sheet, var(--spring)); overflow: hidden; }
.spotlight.open .spot-backdrop, .spotlight.open .spotlight-panel { opacity: 1; transform: none; }
.spot-input { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 62px; border-bottom: 1px solid var(--line); }
.spot-input .g { width: 22px; height: 22px; color: var(--sub); }
.spot-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 20px; color: var(--fg); }
.spot-input kbd { font: 12px var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.spot-results { overflow-y: auto; padding: 8px 10px 12px; }
.spot-results h4 { margin: 12px 10px 6px; font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted); font-weight: 650; }
.spot-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; padding: 0 4px; }
.spot-app { --icon: 54px; display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; font-size: 12px; color: #e3e4ee; }
.spot-app span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-row { width: 100%; display: flex; align-items: center; gap: 13px; min-height: 52px; padding: 6px 12px; border-radius: 14px; text-align: left; font-size: 15px; color: var(--fg); }
.spot-row > .g { width: 20px; height: 20px; color: var(--sub); }
.spot-row > span:not(.icon) { flex: 1; display: grid; min-width: 0; }
.spot-row small { color: var(--muted); font-size: 12px; }
.spot-row.calc { font-size: 24px; gap: 10px; }
.spot-row.calc .calc-q { flex: none; color: var(--sub); font-size: 17px; }
.spot-row.calc b { font-weight: 400; flex: 1; }
.spot-row.active, .spot-app.active, .spot-row:hover, .spot-app:hover { background: rgba(255, 255, 255, 0.09); }

/* ---------- sheets specific to the launcher ---------- */
.ae-head { display: flex; gap: 18px; align-items: flex-start; }
.ae-icon .icon { --sz: 84px; }
.ae-head-side { flex: 1; display: grid; gap: 12px; min-width: 0; }
.power-status { display: grid; gap: 3px; padding: 11px 13px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.power-status b { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.power-status small { font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.studio-banner { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; text-decoration: none; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(255, 255, 255, 0.04)); border: 1px solid var(--line); }
.studio-banner > span { flex: 1; display: grid; gap: 2px; }
.studio-banner small { color: var(--sub); font-size: 12.5px; }
.theme-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 12.5px; letter-spacing: 0.08em; font-weight: 600; color: var(--sub); }
.theme-chip i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.theme-chip.on { border-color: var(--accent); color: var(--fg); background: rgba(255, 255, 255, 0.1); }
.storage-card { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 13.5px; color: var(--sub); display: grid; gap: 10px; }
.storage-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.storage-top b { color: var(--fg); font-weight: 560; }
.storage-card .bar { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.storage-card .bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.about { display: flex; gap: 14px; align-items: center; }
.about img { border-radius: 11px; }
.about small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.add-custom { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px dashed var(--line-strong); text-align: left; }
.add-custom > span { flex: 1; display: grid; }
.add-custom small { color: var(--muted); font-size: 12.5px; }
.cat-row { display: flex; align-items: center; gap: 13px; padding: 8px 6px; border-radius: 14px; }
.cat-row:hover { background: rgba(255, 255, 255, 0.04); }
.choice-cards { display: grid; gap: 12px; }
.choice { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); display: grid; gap: 12px; }
.choice h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 620; flex-wrap: wrap; }
.choice h3 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.page-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.page-list li { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 0; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.pg-go { flex: 1; display: grid; text-align: left; padding: 10px 14px; gap: 2px; }
.pg-go small { color: var(--muted); font-size: 12.5px; }
.install-guide { display: grid; gap: 14px; }
.install-guide section { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.install-guide section.hl { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.install-guide h3 { margin: 0 0 10px; font-size: 15px; }
.install-banner { position: fixed; z-index: 120; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; transition: opacity 0.25s, transform 0.3s var(--spring); display: flex; align-items: center; gap: 12px; width: min(520px, calc(100vw - 24px)); padding: 10px 8px 10px 12px; border-radius: 20px; background: rgba(28, 31, 45, 0.94); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4); }
.install-banner.show { opacity: 1; transform: translate(-50%, 0); }
.install-banner img { border-radius: 9px; }
.install-banner > span { flex: 1; display: grid; font-size: 14px; }
.install-banner small { color: var(--sub); font-size: 12.5px; }

/* ---------- preview mode (inside Studio) ---------- */
body.preview .install-banner { display: none; }
body.swiping .tile { pointer-events: none; }

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---------- standby desk clock ---------- */
.standby { position: fixed; inset: 0; z-index: 700; background: #000; display: grid; place-items: center; opacity: 0; transition: opacity 0.25s; cursor: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.standby.open { opacity: 1; }
.sb-inner { display: grid; justify-items: center; gap: 14px; transition: transform 2s ease; text-align: center; }
.sb-time { font-size: min(30vw, 46vh); font-weight: 200; letter-spacing: -0.06em; line-height: 0.95; color: #f2f2f8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-time small { font-size: 0.16em; letter-spacing: 0; margin-right: 0.3em; color: #8b8fa3; vertical-align: 0.4em; font-weight: 400; }
.sb-time .colon { opacity: 0.5; }
body[data-motion="on"][data-power="smooth"] .sb-time .colon { animation: blink 2s steps(1, end) infinite; }
body[data-clock="serif"] .sb-time { font-family: var(--font-serif); font-weight: 300; letter-spacing: -0.03em; }
body[data-clock="mono"] .sb-time { font-family: var(--font-mono); font-weight: 300; }
body[data-clock="rounded"] .sb-time { font-family: var(--font-round); font-weight: 300; }
.sb-date { font-size: clamp(16px, 2.6vw, 26px); color: #a9acbd; letter-spacing: 0.02em; }
.sb-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; max-width: 92vw; }
.sb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); color: #d9dbe7; font-size: clamp(13px, 1.6vw, 17px); }
.sb-chip .g { width: 18px; height: 18px; color: var(--accent); }
.sb-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); color: #777b8c; cursor: pointer; }
.sb-hint { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); margin: 0; font-size: 12px; color: #4f5363; }

/* text fields must stay selectable/editable even though the launcher disables selection */
body.launcher input, body.launcher textarea, body.launcher select, body.launcher .sheet-body, body.launcher .spot-input, body.launcher .folder-name {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}