/* Approved JudeOS reference treatment — derived from the signed-off dark desktop. */
:root {
  --display-font: "Avenir Next", "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --system-font: "Avenir Next", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", sans-serif;
}

body { font-family: var(--system-font); }
.mobile-home { display: none; }
.wallpaper {
  --field-start: #020b13;
  --field-mid: #062b43;
  --field-end: #031624;
  --light-core: rgba(0, 190, 255, .58);
  --light-edge: rgba(0, 111, 180, 0);
  --ribbon-a-start: rgba(0, 101, 172, .9);
  --ribbon-a-mid: rgba(0, 171, 240, .72);
  --ribbon-a-end: rgba(50, 186, 255, .48);
  --ribbon-b-start: rgba(2, 91, 153, .72);
  --ribbon-b-end: rgba(0, 145, 222, .5);
  background: #020d16;
}
.wallpaper::before, .wallpaper::after { display: none !important; content: none !important; }
.wallpaper-art { width: 100%; height: 100%; display: block; }
.wallpaper-art .field-start { stop-color: var(--field-start); }
.wallpaper-art .field-mid { stop-color: var(--field-mid); }
.wallpaper-art .field-end { stop-color: var(--field-end); }
.wallpaper-art .light-start { stop-color: var(--light-core); }
.wallpaper-art .light-end { stop-color: var(--light-edge); }
.wallpaper-art .ribbon-a0 { stop-color: var(--ribbon-a-start); }
.wallpaper-art .ribbon-a1 { stop-color: var(--ribbon-a-mid); }
.wallpaper-art .ribbon-a2 { stop-color: var(--ribbon-a-end); }
.wallpaper-art .ribbon-b0 { stop-color: var(--ribbon-b-start); }
.wallpaper-art .ribbon-b1 { stop-color: var(--ribbon-b-end); }
.wallpaper-art .ribbon { fill: none; stroke-linecap: round; }
.wallpaper-art .ribbon-one { stroke: url(#ribbon-a); stroke-width: 145; opacity: .7; }
.wallpaper-art .ribbon-two { stroke: url(#ribbon-b); stroke-width: 180; opacity: .56; }
.wallpaper-art .ribbon-highlight { fill: none; stroke: rgba(113, 226, 255, .38); stroke-width: 1.5; }
.wallpaper-art .ribbon-highlight.secondary { stroke: rgba(89, 196, 247, .25); }

.system-brand strong { font-size: 15px; font-weight: 680; letter-spacing: -.025em; }
.system-nav a { font-size: 11.5px; font-weight: 540; }
.status-kicker, .eyebrow { font-size: 9px; font-weight: 690; letter-spacing: .17em; }
.status-card strong { font-size: 25px; font-weight: 560; letter-spacing: -.035em; }
.status-card small { font-size: 11px; font-weight: 450; }
.launcher h2 { font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.app-tile strong { font-size: 12px; font-weight: 620; }
.app-tile small { font-size: 10px; font-weight: 450; }
.activity-strip { font-size: 9.5px; font-weight: 580; letter-spacing: .12em; }

body[data-theme="dark"] .system-bar {
  background: linear-gradient(180deg, rgba(1,22,35,.76), rgba(2,28,44,.58));
  border-bottom-color: rgba(68,201,255,.28);
  box-shadow: inset 0 1px 0 rgba(164,239,255,.05), 0 9px 30px rgba(0,5,12,.24);
  backdrop-filter: blur(30px) saturate(165%);
}
body[data-theme="dark"] .system-nav a { color: #b9d2df; }
body[data-theme="dark"] .system-nav a:hover,
body[data-theme="dark"] .system-nav a[aria-current="page"] {
  color: #f2fdff;
  background: linear-gradient(145deg, rgba(19,128,179,.34), rgba(7,68,101,.25));
  box-shadow: inset 0 0 0 1px rgba(86,217,255,.42), inset 0 1px rgba(208,249,255,.16), 0 8px 22px rgba(0,116,179,.13);
}
body[data-theme="dark"] .tray-control,
body[data-theme="dark"] .tray-icon,
body[data-theme="dark"] .desktop-tabs button.active {
  border-color: rgba(77,208,255,.42);
  background: linear-gradient(145deg, rgba(10,79,112,.55), rgba(3,45,69,.38));
  box-shadow: inset 0 1px rgba(197,246,255,.14), 0 8px 22px rgba(0,8,16,.2);
  backdrop-filter: blur(26px) saturate(165%);
}
body[data-theme="dark"] .status-grid { gap: 14px; overflow: visible; border: 0; background: transparent; box-shadow: none; }
body[data-theme="dark"] .status-card {
  min-height: 136px;
  padding: 20px;
  border: 1px solid rgba(74,210,255,.62);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(5,52,76,.76), rgba(4,83,120,.48));
  box-shadow: inset 0 1px rgba(222,251,255,.1), inset 0 -1px rgba(24,165,224,.14), 0 16px 40px rgba(0,8,16,.2);
  backdrop-filter: blur(28px) saturate(170%);
}
body[data-theme="dark"] .status-card::before { opacity: .78; background: linear-gradient(120deg, transparent 28%, rgba(17,180,238,.19)); }
body[data-theme="dark"] .status-kicker { color: #a4c5d4; }
body[data-theme="dark"] .status-card strong { color: #f4fdff; }
body[data-theme="dark"] .status-card small { color: #bdd7e3; }
body[data-theme="dark"] .activity-strip,
body[data-theme="dark"] .side-widget,
body[data-theme="dark"] .command-centre,
body[data-theme="dark"] .dock {
  border-color: rgba(67,204,255,.45);
  background: linear-gradient(145deg, rgba(2,39,59,.72), rgba(3,65,92,.4));
  box-shadow: inset 0 1px rgba(213,249,255,.09), inset 0 -1px rgba(20,154,213,.12), 0 16px 42px rgba(0,7,14,.26);
  backdrop-filter: blur(30px) saturate(175%);
}
body[data-theme="dark"] .activity-strip { border-radius: 13px; color: #d0e5ed; }
body[data-theme="dark"] .side-widget { border-radius: 15px; }
body[data-theme="dark"] .side-widget header { color: #e2f0f5; border-color: rgba(64,196,245,.18); }
body[data-theme="dark"] .command-centre { border-radius: 19px; outline: 1px solid rgba(72,211,255,.54); outline-offset: 8px; }
body[data-theme="dark"] .dock { border-radius: 22px; }
body[data-theme="dark"] .dock-icon {
  border-color: rgba(73,209,255,.39);
  background: linear-gradient(145deg, rgba(9,76,106,.72), rgba(3,39,60,.63));
}
body[data-theme="dark"] .app-tile small { display: block; color: #b3ceda; }
body[data-theme="dark"] .app-tile strong { color: #f0fbff; }

/* Light mode is the same Jude material under daylight, never a grey dashboard. */
body[data-theme="light"] .wallpaper {
  --field-start: #72d7f7;
  --field-mid: #c5effd;
  --field-end: #8daef0;
  --light-core: rgba(28, 202, 255, .7);
  --light-edge: rgba(116, 182, 246, 0);
  --ribbon-a-start: rgba(255, 255, 255, .45);
  --ribbon-a-mid: rgba(219, 248, 255, .4);
  --ribbon-a-end: rgba(116, 179, 245, .28);
  --ribbon-b-start: rgba(15, 139, 216, .3);
  --ribbon-b-end: rgba(78, 111, 213, .26);
  background: #96d7f4;
}
body[data-theme="light"] .wallpaper-art .ribbon-highlight { stroke: rgba(255,255,255,.72); }
body[data-theme="light"] .wallpaper-art .ribbon-highlight.secondary { stroke: rgba(239,251,255,.58); }
body[data-theme="light"] .system-bar,
body[data-theme="light"] .status-card,
body[data-theme="light"] .activity-strip,
body[data-theme="light"] .side-widget,
body[data-theme="light"] .command-centre,
body[data-theme="light"] .dock,
body[data-theme="light"] .os-window,
body[data-theme="light"] .app-dialog {
  border-color: rgba(255,255,255,.58);
  background: linear-gradient(145deg, rgba(238,251,255,.29), rgba(178,225,246,.13));
  box-shadow: inset 0 1px rgba(255,255,255,.72), inset 0 -1px rgba(67,155,199,.1), 0 16px 38px rgba(6,59,95,.11);
  backdrop-filter: blur(34px) saturate(185%);
}
body[data-theme="light"] .status-grid { gap: 14px; overflow: visible; border: 0; background: transparent; box-shadow: none; }
body[data-theme="light"] .status-card { min-height: 136px; padding: 20px; border-radius: 17px; }
body[data-theme="light"] .status-kicker, body[data-theme="light"] .eyebrow { color: #184862; }
body[data-theme="light"] .status-card strong, body[data-theme="light"] .launcher h2, body[data-theme="light"] .app-tile strong { color: #052b43; }
body[data-theme="light"] .status-card small, body[data-theme="light"] .app-tile small { color: #1b4b65; }
body[data-theme="light"] .app-tile small { display: block; }
body[data-theme="light"] .command-centre { outline: 1px solid rgba(255,255,255,.68); outline-offset: 8px; }

/* The phone composition is the desktop home model too, reflowed for width. */
@media (min-width: 640px) {
  .desktop { padding: 84px 44px 112px; }
  .desktop-home { height: 100%; min-height: 0; padding: 0; overflow: hidden; }
  .desktop-tabs, .status-grid, .activity-strip, .launcher, .desktop-side, .command-centre { display: none !important; }
  .mobile-home {
    width: min(1360px,100%);
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(510px,1fr) minmax(250px,330px);
    grid-template-rows: auto 70px minmax(250px,1fr) 54px;
    column-gap: clamp(34px,5vw,76px);
    row-gap: 18px;
    align-content: stretch;
  }
  .mobile-status { display: none; }
  .mobile-welcome { grid-column: 1; grid-row: 1; align-self: end; padding: 0 6px; }
  .mobile-welcome p { color: #9cc5da; font-size: 11px; font-weight: 680; letter-spacing: .28em; }
  .mobile-welcome h2 { margin-top: 8px; color: #f5fdff; font-family: var(--display-font); font-size: clamp(42px,4.2vw,62px); line-height: .96; font-weight: 470; letter-spacing: -.06em; }
  .mobile-welcome > span { display: block; margin-top: 10px; color: #a9ccde; font-size: 17px; }
  .mobile-pack {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    width: min(580px,78%);
    display: grid;
    grid-template-columns: 11px 1fr 22px;
    align-items: center;
    gap: 13px;
    padding: 14px 22px 22px;
    border: 1px solid rgba(117,226,255,.5);
    border-radius: 20px;
    background: linear-gradient(145deg,rgba(5,49,76,.7),rgba(22,106,150,.4));
    box-shadow: inset 0 1px rgba(255,255,255,.15),0 15px 36px rgba(0,10,24,.24);
    backdrop-filter: blur(30px) saturate(180%);
    text-align: left;
  }
  .mobile-pack strong { overflow: hidden; color: #eefbff; font-size: 16px; font-weight: 560; white-space: nowrap; text-overflow: ellipsis; }
  .mobile-pack > .icon { width: 19px; }
  .mobile-progress { position: absolute; left: 22px; right: 64px; bottom: 11px; height: 6px; border-radius: 4px; background: rgba(150,205,230,.3); overflow: hidden; }
  .mobile-progress i { display: block; width: 31%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8feaff,#20b3ef); }
  .mobile-app-grid { grid-column: 1; grid-row: 3; align-self: center; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(22px,3vh,38px) clamp(18px,3vw,44px); width: min(800px,100%); }
  .mobile-app-grid .app-tile { gap: 8px; padding: 0; }
  .mobile-app-grid .app-icon { width: clamp(72px,7vw,96px); height: clamp(72px,7vw,96px); border-radius: clamp(21px,2vw,28px); border-color: rgba(135,232,255,.68); box-shadow: inset 0 1px rgba(255,255,255,.2),0 14px 28px rgba(0,9,20,.25); }
  .mobile-app-grid .app-icon .icon { width: clamp(34px,3.5vw,46px); height: clamp(34px,3.5vw,46px); }
  .mobile-app-grid .app-tile strong { color: #f5fdff; font-size: clamp(12px,1.2vw,16px); font-weight: 540; }
  .mobile-app-grid .app-tile small, .mobile-app-grid .app-tile::after { display: none !important; }
  .mobile-running {
    position: relative;
    overflow: hidden;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: stretch;
    min-height: min(330px,48vh);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px;
    border: 1px solid rgba(122,227,255,.53);
    border-radius: 26px;
    background: linear-gradient(145deg,rgba(4,45,69,.78),rgba(28,103,143,.38));
    box-shadow: inset 0 1px rgba(255,255,255,.13),0 20px 46px rgba(0,10,25,.24);
    backdrop-filter: blur(32px) saturate(180%);
  }
  .mobile-running .eyebrow { color: #a6d2e7; font-size: 11px; }
  .mobile-running h3 { margin-top: 9px; color: #f5fdff; font-family: var(--display-font); font-size: clamp(25px,2.5vw,36px); line-height: 1.06; font-weight: 650; letter-spacing: -.04em; }
  .mobile-running div > span { color: #c0dce8; font-size: 15px; }
  .mobile-running-art { position: absolute; right: 22px; bottom: 38px; color: #9ceaff; opacity: .13; transform: rotate(5deg); }
  .mobile-running-art .icon { width: 116px; height: 116px; stroke-width: 1.2; }
  .mobile-continue { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 10px 22px; border: 0; border-radius: 24px; background: linear-gradient(145deg,#a3edff,#4ec9f5); color: #07304a; font-size: 14px; font-weight: 650; box-shadow: 0 9px 22px rgba(2,48,75,.22); }
  .mobile-continue .icon { width: 17px; }
  .mobile-ask { position: fixed; z-index: 82; right: clamp(50px,8vw,140px); bottom: 96px; min-width: 190px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid rgba(139,235,255,.85); border-radius: 27px; background: linear-gradient(145deg,rgba(16,105,157,.74),rgba(11,42,97,.72)); color: #f4fdff; box-shadow: inset 0 1px rgba(255,255,255,.22),0 0 26px rgba(67,203,255,.25); backdrop-filter: blur(24px); font-size: 15px; font-weight: 560; }
  .mobile-ask .icon { width: 20px; }

  .dock { width: 390px; height: 78px; justify-content: space-around; }
  .dock > a[href="#running"], .dock > a[href="#apps"], .dock-divider { display: none; }
  .dock > button[data-app="judeai"] { order: 1; }.dock > a[href="#home"] { order: 2; }.dock > a[href="#files"] { order: 3; }.dock > a[href="#permissions"] { order: 4; }
  .dock a, .dock button { gap: 2px; }
  .dock small { position: static; display: block; opacity: 1; padding: 0; border: 0; background: transparent; color: #dff6ff; font-size: 9px; }
  .dock > a[href="#permissions"] small { font-size: 0; }.dock > a[href="#permissions"] small::after { content: "Security"; font-size: 10px; }
  body[data-theme="light"] .mobile-welcome h2, body[data-theme="light"] .mobile-app-grid .app-tile strong { color: #07314a; }
  body[data-theme="light"] .mobile-welcome p, body[data-theme="light"] .mobile-welcome > span { color: #245a75; }
  body[data-theme="light"] .mobile-pack, body[data-theme="light"] .mobile-running { background: linear-gradient(145deg,rgba(240,252,255,.38),rgba(122,202,236,.2)); border-color: rgba(255,255,255,.74); }
  body[data-theme="light"] .mobile-pack strong, body[data-theme="light"] .mobile-running h3 { color: #07314a; }
  body[data-theme="light"] .mobile-running div > span { color: #245b74; }
}

@media (min-width: 640px) and (max-width: 900px) {
  .desktop { padding: 76px 24px 96px; }
  .mobile-home { grid-template-columns: minmax(420px,1fr) 220px; grid-template-rows: auto 60px minmax(240px,1fr) 44px; column-gap: 24px; row-gap: 12px; }
  .mobile-welcome h2 { font-size: 37px; }.mobile-welcome > span { font-size: 14px; }
  .mobile-pack { width: 94%; padding: 11px 17px 18px; }.mobile-pack strong { font-size: 13px; }.mobile-progress { left: 17px; bottom: 8px; }
  .mobile-app-grid { gap: 16px 8px; }.mobile-app-grid .app-icon { width: 58px; height: 58px; border-radius: 18px; }.mobile-app-grid .app-icon .icon { width: 28px; height: 28px; }.mobile-app-grid .app-tile strong { font-size: 10px; }
  .mobile-running { min-height: 260px; padding: 20px; border-radius: 20px; }.mobile-running h3 { font-size: 23px; }.mobile-running div > span { font-size: 12px; }
  .mobile-ask { height: 42px; }
}

/* At a full desktop resolution, keep the signed-off proportions instead of
   shrinking the shell into a web dashboard floating in unused space. */
@media (min-width: 1500px) and (min-height: 820px) {
  .system-bar {
    height: 72px;
    padding: 0 23px;
    grid-template-columns: 260px 1fr 470px;
  }
  .system-brand { gap: 14px; }
  .system-brand .j-mark { width: 46px; height: 46px; border-radius: 12px; }
  .system-brand strong { font-size: 24px; }
  .system-nav { gap: 8px; }
  .system-nav a { padding: 13px 28px; border-radius: 12px; font-size: 15px; }
  .system-tray { gap: 12px; font-size: 14px; }
  .tray-control, .tray-icon { min-height: 46px; border-radius: 13px; padding: 9px 14px; }
  .tray-icon { width: 46px; }
  .avatar { width: 46px; height: 46px; font-size: 17px; }

  .desktop { padding: 101px 56px 132px; }
  .page { max-width: 1560px; }
  .desktop-home { padding-right: 360px; }
  .desktop-tabs { gap: 14px; margin-bottom: 20px; }
  .desktop-tabs button { padding: 12px 21px; border-radius: 12px; font-size: 15px; }
  .desktop-tabs span { min-width: 24px; height: 24px; font-size: 11px; }

  body[data-theme="dark"] .status-grid,
  body[data-theme="light"] .status-grid { gap: 14px; }
  body[data-theme="dark"] .status-card,
  body[data-theme="light"] .status-card {
    min-height: 172px;
    padding: 27px;
    border-radius: 22px;
  }
  .status-kicker, .eyebrow { font-size: 12px; }
  .status-card strong { font-size: 36px; }
  .status-card small { font-size: 15px; margin-top: 7px; }
  .status-line { left: 27px; right: 27px; bottom: 24px; height: 8px; }
  .mini-wave { left: 27px; bottom: 19px; font-size: 30px; }
  .permission-bars { left: 27px; right: 27px; bottom: 25px; }
  .permission-bars i { height: 8px; }

  .activity-strip { min-height: 60px; margin-top: 18px; padding: 17px 24px; border-radius: 16px; font-size: 12px; }
  .launcher { margin-top: 23px; }
  .launcher-heading { margin-bottom: 10px; }
  .launcher h2 { font-size: 22px; }
  .text-button { font-size: 14px; }
  .app-grid { gap: 24px; }
  .app-tile { gap: 9px; }
  .app-icon { width: 106px; height: 106px; border-radius: 27px; }
  .app-icon .icon { width: 49px; height: 49px; }
  .app-tile strong { font-size: 17px; }
  .app-tile small { font-size: 14px; }

  .desktop-side { top: 65px; width: 342px; gap: 14px; }
  .side-widget { border-radius: 18px; }
  .side-widget header { padding: 17px 22px; font-size: 14px; }
  .side-widget dl { padding: 12px 22px 17px; }
  .side-widget dl div { padding: 7px 0; font-size: 14px; }
  .side-content { padding: 10px; min-height: 72px; }
  .empty-side { padding: 21px 16px; font-size: 13px; }

  .command-centre { bottom: 106px; width: min(940px, calc(100% - 56px)); min-height: 80px; padding: 11px 14px 11px 18px; gap: 17px; border-radius: 24px; }
  body[data-theme="dark"] .command-centre,
  body[data-theme="light"] .command-centre { outline-offset: 10px; }
  .jude-mark-small { width: 48px; height: 48px; border-radius: 13px; }
  .command-centre label { min-width: 170px; }
  .command-centre label strong { font-size: 16px; }
  .command-centre label small, .command-centre input { font-size: 14px; }
  .go-button { min-height: 56px; padding: 12px 27px; border-radius: 14px; font-size: 15px; }

  .dock { bottom: 17px; height: 88px; gap: 9px; padding: 10px 14px; border-radius: 28px; }
  .dock-icon { width: 64px; height: 64px; border-radius: 18px; }
  .dock-icon .icon { width: 31px; height: 31px; }
  .dock-divider { height: 46px; }
}

@media (min-width: 640px) and (max-width: 1100px) {
  body[data-theme="dark"] .status-card,
  body[data-theme="light"] .status-card { min-height: 112px; padding: 15px; }
  .app-tile small { display: block; }
}
@media (max-width: 639px) {
  body[data-theme="dark"] .status-grid,
  body[data-theme="light"] .status-grid { gap: 8px; }
  body[data-theme="dark"] .status-card,
  body[data-theme="light"] .status-card { min-height: 108px; padding: 14px; }
  .app-tile small { display: none !important; }
  .command-centre { outline-offset: 4px !important; }
}

/* Phone home surface follows the approved JudeOS mobile composition. */
@media (max-width: 639px) {
  .system-bar { display: none; }
  .desktop { height: 100dvh; min-height: 0; padding: 0 16px 108px; overflow: hidden; }
  .desktop-home { height: 100%; padding: 0; overflow: hidden; }
  .desktop-tabs, .status-grid, .activity-strip, .launcher, .desktop-side, .command-centre { display: none !important; }
  .mobile-home {
    height: calc(100dvh - 108px);
    display: grid;
    grid-template-rows: 34px auto 58px auto minmax(112px, 1fr) 44px;
    align-content: start;
    gap: 12px;
    padding: 12px 0 10px;
    overflow: hidden;
  }
  .mobile-status { display: flex; align-items: center; gap: 10px; color: #e9f9ff; font-size: 12px; }
  .mobile-status strong { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
  .mobile-status > span:nth-child(2) { display: flex; align-items: center; gap: 7px; }
  .mobile-signal { margin-left: auto; height: 17px; display: flex; align-items: end; gap: 2px; }
  .mobile-signal i { width: 3px; border-radius: 2px; background: currentColor; }
  .mobile-signal i:nth-child(1) { height: 5px; }.mobile-signal i:nth-child(2) { height: 8px; }.mobile-signal i:nth-child(3) { height: 11px; }.mobile-signal i:nth-child(4) { height: 15px; }
  .mobile-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#e7fbff,#72d7f6); color: #06243a; font-weight: 750; border: 1px solid rgba(255,255,255,.8); }
  .mobile-welcome { padding: 5px 8px 0; }
  .mobile-welcome p { color: #9cc6dd; font-size: 9px; font-weight: 650; letter-spacing: .28em; }
  .mobile-welcome h2 { margin-top: 7px; color: #f5fdff; font-family: var(--display-font); font-size: clamp(28px, 8.5vw, 38px); line-height: .98; font-weight: 480; letter-spacing: -.055em; }
  .mobile-welcome > span { display: block; margin-top: 8px; color: #a9ccde; font-size: 14px; }
  .mobile-pack {
    position: relative;
    display: grid;
    grid-template-columns: 10px 1fr 20px;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px 17px 18px;
    border: 1px solid rgba(117,226,255,.5);
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(5,49,76,.72),rgba(22,106,150,.42));
    box-shadow: inset 0 1px rgba(255,255,255,.15),0 14px 34px rgba(0,10,24,.24);
    backdrop-filter: blur(28px) saturate(180%);
    text-align: left;
  }
  .mobile-pack strong { overflow: hidden; color: #eefbff; font-size: 13px; font-weight: 560; white-space: nowrap; text-overflow: ellipsis; }
  .mobile-pack > .icon { width: 18px; }
  .mobile-progress { position: absolute; left: 17px; right: 50px; bottom: 9px; height: 5px; border-radius: 4px; background: rgba(150,205,230,.3); overflow: hidden; }
  .mobile-progress i { display: block; width: 31%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8feaff,#20b3ef); }
  .mobile-app-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px 7px; align-content: start; }
  .mobile-app-grid .app-tile { gap: 5px; padding: 0; }
  .mobile-app-grid .app-icon { width: clamp(54px,16vw,68px); height: clamp(54px,16vw,68px); border-radius: 20px; border-color: rgba(135,232,255,.68); box-shadow: inset 0 1px rgba(255,255,255,.2),0 12px 24px rgba(0,9,20,.24); }
  .mobile-app-grid .app-icon .icon { width: 30px; height: 30px; }
  .mobile-app-grid .app-tile strong { color: #f5fdff; font-size: 11px; font-weight: 540; }
  .mobile-app-grid .app-tile small, .mobile-app-grid .app-tile::after { display: none !important; }
  .mobile-running {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: min(68%, 260px);
    margin-left: 2px;
    padding: 15px 17px;
    border: 1px solid rgba(122,227,255,.53);
    border-radius: 20px;
    background: linear-gradient(145deg,rgba(4,45,69,.78),rgba(28,103,143,.38));
    box-shadow: inset 0 1px rgba(255,255,255,.13),0 15px 34px rgba(0,10,25,.22);
    backdrop-filter: blur(30px) saturate(180%);
  }
  .mobile-running .eyebrow { color: #a6d2e7; font-size: 9px; }
  .mobile-running h3 { margin-top: 4px; color: #f5fdff; font-family: var(--display-font); font-size: 20px; line-height: 1.05; font-weight: 650; letter-spacing: -.035em; }
  .mobile-running div > span { color: #c0dce8; font-size: 12px; }
  .mobile-running-art { position: absolute; right: 15px; bottom: 31px; color: #a5edff; opacity: .14; transform: rotate(6deg); }
  .mobile-running-art .icon { width: 82px; height: 82px; stroke-width: 1.2; }
  .mobile-continue { display: flex; align-items: center; gap: 10px; min-height: 35px; padding: 7px 16px; border: 0; border-radius: 18px; background: linear-gradient(145deg,#a3edff,#4ec9f5); color: #07304a; font-size: 12px; font-weight: 650; box-shadow: 0 8px 19px rgba(2,48,75,.22); }
  .mobile-continue .icon { width: 15px; }
  .mobile-ask { position: static; justify-self: center; align-self: end; min-width: 148px; height: 42px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(139,235,255,.85); border-radius: 24px; background: linear-gradient(145deg,rgba(16,105,157,.74),rgba(11,42,97,.72)); color: #f4fdff; box-shadow: inset 0 1px rgba(255,255,255,.22),0 0 24px rgba(67,203,255,.24); backdrop-filter: blur(24px); font-size: 14px; font-weight: 560; }
  .mobile-ask .icon { width: 19px; }

  .dock { width: calc(100% - 28px); height: 92px; bottom: 8px; justify-content: space-around; padding: 8px 14px; border-radius: 27px; background: linear-gradient(145deg,rgba(118,210,244,.35),rgba(16,91,141,.42)); border-color: rgba(179,241,255,.56); }
  .dock > a[href="#running"], .dock > a[href="#apps"], .dock-divider { display: none; }
  .dock > button[data-app="judeai"] { order: 1; }.dock > a[href="#home"] { order: 2; }.dock > a[href="#files"] { order: 3; }.dock > a[href="#permissions"] { order: 4; }
  .dock a, .dock button { gap: 3px; }
  .dock-icon { width: 52px; height: 52px; border-radius: 16px; border-color: rgba(191,244,255,.62); background: linear-gradient(145deg,rgba(82,183,225,.48),rgba(24,89,133,.58)); }
  .dock small { position: static; display: block; opacity: 1; padding: 0; border: 0; background: transparent; color: #effbff; font-size: 10px; }
  .dock > a[href="#permissions"] small { font-size: 0; }.dock > a[href="#permissions"] small::after { content: "Security"; font-size: 10px; }
  .dock a[aria-current="page"]::after { display: none; }
  .dock a[aria-current="page"] .dock-icon { background: rgba(221,249,255,.9); color: #0b6288; }

  body[data-theme="light"] .mobile-status, body[data-theme="light"] .mobile-welcome h2, body[data-theme="light"] .mobile-app-grid .app-tile strong { color: #07314a; }
  body[data-theme="light"] .mobile-welcome p, body[data-theme="light"] .mobile-welcome > span { color: #245a75; }
  body[data-theme="light"] .mobile-pack, body[data-theme="light"] .mobile-running { background: linear-gradient(145deg,rgba(240,252,255,.38),rgba(122,202,236,.2)); border-color: rgba(255,255,255,.74); }
  body[data-theme="light"] .mobile-pack strong, body[data-theme="light"] .mobile-running h3 { color: #07314a; }
  body[data-theme="light"] .mobile-running div > span { color: #245b74; }
}

@media (min-width: 1500px) and (min-height: 820px) {
  .desktop-home { padding-right: 0; }
}