:root {
  --text: #f8fbff;
  --muted: rgba(248, 251, 255, .72);
  --dim: rgba(248, 251, 255, .48);
  --line: rgba(255, 255, 255, .18);
  --glass: rgba(255, 255, 255, .13);
  --glass-strong: rgba(255, 255, 255, .21);
  --dark-glass: rgba(14, 22, 42, .42);
  --panel: rgba(240, 247, 255, .78);
  --panel-text: #0f172a;
  --accent: #5dd6ff;
  --accent-2: #7c5cff;
  --taskbar-h: 62px;
  --shadow: 0 28px 90px rgba(2, 6, 23, .36);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: #07111f;
  user-select: none;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 28%, rgba(67, 132, 255, .34), transparent 28%),
    radial-gradient(circle at 62% 63%, rgba(102, 221, 255, .25), transparent 30%),
    linear-gradient(135deg, #06101f 0%, #0c1730 44%, #070b16 100%);
  transition: opacity .65s ease, visibility .65s ease;
}
.boot-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-screen.is-active.is-hidden, .boot-screen.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

.secure-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 14%, rgba(57, 197, 255, .14), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(124, 92, 255, .18), transparent 34%),
    linear-gradient(145deg, #02040a 0%, #071426 54%, #030711 100%);
  color: #eaf7ff;
  transition: opacity .58s ease, visibility .58s ease, transform .58s ease;
}
.secure-boot-screen.is-complete, .secure-boot-screen.is-force-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.015); }
.secure-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(93,214,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(93,214,255,.1) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black 0 64%, transparent 82%); }
.secure-scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(93,214,255,.14) 48%, transparent 56%); transform: translateY(-100%); animation: secureScan 2.45s ease-in-out infinite; opacity: .7; }
.secure-boot-panel { position: relative; width: min(650px, calc(100vw - 36px)); padding: 26px; border-radius: 26px; background: rgba(5, 12, 26, .74); border: 1px solid rgba(125, 221, 255, .26); box-shadow: 0 34px 120px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04); backdrop-filter: blur(24px) saturate(130%); }
.secure-boot-panel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(93,214,255,.35), transparent 32%, rgba(124,92,255,.28)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); padding: 1px; -webkit-mask-composite: xor; mask-composite: exclude; }
.secure-boot-topline, .secure-boot-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(234,247,255,.6); }
.secure-boot-topline strong, .secure-boot-foot span:first-child { color: #84f0ff; font-weight: 800; }
.secure-boot-title { margin-top: 22px; font-size: clamp(25px, 4vw, 42px); font-weight: 820; letter-spacing: -.05em; }
.secure-boot-subtitle { margin-top: 8px; color: rgba(234,247,255,.68); font-size: 14px; line-height: 1.55; }
.secure-terminal { margin-top: 22px; display: grid; gap: 8px; font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.secure-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 9px 12px; border-radius: 13px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); opacity: 0; transform: translateY(10px); animation: secureRowIn .55s ease forwards; }
.secure-row:nth-child(1) { animation-delay: .28s; }
.secure-row:nth-child(2) { animation-delay: .72s; }
.secure-row:nth-child(3) { animation-delay: 1.16s; }
.secure-row:nth-child(4) { animation-delay: 1.60s; }
.secure-row:nth-child(5) { animation-delay: 2.04s; }
.secure-row:nth-child(6) { animation-delay: 2.48s; }
.secure-row:nth-child(7) { animation-delay: 2.92s; }
.secure-row span { color: rgba(234,247,255,.74); font-size: 12px; }
.secure-row strong { color: #72ffd6; font-size: 11px; letter-spacing: .12em; text-shadow: 0 0 18px rgba(114,255,214,.42); }
.secure-module-title { margin-top: 18px; color: rgba(234,247,255,.54); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.secure-module-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.secure-module-list span { padding: 7px 10px; border-radius: 999px; background: rgba(93,214,255,.08); color: rgba(234,247,255,.72); border: 1px solid rgba(93,214,255,.12); font-size: 11px; opacity: 0; transform: translateY(6px); animation: secureModuleIn .5s ease forwards; }
.secure-module-list span:nth-child(1) { animation-delay: 1.00s; }
.secure-module-list span:nth-child(2) { animation-delay: 1.36s; }
.secure-module-list span:nth-child(3) { animation-delay: 1.72s; }
.secure-module-list span:nth-child(4) { animation-delay: 2.08s; }
.secure-module-list span:nth-child(5) { animation-delay: 2.44s; }
.secure-module-list span:nth-child(6) { animation-delay: 2.80s; }
.secure-progress { height: 6px; margin-top: 20px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.secure-progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #5dd6ff, #72ffd6, #a6f7ff); transform-origin: left center; transform: scaleX(.04); animation: secureProgressFill 4.15s cubic-bezier(.2,.72,.2,1) forwards; }
.secure-boot-foot { margin-top: 14px; letter-spacing: .08em; }
.boot-screen { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-screen.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.boot-glow { position: absolute; width: 42vmin; height: 42vmin; border-radius: 999px; filter: blur(40px); opacity: .55; animation: bootFloat 3.2s ease-in-out infinite alternate; }
.boot-glow-a { left: 16%; top: 17%; background: #457dff; }
.boot-glow-b { right: 18%; bottom: 16%; background: #54e5ff; animation-delay: .7s; }
.boot-card { position: relative; width: min(420px, calc(100vw - 44px)); padding: 40px 32px 34px; border-radius: 34px; text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); box-shadow: var(--shadow); backdrop-filter: blur(28px); }
.boot-logo { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 12px 32px rgba(0,0,0,.28)); }
.boot-name { margin-top: 18px; font-size: 26px; font-weight: 750; letter-spacing: -.03em; }
.boot-subtitle { margin-top: 8px; color: var(--muted); font-size: 14px; }
.boot-loader { height: 5px; margin: 28px auto 0; overflow: hidden; width: 220px; border-radius: 999px; background: rgba(255,255,255,.14); }
.boot-loader span { display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #fff, transparent); animation: bootLoad 1.25s ease-in-out infinite; }

.os-shell { position: fixed; inset: 0; display: block; overflow: hidden; opacity: 0; transform: scale(1.012); transition: opacity .45s ease .12s, transform .45s ease .12s; }
.os-shell.is-ready { opacity: 1; transform: scale(1); }
.wallpaper { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(135deg, #0a1c3e 0%, #123a76 42%, #0d142f 100%); }
.wallpaper::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle at 18% 25%, rgba(82, 196, 255, .72), transparent 24%), radial-gradient(circle at 76% 62%, rgba(148, 97, 255, .48), transparent 26%), radial-gradient(circle at 46% 74%, rgba(16, 239, 255, .24), transparent 28%); filter: blur(6px); }
.wallpaper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 22% 70%, rgba(255,255,255,.06)), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 90px); opacity: .55; }
.wallpaper-orb, .wallpaper-ribbon { position: absolute; pointer-events: none; }
.wallpaper-orb { border-radius: 50%; filter: blur(26px); opacity: .7; }
.orb-one { width: 480px; height: 480px; background: #3da6ff; left: 11%; top: 12%; }
.orb-two { width: 430px; height: 430px; background: #8a62ff; right: 12%; top: 36%; }
.orb-three { width: 360px; height: 360px; background: #39e4ff; left: 42%; bottom: 4%; opacity: .38; }
.wallpaper-ribbon { width: 76vmax; height: 18vmax; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.04)); transform: rotate(-28deg); filter: blur(4px); }
.ribbon-one { left: -12%; top: 18%; }
.ribbon-two { right: -24%; bottom: 14%; transform: rotate(-34deg); opacity: .54; }

.desktop-area { position: absolute; inset: 0 0 var(--taskbar-h); padding: 26px; }
.desktop-icons { display: grid; gap: 16px; width: 104px; align-content: start; }
.desktop-icon { width: 92px; min-height: 86px; border: 0; border-radius: 14px; background: transparent; color: var(--text); display: grid; place-items: center; gap: 6px; padding: 8px 6px; cursor: default; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.desktop-icon:hover, .desktop-icon:focus-visible { outline: none; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.desktop-icon span:last-child { font-size: 12px; line-height: 1.15; }
.icon-tile { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; box-shadow: 0 14px 30px rgba(2,6,23,.22); position: relative; overflow: hidden; }
.icon-tile::before, .pin-icon::before, .task-icon::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.75), transparent 38%); opacity: .48; }
.browser-mark { background: conic-gradient(from 225deg, #55e3ff, #56a5ff, #8b6cff, #55e3ff); }
.browser-mark span { width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.88); border-radius: 50%; display: block; position: relative; z-index: 1; }
.folder-mark { background: linear-gradient(135deg, #ffd86b, #f5a524); }
.folder-mark span { position: relative; z-index: 1; width: 26px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.7); box-shadow: -8px -6px 0 -2px rgba(255,255,255,.54); }
.gallery-mark { background: linear-gradient(135deg, #29e7af, #1b8bff); }
.gallery-mark span { position: relative; z-index: 1; width: 24px; height: 18px; border-radius: 5px; border: 2px solid rgba(255,255,255,.85); }
.settings-mark { background: linear-gradient(135deg, #c1c7d0, #64748b); }
.settings-mark span { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 5px dotted rgba(255,255,255,.82); }

.desktop-widget { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-xl); background: rgba(255,255,255,.13); backdrop-filter: blur(26px) saturate(150%); box-shadow: 0 18px 50px rgba(2,6,23,.18); }
.clock-widget { right: 28px; top: 28px; min-width: 270px; padding: 20px 22px; }
.widget-time { font-size: 52px; line-height: .95; font-weight: 700; letter-spacing: -.07em; }
.widget-date { margin-top: 10px; color: var(--muted); font-size: 14px; }
.widget-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.13); font-size: 12px; color: var(--muted); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #5dffcb; box-shadow: 0 0 0 6px rgba(93,255,203,.12); }
.info-widget { left: 150px; bottom: 96px; width: 340px; padding: 18px; }
.widget-heading { font-weight: 760; letter-spacing: -.02em; }
.widget-text { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.widget-button, .soft-button, .toolbar-button { border: 0; border-radius: 999px; background: rgba(255,255,255,.2); color: var(--text); padding: 10px 14px; margin-top: 14px; cursor: default; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.widget-button:hover, .soft-button:hover, .toolbar-button:hover { background: rgba(255,255,255,.28); }

.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; background: rgba(238, 246, 255, .74); backdrop-filter: blur(28px) saturate(150%); border-top: 1px solid rgba(255,255,255,.72); box-shadow: 0 -18px 60px rgba(2,6,23,.18); color: #0f172a; z-index: 2400; }
.taskbar-center { grid-column: 2; display: flex; align-items: center; gap: 8px; }
.taskbar-tray { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; }
.taskbar-btn, .tray-icons, .tray-time { border: 0; border-radius: 12px; background: transparent; color: #0f172a; height: 44px; min-width: 44px; display: grid; place-items: center; cursor: default; position: relative; }
.taskbar-btn:hover, .tray-icons:hover, .tray-time:hover, .taskbar-search:hover { background: rgba(15, 23, 42, .08); }
.taskbar-btn.is-active::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 3px; border-radius: 99px; background: #1d72ff; }
.start-logo { display: grid; grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 10px); gap: 2px; }
.start-logo i { display: block; border-radius: 2px; background: linear-gradient(135deg, #248cff, #20d5ff); }
.taskbar-search { height: 42px; width: 194px; border: 0; border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: rgba(255,255,255,.8); color: rgba(15,23,42,.74); cursor: default; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.task-icon, .pin-icon { width: 26px; height: 26px; border-radius: 8px; position: relative; overflow: hidden; display: inline-grid; place-items: center; flex: 0 0 auto; }
.tray-icons { min-width: 92px; grid-auto-flow: column; gap: 7px; font-size: 14px; }
.tray-time { min-width: 96px; padding: 4px 9px; justify-items: end; line-height: 1.1; font-size: 12px; }
.tray-time span:first-child { font-weight: 650; }

.start-menu, .search-panel, .quick-panel, .calendar-panel, .context-menu { position: absolute; z-index: 3000; display: none; background: rgba(242, 248, 255, .82); color: #0f172a; border: 1px solid rgba(255,255,255,.78); box-shadow: 0 30px 90px rgba(2,6,23,.26); backdrop-filter: blur(32px) saturate(165%); }
.start-menu.is-open, .search-panel.is-open, .quick-panel.is-open, .calendar-panel.is-open, .context-menu.is-open { display: block; animation: panelIn .16s ease both; }
.start-menu { width: min(640px, calc(100vw - 36px)); left: 50%; bottom: 76px; transform: translateX(-50%); border-radius: 28px; padding: 22px; }
.start-search, .search-big { display: flex; align-items: center; gap: 12px; height: 42px; background: rgba(255,255,255,.9); border-radius: 999px; padding: 0 14px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.start-search input, .search-big input { width: 100%; border: 0; background: transparent; color: rgba(15,23,42,.58); outline: none; }
.start-section-title { margin: 18px 4px 10px; font-size: 13px; font-weight: 750; }
.pinned-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pinned-grid button { min-height: 82px; border: 0; border-radius: 16px; background: transparent; color: #0f172a; display: grid; place-items: center; gap: 8px; cursor: default; font-size: 12px; }
.pinned-grid button:hover, .recommended-list button:hover { background: rgba(15,23,42,.07); }
.bell-mark { background: linear-gradient(135deg, #fbbf24, #fb7185); }
.bell-mark::after { content: ""; position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 10px 10px 5px 5px; background: rgba(255,255,255,.86); }
.power-mark { background: linear-gradient(135deg, #64748b, #1e293b); color: white; }
.power-mark::after { content: "⏻"; position: relative; z-index: 1; font-size: 13px; }
.recommended-list { display: grid; gap: 8px; }
.recommended-list button { border: 0; border-radius: 16px; background: transparent; color: #0f172a; padding: 12px; text-align: left; display: grid; gap: 4px; cursor: default; }
.recommended-list span { color: rgba(15,23,42,.58); font-size: 12px; }
.start-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(15,23,42,.08); padding-top: 14px; margin-top: 16px; }
.start-user { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 13px; }
.start-user img { width: 30px; height: 30px; }
#powerButton { width: 38px; height: 38px; border-radius: 999px; border: 0; background: rgba(15,23,42,.06); cursor: default; }
.search-panel { width: min(720px, calc(100vw - 36px)); left: 50%; bottom: 76px; transform: translateX(-50%); border-radius: 28px; padding: 18px; }
.search-hints { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.search-hints button { border: 0; border-radius: 999px; padding: 10px 14px; cursor: default; background: rgba(15,23,42,.08); }
.quick-panel { right: 124px; bottom: 76px; width: 350px; border-radius: 24px; padding: 16px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-toggle { height: 58px; border: 0; border-radius: 16px; background: rgba(15,23,42,.08); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #0f172a; cursor: default; }
.quick-toggle.active { background: #2378ff; color: white; }
.range-line { display: grid; gap: 8px; margin-top: 16px; color: rgba(15,23,42,.7); font-size: 12px; }
.range-line input { width: 100%; accent-color: #2378ff; }
.calendar-panel { right: 12px; bottom: 76px; width: 330px; border-radius: 24px; padding: 18px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; text-align: center; }
.calendar-grid span { height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; color: rgba(15,23,42,.7); }
.calendar-grid .today { background: #2378ff; color: white; font-weight: 800; }
.context-menu { width: 226px; border-radius: 12px; padding: 6px; }
.context-menu button { width: 100%; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #0f172a; text-align: left; padding: 0 12px; cursor: default; }
.context-menu button:hover { background: rgba(15,23,42,.08); }
.context-menu hr { border: 0; border-top: 1px solid rgba(15,23,42,.09); margin: 6px; }

.app-window { position: absolute; display: none; flex-direction: column; min-width: 320px; min-height: 240px; border-radius: 14px; overflow: hidden; background: rgba(244, 249, 255, .82); color: #0f172a; border: 1px solid rgba(255,255,255,.74); box-shadow: 0 30px 100px rgba(2,6,23,.34); backdrop-filter: blur(30px) saturate(160%); z-index: 1200; }
.app-window.is-open { display: flex; animation: windowIn .18s cubic-bezier(.18, .88, .2, 1.05) both; }
.app-window.is-maximized { left: 10px !important; right: 10px; top: 10px !important; width: calc(100vw - 20px) !important; height: calc(100vh - var(--taskbar-h) - 20px) !important; border-radius: 12px; }
.window-titlebar { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; background: rgba(255,255,255,.58); border-bottom: 1px solid rgba(15,23,42,.06); cursor: default; }
.window-title-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.window-title { font-size: 12px; font-weight: 700; white-space: nowrap; }
.window-app-icon { width: 18px; height: 18px; border-radius: 5px; display: inline-block; }
.browser-mini { background: conic-gradient(#55e3ff, #56a5ff, #8b6cff, #55e3ff); }
.folder-mini { background: linear-gradient(135deg, #ffd86b, #f5a524); }
.gallery-mini { background: linear-gradient(135deg, #29e7af, #1b8bff); }
.settings-mini { background: linear-gradient(135deg, #c1c7d0, #64748b); }
.window-controls { display: flex; align-items: stretch; height: 100%; }
.window-control { width: 44px; border: 0; background: transparent; color: rgba(15,23,42,.75); font-size: 16px; cursor: default; }
.window-control:hover { background: rgba(15,23,42,.08); }
.window-control.close:hover { background: #e81123; color: white; }
.browser-toolbar { height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(15,23,42,.06); }
.traffic-actions { display: flex; align-items: center; gap: 5px; }
.nav-dot { width: 28px; height: 28px; border-radius: 999px; border: 0; background: rgba(15,23,42,.06); }
.nav-dot.active { background: rgba(35,120,255,.14); }
.address-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.78); color: rgba(15,23,42,.7); font-size: 12px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.lock-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.toolbar-button { margin: 0; color: #0f172a; background: rgba(15,23,42,.07); box-shadow: none; padding: 8px 12px; font-size: 12px; }
.empty-window-content { flex: 1; display: grid; place-items: center; align-content: center; gap: 12px; padding: 30px; text-align: center; }
.empty-illustration { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 22px; background: rgba(35,120,255,.12); }
.empty-illustration img { width: 60px; height: 60px; }
.empty-window-content h1 { margin: 0; font-size: clamp(24px, 4vw, 44px); letter-spacing: -.05em; }
.empty-window-content p { margin: 0; max-width: 610px; color: rgba(15,23,42,.62); line-height: 1.65; }
.empty-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.soft-button { color: #0f172a; background: #2378ff; color: white; box-shadow: none; }
.soft-button.ghost { background: rgba(15,23,42,.07); color: #0f172a; }
.resize-handle { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; }
.resize-handle::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-right: 2px solid rgba(15,23,42,.32); border-bottom: 2px solid rgba(15,23,42,.32); }
.folder-content { flex: 1; display: grid; grid-template-columns: 170px 1fr; min-height: 0; }
.folder-sidebar { padding: 16px 12px; display: grid; align-content: start; gap: 8px; background: rgba(255,255,255,.42); border-right: 1px solid rgba(15,23,42,.06); }
.folder-sidebar span { padding: 9px 10px; border-radius: 10px; color: rgba(15,23,42,.64); font-size: 13px; }
.folder-sidebar span:first-child { background: rgba(35,120,255,.12); color: #0f172a; font-weight: 700; }
.folder-main { padding: 18px; display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 14px; align-content: start; }
.folder-card { min-height: 128px; border-radius: 18px; background: rgba(255,255,255,.68); padding: 16px; display: grid; align-content: center; justify-items: center; gap: 7px; text-align: center; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.folder-card small { color: rgba(15,23,42,.56); }
.mini-folder { width: 44px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #ffd86b, #f5a524); box-shadow: inset 0 12px 0 rgba(255,255,255,.22); }
.gallery-content { flex: 1; padding: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gallery-tile { border-radius: 20px; min-height: 150px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.tile-a { background: linear-gradient(135deg,#34d399,#2563eb); }
.tile-b { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.tile-c { background: linear-gradient(135deg,#06b6d4,#8b5cf6); }
.tile-d { background: linear-gradient(135deg,#a3e635,#14b8a6); }
.settings-content { padding: 20px; display: grid; gap: 14px; }
.settings-hero { min-height: 104px; border-radius: 20px; padding: 18px; color: white; background: linear-gradient(135deg, #2378ff, #7c5cff); display: grid; align-content: end; gap: 5px; }
.setting-line { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.72); }
.setting-line input { accent-color: #2378ff; }

.toast-stack { position: absolute; right: 18px; bottom: 78px; z-index: 3500; display: grid; gap: 10px; pointer-events: none; }
.toast { width: min(360px, calc(100vw - 36px)); border-radius: 18px; padding: 14px; background: rgba(243,248,255,.86); color: #0f172a; box-shadow: 0 22px 60px rgba(2,6,23,.22); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.78); animation: toastIn .24s ease both; }
.toast strong { display: block; font-size: 14px; }
.toast span { display: block; margin-top: 3px; color: rgba(15,23,42,.6); font-size: 12px; line-height: 1.4; }

.mobile-shell { display: none; }

@keyframes secureScan { from { transform: translateY(-110%); } to { transform: translateY(110%); } }
@keyframes secureRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes secureProgressFill { 0% { transform: scaleX(.04); } 35% { transform: scaleX(.45); } 72% { transform: scaleX(.82); } 100% { transform: scaleX(1); } }
@keyframes secureModuleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bootLoad { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
@keyframes bootFloat { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(10px, -18px, 0) scale(1.08); } }
@keyframes panelIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes windowIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 820px) {
  body { overflow: hidden; }
  .os-shell { display: none; }
  .boot-screen { display: none; }
  .mobile-shell { display: block; position: fixed; inset: 0; overflow: hidden; background: #06152c; color: white; }
  .mobile-wallpaper { position: absolute; inset: 0; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 18% 18%, rgba(61,166,255,.86), transparent 34%), radial-gradient(circle at 80% 60%, rgba(138,98,255,.64), transparent 34%), linear-gradient(140deg,#071a35,#123a76 54%,#090d1d); }
  .mobile-wallpaper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 34% 72%, rgba(255,255,255,.08)); pointer-events: none; }
  .mobile-status { position: relative; z-index: 2; height: 34px; padding: 8px 20px 0; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 750; }
  .mobile-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-top: 24px; font-weight: 750; }
  .mobile-brand img { width: 34px; height: 34px; }
  .mobile-clock { position: relative; z-index: 2; margin-top: 24px; font-size: 68px; font-weight: 760; letter-spacing: -.08em; }
  .mobile-date { position: relative; z-index: 2; color: rgba(255,255,255,.75); margin-top: -4px; }
  .mobile-grid { position: relative; z-index: 2; margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
  .mobile-grid button { border: 0; background: transparent; color: white; display: grid; justify-items: center; gap: 8px; font-size: 12px; text-shadow: 0 2px 6px rgba(0,0,0,.36); }
  .mobile-dock { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); height: 74px; border-radius: 24px; background: rgba(255,255,255,.18); backdrop-filter: blur(24px); display: flex; justify-content: space-evenly; align-items: center; border: 1px solid rgba(255,255,255,.22); }
  .mobile-dock button { width: 50px; height: 50px; border-radius: 16px; border: 0; background: rgba(255,255,255,.12); display: grid; place-items: center; }
  .mobile-sheet { position: absolute; z-index: 10; left: 10px; right: 10px; bottom: 10px; min-height: 310px; border-radius: 28px; background: rgba(245,249,255,.9); color: #0f172a; padding: 10px 18px 18px; transform: translateY(calc(100% + 16px)); transition: transform .24s ease; backdrop-filter: blur(24px); box-shadow: 0 20px 70px rgba(2,6,23,.28); }
  .mobile-sheet.is-open { transform: translateY(0); }
  .sheet-handle { width: 48px; height: 5px; margin: 2px auto 12px; border-radius: 999px; background: rgba(15,23,42,.18); }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; }
  .sheet-head button { width: 34px; height: 34px; border-radius: 999px; border: 0; background: rgba(15,23,42,.08); }
  .sheet-body p { color: rgba(15,23,42,.62); line-height: 1.55; }
}

@media (max-width: 1080px) and (min-width: 821px) {
  .info-widget { display: none; }
  .clock-widget { transform: scale(.9); transform-origin: top right; }
  .taskbar-search { width: 150px; }
  .search-label { display: none; }
}

/* v1.0.39 - Centered Mobile Boot and UMKM Digital Mobile animation */
.shield-mark {
  background: linear-gradient(135deg, #20d3ff 0%, #2563eb 48%, #7c3aed 100%);
}
.shield-mark span {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 24px;
  display: block;
  background: rgba(255,255,255,.88);
  clip-path: polygon(50% 0, 88% 14%, 82% 60%, 50% 100%, 18% 60%, 12% 14%);
  box-shadow: inset 0 -8px 0 rgba(37,99,235,.16);
}
.widget-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.widget-button.ghost { background: rgba(255,255,255,.12); }
.shield-mini { background: linear-gradient(135deg, #20d3ff, #2563eb 52%, #7c3aed); position: relative; }
.shield-mini::after { content: ""; position: absolute; inset: 3px 4px 2px; background: rgba(255,255,255,.9); clip-path: polygon(50% 0, 88% 14%, 82% 60%, 50% 100%, 18% 60%, 12% 14%); }
.tray-update { width: 42px; height: 44px; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; position: relative; cursor: default; }
.tray-update:hover { background: rgba(15,23,42,.08); }
.tray-shield { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; position: relative; overflow: hidden; }
.tray-shield span { width: 14px; height: 17px; }
.update-badge { position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .18s ease; }
.update-badge.is-visible { opacity: 1; transform: scale(1); animation: badgePulse 1.6s ease-in-out infinite; }
.update-task-btn .update-badge { right: 7px; top: 6px; }
.update-window { min-width: 420px; min-height: 420px; }
.update-center-content { flex: 1; padding: 18px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; min-height: 0; background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(239,247,255,.56)); }
.update-hero { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.9)); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.update-shield-large { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; position: relative; overflow: hidden; box-shadow: 0 16px 30px rgba(2,6,23,.18); }
.update-shield-large span { width: 31px; height: 37px; }
.update-hero strong { display: block; font-size: 21px; letter-spacing: -.04em; }
.update-hero div > span { display: block; margin-top: 4px; color: rgba(255,255,255,.78); font-size: 13px; }
.update-status-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.status-dot { width: 14px; height: 14px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 6px rgba(34,197,94,.12); flex: 0 0 auto; }
.status-dot.is-checking { background: #f59e0b; box-shadow: 0 0 0 6px rgba(245,158,11,.14); }
.status-dot.is-update { background: #ef4444; box-shadow: 0 0 0 6px rgba(239,68,68,.14); }
.status-dot.is-error { background: #64748b; box-shadow: 0 0 0 6px rgba(100,116,139,.14); }
.update-status-card strong { display: block; font-size: 14px; }
.update-status-card span { display: block; margin-top: 2px; color: rgba(15,23,42,.58); font-size: 12px; line-height: 1.45; }
.version-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.version-grid div { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.version-grid span { display: block; color: rgba(15,23,42,.55); font-size: 12px; }
.version-grid strong { display: block; margin-top: 4px; font-size: 22px; letter-spacing: -.04em; }
.update-notes { overflow: auto; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.56); box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.update-notes-head { font-weight: 780; margin-bottom: 8px; }
.update-notes ul { margin: 0; padding-left: 18px; color: rgba(15,23,42,.66); line-height: 1.55; font-size: 13px; }
.update-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.primary-update, .secondary-update { border: 0; border-radius: 999px; padding: 10px 14px; cursor: default; }
.primary-update { background: #2378ff; color: white; font-weight: 740; box-shadow: 0 12px 24px rgba(35,120,255,.24); }
.primary-update:disabled { background: rgba(15,23,42,.12); color: rgba(15,23,42,.48); box-shadow: none; }
.secondary-update { background: rgba(15,23,42,.07); color: #0f172a; }
.update-toast { pointer-events: auto; }
.toast-update-head { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; }
.toast-shield { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; overflow: hidden; position: relative; }
.toast-shield span { width: 21px; height: 25px; }
.toast-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.toast-actions button { border: 0; border-radius: 999px; padding: 8px 12px; background: rgba(15,23,42,.08); color: #0f172a; cursor: default; }
.toast-actions button:last-child { background: #2378ff; color: white; }
@keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,.18); } 50% { box-shadow: 0 0 0 7px rgba(239,68,68,.08); } }

@media (max-width: 820px) {
  .mobile-grid { grid-template-columns: repeat(4, 1fr); }
  .mobile-grid button:nth-child(5) { grid-column: 2 / span 2; }
}


/* Step 24 polish */
.desktop-icons { width: 112px; gap: 18px; }
.desktop-icon { width: 100px; min-height: 98px; gap: 8px; padding: 10px 6px; border-radius: 18px; }
.desktop-icon span:last-child { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.icon-tile { width: 52px; height: 52px; border-radius: 16px; box-shadow: 0 16px 34px rgba(2,6,23,.24); }
.browser-mark { background: conic-gradient(from 180deg, #2fd7ff, #2d7cff, #5f66ff, #2fd7ff); }
.browser-mark span { width: 22px; height: 22px; border-width: 3px; }
.browser-mark::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.95); z-index: 2; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.folder-mark { background: linear-gradient(160deg, #ffd86c, #f59e0b); }
.folder-mark span { width: 28px; height: 18px; border-radius: 5px; background: rgba(255,255,255,.88); box-shadow: -9px -7px 0 -3px rgba(255,255,255,.56), inset 0 -4px 0 rgba(245,158,11,.14); }
.gallery-mark { background: linear-gradient(160deg, #1fd7b0, #1d74ff); }
.gallery-mark span { width: 25px; height: 19px; border-radius: 6px; border: 2px solid rgba(255,255,255,.9); position: relative; overflow: hidden; }
.gallery-mark span::before { content:''; position:absolute; left:3px; bottom:2px; width:14px; height:9px; background: rgba(255,255,255,.9); clip-path: polygon(0 100%, 35% 44%, 54% 65%, 73% 28%, 100% 100%); opacity:.9; }
.gallery-mark span::after { content:''; position:absolute; right:3px; top:3px; width:4px; height:4px; border-radius:50%; background: rgba(255,255,255,.95); }
.settings-mark { background: linear-gradient(160deg, #d2d8e6, #61748a); }
.settings-mark span { width: 22px; height: 22px; border: 3px solid rgba(255,255,255,.92); background: radial-gradient(circle, rgba(255,255,255,.92) 0 18%, transparent 20%); }
.shield-mark { background: linear-gradient(160deg, #22d3ee, #2563eb 52%, #7c3aed); }
.shield-mark span { width: 21px; height: 25px; box-shadow: inset 0 -7px 0 rgba(37,99,235,.18); }
.mobile-grid { gap: 22px 14px; }
.mobile-grid button { gap: 10px; }
.mobile-grid .icon-tile, .mobile-dock .task-icon { box-shadow: 0 14px 28px rgba(2,6,23,.18); }
.mobile-grid small { font-size: 11px; font-weight: 600; }
.mobile-dock button { background: rgba(255,255,255,.16); }
.info-widget { width: 372px; }
.update-hero { background: linear-gradient(135deg, rgba(31,111,255,.96), rgba(64,92,255,.94), rgba(120,82,255,.92)); }
.update-status-card, .version-grid div, .update-notes { background: rgba(255,255,255,.78); }
.version-grid strong { font-size: 18px; line-height: 1.2; }
.update-notes ul { padding-left: 20px; }
.update-notes li { margin-bottom: 8px; }
.toast-update-head strong { font-size: 14px; }
.toast-update-head span { color: rgba(15,23,42,.64); }


/* Step 25 - unified app icon system */
.icon-tile,
.pin-icon,
.task-icon,
.tray-shield,
.window-app-icon {
  isolation: isolate;
}

.pin-icon,
.task-icon {
  position: relative;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
}

.pin-icon::after,
.task-icon::after,
.tray-shield::after,
.window-app-icon::after {
  content: "";
  position: relative;
  z-index: 2;
  display: block;
}

.pin-icon.browser-mark::after,
.task-icon.browser-mark::after,
.window-app-icon.browser-mini::after {
  width: 52%;
  height: 52%;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.12);
}

.pin-icon.folder-mark::after,
.task-icon.folder-mark::after,
.window-app-icon.folder-mini::after {
  width: 62%;
  height: 42%;
  border-radius: 4px;
  background: rgba(255,255,255,.88);
  box-shadow: -6px -5px 0 -3px rgba(255,255,255,.56), inset 0 -3px 0 rgba(245,158,11,.14);
}

.pin-icon.gallery-mark::after,
.task-icon.gallery-mark::after,
.window-app-icon.gallery-mini::after {
  width: 60%;
  height: 45%;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,.92);
  background: linear-gradient(135deg, transparent 52%, rgba(255,255,255,.82) 53%);
}

.pin-icon.settings-mark::after,
.task-icon.settings-mark::after,
.window-app-icon.settings-mini::after {
  width: 54%;
  height: 54%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.94);
  background: radial-gradient(circle, rgba(255,255,255,.94) 0 18%, transparent 20%);
}

.pin-icon.shield-mark::after,
.task-icon.shield-mark::after,
.tray-shield::after,
.window-app-icon.shield-mini::after {
  width: 52%;
  height: 62%;
  background: rgba(255,255,255,.92);
  clip-path: polygon(50% 0, 88% 14%, 82% 60%, 50% 100%, 18% 60%, 12% 14%);
  box-shadow: inset 0 -7px 0 rgba(37,99,235,.16);
}

.pin-icon.bell-mark::after,
.task-icon.bell-mark::after {
  width: 54%;
  height: 54%;
  border-radius: 50% 50% 44% 44%;
  background: rgba(255,255,255,.92);
  clip-path: polygon(50% 0, 78% 20%, 78% 62%, 92% 80%, 8% 80%, 22% 62%, 22% 20%);
}

.icon-tile { transform: translateZ(0); transition: transform .16s ease, filter .16s ease; }
.desktop-icon:hover .icon-tile,
.mobile-grid button:hover .icon-tile {
  transform: translateY(-2px) scale(1.04);
  filter: saturate(1.06);
}

.mobile-dock .task-icon,
.taskbar .task-icon,
.pinned-grid .pin-icon {
  border-radius: 10px;
}

.update-center-content .version-grid span {
  letter-spacing: -.01em;
}

.update-center-content .version-grid strong {
  font-size: 17px;
  letter-spacing: -.03em;
}


/* Step 26 - tray-only update center and tighter icon consistency */
.tray-update {
  width: 34px;
  height: 38px;
  min-width: 34px;
  border-radius: 10px;
}
.tray-shield {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}
.tray-shield > span { display: none; }
.tray-shield::after {
  width: 10px;
  height: 13px;
}
.tray-update .update-badge,
.mobile-update-button .update-badge {
  width: 7px;
  height: 7px;
  right: 4px;
  top: 6px;
  box-shadow: 0 0 0 2px rgba(239,68,68,.18);
}
.update-shield-large {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}
.update-shield-large span {
  width: 25px;
  height: 30px;
}
.update-hero {
  grid-template-columns: 54px 1fr;
}
.desktop-icon .icon-tile,
.mobile-grid .icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.pinned-grid .pin-icon,
.taskbar .task-icon,
.mobile-dock .task-icon,
.window-app-icon {
  width: 26px;
  height: 26px;
  border-radius: 9px;
}
.window-app-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}
.mobile-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.mobile-update-button {
  position: relative;
  width: 32px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  color: white;
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.mobile-update-button .tray-shield {
  width: 17px;
  height: 17px;
}
.mobile-dock {
  max-width: 320px;
  margin: 0 auto;
}
.version-grid strong {
  font-variant-numeric: tabular-nums;
}


/* Step 28 - Mobile OS fullscreen app model */
@media (max-width: 820px) {
  .mobile-shell { background: #07152f; }
  .mobile-wallpaper { z-index: 1; transition: transform .22s ease, filter .22s ease; }
  .mobile-shell:has(.mobile-app.is-open) .mobile-wallpaper { transform: scale(.985); filter: blur(1px) brightness(.78); }
  .mobile-status { z-index: 6; }
  .mobile-status-icons { display: inline-flex; align-items: center; gap: 8px; }
  .mobile-update-button { width: 30px; height: 30px; border: 0; border-radius: 12px; background: rgba(255,255,255,.14); display: grid; place-items: center; position: relative; }
  .mobile-update-button .tray-shield { width: 20px; height: 20px; border-radius: 7px; }
  .mobile-update-button .tray-shield span { width: 11px; height: 14px; }
  .mobile-update-button .update-badge { right: 1px; top: 1px; }

  .mobile-app {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    color: #0f172a;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px) scale(.985);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
    overflow: hidden;
  }
  .mobile-app.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .mobile-app-bar {
    min-height: calc(62px + env(safe-area-inset-top));
    padding: calc(12px + env(safe-area-inset-top)) 14px 10px;
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(22px) saturate(150%);
    flex: 0 0 auto;
  }
  .mobile-app-bar button,
  .mobile-browser-bar button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    background: rgba(15,23,42,.07);
    color: #0f172a;
    font-size: 26px;
    line-height: 1;
    display: grid;
    place-items: center;
  }
  .mobile-app-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .mobile-app-title strong { display: block; font-size: 15px; letter-spacing: -.02em; }
  .mobile-app-title small { display: block; color: rgba(15,23,42,.56); font-size: 11px; margin-top: 2px; }
  .mobile-app-content { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
  .mobile-section-head { display: grid; gap: 4px; margin-bottom: 14px; }
  .mobile-section-head span { color: rgba(15,23,42,.54); font-size: 12px; }
  .mobile-section-head strong { font-size: 22px; letter-spacing: -.04em; }

  .mobile-browser { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #f8fbff; }
  .mobile-browser-bar { min-height: calc(64px + env(safe-area-inset-top)); height: auto; padding: calc(12px + env(safe-area-inset-top)) 12px 10px; display: grid; grid-template-columns: 38px 96px 1fr; gap: 8px; }
  .mobile-browser-bar .mobile-address { height: 38px; }
  .mobile-address { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px; background: rgba(15,23,42,.06); color: rgba(15,23,42,.68); font-size: 12px; overflow: hidden; white-space: nowrap; }
  .mobile-address span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .mobile-site-nav { flex: 0 0 auto; padding: 10px 12px; display: flex; gap: 8px; overflow-x: auto; background: rgba(255,255,255,.76); border-bottom: 1px solid rgba(15,23,42,.06); }
  .mobile-site-nav button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 9px 12px; background: rgba(15,23,42,.07); color: #0f172a; font-size: 12px; }
  .mobile-site-nav button.is-active { background: #2378ff; color: white; }
  .mobile-browser-content { flex: 1; min-height: 0; overflow: auto; padding: 12px; }

  .mobile-file-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .mobile-file-grid button { min-height: 132px; border: 0; border-radius: 22px; background: rgba(255,255,255,.82); color: #0f172a; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 14px; text-align: center; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06), 0 14px 32px rgba(15,23,42,.08); }
  .mobile-file-grid strong { font-size: 14px; }
  .mobile-file-grid small { color: rgba(15,23,42,.56); line-height: 1.35; }

  .mobile-gallery-grid { display: grid; gap: 14px; }
  .mobile-gallery-card { min-height: 160px; border-radius: 26px; padding: 18px; color: white; display: grid; align-content: end; gap: 4px; box-shadow: 0 18px 38px rgba(2,6,23,.16); }
  .mobile-gallery-card span { font-size: 12px; color: rgba(255,255,255,.76); }
  .mobile-gallery-card strong { font-size: 20px; letter-spacing: -.04em; }

  .mobile-settings-list { display: grid; gap: 12px; }
  .mobile-setting-card { border-radius: 20px; padding: 14px 16px; background: rgba(255,255,255,.84); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
  .mobile-setting-card strong { display: block; font-size: 14px; }
  .mobile-setting-card small { display: block; margin-top: 2px; color: rgba(15,23,42,.55); font-size: 12px; }
  .mobile-setting-card em { font-style: normal; color: #2378ff; font-weight: 750; font-size: 12px; }
  .mobile-setting-card input { accent-color: #2378ff; }

  .mobile-update-content { display: grid; gap: 14px; align-content: start; }
  .mobile-update-hero { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: linear-gradient(135deg, rgba(31,111,255,.96), rgba(120,82,255,.92)); color: white; }
  .mobile-update-hero .update-shield-large { width: 52px; height: 52px; border-radius: 17px; }
  .mobile-update-hero strong { display: block; font-size: 18px; letter-spacing: -.03em; }
  .mobile-update-hero span { color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.35; }
  .mobile-version-grid { grid-template-columns: 1fr 1fr; }
  .mobile-update-actions { justify-content: stretch; }
  .mobile-update-actions button { flex: 1; }

  .mobile-sheet { display: none !important; }
}


/* Step 33 - Premium Secure Boot Experience */
@media (max-width: 820px) {
  .mobile-grid {
    gap: 16px 10px;
    padding-inline: 2px;
  }
  .mobile-grid button {
    gap: 7px;
    min-width: 0;
    font-size: 10px;
    line-height: 1.15;
    text-shadow: 0 2px 5px rgba(0,0,0,.32);
  }
  .mobile-grid small {
    max-width: 72px;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: -.01em;
    white-space: normal;
  }
  .mobile-grid .icon-tile {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
  .mobile-dock {
    height: 66px;
    max-width: 296px;
    left: 22px;
    right: 22px;
    border-radius: 22px;
  }
  .mobile-dock button {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .mobile-dock .task-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }
  .mobile-app-bar {
    min-height: calc(56px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 12px 9px;
    grid-template-columns: 36px 1fr;
    gap: 9px;
  }
  .mobile-app-bar button,
  .mobile-browser-bar button {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 21px;
    font-weight: 700;
  }
  .mobile-app-title {
    gap: 8px;
  }
  .mobile-app-title .window-app-icon {
    width: 17px;
    height: 17px;
    border-radius: 6px;
  }
  .mobile-app-title strong {
    font-size: 13px;
    line-height: 1.12;
  }
  .mobile-app-title small {
    font-size: 10px;
    line-height: 1.15;
    margin-top: 1px;
  }
  .mobile-app-content {
    padding: 14px;
  }
  .mobile-section-head span {
    font-size: 10.5px;
  }
  .mobile-section-head strong {
    font-size: 18px;
  }
  .mobile-browser-bar {
    min-height: calc(58px + env(safe-area-inset-top));
    grid-template-columns: 34px 82px 1fr;
    gap: 7px;
  }
  .mobile-browser-bar .mobile-address {
    height: 34px;
  }
  .mobile-address {
    font-size: 10.5px;
    padding: 0 10px;
  }
  .mobile-site-nav {
    gap: 7px;
    padding: 8px 10px;
  }
  .mobile-site-nav button {
    padding: 8px 10px;
    font-size: 10.5px;
    line-height: 1;
  }
  .mobile-file-grid {
    gap: 10px;
  }
  .mobile-file-grid button {
    min-height: 112px;
    border-radius: 19px;
    gap: 6px;
    padding: 12px 10px;
  }
  .mobile-file-grid strong {
    font-size: 12.5px;
    line-height: 1.15;
  }
  .mobile-file-grid small {
    font-size: 10.5px;
    line-height: 1.25;
  }
  .mobile-gallery-grid {
    gap: 11px;
  }
  .mobile-gallery-card {
    min-height: 132px;
    border-radius: 22px;
    padding: 15px;
  }
  .mobile-gallery-card span {
    font-size: 10.5px;
  }
  .mobile-gallery-card strong {
    font-size: 16px;
    line-height: 1.15;
  }
  .mobile-settings-list {
    gap: 10px;
  }
  .mobile-setting-card {
    border-radius: 18px;
    padding: 12px 13px;
    gap: 10px;
  }
  .mobile-setting-card strong {
    font-size: 12.5px;
  }
  .mobile-setting-card small {
    font-size: 10.5px;
    line-height: 1.25;
  }
  .mobile-setting-card em {
    font-size: 10.5px;
  }
  .mobile-update-content {
    gap: 12px;
  }
  .mobile-update-hero {
    grid-template-columns: 50px 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 21px;
  }
  .mobile-update-hero .update-shield-large {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
  .mobile-update-hero strong {
    font-size: 15.5px;
    line-height: 1.15;
  }
  .mobile-update-hero span {
    font-size: 10.5px;
  }
  .update-status-card {
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }
  .update-status-card strong {
    font-size: 12.5px;
  }
  .update-status-card span {
    font-size: 10.5px;
    line-height: 1.35;
  }
  .mobile-version-grid {
    gap: 9px;
  }
  .version-grid div {
    padding: 11px;
    border-radius: 15px;
  }
  .version-grid span {
    font-size: 10.5px;
  }
  .version-grid strong {
    font-size: 15px;
    line-height: 1.18;
  }
  .update-notes {
    padding: 12px;
    border-radius: 16px;
  }
  .update-notes-head {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .update-notes ul {
    font-size: 11px;
    line-height: 1.42;
    padding-left: 16px;
  }
  .mobile-update-actions {
    gap: 8px;
  }
  .mobile-update-actions button,
  .primary-update,
  .secondary-update {
    min-height: 36px;
    padding: 9px 10px;
    font-size: 11px;
    line-height: 1.1;
  }
}


/* Step 33 - Premium Secure Boot responsive polish */
@media (max-width: 820px) {
  .secure-boot-screen { display: grid; }
  .secure-boot-panel {
    width: calc(100vw - 28px);
    padding: 20px;
    border-radius: 24px;
  }
  .secure-boot-topline, .secure-boot-foot {
    font-size: 9px;
    letter-spacing: .08em;
  }
  .secure-boot-title {
    margin-top: 17px;
    font-size: 25px;
  }
  .secure-boot-subtitle {
    font-size: 12px;
  }
  .secure-terminal {
    margin-top: 16px;
    gap: 7px;
  }
  .secure-row {
    padding: 8px 10px;
    border-radius: 12px;
  }
  .secure-row span, .secure-row strong, .secure-module-list span {
    font-size: 9.5px;
  }
  .secure-module-list {
    gap: 6px;
    margin-top: 12px;
  }
  .secure-module-list span {
    padding: 6px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .secure-scan, .secure-progress span, .secure-row, .secure-module-list span { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .secure-boot-screen, .boot-screen, .os-shell { transition-duration: .01ms !important; }
}


/* Step 34 - Anti-stuck boot fallback and cinematic secure boot */
.secure-boot-screen.is-compact .secure-row { animation-duration: .34s; }
.secure-boot-screen.is-compact .secure-row:nth-child(1) { animation-delay: .10s; }
.secure-boot-screen.is-compact .secure-row:nth-child(2) { animation-delay: .22s; }
.secure-boot-screen.is-compact .secure-row:nth-child(3) { animation-delay: .34s; }
.secure-boot-screen.is-compact .secure-row:nth-child(4) { animation-delay: .46s; }
.secure-boot-screen.is-compact .secure-row:nth-child(5) { animation-delay: .58s; }
.secure-boot-screen.is-compact .secure-row:nth-child(6) { animation-delay: .70s; }
.secure-boot-screen.is-compact .secure-row:nth-child(7) { animation-delay: .82s; }
.secure-boot-screen.is-compact .secure-module-list span { animation-delay: .55s; animation-duration: .32s; }
.secure-boot-screen.is-compact .secure-progress span { animation-duration: 1.55s; }
.secure-boot-screen.is-force-hidden,
.secure-boot-screen.is-complete { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.boot-screen.is-active.is-hidden,
.boot-screen.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }


/* Step 35 - BIOS-style boot screen */
.bios-boot-screen {
  background: #02050b;
  color: #d8f6ff;
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  align-items: stretch;
  justify-items: stretch;
  padding: clamp(16px, 2.6vw, 34px);
}
.bios-boot-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(66, 134, 255, .12), transparent 32%),
    linear-gradient(180deg, rgba(6, 18, 42, .68), rgba(0, 3, 9, .96));
  opacity: .92;
}
.bios-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 140px rgba(0,0,0,.92), inset 0 0 22px rgba(103, 222, 255, .14); pointer-events: none; }
.bios-scanline { position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px); pointer-events: none; animation: biosScanNoise 7s linear infinite; }
.bios-panel {
  position: relative;
  width: min(980px, calc(100vw - 28px));
  min-height: min(640px, calc(100dvh - 34px));
  margin: auto;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 6px;
  background: rgba(1, 6, 16, .88);
  border: 1px solid rgba(151, 226, 255, .32);
  box-shadow: 0 34px 110px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 34px rgba(90, 214, 255, .08);
  backdrop-filter: none;
  overflow: hidden;
}
.bios-panel::before { display: none; }
.bios-output {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: calc(min(640px, calc(100dvh - 34px)) - 112px);
  color: #d8f6ff;
  text-shadow: 0 0 10px rgba(94, 220, 255, .34);
}
.bios-line {
  margin: 0;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(10.5px, 1.45vw, 15px);
  line-height: 1.34;
  letter-spacing: .01em;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: biosTypeLine .46s steps(44, end) forwards;
  animation-delay: calc(var(--i) * .235s);
}
.bios-line-title {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: clamp(12px, 1.75vw, 17px);
}
.bios-gap { margin-top: 10px; }
.bios-ready {
  margin-top: 14px;
  color: #8effe0;
  font-weight: 800;
  text-shadow: 0 0 20px rgba(104, 255, 218, .42);
  animation-name: biosTypeLine, biosReadyPulse;
  animation-duration: .54s, 1s;
  animation-delay: calc(var(--i) * .235s), calc((var(--i) * .235s) + .65s);
  animation-fill-mode: forwards, both;
  animation-iteration-count: 1, infinite;
}
.bios-progress {
  position: relative;
  z-index: 1;
  height: 12px;
  margin-top: 18px;
  border: 1px solid rgba(178, 238, 255, .42);
  background: rgba(218, 245, 255, .05);
  overflow: hidden;
}
.bios-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(.02);
  background: repeating-linear-gradient(90deg, rgba(157, 246, 255, .95) 0 10px, rgba(70, 178, 217, .84) 10px 16px);
  animation: biosProgress 5.65s steps(22, end) forwards;
}
.bios-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  color: rgba(216, 246, 255, .62);
  font-size: clamp(9px, 1.2vw, 12px);
  letter-spacing: .03em;
}
.secure-boot-screen.is-compact .bios-line {
  animation-duration: .22s;
  animation-delay: calc(var(--i) * .074s);
}
.secure-boot-screen.is-compact .bios-ready {
  animation-delay: calc(var(--i) * .074s), calc((var(--i) * .074s) + .36s);
}
.secure-boot-screen.is-compact .bios-progress span { animation-duration: 2.20s; }
@keyframes biosTypeLine {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes biosProgress {
  0% { transform: scaleX(.02); }
  18% { transform: scaleX(.18); }
  42% { transform: scaleX(.48); }
  70% { transform: scaleX(.78); }
  100% { transform: scaleX(1); }
}
@keyframes biosReadyPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.65); }
}
@keyframes biosScanNoise {
  from { transform: translateY(0); }
  to { transform: translateY(18px); }
}
@media (max-width: 620px) {
  .bios-boot-screen { padding: 12px; }
  .bios-panel { width: calc(100vw - 20px); min-height: min(610px, calc(100dvh - 24px)); padding: 16px 14px; }
  .bios-output { gap: 5px; min-height: calc(min(610px, calc(100dvh - 24px)) - 92px); }
  .bios-line { font-size: clamp(8.7px, 2.45vw, 11.3px); line-height: 1.32; }
  .bios-line-title { font-size: clamp(9.7px, 2.8vw, 12.3px); }
  .bios-gap { margin-top: 7px; }
  .bios-footer { font-size: 8.5px; align-items: flex-start; }
  .bios-progress { height: 10px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bios-line { opacity: 1 !important; clip-path: inset(0 0 0 0) !important; animation: none !important; }
  .bios-progress span { transform: scaleX(1) !important; animation: none !important; }
  .bios-scanline { animation: none !important; }
}


/* Step 36 - Pure Classic BIOS/POST Screen */
.bios-boot-screen {
  background: #000 !important;
  color: #d9d9d9 !important;
  font-family: "Courier New", Courier, "Liberation Mono", monospace !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  padding: 0 !important;
}
.bios-boot-screen::before,
.bios-vignette {
  display: none !important;
}
.bios-scanline {
  opacity: .035 !important;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px) !important;
  animation: none !important;
}
.bios-panel {
  width: 100vw !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: clamp(14px, 2.1vw, 28px) clamp(12px, 2.4vw, 34px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}
.bios-output {
  display: block !important;
  min-height: calc(100dvh - 58px) !important;
  color: #d7d7d7 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}
.bios-line {
  display: block !important;
  margin: 0 0 3px !important;
  width: fit-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  color: #d7d7d7 !important;
  font-family: inherit !important;
  font-size: clamp(11px, 1.34vw, 15px) !important;
  line-height: 1.28 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: biosClassicType .24s steps(52, end) forwards !important;
  animation-delay: calc((var(--i) - 1) * .335s) !important;
}
.bios-line-title {
  margin-bottom: 9px !important;
  color: #f4f4f4 !important;
  font-size: clamp(12px, 1.45vw, 16px) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.bios-gap { margin-top: 11px !important; }
.bios-dots::after {
  content: " READY";
  color: #f4f4f4;
  opacity: 0;
  animation: biosStatusIn .01s linear forwards;
  animation-delay: calc(((var(--i) - 1) * .335s) + 1.08s);
}
.bios-ready {
  margin-top: 14px !important;
  color: #f4f4f4 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  animation: biosClassicType .28s steps(42, end) forwards, biosCursorBlink .74s steps(1, end) infinite !important;
  animation-delay: calc((var(--i) - 1) * .335s), calc(((var(--i) - 1) * .335s) + .38s) !important;
}
.bios-progress { display: none !important; }
.bios-footer {
  position: fixed !important;
  left: clamp(12px, 2.4vw, 34px) !important;
  right: clamp(12px, 2.4vw, 34px) !important;
  bottom: clamp(10px, 1.8vw, 22px) !important;
  margin: 0 !important;
  color: #bcbcbc !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: clamp(14px, 3vw, 34px) !important;
  font-size: clamp(9px, 1.05vw, 12px) !important;
  letter-spacing: 0 !important;
}
.secure-boot-screen.is-compact .bios-line {
  animation-duration: .18s !important;
  animation-delay: calc((var(--i) - 1) * .18s) !important;
}
.secure-boot-screen.is-compact .bios-dots::after {
  animation-delay: calc(((var(--i) - 1) * .18s) + .70s) !important;
}
.secure-boot-screen.is-compact .bios-ready {
  animation-delay: calc((var(--i) - 1) * .18s), calc(((var(--i) - 1) * .18s) + .28s) !important;
}
@keyframes biosClassicType {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes biosStatusIn {
  to { opacity: 1; }
}
@keyframes biosCursorBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .45; }
}
@media (max-width: 620px) {
  .bios-panel {
    padding: 12px 10px !important;
    overflow: hidden !important;
  }
  .bios-output {
    min-height: calc(100dvh - 52px) !important;
  }
  .bios-line {
    font-size: clamp(7.7px, 2.08vw, 10.3px) !important;
    line-height: 1.26 !important;
    margin-bottom: 2px !important;
  }
  .bios-line-title {
    font-size: clamp(8.4px, 2.28vw, 11px) !important;
    margin-bottom: 7px !important;
  }
  .bios-gap { margin-top: 7px !important; }
  .bios-footer {
    left: 10px !important;
    right: 10px !important;
    bottom: 8px !important;
    gap: 10px !important;
    font-size: 7.2px !important;
    flex-wrap: wrap !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bios-line,
  .secure-boot-screen.is-compact .bios-line,
  .bios-ready,
  .secure-boot-screen.is-compact .bios-ready {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
    animation: none !important;
  }
  .bios-dots::after { opacity: 1 !important; animation: none !important; }
}

/* Step 37 - Responsive realistic BIOS/POST boot */
.bios-panel {
  padding: clamp(12px, 2vw, 24px) clamp(12px, 2.2vw, 30px) calc(clamp(42px, 7vh, 70px) + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}
.bios-output {
  min-height: 0 !important;
  height: calc(100dvh - clamp(58px, 9vh, 92px) - env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  display: block !important;
  padding-bottom: 10px !important;
}
.bios-line {
  font-size: clamp(10px, 1.16vw, 14px) !important;
  line-height: 1.26 !important;
  margin: 0 0 clamp(2px, .38vh, 4px) !important;
  animation: biosLinePost .18s steps(1, end) forwards !important;
  animation-delay: calc((var(--i) - 1) * .38s) !important;
  clip-path: none !important;
}
.bios-line-title {
  font-size: clamp(11.2px, 1.28vw, 15px) !important;
  margin-bottom: clamp(5px, 1vh, 9px) !important;
}
.bios-gap { margin-top: clamp(6px, 1.15vh, 10px) !important; }
.bios-memory { color: #e4e4e4 !important; }
.bios-kernel { color: #dcdcdc !important; }
.bios-dots::after {
  content: " READY" !important;
  color: #f3f3f3 !important;
  opacity: 0;
  animation: biosStatusIn .01s linear forwards !important;
  animation-delay: calc(((var(--i) - 1) * .38s) + .46s) !important;
}
.bios-ready {
  margin-top: clamp(8px, 1.6vh, 13px) !important;
  animation: biosLinePost .18s steps(1, end) forwards, biosCursorBlink .74s steps(1, end) infinite !important;
  animation-delay: calc((var(--i) - 1) * .38s), calc(((var(--i) - 1) * .38s) + .24s) !important;
}
.bios-footer {
  bottom: calc(clamp(9px, 1.6vh, 18px) + env(safe-area-inset-bottom)) !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(190,190,190,.26) !important;
  background: #000 !important;
  font-size: clamp(8.5px, .98vw, 11.5px) !important;
  flex-wrap: wrap !important;
  row-gap: 4px !important;
}
.secure-boot-screen.is-compact .bios-line {
  animation-duration: .12s !important;
  animation-delay: calc((var(--i) - 1) * .18s) !important;
}
.secure-boot-screen.is-compact .bios-dots::after {
  animation-delay: calc(((var(--i) - 1) * .18s) + .30s) !important;
}
.secure-boot-screen.is-compact .bios-ready {
  animation-delay: calc((var(--i) - 1) * .18s), calc(((var(--i) - 1) * .18s) + .20s) !important;
}
@keyframes biosLinePost {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-height: 620px) {
  .bios-panel { padding-top: 10px !important; padding-bottom: calc(44px + env(safe-area-inset-bottom)) !important; }
  .bios-output { height: calc(100dvh - 56px - env(safe-area-inset-bottom)) !important; }
  .bios-line { font-size: clamp(8.4px, 1.55vw, 11px) !important; line-height: 1.16 !important; margin-bottom: 1px !important; }
  .bios-line-title { font-size: clamp(9px, 1.75vw, 12px) !important; margin-bottom: 4px !important; }
  .bios-gap { margin-top: 4px !important; }
  .bios-footer { font-size: 8px !important; gap: 12px !important; }
}
@media (max-width: 620px) {
  .bios-panel { padding: 11px 10px calc(46px + env(safe-area-inset-bottom)) !important; }
  .bios-output { height: calc(100dvh - 56px - env(safe-area-inset-bottom)) !important; }
  .bios-line { font-size: clamp(7.8px, 2vw, 10.2px) !important; line-height: 1.18 !important; margin-bottom: 1px !important; }
  .bios-line-title { font-size: clamp(8.4px, 2.2vw, 10.8px) !important; margin-bottom: 4px !important; }
  .bios-gap { margin-top: 4px !important; }
  .bios-footer { left: 10px !important; right: 10px !important; font-size: 8px !important; gap: 12px !important; }
}


/* Step 38 - Split desktop BIOS and mobile secure startup */
.mobile-startup-panel {
  display: none;
  position: relative;
  width: min(360px, calc(100vw - 42px));
  min-height: 420px;
  padding: 40px 24px 30px;
  border-radius: 34px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background:
    radial-gradient(circle at 50% 12%, rgba(91, 212, 255, .18), transparent 35%),
    linear-gradient(180deg, rgba(9, 18, 38, .92), rgba(3, 8, 20, .98));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}
.mobile-startup-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}
.mobile-startup-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(70, 191, 255, .28), transparent 68%);
  filter: blur(5px);
  animation: mobileStartupPulse 1.8s ease-in-out infinite alternate;
}
.mobile-startup-logo-wrap {
  position: relative;
  width: 94px;
  height: 94px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  animation: mobileStartupIcon 2.2s ease both;
}
.mobile-startup-logo { width: 62px; height: 62px; object-fit: contain; }
.mobile-startup-title {
  position: relative;
  margin-top: 22px;
  font-size: clamp(25px, 7vw, 34px);
  font-weight: 820;
  letter-spacing: -.04em;
  color: #f7fbff;
}
.mobile-startup-subtitle {
  position: relative;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(226, 241, 255, .64);
}
.mobile-startup-steps {
  position: relative;
  width: 100%;
  margin-top: 28px;
  display: grid;
  gap: 8px;
}
.mobile-startup-steps span {
  opacity: 0;
  transform: translateY(6px);
  font-size: 12px;
  color: rgba(234, 247, 255, .76);
  animation: mobileStartupStep .38s ease forwards;
  animation-delay: calc(.32s + (var(--m) * .42s));
}
.mobile-startup-steps span::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: mobileStartupDots .82s steps(3, end) infinite;
}
.mobile-startup-loader {
  position: relative;
  width: 170px;
  height: 4px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.mobile-startup-loader span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(93,214,255,.72), rgba(255,255,255,.95));
  animation: mobileStartupLoad 2.15s ease forwards;
}
.secure-boot-screen.is-desktop-boot .mobile-startup-panel { display: none !important; }
.secure-boot-screen.is-mobile-boot .bios-panel,
.secure-boot-screen.is-mobile-boot .bios-scanline { display: none !important; }
.secure-boot-screen.is-mobile-boot .mobile-startup-panel { display: flex !important; }
.secure-boot-screen.is-mobile-boot {
  background:
    radial-gradient(circle at 50% 18%, rgba(75, 183, 255, .18), transparent 36%),
    linear-gradient(180deg, #07101f, #020611 74%);
}
.secure-boot-screen.is-mobile-boot.is-compact .mobile-startup-panel { min-height: 330px; padding-top: 30px; padding-bottom: 24px; }
.secure-boot-screen.is-mobile-boot.is-compact .mobile-startup-steps span { animation-delay: calc(.18s + (var(--m) * .22s)); }
.secure-boot-screen.is-mobile-boot.is-compact .mobile-startup-loader span { animation-duration: 1.05s; }
@media (max-width: 760px), (pointer: coarse) {
  .secure-boot-screen:not(.is-desktop-boot) .bios-panel,
  .secure-boot-screen:not(.is-desktop-boot) .bios-scanline { display: none !important; }
  .secure-boot-screen:not(.is-desktop-boot) .mobile-startup-panel { display: flex !important; }
}
@keyframes mobileStartupPulse {
  0% { opacity: .55; transform: translateX(-50%) scale(.92); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
@keyframes mobileStartupIcon {
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mobileStartupStep {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mobileStartupDots {
  0% { content: ""; }
  33% { content: "."; }
  66% { content: ".."; }
  100% { content: "..."; }
}
@keyframes mobileStartupLoad {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-startup-glow,
  .mobile-startup-logo-wrap,
  .mobile-startup-steps span,
  .mobile-startup-loader span { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Step 39 - Centered mobile startup and restored mobile logo boot */
.secure-boot-screen.is-mobile-boot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow: hidden;
}
.secure-boot-screen.is-mobile-boot .mobile-startup-panel {
  width: min(360px, 100%);
  max-width: calc(100vw - 32px);
  max-width: calc(100dvw - 32px);
  min-height: min(410px, calc(100vh - 72px));
  min-height: min(410px, calc(100svh - 72px));
  max-height: calc(100vh - 36px);
  max-height: calc(100svh - 36px);
  margin: auto;
  padding: clamp(28px, 7vh, 40px) clamp(18px, 6vw, 24px) clamp(22px, 5vh, 30px);
  box-sizing: border-box;
  left: auto;
  right: auto;
  transform: none;
}
.secure-boot-screen.is-mobile-boot .mobile-startup-title,
.secure-boot-screen.is-mobile-boot .mobile-startup-subtitle,
.secure-boot-screen.is-mobile-boot .mobile-startup-steps {
  width: 100%;
  text-align: center;
}
.secure-boot-screen.is-mobile-boot .mobile-startup-logo-wrap {
  flex: 0 0 auto;
}
.secure-boot-screen.is-mobile-boot.is-compact .mobile-startup-panel {
  min-height: min(320px, calc(100svh - 64px));
  padding-top: clamp(24px, 6vh, 30px);
  padding-bottom: clamp(20px, 5vh, 24px);
}
.boot-screen.is-mobile-logo-boot {
  background:
    radial-gradient(circle at 50% 24%, rgba(75, 183, 255, .20), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(116, 92, 255, .15), transparent 42%),
    linear-gradient(180deg, #07101f, #020611 76%);
}
.boot-screen.is-mobile-logo-boot .boot-card {
  width: min(320px, calc(100vw - 44px));
  width: min(320px, calc(100dvw - 44px));
  padding: 34px 20px 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.boot-screen.is-mobile-logo-boot .boot-logo {
  width: clamp(70px, 20vw, 88px);
  height: clamp(70px, 20vw, 88px);
}
.boot-screen.is-mobile-logo-boot .boot-name {
  font-size: clamp(24px, 7vw, 32px);
  letter-spacing: -.045em;
}
.boot-screen.is-mobile-logo-boot .boot-subtitle {
  color: rgba(234, 247, 255, .70);
  font-size: 13px;
}
.boot-screen.is-mobile-logo-boot .boot-loader {
  width: min(178px, 58vw);
  margin-top: 24px;
}
@media (max-width: 820px), (pointer: coarse) {
  .boot-screen.is-mobile-logo-boot.is-active {
    display: grid !important;
  }
  .boot-screen.is-desktop-logo-boot.is-active {
    display: none !important;
  }
}
@media (max-height: 610px) {
  .secure-boot-screen.is-mobile-boot .mobile-startup-panel {
    min-height: auto;
    padding-top: 22px;
    padding-bottom: 18px;
  }
  .secure-boot-screen.is-mobile-boot .mobile-startup-logo-wrap {
    width: 78px;
    height: 78px;
    border-radius: 24px;
  }
  .secure-boot-screen.is-mobile-boot .mobile-startup-logo {
    width: 52px;
    height: 52px;
  }
  .secure-boot-screen.is-mobile-boot .mobile-startup-title {
    margin-top: 16px;
    font-size: clamp(22px, 7vw, 28px);
  }
  .secure-boot-screen.is-mobile-boot .mobile-startup-steps {
    margin-top: 20px;
  }
  .secure-boot-screen.is-mobile-boot .mobile-startup-loader {
    margin-top: 18px;
  }
}


/* v1.0.47 - Desktop OS service showroom positioning */
.info-widget { width: min(390px, calc(100vw - 170px)); }
.widget-heading { font-size: 19px; }
.widget-text { line-height: 1.62; }
.widget-actions { align-items: stretch; }
.widget-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; }
.service-folder-window { min-width: 720px; min-height: 470px; }
.service-folder-sidebar strong { display: block; padding: 4px 10px 8px; font-size: 12px; color: rgba(15,23,42,.44); text-transform: uppercase; letter-spacing: .08em; }
.service-folder-main { grid-template-columns: repeat(3, minmax(148px, 1fr)); }
.service-folder-main .folder-card { min-height: 148px; align-content: start; justify-items: start; text-align: left; position: relative; overflow: hidden; }
.service-folder-main .folder-card::after { content: ""; position: absolute; right: -24px; bottom: -28px; width: 84px; height: 84px; border-radius: 28px; background: rgba(35,120,255,.08); transform: rotate(12deg); }
.folder-card .doc-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(37,99,235,.1); color: #1d4ed8; font-size: 11px; font-weight: 750; }
.folder-card strong { position: relative; z-index: 1; font-size: 15px; line-height: 1.25; }
.folder-card small { position: relative; z-index: 1; line-height: 1.45; }
.folder-card .mini-folder { position: relative; z-index: 1; margin-bottom: 4px; }
.service-gallery-content { padding: 18px; display: grid; grid-template-rows: auto 1fr; gap: 14px; min-height: 0; }
.gallery-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.68); box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.gallery-intro strong { display: block; font-size: 15px; }
.gallery-intro span { display: block; margin-top: 3px; color: rgba(15,23,42,.58); font-size: 12px; line-height: 1.45; }
.gallery-intro em { font-style: normal; flex: 0 0 auto; min-height: 30px; padding: 7px 10px; border-radius: 999px; background: rgba(37,99,235,.1); color: #1d4ed8; font-size: 11px; font-weight: 800; }
.gallery-grid { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; overflow: auto; padding-right: 2px; }
.gallery-tile.service-shot { min-height: 168px; position: relative; display: grid; align-content: end; gap: 5px; padding: 16px; color: white; overflow: hidden; isolation: isolate; }
.gallery-tile.service-shot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,.05), rgba(2,6,23,.62)); z-index: -1; }
.gallery-tile.service-shot::after { content: ""; position: absolute; left: 16px; right: 16px; top: 14px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); z-index: -1; }
.gallery-tile.service-shot span { font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; opacity: .86; }
.gallery-tile.service-shot strong { font-size: 17px; letter-spacing: -.03em; }
.gallery-tile.service-shot small { max-width: 28ch; color: rgba(255,255,255,.82); line-height: 1.45; }
.settings-content.service-settings { gap: 12px; }
.settings-content.service-settings .settings-hero { background: linear-gradient(135deg, #0f766e, #2563eb 56%, #7c3aed); }
.system-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.system-info-card { padding: 13px 14px; border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); display: grid; gap: 3px; }
.system-info-card span { color: rgba(15,23,42,.5); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.system-info-card strong { font-size: 13px; line-height: 1.3; }
.pinned-grid .pin-caption { display: block; color: rgba(15,23,42,.56); font-size: 10px; font-weight: 600; margin-top: -3px; }
.taskbar-btn .gallery-mark { display: grid; place-items: center; }
.search-hints { align-items: stretch; }
.search-hints button { line-height: 1.35; }

@media (max-width: 1120px) {
  .service-folder-window { min-width: 620px; }
  .service-folder-main { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .gallery-tile.service-shot { min-height: 150px; }
}