:root{--bg:#071019;--panel:rgba(12,23,35,.72);--panel2:rgba(18,32,47,.88);--line:rgba(149,208,255,.16);--text:#f6fbff;--muted:#91a4b7;--cyan:#58c9ff;--blue:#4f7dff;--green:#57e4a6;--amber:#ffc461;--red:#ff5e6d;--shadow:0 30px 90px rgba(0,0,0,.6);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:normal}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background-color:transparent!important;background-image:none!important;color:var(--text)}button,input,textarea{font:inherit}button{color:inherit}#stage.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important}
#stage{position:fixed;inset:0;display:grid;place-items:center;background:transparent!important;background-image:none!important;user-select:none}
/* The 142vh term bounds HEIGHT. aspect-ratio derives height from width, so a
   width-only constraint leaves height unbounded: at 1366x768 and 1280x720 the
   device came out ~21px taller than the screen and, being centred, was clipped
   at the top and the bottom at once. Height is width/1.55, so keeping width
   under 1.42 x viewport height keeps height under ~92vh. */
/* The device is ARTWORK now, not a CSS gradient. The shell is the whole image
   file (the art carries transparent margins), so every percentage below is a
   percentage of the file and no crop maths is needed.

   The 142vh term still bounds HEIGHT: aspect-ratio derives height from width,
   and a width-only constraint left the device taller than short viewports. */
#tablet{position:relative;width:min(1320px,92vw,142vh);aspect-ratio:1080/808;transform:scale(var(--tablet-scale,1));transform-origin:center;transition:transform .16s ease;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))}
#tablet-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
/* Inner rim removed: the artwork draws its own bezel. */.hardware-top{position:absolute;top:6px;left:50%;transform:translateX(-50%);height:16px;display:flex;gap:8px;align-items:center;z-index:10}.camera-dot{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#5fa1d0 0 18%,#080b0e 22% 100%);box-shadow:0 0 0 2px #1f252a}.sensor{width:30px;height:4px;border-radius:4px;background:#050607}.sensor.small{width:7px;height:7px;border-radius:50%}.hardware-bottom{position:absolute;left:42px;right:42px;bottom:3px;height:14px;display:flex;justify-content:space-between;align-items:center;color:#55616a;font-size:9px;letter-spacing:.34em}.hardware-bottom strong{color:#7f909d}.hardware-power{position:absolute;right:2.5%;top:20%;width:8px;height:68px;border:0;border-radius:0 5px 5px 0;background:linear-gradient(#505b64,#171b1f);cursor:pointer}
/* Positioned onto the artwork's glass. These four numbers are where the
   display physically is in the image -- re-measure them whenever the art
   changes. */
#screen{position:absolute;left:6.0%;top:9.2%;width:88.0%;height:76.5%;overflow:hidden;border-radius:14px;background:#08111a;color-scheme:dark;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 0 36px rgba(0,0,0,.45);filter:brightness(var(--brightness,1))}
.wallpaper-layer{position:absolute;inset:0;background:radial-gradient(circle at 72% 18%,rgba(85,86,255,.42),transparent 25%),radial-gradient(circle at 22% 78%,rgba(0,202,255,.28),transparent 30%),linear-gradient(155deg,#09111a 0%,#0c1930 44%,#12102b 100%);transition:.3s}#screen[data-wallpaper="sunset"] .wallpaper-layer{background:radial-gradient(circle at 75% 20%,rgba(255,196,92,.52),transparent 24%),radial-gradient(circle at 25% 80%,rgba(255,78,117,.32),transparent 30%),linear-gradient(155deg,#241028,#642d47 48%,#152338)}#screen[data-wallpaper="mono"] .wallpaper-layer{background:radial-gradient(circle at 50% 50%,rgba(120,140,150,.15),transparent 38%),linear-gradient(145deg,#15191d,#050607)}
#screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.045),transparent 28% 70%,rgba(255,255,255,.02));mix-blend-mode:screen}
#statusbar{position:absolute;z-index:30;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:linear-gradient(rgba(3,7,12,.58),transparent);backdrop-filter:blur(12px)}.status-pill{border:0;background:rgba(9,18,28,.52);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:7px 11px;display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.04em;cursor:pointer}.status-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center;color:#c6d4e1;font-size:10px;letter-spacing:.18em}.rs-mark{font-weight:900;background:linear-gradient(135deg,var(--cyan),#fff);-webkit-background-clip:text;color:transparent;font-size:13px}#status-job{color:var(--cyan);font-weight:800}#battery-text{font-weight:800}
.view{position:absolute;inset:0;padding-top:44px;display:none}.view.active{display:block}.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:130px;height:4px;border-radius:5px;background:rgba(255,255,255,.42)}
#lockscreen{overflow:hidden;text-align:center}.lock-glow{position:absolute;width:520px;height:520px;left:50%;top:46%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(89,202,255,.17),transparent 65%);filter:blur(4px)}.lock-time{position:relative;margin-top:10%;font-size:88px;font-weight:250;letter-spacing:-.055em}.lock-date{position:relative;color:#d8e4ef;font-size:18px}.lock-card{position:absolute;left:50%;bottom:106px;transform:translateX(-50%);width:420px;padding:12px 14px;border-radius:20px;background:rgba(9,17,27,.64);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(18px);display:flex;align-items:center;gap:12px;text-align:left}.lock-card-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,var(--cyan),var(--blue));font-weight:900}.lock-card div:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}.lock-card span{color:var(--muted);font-size:12px}.lock-arrow{font-size:28px!important}.unlock-btn{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);border:0;border-radius:22px;background:rgba(255,255,255,.12);padding:11px 32px;cursor:pointer;border:1px solid rgba(255,255,255,.11)}.lock-hint{position:absolute;bottom:24px;left:0;right:0;font-size:10px;color:#748698;letter-spacing:.16em;text-transform:uppercase}
#desktop{padding:62px 34px 42px;overflow:hidden}.desktop-grid{display:grid;grid-template-columns:1.6fr .85fr .85fr;gap:14px}.panel{background:linear-gradient(145deg,rgba(20,33,49,.76),rgba(8,17,27,.64));border:1px solid var(--line);box-shadow:0 18px 42px rgba(0,0,0,.17);backdrop-filter:blur(20px);border-radius:22px}.hero-widget{padding:18px 20px;min-height:145px}.eyebrow{font-size:10px;letter-spacing:.19em;color:#8da4b8;font-weight:800}.hero-time{font-size:44px;font-weight:650;letter-spacing:-.04em;margin-top:3px}.hero-location{color:#c8d6e2;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-row{display:flex;gap:14px;margin-top:14px;color:#7ee0ff;font-size:11px;font-weight:800;letter-spacing:.08em}.comms-widget,.scanner-widget{padding:16px;cursor:pointer;transition:.15s}.comms-widget:hover,.scanner-widget:hover{transform:translateY(-2px);border-color:rgba(88,201,255,.36)}.widget-top{display:flex;justify-content:space-between;align-items:center}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}.widget-frequency{font-size:30px;margin-top:17px;font-weight:900;letter-spacing:-.04em}.widget-label{font-size:11px;color:var(--muted);margin-top:6px}.scanner-readout{font-size:28px;margin-top:20px;font-weight:900;color:var(--cyan);letter-spacing:.08em}
.app-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px 18px;margin-top:25px;padding:0 6px}.app-tile{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;cursor:pointer}.app-icon{width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;font-size:24px;font-weight:900;box-shadow:0 13px 28px rgba(0,0,0,.22);transition:.16s}.app-tile:hover .app-icon{transform:translateY(-4px) scale(1.03);border-color:rgba(88,201,255,.45);box-shadow:0 18px 35px rgba(0,0,0,.3),0 0 24px rgba(88,201,255,.09)}.app-label{font-size:10px;color:#e8f3fb;white-space:nowrap;max-width:92px;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}.dock{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);min-width:410px;height:77px;padding:9px 16px;border-radius:25px;background:rgba(7,14,22,.58);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(24px);display:flex;gap:18px;justify-content:center}.dock .app-tile{gap:0}.dock .app-label{display:none}.dock .app-icon{width:57px;height:57px}
.app-shell{background:rgba(5,10,16,.76);backdrop-filter:blur(34px);padding-top:0}.app-header{height:58px;padding:8px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.075);background:rgba(6,13,21,.82)}.icon-btn{width:38px;height:38px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.055);cursor:pointer;font-size:19px}.app-title-wrap{display:flex;align-items:center;gap:9px;flex:1}.app-title-wrap>div{display:flex;flex-direction:column}.app-title-wrap strong{font-size:14px}.app-title-wrap span{font-size:10px;color:var(--muted)}.mini-app-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,var(--blue),var(--cyan));font-size:11px;font-weight:900}.app-header-actions{display:flex;gap:7px}.app-content{height:calc(100% - 58px);padding:20px 22px 34px;overflow:auto}.app-content::-webkit-scrollbar{width:5px}.app-content::-webkit-scrollbar-thumb{background:#33485b;border-radius:5px}
.app-hero{display:flex;justify-content:space-between;align-items:flex-end;padding:18px 20px;border-radius:22px;background:linear-gradient(135deg,rgba(81,126,255,.16),rgba(88,201,255,.07));border:1px solid rgba(88,201,255,.14);margin-bottom:15px}.app-hero h2{font-size:26px;margin:2px 0 0}.app-hero p{margin:6px 0 0;color:var(--muted);font-size:12px}.primary-btn,.secondary-btn,.danger-btn{border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:10px 14px;cursor:pointer;font-weight:800;font-size:11px}.primary-btn{background:linear-gradient(135deg,#3479ff,#42c6ff);color:white}.secondary-btn{background:rgba(255,255,255,.06)}.danger-btn{background:rgba(255,73,93,.15);color:#ff8390;border-color:rgba(255,73,93,.25)}.button-row{display:flex;gap:8px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card{padding:14px;border-radius:17px;background:rgba(12,22,33,.74);border:1px solid rgba(255,255,255,.07)}.card h3{margin:0 0 8px;font-size:13px}.card p,.card small{color:var(--muted);font-size:11px}.metric{font-size:27px;font-weight:900;color:#e9f7ff}.metric.cyan{color:var(--cyan)}.metric.green{color:var(--green)}.metric.red{color:var(--red)}.kv{display:grid;grid-template-columns:120px 1fr;gap:7px 12px;font-size:11px}.kv span:nth-child(odd){color:var(--muted)}.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.form-row{display:flex;gap:8px}.text-input,.textarea{border:1px solid rgba(255,255,255,.09);background:#07111a;color:var(--text);border-radius:12px;padding:10px 12px;outline:none}.text-input{height:39px;min-width:0}.textarea{width:100%;height:310px;resize:none;line-height:1.6}.text-input:focus,.textarea:focus{border-color:rgba(88,201,255,.52)}
.channel-list,.store-list,.sos-list{display:flex;flex-direction:column;gap:8px}.list-row{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:14px;background:rgba(12,22,33,.72);border:1px solid rgba(255,255,255,.065)}.list-row .grow{flex:1;min-width:0}.list-row strong{display:block;font-size:12px}.list-row small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.badge{font-size:9px;font-weight:900;padding:5px 7px;border-radius:8px;background:rgba(88,201,255,.12);color:var(--cyan);letter-spacing:.08em}.badge.locked{background:rgba(255,255,255,.06);color:#788999}.badge.emergency{background:rgba(255,80,99,.12);color:#ff7d8b}
.scanner-stage{min-height:250px;border-radius:22px;border:1px solid rgba(88,201,255,.18);background:radial-gradient(circle at center,rgba(88,201,255,.08),transparent 38%),repeating-linear-gradient(0deg,transparent 0 27px,rgba(88,201,255,.04) 28px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(88,201,255,.04) 28px),#07111a;display:grid;place-items:center;position:relative;overflow:hidden}.scanner-reticle{width:92px;height:92px;border:1px solid rgba(88,201,255,.54);border-radius:50%;position:relative;box-shadow:0 0 30px rgba(88,201,255,.12)}.scanner-reticle:before,.scanner-reticle:after{content:"";position:absolute;background:rgba(88,201,255,.54)}.scanner-reticle:before{width:126px;height:1px;left:-17px;top:45px}.scanner-reticle:after{width:1px;height:126px;top:-17px;left:45px}.scan-result{position:absolute;left:14px;right:14px;bottom:13px;padding:10px;border-radius:12px;background:rgba(0,7,12,.78);font-size:11px;color:#9ecce0}.pulse-ring{position:absolute;width:130px;height:130px;border-radius:50%;border:1px solid rgba(88,201,255,.22);animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.game-card{min-height:150px;padding:16px;border-radius:19px;background:linear-gradient(145deg,rgba(67,68,170,.22),rgba(6,15,25,.84));border:1px solid rgba(255,255,255,.08);cursor:pointer}.game-card:hover{border-color:rgba(88,201,255,.4)}.game-card .game-glyph{font-size:36px}.game-card h3{margin:18px 0 4px}.game-card p{font-size:10px;color:var(--muted)}#snake-canvas{display:block;margin:0 auto;background:#020709;border:1px solid #1a3846;border-radius:13px;image-rendering:pixelated}.memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:430px;margin:10px auto}.memory-cell{aspect-ratio:1;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);cursor:pointer;font-size:23px}.memory-cell.active{background:rgba(88,201,255,.4);box-shadow:0 0 26px rgba(88,201,255,.3)}.signal-line{display:flex;gap:8px;justify-content:center;margin:25px 0}.signal-node{width:54px;height:54px;border-radius:15px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);display:grid;place-items:center;font-weight:900}.signal-node.good{background:rgba(87,228,166,.18);color:var(--green)}.signal-node.bad{background:rgba(255,94,109,.16);color:var(--red)}
.calc{max-width:430px;margin:auto}.calc-display{height:82px;border-radius:17px;background:#050a0e;border:1px solid rgba(255,255,255,.08);padding:16px;text-align:right;font-size:34px;overflow:hidden}.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.calc-key{height:52px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.06);cursor:pointer;font-weight:900}.calc-key.op{color:var(--cyan)}.calc-key.eq{background:linear-gradient(135deg,#3479ff,#42c6ff)}
.setting-group{margin-bottom:17px}.setting-group h3{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.15em}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}.swatches{display:flex;gap:8px}.swatch{width:32px;height:32px;border-radius:10px;border:2px solid transparent;cursor:pointer}.swatch.active{border-color:white}.swatch.city{background:linear-gradient(135deg,#0d1630,#423b8d,#1882a4)}.swatch.sunset{background:linear-gradient(135deg,#5c2741,#d56a56,#283f70)}.swatch.mono{background:linear-gradient(135deg,#15181a,#596269)}
.sheet{position:absolute;z-index:50;top:0;bottom:0;width:360px;background:rgba(7,14,22,.93);backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.08);padding:12px;transition:transform .22s ease;box-shadow:0 22px 70px #000}.left-sheet{left:0;transform:translateX(-105%);border-radius:0 24px 24px 0}.right-sheet{right:0;transform:translateX(105%);border-radius:24px 0 0 24px}.sheet.open{transform:translateX(0)}.sheet-handle{width:42px;height:4px;background:#3b4854;border-radius:5px;margin:0 auto 9px}.sheet-title{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 14px}.sheet-title button{border:0;background:transparent;color:#91a4b7;font-size:22px;cursor:pointer}.notification-list{display:flex;flex-direction:column;gap:8px}.notification{padding:11px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07)}.notification strong{font-size:12px}.notification p{font-size:10px;color:var(--muted);margin:4px 0 0}.notification.emergency{border-color:rgba(255,94,109,.25);background:rgba(255,94,109,.09)}.empty-state{padding:32px;text-align:center;color:#708293;font-size:11px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.control-tile{height:100px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.055);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:12px;cursor:pointer}.control-tile>span{font-size:22px;margin-bottom:auto}.control-tile b{font-size:11px}.control-tile small{font-size:9px;color:var(--muted)}.control-tile.danger{background:rgba(255,94,109,.09);border-color:rgba(255,94,109,.18)}.slider-row{display:flex;flex-direction:column;gap:8px;margin-top:17px;font-size:10px;color:var(--muted)}.slider-row input{width:100%}.sensor-strip{display:flex;justify-content:space-between;gap:10px;margin-top:17px;font-size:9px;color:#698094;padding-top:13px;border-top:1px solid rgba(255,255,255,.07)}
.toast-stack{position:absolute;z-index:80;top:52px;right:12px;width:300px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{padding:11px 12px;border-radius:14px;background:rgba(7,14,22,.9);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 35px rgba(0,0,0,.32);animation:toastIn .18s ease}.toast strong{font-size:11px}.toast p{margin:3px 0 0;font-size:10px;color:var(--muted)}.toast.emergency{border-color:rgba(255,94,109,.35)}@keyframes toastIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1000px){#tablet{width:min(96vw,142vh)}.app-grid{grid-template-columns:repeat(5,1fr)}.desktop-grid{grid-template-columns:1.4fr 1fr}.scanner-widget{display:none}}


/* ===========================================================================
   RS Tablet visual pack
   ---------------------------------------------------------------------------
   App artwork is the same set rs-phone ships, reused rather than redrawn so the
   two devices look like they come from the same company. The icons are the
   phone's own PNGs; everything around them is drawn here.

   The layered background is what makes a flat PNG read as an app icon:
     1. the artwork itself, inset so it never touches the corners
     2. a top-down gloss, brightest at the top edge
     3. a soft contact shadow under the lower third
     4. a per-app base gradient behind all of it
   That is the same recipe the phone uses, and it is why the icons look lit
   rather than pasted.
   =========================================================================== */

.app-tile[data-app] .app-icon {
    /* The glyph text stays in the DOM for screen readers and for any app with
       no artwork; artwork simply covers it. */
    color: transparent;
    text-shadow: none;
    /* The artwork IS the tile. Each icon is already a finished rounded square
       with its own colour and shape, carrying roughly 10% transparent padding
       inside a 100x100 canvas -- so it is scaled to ~112% to make the opaque
       area fill the tile edge to edge.

       There is deliberately no base gradient and no border behind it. An
       earlier version drew both, and because the artwork sat at 78% they
       showed around every icon as a grey halo. The only thing left underneath
       is the drop shadow, which is what lifts the icon off the wallpaper. */
    background-image: var(--rs-app-icon, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 112% 112%;
    background-color: transparent;
    border: 0;
    box-shadow: 0 10px 22px rgba(0,0,0,.42);
}

/* An app with no artwork keeps its glyph rather than showing an empty tile. */
.app-tile[data-app] .app-icon:not([style*="--rs-app-icon"]) { color: inherit; }

.app-tile[data-app="camera"]     .app-icon { --rs-app-icon: url("img/icons/icon-camera.png");     --g1:#6f7a8c; --g2:#2b323d; color: transparent; }
.app-tile[data-app="maps"]       .app-icon { --rs-app-icon: url("img/icons/icon-maps.png");       --g1:#4c9f5e; --g2:#1d5c33; color: transparent; }
.app-tile[data-app="gallery"]    .app-icon { --rs-app-icon: url("img/icons/icon-gallery.png");    --g1:#e9b44c; --g2:#b3651f; color: transparent; }
.app-tile[data-app="notes"]      .app-icon { --rs-app-icon: url("img/icons/icon-notes.png");      --g1:#f2d06b; --g2:#c69a1f; color: transparent; }
.app-tile[data-app="calculator"] .app-icon { --rs-app-icon: url("img/icons/icon-calculator.png"); --g1:#8d939c; --g2:#3a3f47; color: transparent; }
.app-tile[data-app="weather"]    .app-icon { --rs-app-icon: url("img/icons/icon-weather.png");    --g1:#4fa9e8; --g2:#1a5c93; color: transparent; }
.app-tile[data-app="settings"]   .app-icon { --rs-app-icon: url("img/icons/icon-settings.png");   --g1:#9aa3ad; --g2:#41474f; color: transparent; }
.app-tile[data-app="store"]      .app-icon { --rs-app-icon: url("img/icons/icon-market.png");     --g1:#5b8cff; --g2:#1f3f9c; color: transparent; }
/* Nearest sensible artwork for tablet-only apps: comms reads as a radio,
   the world scanner as the drone glass, and the vehicle lab as the garage. */
.app-tile[data-app="comms"]      .app-icon { --rs-app-icon: url("img/icons/icon-radio.png");      --g1:#5ec8d8; --g2:#1b5f70; color: transparent; }
.app-tile[data-app="scanner"]    .app-icon { --rs-app-icon: url("img/icons/icon-drone.png");      --g1:#6ad6ff; --g2:#14506e; color: transparent; }
.app-tile[data-app="vehiclelab"] .app-icon { --rs-app-icon: url("img/icons/icon-garage.png");     --g1:#8b93a0; --g2:#343b45; color: transparent; }
.app-tile[data-app="games"]      .app-icon { --rs-app-icon: url("img/icons/icon-races.png");      --g1:#b46cff; --g2:#4a1f8c; color: transparent; }

/* ---------------------------------------------------------------------------
   Device frame
   ---------------------------------------------------------------------------
   The artwork's background was cut out imperfectly, so its outer edge is ragged
   and reads as a cheap cutout against the game. Rather than re-cut the PNG,
   a frame is drawn exactly on the device bounds: the artwork measures
   996x677 at (42,64) inside a 1080x808 file, which is the box below.

   The frame does two jobs: it covers the ragged pixels with a clean rounded
   edge, and it adds the specular rim and drop shadow a real slab of glass and
   aluminium has. It sits above the art and below the screen, so it never
   interferes with the UI.
   --------------------------------------------------------------------------- */
#tablet:after {
    content: "";
    position: absolute;
    left: 3.89%;
    top: 7.92%;
    width: 92.22%;
    height: 83.79%;
    border-radius: 3.2% / 4.7%;
    pointer-events: none;
    z-index: 2;
    /* Outer rim, then a hairline highlight, then a soft inner vignette so the
       glass looks recessed rather than printed on. */
    box-shadow:
        inset 0 0 0 1.5px rgba(232,240,252,.34),
        inset 0 0 0 4px rgba(10,14,20,.92),
        inset 0 1px 2px rgba(255,255,255,.30),
        inset 0 -1px 3px rgba(0,0,0,.55),
        0 26px 54px rgba(0,0,0,.62);
}

/* The screen sits above the frame so the UI is never dimmed by it. */
#screen { z-index: 3; }

/* ===========================================================================
   v0.4.0 — iFruit tablet shell / transparent NUI / full app launcher
   =========================================================================== */

/* The NUI must never dim the GTA world.  Only the tablet itself paints pixels. */
html,body,#stage{
  background:transparent!important;
  background-image:none!important;
}
#stage{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
#stage.hidden{display:none!important}
#tablet{
  pointer-events:auto;
  width:min(1040px,68vw,115vh);
  aspect-ratio:1012/693;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.58));
}
#tablet-art{object-fit:fill}

/* The replacement artwork is cropped and alpha-cleaned.  These measurements
   match the real glass opening in the 1012x693 PNG. */
#screen{
  left:4.75%;
  top:6.55%;
  width:90.45%;
  height:85.05%;
  border-radius:14px;
  background:#0a1020;
  z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),inset 0 0 30px rgba(0,0,0,.22);
}
#tablet:after{display:none!important}
.hardware-power{right:.15%;top:27%;height:56px;opacity:.72}

/* iFruitOS wallpaper and chrome */
.wallpaper-layer{
  background:
    radial-gradient(circle at 78% 18%,rgba(130,101,255,.72),transparent 28%),
    radial-gradient(circle at 19% 74%,rgba(63,201,255,.42),transparent 30%),
    radial-gradient(circle at 55% 112%,rgba(37,113,255,.34),transparent 38%),
    linear-gradient(150deg,#091528 0%,#102443 47%,#17142d 100%);
}
#statusbar{
  height:38px;
  padding:5px 12px;
  background:linear-gradient(rgba(8,13,25,.48),rgba(8,13,25,.12),transparent);
}
.status-pill{padding:5px 9px;border-radius:14px;background:rgba(10,16,29,.34)}
.status-center{font-size:9px;letter-spacing:.08em}
.rs-mark{background:linear-gradient(145deg,#f5f7ff,#a7b7cb);color:#111827}

/* Compact iPad-style widget strip. */
.desktop-grid{
  grid-template-columns:1.45fr 1fr 1fr;
  gap:9px;
  margin-top:6px;
}
.panel{min-height:78px;border-radius:20px;padding:11px 13px;background:rgba(14,22,38,.52);backdrop-filter:blur(24px)}
.hero-widget{grid-row:auto}
.hero-time{font-size:25px;line-height:1}
.hero-location{margin-top:5px;font-size:9px}
.hero-row{margin-top:7px}
.widget-frequency{font-size:18px;margin-top:7px}
.widget-label{font-size:8.5px}

/* Full app family: all non-dock apps fit on one launcher page. */
.app-grid{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:8px 10px;
  margin-top:11px;
  padding:0 4px 80px;
  align-content:start;
}
.app-tile{gap:4px;min-height:65px;border:0;background:transparent;padding:0;color:inherit;appearance:none;-webkit-appearance:none}
.app-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  font-size:20px;
}
.app-label{font-size:8.7px;max-width:78px}
.app-tile:hover .app-icon{transform:translateY(-2px) scale(1.04)}
.dock{
  min-width:0;
  width:auto;
  height:64px;
  bottom:10px;
  padding:7px 12px;
  gap:10px;
  border-radius:21px;
  background:rgba(19,29,48,.50);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 32px rgba(0,0,0,.26);
}
.dock .app-icon{width:49px;height:49px;border-radius:14px}
.home-indicator{bottom:3px;width:96px;height:3px;opacity:.76}

/* Use the exact rs-phone icon family. */
.app-tile[data-app="phone"]        .app-icon{--rs-app-icon:url("img/icons/icon-phone.png");color:transparent}
.app-tile[data-app="videocall"]    .app-icon{--rs-app-icon:url("img/icons/icon-videocall.png");color:transparent}
.app-tile[data-app="messages"]     .app-icon{--rs-app-icon:url("img/icons/icon-messages.png");color:transparent}
.app-tile[data-app="email"]        .app-icon{--rs-app-icon:url("img/icons/icon-email.png");color:transparent}
.app-tile[data-app="survivorchat"] .app-icon{--rs-app-icon:url("img/icons/icon-chat.png");color:transparent}
.app-tile[data-app="contacts"]     .app-icon{--rs-app-icon:url("img/icons/icon-contacts.png");color:transparent}
.app-tile[data-app="community"]    .app-icon{--rs-app-icon:url("img/icons/icon-community.png");color:transparent}
.app-tile[data-app="news"]         .app-icon{--rs-app-icon:url("img/icons/icon-news.png");color:transparent}
.app-tile[data-app="mediahub"]     .app-icon{--rs-app-icon:url("img/icons/icon-media.png");color:transparent}
.app-tile[data-app="bank"]         .app-icon{--rs-app-icon:url("img/icons/icon-bank.png");color:transparent}
.app-tile[data-app="bills"]        .app-icon{--rs-app-icon:url("img/icons/icon-bills.png");color:transparent}
.app-tile[data-app="garage"]       .app-icon{--rs-app-icon:url("img/icons/icon-garage.png");color:transparent}
.app-tile[data-app="racing"]       .app-icon{--rs-app-icon:url("img/icons/icon-racing.png");color:transparent}
.app-tile[data-app="races"]        .app-icon{--rs-app-icon:url("img/icons/icon-races.png");color:transparent}
.app-tile[data-app="market"]       .app-icon{--rs-app-icon:url("img/icons/icon-market.png");color:transparent}
.app-tile[data-app="work"]         .app-icon{--rs-app-icon:url("img/icons/icon-work.png");color:transparent}
.app-tile[data-app="yellowpage"]   .app-icon{--rs-app-icon:url("img/icons/icon-yellowpage.png");color:transparent}
.app-tile[data-app="taxi"]         .app-icon{--rs-app-icon:url("img/icons/icon-taxi.png");color:transparent}
.app-tile[data-app="houses"]       .app-icon{--rs-app-icon:url("img/icons/icon-houses.png");color:transparent}
.app-tile[data-app="darkmarket"]   .app-icon{--rs-app-icon:url("img/icons/icon-darkmarket.png");color:transparent}
.app-tile[data-app="radio"]        .app-icon{--rs-app-icon:url("img/icons/icon-radio.png");color:transparent}
.app-tile[data-app="drone"]        .app-icon{--rs-app-icon:url("img/icons/icon-drone.png");color:transparent}
.app-tile[data-app="reminders"]    .app-icon{--rs-app-icon:url("img/icons/icon-reminders.png");color:transparent}
.app-tile[data-app="sos"]          .app-icon{--rs-app-icon:url("img/icons/icon-sos.png");color:transparent}

/* Alias tablet-native ids to the closest phone artwork. */
.app-tile[data-app="scanner"]      .app-icon{--rs-app-icon:url("img/icons/icon-drone.png");color:transparent}
.app-tile[data-app="vehiclelab"]   .app-icon{--rs-app-icon:url("img/icons/icon-garage.png");color:transparent}
.app-tile[data-app="games"]        .app-icon{--rs-app-icon:url("img/icons/icon-races.png");color:transparent}
.app-tile[data-app="store"]        .app-icon{--rs-app-icon:url("img/icons/icon-market.png");color:transparent}

/* Phone-owned app surfaces use the same clean card language as native tools. */
.phone-sync-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.045)}
.phone-sync-banner strong{font-size:11px}.phone-sync-banner small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 16px rgba(87,228,166,.55)}
.sync-dot.off{background:var(--red);box-shadow:none}
.data-list{display:flex;flex-direction:column;gap:7px}
.data-card{padding:10px 12px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.045)}
.data-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.data-card b{font-size:11px}.data-card small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.data-card p{margin:7px 0 0;font-size:10px;line-height:1.42;color:#dbe7f0}
.data-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.data-kv>div{padding:10px;border-radius:12px;background:rgba(255,255,255,.04)}.data-kv span{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.11em}.data-kv strong{display:block;margin-top:3px;font-size:14px}
.provider-unavailable{padding:26px;border-radius:18px;background:rgba(255,94,109,.07);border:1px solid rgba(255,94,109,.17);text-align:center}.provider-unavailable b{display:block;font-size:13px}.provider-unavailable p{margin:7px auto 0;max-width:460px;color:var(--muted);font-size:10px;line-height:1.5}

@media(max-width:1250px){
  #tablet{width:min(980px,72vw,112vh)}
  .app-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px 8px}
  .desktop-grid{grid-template-columns:1.35fr 1fr 1fr}
}
@media(max-width:980px){
  #tablet{width:min(94vw,108vh)}
  .app-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .scanner-widget{display:block}
}

/* --------------------------------------------------------------------------
   v0.5.0 - RS Phone parity apps
   -------------------------------------------------------------------------- */
.section-label{margin:15px 2px 8px;font-size:9px;font-weight:900;letter-spacing:.16em;color:var(--muted)}
.wide{grid-column:1/-1}.hidden{display:none!important}.form-grid{display:grid;gap:8px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .span2{grid-column:1/-1}.textarea.compact{height:145px}.avatar-dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(145deg,#395475,#1b2633);border:1px solid rgba(255,255,255,.08)}
.camera-mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.camera-mode{height:105px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(160deg,rgba(67,129,255,.22),rgba(14,25,39,.9));cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:14px;text-align:left}.camera-mode:hover{border-color:rgba(88,201,255,.5);transform:translateY(-1px)}.camera-mode b{font-size:14px}.camera-mode small{font-size:9px;color:var(--muted);margin-top:3px}
.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.gallery-toolbar span{font-size:10px;color:var(--muted)}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.gallery-card{position:relative;aspect-ratio:1.16;border:1px solid rgba(255,255,255,.08);padding:0;border-radius:15px;overflow:hidden;background:#07111a;cursor:pointer}.gallery-card>span{position:absolute;left:7px;bottom:6px;padding:4px 6px;border-radius:7px;background:rgba(0,0,0,.62);font-size:8px;font-weight:900;letter-spacing:.08em}.gallery-media,.gallery-view-media,.phone-media{width:100%;height:100%;display:block;object-fit:cover;background:#05090d}.media-loading{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:9px}.media-loading span{font-weight:900;color:var(--text)}.media-viewer{margin-bottom:13px;border-radius:19px;padding:11px;background:#060d14;border:1px solid rgba(255,255,255,.08)}.media-viewer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.media-viewer-head>div{display:flex;flex-direction:column}.media-viewer-head small{color:var(--muted);font-size:9px}.gallery-view-media{height:305px;border-radius:13px;object-fit:contain;background:#000}
.call-card{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:19px;margin-bottom:12px;border:1px solid rgba(86,202,255,.24);background:linear-gradient(135deg,rgba(51,112,184,.22),rgba(10,19,29,.88))}.call-card.incoming{border-color:rgba(69,228,154,.35)}.call-card>div:first-child{display:flex;flex-direction:column}.call-card span{font-size:8px;letter-spacing:.15em;color:var(--cyan);font-weight:900}.call-card strong{font-size:18px;margin:3px 0}.call-card small{color:var(--muted);font-size:10px}.dial-pad{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:13px}.dial-pad .text-input{width:100%}
.message-layout{display:grid;grid-template-columns:33% 1fr;gap:10px;min-height:390px}.conversation-list,.conversation-pane{border:1px solid rgba(255,255,255,.07);border-radius:17px;background:rgba(8,16,25,.65);overflow:hidden}.conversation-list{max-height:450px;overflow:auto;padding:7px}.message-new{display:grid;grid-template-columns:1fr auto;gap:6px;margin-bottom:7px}.conversation-row,.email-row{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.055);background:transparent;color:inherit;padding:10px 9px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px}.conversation-row.active,.conversation-row:hover,.email-row:hover{background:rgba(78,154,255,.09);border-radius:11px}.conversation-row strong,.email-row strong{font-size:11px}.conversation-row span,.email-row span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-row small,.email-row small{font-size:8px;color:var(--muted)}.conversation-pane{display:flex;flex-direction:column}.conversation-head{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.conversation-head>div{display:flex;flex-direction:column}.conversation-head strong{font-size:12px}.conversation-head small{font-size:9px;color:var(--muted)}.message-thread{flex:1;min-height:250px;max-height:305px;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:7px}.message-bubble{max-width:85%;padding:9px 11px;border-radius:13px;background:rgba(57,102,160,.2);border:1px solid rgba(91,155,237,.13)}.message-bubble small,.message-bubble time{display:block;font-size:7px;color:var(--muted)}.message-bubble p{margin:3px 0 4px;font-size:10px}.attachment-chip,.feed-media-chip{display:inline-block;font-size:7px;font-weight:900;padding:3px 5px;border-radius:6px;background:rgba(85,198,255,.12);color:var(--cyan)}.message-compose{padding:8px;border-top:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:1fr 150px auto auto;gap:6px}.message-compose textarea{height:40px;resize:none}.message-compose .text-input{width:100%}
.compose-panel{padding:11px;border-radius:16px;background:rgba(9,18,28,.8);border:1px solid rgba(255,255,255,.07);margin-bottom:10px}.segmented{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);width:max-content;margin:10px 0}.segmented button{border:0;border-radius:9px;background:transparent;padding:7px 15px;color:var(--muted);cursor:pointer;font-size:9px;font-weight:800}.segmented button.active{background:rgba(72,137,232,.25);color:white}.email-row{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:5px}.email-row>div{display:flex;flex-direction:column;min-width:0}.email-row time{font-size:8px;color:var(--muted)}.email-reader{padding:15px 17px;border-radius:18px;background:rgba(8,16,25,.82);border:1px solid rgba(255,255,255,.07);margin-bottom:10px}.email-reader-head{display:flex;justify-content:space-between}.email-reader h2{font-size:20px;margin:14px 0 3px}.email-reader>small{font-size:9px;color:var(--muted)}.email-reader>p{font-size:11px;line-height:1.55;color:#dbe7ef}
.community-compose{display:grid;grid-template-columns:1fr 180px auto;gap:8px;margin-bottom:10px}.community-compose textarea{height:54px;resize:none}.community-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.feed-card{padding:13px;border-radius:17px;background:rgba(9,18,28,.75);border:1px solid rgba(255,255,255,.07)}.feed-card header{display:flex;justify-content:space-between;gap:8px}.feed-card header>div{display:flex;flex-direction:column}.feed-card header strong{font-size:11px}.feed-card header small{font-size:8px;color:var(--muted)}.feed-card p{font-size:11px;line-height:1.5;min-height:28px}.feed-card footer{display:flex;gap:6px;margin-top:8px}.thread-host{margin-top:7px}.thread-reply{display:flex;flex-direction:column;padding:7px 8px;margin-top:4px;border-left:2px solid rgba(88,201,255,.35);background:rgba(255,255,255,.025)}.thread-reply b{font-size:8px}.thread-reply span{font-size:9px;color:#c7d4df}
.bank-balance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}.bank-balance-grid>div{padding:18px;border-radius:20px;background:linear-gradient(135deg,rgba(55,150,105,.25),rgba(7,18,17,.8));border:1px solid rgba(87,226,164,.18);display:flex;flex-direction:column}.bank-balance-grid span{font-size:8px;font-weight:900;letter-spacing:.15em;color:#8ce5bd}.bank-balance-grid strong{font-size:28px;margin-top:3px}.bank-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.transaction-list{display:flex;flex-direction:column;gap:5px}.transaction-row{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:12px;background:rgba(9,18,28,.7);border:1px solid rgba(255,255,255,.055)}.transaction-row>div{display:flex;flex-direction:column}.transaction-row strong{font-size:10px}.transaction-row small{font-size:8px;color:var(--muted)}.transaction-row>b{font-size:11px;color:#ff8791}.transaction-row>b.positive{color:#70e0ad}
.garage-grid,.property-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vehicle-card,.property-card{padding:13px;border-radius:17px;background:linear-gradient(150deg,rgba(16,28,41,.9),rgba(7,13,20,.88));border:1px solid rgba(255,255,255,.07)}.vehicle-card header,.property-card header{display:flex;justify-content:space-between;gap:8px}.vehicle-card header>div,.property-card header>div{display:flex;flex-direction:column}.vehicle-card strong,.property-card strong{font-size:12px}.vehicle-card small,.property-card small{font-size:8px;color:var(--muted)}.property-card header>b{font-size:11px;color:var(--cyan)}.vehicle-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0}.vehicle-stats span{padding:7px;border-radius:9px;background:rgba(255,255,255,.035);font-size:8px;color:var(--muted)}.vehicle-stats b{display:block;color:var(--text);font-size:10px;margin-top:1px}.vehicle-actions{display:flex;flex-wrap:wrap;gap:5px}.vehicle-actions button{padding:7px 8px;font-size:8px}.property-card .button-row{margin-top:10px}
.map-tools{display:grid;grid-template-columns:1fr auto 1fr 1fr auto;gap:6px;margin-bottom:9px}.tablet-map-viewport{position:relative;height:410px;border-radius:18px;overflow:hidden;background:#0d1720;border:1px solid rgba(255,255,255,.08);touch-action:none}.tablet-map-world{position:absolute;inset:0;transform-origin:center;will-change:transform}.tablet-map-world>img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.78)}.map-pins{position:absolute;inset:0}.map-pin{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;color:white;cursor:pointer;z-index:3}.map-pin>span{display:block;width:11px;height:11px;border-radius:50%;background:#4bd6ff;border:2px solid #fff;box-shadow:0 0 0 4px rgba(75,214,255,.18),0 2px 8px #000}.map-pin.friend>span{background:#67df9f}.map-pin.signal>span{background:#ff4f65;box-shadow:0 0 0 5px rgba(255,79,101,.2)}.map-pin>b{position:absolute;left:15px;top:-2px;white-space:nowrap;padding:3px 5px;border-radius:5px;background:rgba(0,0,0,.68);font-size:7px}.map-hud{position:absolute;left:9px;right:9px;bottom:9px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.map-hud span{padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.68);font-size:8px}.map-hud button{pointer-events:auto;padding:6px 9px}.drone-hero{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 18px;margin-bottom:12px;border-radius:19px;background:linear-gradient(135deg,rgba(54,141,125,.23),rgba(8,17,24,.88));border:1px solid rgba(100,224,198,.18)}.drone-hero h3{margin:3px 0;font-size:18px}.drone-hero p{margin:0;max-width:470px;color:var(--muted);font-size:10px}.reminder-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}.reminder-list .done strong{text-decoration:line-through;color:var(--muted)}
@media(max-width:900px){.camera-mode-grid,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.community-feed,.garage-grid,.property-grid,.bank-actions{grid-template-columns:1fr}.message-layout{grid-template-columns:1fr}.conversation-list{max-height:180px}.message-compose{grid-template-columns:1fr 1fr}.map-tools{grid-template-columns:1fr auto}.map-tools #map-x2,.map-tools #map-y2{display:none}}

/* v0.5.0 continued — full RS Phone parity surfaces */
.notes-layout{display:grid;grid-template-columns:minmax(190px,31%) 1fr;gap:10px;min-height:390px}.notes-list{display:flex;flex-direction:column;gap:5px;max-height:430px;overflow:auto;padding:7px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:rgba(8,16,25,.65)}.note-row{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;cursor:pointer}.note-row:hover,.note-row.active{background:rgba(78,154,255,.10);border-color:rgba(95,172,255,.16)}.note-row strong{font-size:10px}.note-row span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-row small{font-size:7px;color:var(--muted)}.note-editor{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:17px;border:1px solid rgba(255,255,255,.07);background:rgba(8,16,25,.68)}.note-editor.standalone{max-width:760px}.note-editor textarea{min-height:250px;resize:vertical}.note-editor .button-row{margin-top:auto}
.mediahub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.mediahub-card{position:relative;min-height:150px;overflow:hidden;border-radius:17px;background:#05090d;border:1px solid rgba(255,255,255,.08);cursor:pointer}.mediahub-card .phone-media{height:150px}.mediahub-card footer{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:8px;background:linear-gradient(transparent,rgba(0,0,0,.84));font-size:8px}.mediahub-card footer strong{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:12px}.stats-grid>div{padding:13px;border-radius:16px;background:rgba(8,17,27,.76);border:1px solid rgba(255,255,255,.065);display:flex;flex-direction:column}.stats-grid small{font-size:8px;color:var(--muted);letter-spacing:.06em}.stats-grid strong{font-size:22px;margin-top:3px}.race-grid,.service-grid,.directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px}.service-card{padding:13px;border-radius:17px;background:rgba(8,17,27,.76);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:7px}.service-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.service-card header>div{display:flex;flex-direction:column}.service-card strong{font-size:11px}.service-card small,.service-card p{font-size:9px;color:var(--muted);line-height:1.45}.service-card .button-row{margin-top:auto}
.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}.gallery-toolbar>div{display:flex;gap:6px;align-items:center}.gallery-card.selecting:after{content:"";position:absolute;inset:0;border:2px solid rgba(96,202,255,.7);border-radius:inherit;pointer-events:none}.gallery-check{position:absolute;right:7px;top:7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(8,14,22,.8);border:1px solid rgba(255,255,255,.3);font-size:10px;font-weight:900;z-index:3}.gallery-card.selected .gallery-check{background:#3ab8e7;color:#061016}.map-category-row{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px}.map-category-row button{padding:6px 9px;font-size:8px}.map-category-row button.active{background:rgba(75,214,255,.18);border-color:rgba(75,214,255,.38);color:#c9f5ff}.map-nearby-list{max-height:145px;overflow:auto;margin-top:9px}.map-nearby-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:rgba(8,16,25,.68);border:1px solid rgba(255,255,255,.055);margin-top:4px}.map-nearby-row>div{min-width:0;flex:1;display:flex;flex-direction:column}.map-nearby-row strong{font-size:9px}.map-nearby-row small{font-size:7px;color:var(--muted)}.map-pin.place>span{background:#f3bb43;box-shadow:0 0 0 4px rgba(243,187,67,.18),0 2px 8px #000}
@media(max-width:900px){.notes-layout{grid-template-columns:1fr}.notes-list{max-height:150px}.mediahub-grid,.stats-grid,.race-grid,.service-grid,.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ===========================================================================
   v0.5.3 — RS wide-glass tablet frame + dashboard launcher refresh
   ---------------------------------------------------------------------------
   Visual-only pass. No app ids, NUI callbacks, providers, permissions, RPCs,
   or client/server behavior are changed here.

   The supplied 1515x1038 frame has a transparent glass opening from:
     x 79..1435  -> left 5.2145%, width 89.5709%
     y 85..942   -> top  8.1888%, height 82.6589%

   The live NUI is intentionally placed BEHIND the frame artwork. That lets the
   real frame provide the inner glass edge and rounded-corner mask instead of
   drawing a second fake bezel in CSS.
   =========================================================================== */

#tablet{
  width:min(1450px,90vw,131vh);
  aspect-ratio:1515/1038;
  filter:drop-shadow(0 30px 52px rgba(0,0,0,.64));
}
#tablet-art{
  z-index:4;
  object-fit:fill;
}
#screen{
  left:5.2145%;
  top:8.1888%;
  width:89.5709%;
  height:82.6589%;
  border-radius:18px;
  z-index:2;
  overflow:hidden;
  background:#07111c;
  box-shadow:
    inset 0 0 0 1px rgba(196,224,255,.10),
    inset 0 0 44px rgba(0,0,0,.30);
}
#tablet:after{display:none!important}

.hardware-power{
  z-index:6;
  right:1.45%;
  top:35.5%;
  width:1.45%;
  height:10.5%;
  border:0;
  border-radius:8px;
  background:transparent;
  opacity:1;
}

:root{
  --panel:rgba(8,18,29,.68);
  --panel2:rgba(12,25,39,.88);
  --line:rgba(113,187,238,.20);
  --cyan:#63d1ff;
  --blue:#4d92ff;
}
.wallpaper-layer{
  background:
    radial-gradient(circle at 77% 16%,rgba(52,132,255,.26),transparent 26%),
    radial-gradient(circle at 25% 78%,rgba(32,204,232,.14),transparent 31%),
    linear-gradient(145deg,#06111c 0%,#0b1928 48%,#07101a 100%);
}
#screen:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,11,19,.05),rgba(3,9,15,.34)),
    radial-gradient(ellipse at 50% 115%,rgba(38,105,155,.18),transparent 52%);
}
#screen:after{
  z-index:60;
  opacity:.54;
}
#statusbar{
  height:42px;
  padding:6px 14px;
  background:linear-gradient(180deg,rgba(3,9,16,.80),rgba(3,9,16,.18),transparent);
  backdrop-filter:blur(16px);
}
.status-pill{
  min-height:29px;
  padding:5px 10px;
  gap:9px;
  border-radius:14px;
  border:1px solid rgba(151,211,255,.12);
  background:rgba(8,18,30,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.status-center{
  gap:8px;
  font-size:9px;
  letter-spacing:.14em;
  color:#9db0c0;
}
.rs-mark{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:8px;
  background:linear-gradient(145deg,#63d1ff,#4f7dff);
  color:#041019;
  -webkit-text-fill-color:#041019;
  font-size:10px;
  letter-spacing:-.02em;
  box-shadow:0 0 18px rgba(82,176,255,.16);
}
#desktop{
  padding:52px 24px 80px;
  overflow:hidden;
}
.desktop-grid{
  grid-template-columns:1.55fr .95fr .95fr;
  gap:10px;
  margin-top:2px;
}
.panel{
  min-height:82px;
  padding:12px 14px;
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(18,36,55,.72),rgba(6,15,25,.58));
  border:1px solid rgba(115,184,232,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 40px rgba(0,0,0,.16);
  backdrop-filter:blur(24px);
}
.hero-widget{min-height:82px}
.eyebrow{font-size:8px;letter-spacing:.22em;color:#82a3bb}
.hero-time{font-size:29px;line-height:1;margin-top:3px}
.hero-location{margin-top:5px;font-size:9px;color:#c6d7e4}
.hero-row{margin-top:8px;gap:12px;font-size:8px;color:#77d9ff}
.widget-frequency,.scanner-readout{font-size:20px;margin-top:8px}
.widget-label{font-size:8px;margin-top:4px}
.live-dot{width:7px;height:7px}

.app-grid{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:7px 8px;
  margin-top:10px;
  padding:0 0 72px;
  align-content:start;
}
.app-tile{
  min-height:60px;
  gap:3px;
  padding:6px 3px 5px;
  border-radius:15px;
  border:1px solid rgba(130,190,230,.10);
  background:
    linear-gradient(155deg,rgba(27,48,67,.46),rgba(7,17,27,.35));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}
.app-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(99,209,255,.30);
  background:linear-gradient(155deg,rgba(34,62,84,.58),rgba(8,19,31,.46));
}
.app-icon,
.dock .app-icon{
  width:38px;
  height:38px;
  border-radius:11px;
  box-shadow:0 8px 18px rgba(0,0,0,.30);
}
.app-tile:hover .app-icon{
  transform:scale(1.035);
  box-shadow:0 10px 22px rgba(0,0,0,.36),0 0 18px rgba(88,201,255,.07);
}
.app-label{
  max-width:100%;
  font-size:7.8px;
  line-height:1.05;
  color:#edf7ff;
  text-shadow:0 1px 2px #000;
}
.dock{
  bottom:9px;
  height:61px;
  padding:6px 10px;
  gap:7px;
  border-radius:19px;
  border:1px solid rgba(151,211,255,.15);
  background:rgba(7,17,28,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 18px 36px rgba(0,0,0,.30);
  backdrop-filter:blur(26px);
}
.dock .app-tile{
  min-height:48px;
  width:50px;
  padding:5px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.dock .app-tile:hover{background:rgba(255,255,255,.04)}
.home-indicator{bottom:2px;width:86px;height:3px}

.app-shell{
  background:rgba(4,11,18,.84);
  backdrop-filter:blur(36px);
}
.app-header{
  height:54px;
  padding:7px 12px;
  background:rgba(5,14,23,.88);
  border-bottom:1px solid rgba(125,193,239,.10);
}
.app-content{
  height:calc(100% - 54px);
  padding:16px 18px 30px;
}
.icon-btn{
  width:36px;
  height:36px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
}
.mini-app-icon{
  background:linear-gradient(145deg,#4f8dff,#61d3ff);
}

@media(max-height:760px){
  #desktop{padding:48px 20px 72px}
  .desktop-grid{gap:7px}
  .panel{min-height:72px;padding:9px 11px}
  .hero-time{font-size:24px}
  .app-grid{gap:5px 6px;margin-top:7px}
  .app-tile{min-height:52px;padding:4px 2px}
  .app-icon,.dock .app-icon{width:34px;height:34px;border-radius:10px}
  .app-label{font-size:7px}
  .dock{height:55px}
  .dock .app-tile{min-height:43px;width:45px}
}

/* v0.5.6 native Dispatch/CCTV */
.dispatch-list{display:flex;flex-direction:column;gap:8px}.dispatch-card{border-left:3px solid rgba(99,209,255,.45)}.dispatch-card.urgent,.dispatch-card.emergency{border-left-color:#ff6676}.dispatch-card.priority{border-left-color:#f1c65c}.dispatch-card footer{display:flex;gap:7px;justify-content:flex-end}.dispatch-card p{white-space:pre-wrap}.cctv-view{min-width:72px}
/* Native v0.5.6 app icon aliases. */
.app-tile[data-app="dispatch"] .app-icon{--rs-app-icon:url("img/icons/icon-radio.png");color:transparent}
.app-tile[data-app="cctv"]     .app-icon{--rs-app-icon:url("img/icons/icon-camera.png");color:transparent}


/* ===========================================================================
   v0.5.8 — restore bright large-icon RS OS launcher
   ---------------------------------------------------------------------------
   Keep the supplied 1515x1038 frame and screen geometry from v0.5.3, but undo
   the later compact boxed-launcher treatment. The desktop is an immersive
   tablet OS again: vivid wallpaper, large standalone icons, readable labels.
   =========================================================================== */
.wallpaper-layer{
  background:
    radial-gradient(circle at 76% 15%,rgba(85,110,255,.62),transparent 29%),
    radial-gradient(circle at 22% 76%,rgba(0,213,255,.34),transparent 33%),
    radial-gradient(circle at 52% 112%,rgba(38,119,255,.36),transparent 40%),
    linear-gradient(145deg,#0a1830 0%,#15365f 48%,#17183f 100%);
}
#screen:before{
  background:
    linear-gradient(180deg,rgba(6,14,28,.02),rgba(2,8,18,.12)),
    radial-gradient(ellipse at 50% 112%,rgba(54,150,220,.20),transparent 56%);
}
#desktop{padding:52px 27px 92px;overflow:hidden}
.desktop-grid{grid-template-columns:1.6fr 1fr 1fr;gap:13px;margin-top:4px}
.panel{
  min-height:92px;padding:14px 16px;border-radius:21px;
  background:linear-gradient(145deg,rgba(31,69,105,.62),rgba(9,24,43,.46));
  border:1px solid rgba(139,215,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 42px rgba(0,0,0,.18),0 0 26px rgba(68,177,255,.05);
}
.hero-time{font-size:34px}.widget-frequency,.scanner-readout{font-size:23px}
.app-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:13px 18px;
  margin-top:18px;
  padding:0 8px 84px;
}
.app-tile{
  min-height:83px;
  gap:7px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.app-tile:hover{transform:translateY(-3px);border:0;background:transparent}
.app-icon,
.dock .app-icon{
  width:66px;
  height:66px;
  border-radius:19px;
  box-shadow:0 13px 28px rgba(0,0,0,.30),0 0 20px rgba(88,201,255,.08);
}
.app-tile:hover .app-icon{transform:scale(1.055);box-shadow:0 18px 32px rgba(0,0,0,.34),0 0 28px rgba(88,201,255,.15)}
.app-label{max-width:110px;font-size:10px;line-height:1.12;color:#f5fbff;text-shadow:0 2px 4px rgba(0,0,0,.85)}
.dock{
  bottom:11px;height:75px;padding:8px 15px;gap:13px;border-radius:24px;
  border:1px solid rgba(165,221,255,.22);
  background:linear-gradient(145deg,rgba(21,48,75,.62),rgba(6,17,31,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 42px rgba(0,0,0,.34);
}
.dock .app-tile{min-height:58px;width:66px;padding:0;border:0;background:transparent}
.dock .app-icon{width:58px;height:58px;border-radius:17px}
.control-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.control-tile{height:84px;padding:10px;border-radius:16px}
.control-tile>span{font-size:19px}

@media(max-height:760px){
  #desktop{padding:48px 22px 78px}
  .panel{min-height:76px;padding:10px 12px}
  .hero-time{font-size:26px}
  .app-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px 10px;margin-top:10px;padding-bottom:66px}
  .app-tile{min-height:61px;gap:4px}
  .app-icon,.dock .app-icon{width:45px;height:45px;border-radius:13px}
  .app-label{font-size:8px}
  .dock{height:58px;padding:6px 10px;gap:8px}
  .dock .app-tile{min-height:46px;width:49px}
}

/* ===========================================================================
   v0.5.9 PREMIUM LAUNCHER
   ---------------------------------------------------------------------------
   v0.5.8 drew 58px icons in a flat 6-column grid across a ~1090px canvas. That
   is handset density on a tablet, and it is the "small boxes" look. The fix is
   not to brighten it -- it is to stop treating the widescreen canvas like a
   phone screen.

   What changed, and why:
     * icons 58px -> 112px, labels 10px -> 13px. The artwork was always there;
       it was being displayed at handset scale.
     * one flat grid -> titled sections. 36 apps in a single block is a wall.
     * Drone / CCTV / Dispatch / Camera get wide feature cards above the grid,
       so the flagship operational tools read as flagship functions.
     * the desktop SCROLLS. Shrinking every icon so everything fits one screen
       is exactly the trade this pass exists to reverse.

   Deliberately unchanged: #tablet and #screen geometry (the frame is
   authoritative and already calibrated, and the screen box is inset from the
   opening so nothing rides the bezel), and every .app-tile[data-app] artwork
   rule -- which keeps working because the artwork is sized in percentages.
   =========================================================================== */

/* The app list is now taller than the screen by design, so something has to
   scroll -- but NOT #desktop itself.
   .dock is position:absolute against #desktop. If #desktop is the scroller the
   dock scrolls away with the content, which is exactly what happened on the
   first attempt at this. Making #desktop a non-scrolling flex column and giving
   the grid the overflow keeps the widgets and the dock pinned while only the
   app list moves.
   Bottom padding on the grid clears the dock (77px tall + 22px offset) so the
   final row is never trapped underneath it. */
#desktop.view.active{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
#desktop .desktop-grid{flex:0 0 auto}

/* #app-grid becomes the scrolling column of sections rather than a grid of tiles. */
#app-grid.app-grid{
    display:block;grid-template-columns:none;
    flex:1 1 auto;min-height:0;            /* min-height:0 or the flex child refuses to shrink */
    overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
    padding:0 0 128px;margin-top:22px;
}
#app-grid::-webkit-scrollbar{width:6px}
#app-grid::-webkit-scrollbar-thumb{background:rgba(88,201,255,.28);border-radius:6px}
#app-grid::-webkit-scrollbar-track{background:transparent}

.app-section{margin-bottom:30px}
.app-section-title{
    font-size:11px;letter-spacing:.2em;font-weight:800;color:#8da4b8;
    margin:0 0 14px 4px;text-transform:uppercase;
}

/* Standard app rows. Five across leaves each tile ~210px on the full canvas,
   which is what lets the icon be 112px instead of 58px. */
.app-grid-section{
    display:grid;grid-template-columns:repeat(5,1fr);
    gap:26px 18px;padding:0 4px;
}
.app-grid-section .app-tile{gap:11px}
.app-grid-section .app-icon{width:112px;height:112px;border-radius:28px;font-size:40px}
.app-grid-section .app-label{font-size:13px;max-width:160px;font-weight:600}

/* Operational flagships: wide cards, icon beside the label rather than above. */
.featured-section{margin-bottom:34px}
.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 4px}
.featured-tile{
    flex-direction:row;align-items:center;gap:15px;
    padding:15px 17px;border-radius:24px;text-align:left;
    background:linear-gradient(145deg,rgba(28,46,66,.82),rgba(9,19,30,.68));
    border:1px solid rgba(88,201,255,.16);
    box-shadow:0 16px 38px rgba(0,0,0,.28);
    transition:.16s;
}
.featured-tile:hover{
    transform:translateY(-3px);
    border-color:rgba(88,201,255,.45);
    box-shadow:0 22px 46px rgba(0,0,0,.36),0 0 30px rgba(88,201,255,.12);
}
.featured-tile:hover .app-icon{transform:none}
.featured-tile .app-icon{width:78px;height:78px;border-radius:21px;flex:0 0 auto;font-size:30px}
.featured-tile .feature-text{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
.featured-tile .app-label{font-size:15px;font-weight:700;max-width:none;text-align:left}
.featured-tile .feature-sub{font-size:11px;color:#8da4b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The dock stays compact on purpose -- it is a shortcut strip, not the grid. */
.dock .app-icon{width:62px;height:62px;border-radius:19px}

/* Narrow panes: drop a column rather than shrinking the icons. */
@media(max-width:1000px){
    .app-grid-section{grid-template-columns:repeat(4,1fr);gap:22px 16px}
    .app-grid-section .app-icon{width:96px;height:96px;border-radius:24px}
    .featured-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===========================================================================
   v0.6.0 — real tablet home screen + unobstructed world-control apps
   ---------------------------------------------------------------------------
   Authoritative visual rule: copy the interaction model of RS Phone, not an
   admin dashboard. Apps live on normal paged home screens with page dots and a
   dock. Categories remain metadata for App Store/search only; the launcher
   never renders category headings or "featured" operational cards.
   =========================================================================== */

/* Home screen: fixed widgets, then one normal app page at a time. */
#desktop.view.active{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:52px 28px 82px;
}
#desktop .desktop-grid{flex:0 0 auto;margin-top:2px}
#app-grid.app-grid{
  display:block;
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  margin:12px 0 0;
  padding:0 8px;
}
.app-page{
  position:absolute;
  inset:0;
  display:none;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(72px,1fr));
  align-content:center;
  justify-items:center;
  gap:10px 16px;
  padding:2px 4px 8px;
}
.app-page.active{display:grid}
.app-page .app-tile{
  width:100%;
  min-height:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.app-page .app-tile:hover{background:transparent;border:0;transform:translateY(-2px)}
.app-page .app-icon{
  width:74px;
  height:74px;
  border-radius:20px;
  font-size:26px;
  box-shadow:0 11px 25px rgba(0,0,0,.34);
}
.app-page .app-label{
  max-width:150px;
  font-size:11px;
  line-height:1.08;
  font-weight:560;
  overflow:visible;
  text-overflow:clip;
  color:#f7fbff;
  text-shadow:0 2px 5px rgba(0,0,0,.86);
}
.home-page-dots{
  position:absolute;
  left:50%;
  bottom:78px;
  transform:translateX(-50%);
  z-index:25;
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:center;
  min-height:16px;
}
.home-page-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.36);
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  cursor:pointer;
}
.home-page-dot.active{background:#fff;transform:scale(1.18)}

/* Dock remains a shortcut strip exactly like a normal tablet. */
.dock{
  bottom:10px;
  height:62px;
  padding:6px 12px;
  gap:10px;
  border-radius:21px;
}
.dock .app-tile{width:52px;min-height:48px;padding:0;border:0;background:transparent;box-shadow:none}
.dock .app-icon{width:48px;height:48px;border-radius:14px}

/* Scanner must never be confused with Drone again. It gets its own reticle tile. */
.app-tile[data-app="scanner"] .app-icon{
  --rs-app-icon:none!important;
  color:#e8fbff!important;
  background-image:none!important;
  background:
    radial-gradient(circle at center,transparent 0 27%,rgba(225,252,255,.94) 28% 31%,transparent 32% 100%),
    linear-gradient(145deg,#38c4ec,#2351b8)!important;
  border:1px solid rgba(215,249,255,.30)!important;
  font-size:31px!important;
}

/* App interior navigation lives BELOW the global status bar. */
.app-shell.view.active{
  display:flex;
  flex-direction:column;
  padding-top:42px!important;
  overflow:hidden;
}
.app-shell .app-header{
  flex:0 0 58px;
  height:58px;
  padding:8px 14px;
  gap:12px;
  background:rgba(5,14,23,.93);
  border-top:1px solid rgba(125,193,239,.06);
  border-bottom:1px solid rgba(125,193,239,.13);
  box-shadow:0 8px 22px rgba(0,0,0,.15);
}
.app-shell .app-content{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  padding:16px 18px 30px;
  overflow:auto;
}
.nav-back{
  min-width:82px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:13px;
  border:1px solid rgba(95,190,255,.20);
  background:rgba(38,111,171,.14);
  color:#dff6ff;
  cursor:pointer;
}
.nav-back span{font-size:25px;line-height:1;margin-top:-2px}
.nav-back b{font-size:10px;letter-spacing:.02em}
.nav-back:hover{background:rgba(46,135,205,.24);border-color:rgba(95,190,255,.40)}
.app-header-actions{align-items:center}
.esc-hint{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 8px;
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:#8fa9bc;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* World Scanner launch/result surface. Actual targeting happens with tablet hidden. */
.scanner-instructions{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 15px;
  border:1px solid rgba(88,201,255,.17);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(20,52,75,.68),rgba(6,18,29,.72));
  color:#9fc9dc;
  font-size:10px;
}
.scanner-instructions b{color:#6fdcff;letter-spacing:.14em;font-size:9px}
.scanner-instructions span:nth-child(2){flex:1}
kbd{
  display:inline-grid;
  place-items:center;
  min-width:23px;
  height:21px;
  padding:0 5px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.24);
  font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
}

/* Garage photo parity with RS Phone. */
.tablet-vehicle-photo{
  position:relative;
  height:118px;
  margin:-3px -3px 11px;
  overflow:hidden;
  border-radius:13px;
  background:
    radial-gradient(circle at 50% 110%,rgba(87,192,255,.18),transparent 45%),
    linear-gradient(145deg,#132335,#071019);
  border:1px solid rgba(126,196,239,.12);
}
.tablet-vehicle-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:5px 9px 1px;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.48));
}
.tablet-vehicle-photo>span{
  display:none;
  position:absolute;
  inset:0;
  place-items:center;
  color:#668196;
  font-size:8px;
  letter-spacing:.12em;
}
.tablet-vehicle-photo.fallback>span{display:grid}
.vehicle-card{overflow:hidden}

@media(max-height:760px){
  #desktop.view.active{padding:46px 22px 72px}
  .desktop-grid{gap:7px}
  .panel{min-height:70px;padding:8px 10px}
  .hero-time{font-size:23px}
  #app-grid.app-grid{margin-top:7px;padding:0 5px}
  .app-page{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(54px,1fr));gap:4px 12px}
  .app-page .app-tile{min-height:58px;gap:3px}
  .app-page .app-icon{width:54px;height:54px;border-radius:16px}
  .app-page .app-label{font-size:8px}
  .dock{height:54px;bottom:7px}
  .dock .app-icon{width:41px;height:41px;border-radius:12px}
  .home-page-dots{bottom:65px}
  .esc-hint{display:none}
}


/* v0.6.1 privileged RS suite apps */
.app-tile[data-app="buildertools"] .app-icon{--rs-app-icon:url("img/icons/icon-work.png");--g1:#42d4ff;--g2:#145c9e;color:transparent}
.app-tile[data-app="admin"] .app-icon{--rs-app-icon:url("img/icons/icon-settings.png");--g1:#ff6a78;--g2:#8e2634;color:transparent}
.tool-launch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.tool-launch-card{min-height:190px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(28,55,90,.78),rgba(6,16,28,.88));display:flex;flex-direction:column;justify-content:space-between;gap:18px;box-shadow:0 16px 34px rgba(0,0,0,.22)}
.tool-launch-card h3{margin:5px 0 6px;font-size:20px}.tool-launch-card p{margin:0;color:var(--muted);line-height:1.5}
.privileged-note{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(88,201,255,.22);background:rgba(27,105,150,.12);border-radius:14px}
.privileged-note b{font-size:10px;letter-spacing:.12em;color:#7edcff}.privileged-note span{font-size:11px;color:var(--muted)}
@media(max-width:850px){.tool-launch-grid{grid-template-columns:1fr}}

/* Embedded DevTool / WorldBuilder / AdminMenu host. One rs-tablet ui_page owns
   all privileged tools; only the active module iframe receives input. */
#internal-tool-host{position:fixed;inset:0;display:none;background:transparent;z-index:999999;pointer-events:none}
#internal-tool-host.active{display:block;pointer-events:auto}
#internal-tool-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;display:none}
#internal-tool-host iframe.active{display:block}


/* ============================================================
   RS TABLET v0.7.0 ULTIMATE VISUAL / THEME PASS
   ============================================================ */
:root{--accent:#82d6ff;--panel-hi:rgba(255,255,255,.09)}
#tablet{
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.58));
}
#tablet::before{
  content:"";position:absolute;inset:3.8% 3.9% 7.7% 3.9%;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 7%,rgba(0,0,0,0) 70%,rgba(0,0,0,.16));
  box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.08), inset 0 0 0 8px rgba(9,14,20,.88), 0 18px 34px rgba(0,0,0,.38);
  pointer-events:none; z-index:2;
}
#screen{
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 32px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
  --status-glass:rgba(10,16,29,.38);
}
#screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 15% 10%, rgba(255,255,255,.09), transparent 26%), linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%);
}
.wallpaper-layer{transition:background .35s ease, filter .35s ease, transform .35s ease}
#screen[data-wallpaper="air-blue"] .wallpaper-layer{background:url("img/wallpaper-air-blue.webp") center/cover no-repeat}
#screen[data-wallpaper="air-black"] .wallpaper-layer{background:url("img/wallpaper-air-black.webp") center/cover no-repeat}
#screen[data-wallpaper="air-silver"] .wallpaper-layer{background:url("img/wallpaper-air-silver.webp") center/cover no-repeat}
#screen[data-wallpaper="air-gold"] .wallpaper-layer{background:url("img/wallpaper-air-gold.webp") center/cover no-repeat}
#screen[data-wallpaper="aurora"] .wallpaper-layer{background:url("img/wallpaper-aurora.webp") center/cover no-repeat}
#screen[data-wallpaper="ocean"] .wallpaper-layer{background:url("img/wallpaper-ocean.webp") center/cover no-repeat}
#screen[data-wallpaper="mint"] .wallpaper-layer{background:url("img/wallpaper-mint.webp") center/cover no-repeat}
#screen[data-wallpaper="orchid"] .wallpaper-layer{background:url("img/wallpaper-orchid.webp") center/cover no-repeat}
#screen[data-wallpaper="rose"] .wallpaper-layer{background:url("img/wallpaper-rose.webp") center/cover no-repeat}
#screen[data-wallpaper="survivor"] .wallpaper-layer{background:url("img/wallpaper-survivor.webp") center/cover no-repeat}
#statusbar,.app-header,.panel,.dock,.sheet,.lock-card,.control-tile,.card,.notification{backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.status-pill,.icon-btn,.unlock-btn,.control-tile,.app-tile,.dock .app-tile,.wall-card,.theme-card,.game-card,.list-row,.card{transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease}
.status-pill:hover,.icon-btn:hover,.unlock-btn:hover,.control-tile:hover,.wall-card:hover,.theme-card:hover,.game-card:hover,.list-row:hover,.card:hover{transform:translateY(-2px);filter:brightness(1.04)}
.view{opacity:0;transform:translateY(8px) scale(.986);pointer-events:none;display:block!important;visibility:hidden;transition:opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s}
.view.active{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.view.entering{animation:tabletViewWipe .28s cubic-bezier(.2,.8,.2,1)}
@keyframes tabletViewWipe{0%{clip-path:inset(0 0 100% 0 round 18px);opacity:.45}100%{clip-path:inset(0 0 0 0 round 18px);opacity:1}}
#lockscreen{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-end;padding:54px 22px 36px}
.lock-glow{width:72%;height:34%;top:13%;background:radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 67%);filter:blur(16px);animation:floatGlow 9s ease-in-out infinite}
@keyframes floatGlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.lock-time{font-size:62px;letter-spacing:-2px;text-shadow:0 6px 28px rgba(0,0,0,.34)}
.lock-date{font-size:14px;color:rgba(235,242,250,.84)}
.lock-card{width:min(82%,440px);margin-top:28px;background:linear-gradient(180deg,rgba(16,24,35,.62),rgba(16,24,35,.44));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1)}
.unlock-btn{min-width:210px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px rgba(0,0,0,.22);position:relative;overflow:hidden}
.unlock-btn::before{content:"";position:absolute;inset:1px auto 1px -25%;width:22%;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:unlockSweep 3s ease-in-out infinite}
@keyframes unlockSweep{0%,100%{transform:translateX(0);opacity:0}14%{opacity:.9}38%{transform:translateX(420%);opacity:0}}
.desktop-grid,.app-grid,.app-content,.control-grid{position:relative;z-index:2}
.app-page.active .app-tile{animation:iconCascade .36s cubic-bezier(.2,.8,.2,1) both}
.app-page.active .app-tile:nth-child(1){animation-delay:.01s}.app-page.active .app-tile:nth-child(2){animation-delay:.03s}.app-page.active .app-tile:nth-child(3){animation-delay:.05s}.app-page.active .app-tile:nth-child(4){animation-delay:.07s}.app-page.active .app-tile:nth-child(5){animation-delay:.09s}.app-page.active .app-tile:nth-child(6){animation-delay:.11s}.app-page.active .app-tile:nth-child(7){animation-delay:.13s}.app-page.active .app-tile:nth-child(8){animation-delay:.15s}.app-page.active .app-tile:nth-child(9){animation-delay:.17s}.app-page.active .app-tile:nth-child(10){animation-delay:.19s}.app-page.active .app-tile:nth-child(11){animation-delay:.21s}.app-page.active .app-tile:nth-child(12){animation-delay:.23s}
@keyframes iconCascade{0%{opacity:0;transform:translateY(10px) scale(.95)}100%{opacity:1;transform:none}}
.app-tile{border-radius:18px;padding:4px 0 0}
.app-tile:hover{transform:translateY(-3px)}
.app-icon{display:grid;place-items:center;overflow:hidden;background:rgba(255,255,255,.03);box-shadow:0 12px 22px rgba(0,0,0,.26)}
.theme-app-art{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.16))}
.mini-app-icon{padding:0;background:transparent;box-shadow:none;overflow:hidden}
.mini-app-icon .theme-app-art{width:100%;height:100%}
.glyph-fallback{color:#fff!important;background:linear-gradient(145deg,var(--accent),#6b76ff)!important;font-size:18px;text-shadow:0 1px 0 rgba(0,0,0,.18)}
.dock{background:linear-gradient(180deg,rgba(16,25,37,.44),rgba(16,25,37,.28));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08)}
.dock .app-tile .app-label{display:none}
.dock .app-tile .app-icon{width:56px;height:56px;border-radius:18px}
.panel{border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08)}
.hero-widget{background:linear-gradient(180deg,rgba(20,28,44,.66),rgba(16,26,38,.44));}
.app-shell{background:linear-gradient(180deg,rgba(8,13,22,.74),rgba(7,14,22,.9));}
.app-shell.view.active .app-header{animation:headerSlide .22s cubic-bezier(.2,.8,.2,1)}
.app-shell.view.active .app-content{animation:contentSlide .25s cubic-bezier(.2,.8,.2,1)}
@keyframes headerSlide{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:none}}
@keyframes contentSlide{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.app-content{scroll-behavior:smooth}
.app-content::-webkit-scrollbar{width:6px}.app-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.wall-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.wall-card,.theme-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:16px;padding:8px;text-align:left;color:#eef4ff}
.wall-card.active,.theme-card.active{border-color:color-mix(in srgb, var(--accent) 72%, white 5%);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), 0 12px 24px rgba(0,0,0,.18)}
.wall-preview{display:block;width:100%;aspect-ratio:1/1;border-radius:12px;margin-bottom:8px;background-size:cover!important;background-position:center!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.wall-air-blue{background:url("img/wallpaper-air-blue.webp") center/cover no-repeat}.wall-air-black{background:url("img/wallpaper-air-black.webp") center/cover no-repeat}.wall-air-silver{background:url("img/wallpaper-air-silver.webp") center/cover no-repeat}.wall-air-gold{background:url("img/wallpaper-air-gold.webp") center/cover no-repeat}.wall-aurora{background:url("img/wallpaper-aurora.webp") center/cover no-repeat}.wall-ocean{background:url("img/wallpaper-ocean.webp") center/cover no-repeat}.wall-mint{background:url("img/wallpaper-mint.webp") center/cover no-repeat}.wall-orchid{background:url("img/wallpaper-orchid.webp") center/cover no-repeat}.wall-rose{background:url("img/wallpaper-rose.webp") center/cover no-repeat}.wall-survivor{background:url("img/wallpaper-survivor.webp") center/cover no-repeat}
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme-card{display:flex;align-items:center;gap:10px;min-height:72px}
.theme-badge{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:800;letter-spacing:.06em;background:linear-gradient(145deg,var(--accent),rgba(255,255,255,.18));box-shadow:0 8px 18px rgba(0,0,0,.18)}
.theme-badge.zombie{background:linear-gradient(145deg,#8effb6,#23a46e)}
.theme-badge.rs{background:linear-gradient(145deg,#8fdcff,#6f79ff)}
.setting-row.stack{align-items:flex-start;display:flex;flex-direction:column;gap:10px}
.setting-group h3{font-size:14px;margin-bottom:12px}
.setting-row span,.setting-row b,.setting-group p,.app-label,.widget-label,.lock-hint{color:#e8eef9}
.setting-row,.widget-label,.app-label,.notification p,.card p,.list-row small,.sensor-strip,.lock-hint{font-size:11px}
#screen.reduced-motion *, #screen.reduced-motion *::before, #screen.reduced-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (max-width:1100px){.wall-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* RS Tablet v0.7.1 Recon Center */
.recon-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.recon-summary>div{padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.recon-summary span{display:block;font-size:9px;letter-spacing:.08em;color:#8fa3b8}.recon-summary strong{display:block;margin-top:4px;font-size:16px;color:#f5f8ff}.recon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.recon-card{border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:13px;background:linear-gradient(180deg,rgba(15,24,35,.82),rgba(8,15,24,.72));box-shadow:0 14px 28px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.recon-card:hover{transform:translateY(-2px);border-color:rgba(130,214,255,.32);box-shadow:0 18px 34px rgba(0,0,0,.27)}.recon-card.offline{opacity:.68}.recon-card header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.recon-card header strong,.recon-card header small{display:block}.recon-card header small{margin-top:3px;font-size:9px;color:#91a5b8}.signal-pill{padding:5px 8px;border-radius:999px;background:rgba(82,228,166,.12);border:1px solid rgba(82,228,166,.22);font-size:10px;font-weight:800;color:#7ff0bd}.signal-pill.weak{background:rgba(255,177,84,.12);border-color:rgba(255,177,84,.24);color:#ffc06c}.recon-meter{height:4px;background:rgba(255,255,255,.07);border-radius:999px;margin:10px 0;overflow:hidden}.recon-meter i{display:block;height:100%;background:linear-gradient(90deg,#4ee0a6,#67c9ff,#8e8cff);box-shadow:0 0 10px rgba(103,201,255,.35)}.recon-card footer{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.map-pin.recon span{background:#7ee6ff;box-shadow:0 0 0 4px rgba(126,230,255,.15),0 0 12px rgba(126,230,255,.65)}
@media(max-width:1050px){.recon-grid{grid-template-columns:1fr}.recon-summary{grid-template-columns:1fr 1fr}}

.theme-badge.custom{background:linear-gradient(135deg,#ff9a54,#ff4fa0);color:#fff;}


/* RS Tablet v0.7.6 launcher/sheet regression guard.
   A late generic z-index rule previously changed .dock and .sheet from absolute
   to relative positioning. That collapsed the paged launcher and moved Control
   Center/Notifications into normal document flow. Keep these structural layers
   anchored to the tablet screen regardless of later visual rules. */
#desktop.view.active > #dock.dock{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:10px!important;
  transform:translateX(-50%)!important;
  z-index:24!important;
}
#screen > .sheet{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  z-index:50!important;
  width:min(360px,82%)!important;
  overflow-y:auto;
  overflow-x:hidden;
}
#screen > .left-sheet{left:0!important;right:auto!important}
#screen > .right-sheet{right:0!important;left:auto!important}
#desktop.view.active > #app-grid.app-grid{
  position:relative!important;
  flex:1 1 0!important;
  min-height:0!important;
}
.theme-app-glyph{display:none;width:100%;height:100%;place-items:center;font-size:.48em;font-weight:850;color:#fff}
.glyph-fallback .theme-app-glyph{display:grid}