/* Agency Phone - AgencyOS26.3-Style Stylesheet */
/* (c) Agency Scripts - All Rights Reserved */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@300;400;500;600;700&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: transparent;
    overflow: hidden;
    font-family: 'Inter', system-ui, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   THEME VARIABLES (Light Mode Default)
   ═══════════════════════════════════════════════════════ */

/* Light mode keeps the same premium shell while the screen content stays bright. */
html[data-theme="light"] #phone-frame {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 10%, rgba(0, 0, 0, 0.18) 100%),
        var(--frame-bg);
    border-color: var(--shell-border-light);
    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.48),
        0 0 0 1px var(--shell-inner-ring),
        0 0 0 3px var(--shell-outer-ring-light),
        inset 0 1px 0 var(--shell-top-highlight-light),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        inset 1px 0 0 var(--shell-left-highlight),
        inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] {
    --bg-primary: #f2f2f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e5e5ea;
    --bg-grouped: #f2f2f7;
    --bg-elevated: #ffffff;
    --text-primary: #000000;
    --text-secondary: #3c3c43;
    --text-tertiary: #8e8e93;
    --text-quaternary: #c7c7cc;
    --separator: rgba(60, 60, 67, 0.12);
    --fill-primary: rgba(120, 120, 128, 0.2);
    --fill-secondary: rgba(120, 120, 128, 0.16);
    --fill-tertiary: rgba(120, 120, 128, 0.12);
    --header-bg: rgba(242, 242, 247, 0.78);
    --header-border: rgba(60, 60, 67, 0.12);
    --card-bg: rgba(255, 255, 255, 0.72);
    --card-border: rgba(60, 60, 67, 0.08);
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
    --glass-border: 0.5px solid rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --input-bg: rgba(120, 120, 128, 0.12);
    --app-screen-bg: #f2f2f7;
    --frame-bg: #f2f2f7;
    --island-bg: #000;
    --home-clock-color: #fff;
    --home-date-color: rgba(255, 255, 255, 0.76);
    --label-color: rgba(0, 0, 0, 0.7);
    --icon-label-color: rgba(0, 0, 0, 0.8);
    --badge-border: #f2f2f7;
    --modal-bg: rgba(242, 242, 247, 0.95);
    --modal-text: #000;
    --empty-state-color: rgba(0, 0, 0, 0.3);
    --toggle-bg: #e9e9eb;
    --toggle-active: #34c759;
    --store-item-bg: #ffffff;
    --notif-bg: rgba(255, 255, 255, 0.95);
    --notif-text: #000;
    --calc-bg: #f2f2f7;
    --calc-btn-bg: #ffffff;
    --calc-btn-color: #000;
    --calc-func-bg: #d1d1d6;
    --calc-func-color: #000;
    --home-indicator-clearance: 58px;
    --app-content-bottom-clearance: calc(var(--home-indicator-clearance) + 24px);
    --app-content-edge-spacer: calc(var(--home-indicator-clearance) + 18px);
}

#phone-frame {
    --bg-primary: #f2f2f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e5e5ea;
    --bg-grouped: #f2f2f7;
    --bg-elevated: #ffffff;
    --text-primary: #000000;
    --text-secondary: #3c3c43;
    --text-tertiary: #8e8e93;
    --text-quaternary: #c7c7cc;
    --separator: rgba(60, 60, 67, 0.12);
    --fill-primary: rgba(120, 120, 128, 0.2);
    --fill-secondary: rgba(120, 120, 128, 0.16);
    --fill-tertiary: rgba(120, 120, 128, 0.12);
    --header-bg: rgba(242, 242, 247, 0.78);
    --header-border: rgba(60, 60, 67, 0.12);
    --card-bg: rgba(255, 255, 255, 0.72);
    --card-border: rgba(60, 60, 67, 0.08);
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
    --glass-border: 0.5px solid rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --input-bg: rgba(120, 120, 128, 0.12);
    --app-screen-bg: #f2f2f7;
    --frame-bg: #f2f2f7;
    --island-bg: #000;
    --home-clock-color: #fff;
    --home-date-color: rgba(255, 255, 255, 0.76);
    --label-color: rgba(0, 0, 0, 0.7);
    --icon-label-color: rgba(0, 0, 0, 0.8);
    --badge-border: #f2f2f7;
    --modal-bg: rgba(242, 242, 247, 0.95);
    --modal-text: #000;
    --empty-state-color: rgba(0, 0, 0, 0.3);
    --toggle-bg: #e9e9eb;
    --toggle-active: #34c759;
    --store-item-bg: #ffffff;
    --notif-bg: rgba(255, 255, 255, 0.95);
    --notif-text: #000;
    --calc-bg: #f2f2f7;
    --calc-btn-bg: #ffffff;
    --calc-btn-color: #000;
    --calc-func-bg: #d1d1d6;
    --calc-func-color: #000;
}

/* Dark Mode Overrides */
#phone-frame.dark-mode {
    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;
    --bg-grouped: #000000;
    --bg-elevated: #1c1c1e;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    --text-quaternary: rgba(255, 255, 255, 0.2);
    --separator: rgba(255, 255, 255, 0.08);
    --fill-primary: rgba(255, 255, 255, 0.12);
    --fill-secondary: rgba(255, 255, 255, 0.08);
    --fill-tertiary: rgba(118, 118, 128, 0.24);
    --header-bg: rgba(28, 28, 30, 0.72);
    --header-border: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(28, 28, 30, 0.65);
    --card-border: rgba(255, 255, 255, 0.08);
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    --glass-border: 0.5px solid rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --input-bg: rgba(255, 255, 255, 0.06);
    --app-screen-bg: #000000;
    --frame-bg: #000000;
    --island-bg: #000;
    --home-clock-color: #fff;
    --home-date-color: rgba(255, 255, 255, 0.6);
    --label-color: rgba(255, 255, 255, 0.7);
    --icon-label-color: rgba(255, 255, 255, 0.85);
    --badge-border: #000;
    --modal-bg: rgba(58, 58, 60, 0.97);
    --modal-text: #fff;
    --empty-state-color: rgba(255, 255, 255, 0.3);
    --toggle-bg: #39393d;
    --toggle-active: #34c759;
    --store-item-bg: #1c1c1e;
    --notif-bg: rgba(44, 44, 46, 0.95);
    --notif-text: #fff;
    --calc-bg: #000;
    --calc-btn-bg: rgba(255, 255, 255, 0.12);
    --calc-btn-color: #fff;
    --calc-func-bg: rgba(255, 255, 255, 0.2);
    --calc-func-color: #fff;
}

/* ═══════════════════════════════════════════════════════
   PHONE CONTAINER & FRAME (AgencyOS26.3 style)
   ═══════════════════════════════════════════════════════ */

#phone-container {
    --phone-scale: 1;
    --phone-pos-x: 0px;
    --phone-pos-y: 0px;
    --device-accent-rgb: 208, 217, 228;
    --shell-border: rgba(215, 222, 232, 0.8);
    --shell-border-light: rgba(232, 237, 244, 0.94);
    --shell-inner-ring: rgba(48, 55, 66, 0.98);
    --shell-outer-ring: rgba(214, 220, 230, 0.9);
    --shell-outer-ring-light: rgba(228, 234, 242, 0.98);
    --shell-top-highlight: rgba(255, 255, 255, 0.3);
    --shell-top-highlight-light: rgba(255, 255, 255, 0.38);
    --shell-bottom-shadow: rgba(0, 0, 0, 0.32);
    --shell-left-highlight: rgba(255, 255, 255, 0.14);
    --shell-right-shadow: rgba(0, 0, 0, 0.18);
    --button-start: #8f98a7;
    --button-mid: #dbe2ea;
    --button-end: #8f98a7;
    --button-highlight: rgba(255, 255, 255, 0.82);
    --button-inner-shadow: rgba(62, 71, 84, 0.42);
    --button-shadow-hard: rgba(74, 84, 99, 0.3);
    --button-shadow-soft: rgba(160, 172, 190, 0.2);
    --action-button-start: var(--button-start);
    --action-button-mid: var(--button-mid);
    --action-button-end: var(--button-end);
    --action-button-highlight: rgba(255, 255, 255, 0.82);
    --action-button-glow: rgba(184, 196, 214, 0.24);

    position: fixed;
    right: calc(2.5vw + var(--phone-pos-x));
    bottom: calc(2.5vh + var(--phone-pos-y));
    z-index: 1000;
    transform: translateY(120%) scale(0.9);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.3s ease,
        right 0.3s ease,
        bottom 0.3s ease;
    will-change: transform, opacity;
    isolation: isolate;
}

#phone-container[data-frame-finish="silver"] {
    --device-accent-rgb: 219, 228, 236;
    --shell-border: rgba(213, 222, 232, 0.88);
    --shell-border-light: rgba(236, 242, 248, 0.96);
    --shell-inner-ring: rgba(68, 78, 92, 0.84);
    --shell-outer-ring: rgba(224, 231, 239, 0.92);
    --shell-outer-ring-light: rgba(238, 244, 250, 0.98);
    --shell-top-highlight: rgba(255, 255, 255, 0.34);
    --shell-top-highlight-light: rgba(255, 255, 255, 0.44);
    --shell-left-highlight: rgba(255, 255, 255, 0.2);
    --shell-right-shadow: rgba(64, 76, 92, 0.14);
    --button-start: #cfd7e0;
    --button-mid: #f5f8fc;
    --button-end: #c5ced8;
    --button-highlight: rgba(255, 255, 255, 0.96);
    --button-inner-shadow: rgba(94, 108, 126, 0.22);
    --button-shadow-hard: rgba(100, 114, 133, 0.22);
    --button-shadow-soft: rgba(208, 218, 229, 0.24);
    --action-button-start: #d5dde6;
    --action-button-mid: #fafcff;
    --action-button-end: #cad3dd;
    --action-button-highlight: rgba(255, 255, 255, 0.98);
    --action-button-glow: rgba(205, 215, 226, 0.3);
}

#phone-container[data-frame-finish="graphite"] {
    --device-accent-rgb: 97, 106, 120;
    --shell-border: rgba(88, 95, 106, 0.82);
    --shell-border-light: rgba(106, 113, 124, 0.88);
    --shell-inner-ring: rgba(26, 31, 38, 0.96);
    --shell-outer-ring: rgba(102, 110, 121, 0.64);
    --shell-outer-ring-light: rgba(116, 125, 137, 0.76);
    --shell-top-highlight: rgba(255, 255, 255, 0.1);
    --shell-top-highlight-light: rgba(255, 255, 255, 0.12);
    --shell-left-highlight: rgba(255, 255, 255, 0.04);
    --shell-right-shadow: rgba(0, 0, 0, 0.26);
    --button-start: #0b0d10;
    --button-mid: #2a3038;
    --button-end: #0b0d10;
    --action-button-highlight: rgba(255, 255, 255, 0.18);
    --action-button-glow: rgba(22, 27, 34, 0.28);
}

#phone-container[data-frame-finish="starlight"] {
    --device-accent-rgb: 228, 214, 191;
    --shell-border: rgba(224, 214, 194, 0.84);
    --shell-border-light: rgba(236, 226, 206, 0.92);
    --shell-inner-ring: rgba(120, 109, 90, 0.72);
    --shell-outer-ring: rgba(232, 223, 205, 0.72);
    --shell-outer-ring-light: rgba(241, 232, 214, 0.9);
    --shell-top-highlight: rgba(255, 248, 235, 0.24);
    --shell-top-highlight-light: rgba(255, 252, 243, 0.3);
    --shell-left-highlight: rgba(255, 247, 231, 0.14);
    --shell-right-shadow: rgba(98, 84, 63, 0.16);
    --button-start: #5a5348;
    --button-mid: #908675;
    --button-end: #5a5348;
    --action-button-highlight: rgba(255, 250, 239, 0.72);
    --action-button-glow: rgba(215, 194, 158, 0.22);
}

#phone-container[data-frame-finish="blue"] {
    --device-accent-rgb: 132, 159, 197;
    --shell-border: rgba(116, 140, 174, 0.84);
    --shell-border-light: rgba(134, 159, 194, 0.9);
    --shell-inner-ring: rgba(40, 60, 88, 0.86);
    --shell-outer-ring: rgba(162, 187, 222, 0.68);
    --shell-outer-ring-light: rgba(178, 204, 238, 0.84);
    --shell-top-highlight: rgba(231, 242, 255, 0.18);
    --shell-top-highlight-light: rgba(238, 247, 255, 0.24);
    --shell-left-highlight: rgba(232, 242, 255, 0.1);
    --shell-right-shadow: rgba(21, 34, 54, 0.18);
    --button-start: #11223b;
    --button-mid: #415d86;
    --button-end: #11223b;
    --action-button-highlight: rgba(234, 244, 255, 0.36);
    --action-button-glow: rgba(55, 86, 128, 0.24);
}

#phone-container[data-frame-finish="desert"] {
    --device-accent-rgb: 193, 155, 122;
    --shell-border: rgba(176, 137, 103, 0.84);
    --shell-border-light: rgba(196, 156, 120, 0.92);
    --shell-inner-ring: rgba(96, 63, 37, 0.86);
    --shell-outer-ring: rgba(212, 176, 142, 0.68);
    --shell-outer-ring-light: rgba(227, 191, 157, 0.84);
    --shell-top-highlight: rgba(255, 238, 221, 0.18);
    --shell-top-highlight-light: rgba(255, 243, 229, 0.24);
    --shell-left-highlight: rgba(255, 238, 221, 0.1);
    --shell-right-shadow: rgba(76, 45, 22, 0.2);
    --button-start: #4a2c17;
    --button-mid: #8b5c3b;
    --button-end: #4a2c17;
    --action-button-highlight: rgba(255, 239, 221, 0.32);
    --action-button-glow: rgba(120, 74, 42, 0.24);
}

#phone-container[data-frame-finish="green"] {
    --device-accent-rgb: 116, 185, 146;
    --shell-border: rgba(103, 168, 128, 0.84);
    --shell-border-light: rgba(131, 196, 155, 0.92);
    --shell-inner-ring: rgba(34, 79, 54, 0.9);
    --shell-outer-ring: rgba(171, 224, 191, 0.7);
    --shell-outer-ring-light: rgba(190, 239, 208, 0.86);
    --shell-top-highlight: rgba(235, 255, 242, 0.24);
    --shell-top-highlight-light: rgba(244, 255, 248, 0.3);
    --shell-left-highlight: rgba(230, 255, 238, 0.12);
    --shell-right-shadow: rgba(17, 58, 36, 0.22);
    --button-start: #1c4a33;
    --button-mid: #4e8a67;
    --button-end: #1c4a33;
    --action-button-highlight: rgba(240, 255, 246, 0.34);
    --action-button-glow: rgba(34, 90, 60, 0.24);
}

#phone-container[data-frame-finish="pink"] {
    --device-accent-rgb: 209, 135, 170;
    --shell-border: rgba(189, 113, 149, 0.84);
    --shell-border-light: rgba(214, 141, 176, 0.92);
    --shell-inner-ring: rgba(98, 40, 67, 0.9);
    --shell-outer-ring: rgba(240, 191, 214, 0.72);
    --shell-outer-ring-light: rgba(250, 208, 228, 0.88);
    --shell-top-highlight: rgba(255, 238, 246, 0.24);
    --shell-top-highlight-light: rgba(255, 245, 250, 0.3);
    --shell-left-highlight: rgba(255, 233, 244, 0.12);
    --shell-right-shadow: rgba(71, 18, 42, 0.22);
    --button-start: #5a2340;
    --button-mid: #a45f83;
    --button-end: #5a2340;
    --action-button-highlight: rgba(255, 240, 247, 0.34);
    --action-button-glow: rgba(103, 37, 68, 0.24);
}

#phone-container[data-frame-finish="violet"] {
    --device-accent-rgb: 150, 138, 216;
    --shell-border: rgba(123, 111, 191, 0.84);
    --shell-border-light: rgba(151, 140, 221, 0.92);
    --shell-inner-ring: rgba(51, 45, 96, 0.9);
    --shell-outer-ring: rgba(203, 194, 248, 0.72);
    --shell-outer-ring-light: rgba(220, 212, 255, 0.88);
    --shell-top-highlight: rgba(243, 239, 255, 0.24);
    --shell-top-highlight-light: rgba(249, 246, 255, 0.3);
    --shell-left-highlight: rgba(240, 235, 255, 0.12);
    --shell-right-shadow: rgba(27, 21, 64, 0.22);
    --button-start: #2d2757;
    --button-mid: #6e66a8;
    --button-end: #2d2757;
    --action-button-highlight: rgba(245, 240, 255, 0.34);
    --action-button-glow: rgba(53, 44, 101, 0.24);
}

#phone-container::before,
#phone-container::after {
    display: none;
}

#phone-container.visible {
    transform: translateY(0) scale(var(--phone-scale));
    opacity: 1;
}

/* Notification peek: phone slides up partially when notification arrives while closed */
#phone-container.peek {
    transform: translateY(82%) scale(var(--phone-scale, 1));
    opacity: 1;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}

#phone-container.peek.visible {
    transform: translateY(0) scale(var(--phone-scale, 1));
    pointer-events: auto;
}

#phone-frame.notif-bump {
    animation: phoneNotifBump 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes phoneNotifBump {
    0% {
        transform: translateY(0);
    }

    45% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }
}

#phone-frame {
    width: 380px;
    height: 780px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 10%, rgba(0, 0, 0, 0.18) 100%),
        var(--frame-bg);
    background-clip: padding-box;
    border-radius: 52px;
    border: 1.35px solid var(--shell-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.48),
        0 0 0 1px var(--shell-inner-ring),
        0 0 0 4px var(--shell-outer-ring),
        0 10px 26px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 var(--shell-top-highlight),
        inset 0 -1px 0 var(--shell-bottom-shadow),
        inset 1px 0 0 var(--shell-left-highlight),
        inset -1px 0 0 var(--shell-right-shadow);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    top: -24px;
}

#phone-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 0 0 4px rgba(255, 255, 255, 0.03),
        inset 0 18px 22px rgba(255, 255, 255, 0.05),
        inset 0 -18px 28px rgba(0, 0, 0, 0.16);
}

/* ── Pictogram Livestream (Web Preview) ──
   Standalone web version has no game camera. We hide all screen content
   and let the dark overlay background simulate a camera view.
   #call-screen and #modal-overlay stay functional. */

#phone-frame.pg-live-overlay-active #screen-container {
    background: transparent !important;
}

#phone-frame.pg-live-overlay-active .screen {
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
}

#phone-frame.pg-live-overlay-active #pg-live-full-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#phone-frame.pg-live-overlay-active #call-screen.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: linear-gradient(180deg, #1c1c1e 0%, #000 100%) !important;
}

#phone-frame.pg-live-overlay-active #dynamic-island {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#phone-frame.pg-live-overlay-active #status-bar {
    opacity: 1 !important;
}

#phone-frame.pg-live-overlay-active #home-indicator {
    opacity: 0;
    pointer-events: none;
}

#phone-frame.pg-live-overlay-active #modal-overlay.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hardware Exterior Buttons */
.hw-btn {
    position: absolute;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 22%),
        linear-gradient(90deg, var(--button-start) 0%, var(--button-mid) 50%, var(--button-end) 100%);
    box-shadow:
        inset 1px 0 2px var(--button-highlight),
        inset -1px 0 3px var(--button-inner-shadow),
        -2px 0 4px var(--button-shadow-hard),
        -4px 0 8px var(--button-shadow-soft);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    z-index: 10;
    transition: transform 0.1s ease, width 0.1s ease, left 0.1s ease, right 0.1s ease;
    cursor: pointer;
}

.hw-btn::before,
.hw-btn::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.hw-btn::before {
    inset: 1px 1px 1px 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(255, 255, 255, 0.08) 24%,
            transparent 58%,
            rgba(0, 0, 0, 0.24) 100%);
    opacity: 0.95;
}

.hw-btn::after {
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.02) 40%,
            rgba(0, 0, 0, 0.28));
    opacity: 0.55;
}

#phone-container.game-mode-active .hw-btn {
    pointer-events: none;
    opacity: 0.28;
}

.hw-btn:active {
    transform: scaleX(0.5);
}

.hw-btn-action {
    width: 7px;
    height: 35px;
    left: -7px;
    top: 140px;
    background: linear-gradient(90deg, var(--action-button-start) 0%, var(--action-button-mid) 50%, var(--action-button-end) 100%);
    box-shadow:
        inset 1px 0 2px var(--action-button-highlight),
        inset -1px 0 2px var(--button-inner-shadow),
        -2px 0 5px var(--action-button-glow),
        -4px 0 8px rgba(0, 0, 0, 0.5);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.hw-btn-action.silent {
    background: linear-gradient(90deg, var(--button-start) 0%, var(--button-mid) 50%, var(--button-end) 100%);
    box-shadow:
        inset 1px 0 2px var(--button-highlight),
        inset -1px 0 3px var(--button-inner-shadow),
        -2px 0 4px var(--button-shadow-hard),
        -4px 0 8px var(--button-shadow-soft);
}

.hw-btn-vol-up {
    width: 7px;
    height: 55px;
    left: -7px;
    top: 200px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.hw-btn-vol-down {
    width: 7px;
    height: 55px;
    left: -7px;
    top: 270px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.hw-btn-power {
    width: 7px;
    height: 85px;
    right: -7px;
    top: 220px;
    box-shadow:
        inset -1px 0 2px var(--button-highlight),
        inset 1px 0 3px var(--button-inner-shadow),
        2px 0 4px var(--button-shadow-hard),
        4px 0 8px var(--button-shadow-soft);
    transform-origin: left;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#hw-volume-hud {
    position: absolute;
    left: 15px;
    top: 184px;
    width: 64px;
    min-height: 138px;
    padding: 10px 8px 12px;
    background: linear-gradient(145deg, rgba(28, 30, 42, 0.5), rgba(14, 18, 30, 0.28));
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border-radius: 28px;
    z-index: 900;
    overflow: hidden;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateX(-16px) scale(0.82) translateZ(0);
    opacity: 0;
    transition:
        transform 0.56s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.36s ease,
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        min-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    will-change: transform, width, opacity;
}

#hw-volume-hud.visible {
    transform: translateX(0) scale(1) translateZ(0);
    opacity: 1;
}

#hw-volume-hud.compact {
    width: 44px;
    min-height: 94px;
    padding: 8px 6px 10px;
    border-radius: 22px;
}

#hw-volume-hud.compact .hw-volume-shell {
    gap: 8px;
}

#hw-volume-hud.compact .hw-volume-meta {
    opacity: 0;
    max-height: 0;
    transform: scale(0.9);
    overflow: hidden;
}

.hw-volume-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 100%;
    transition: gap 0.42s ease;
}

.hw-volume-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 15px;
}

.hw-volume-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    transition:
        opacity 0.34s ease,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        max-height 0.42s ease;
}

#hw-volume-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

#hw-volume-value {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.hw-volume-track {
    position: relative;
    width: 10px;
    height: 74px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    transition:
        height 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s ease,
        opacity 0.28s ease;
}

#hw-volume-hud.compact .hw-volume-track {
    height: 60px;
}

#hw-volume-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(230, 230, 230, 0.96));
    border-radius: 999px;
    transition: height 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: height;
}

#os-install-celebration {
    position: absolute;
    inset: 0;
    z-index: 2090;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 18%, rgba(90, 200, 250, 0.22), transparent 34%),
        radial-gradient(circle at 80% 24%, rgba(175, 82, 222, 0.26), transparent 34%),
        radial-gradient(circle at 50% 82%, rgba(255, 159, 10, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(8, 11, 20, 0.74), rgba(8, 11, 20, 0.9));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    transition: opacity 0.42s ease;
}

#os-install-celebration.active {
    opacity: 1;
    pointer-events: auto;
}

#os-install-celebration.closing {
    opacity: 0;
}

.os-install-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.72;
    animation: osInstallOrbFloat 6.6s ease-in-out infinite;
}

.os-install-orb-a {
    top: 72px;
    left: 30px;
    width: 148px;
    height: 148px;
    background: rgba(90, 200, 250, 0.26);
}

.os-install-orb-b {
    top: 112px;
    right: 12px;
    width: 132px;
    height: 132px;
    background: rgba(175, 82, 222, 0.24);
    animation-delay: -1.6s;
}

.os-install-orb-c {
    bottom: 108px;
    left: 50%;
    width: 172px;
    height: 172px;
    transform: translateX(-50%);
    background: rgba(255, 159, 10, 0.16);
    animation-delay: -3s;
}

.os-install-card {
    position: relative;
    width: calc(100% - 46px);
    max-width: 314px;
    padding: 30px 24px 26px;
    border-radius: 32px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    overflow: hidden;
    transform: translateY(24px) scale(0.94);
    transition: transform 0.56s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}

#os-install-celebration.active .os-install-card {
    transform: translateY(0) scale(1);
}

.os-install-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.os-install-badge {
    position: relative;
    z-index: 1;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.os-install-logo-wrap {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    margin-top: 2px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.09));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: osInstallLogoPulse 2.8s ease-in-out infinite;
}

.os-install-logo {
    width: 52px;
    height: auto;
    filter: brightness(0) invert(1);
}

.os-install-title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.9px;
    line-height: 1.08;
}

.os-install-subtitle {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.76);
    font-size: 15px;
    line-height: 1.45;
    max-width: 230px;
}

.os-install-shimmer {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 6px;
    margin-top: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.os-install-shimmer span {
    position: absolute;
    inset: 0 auto 0 -35%;
    width: 45%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
    animation: osInstallShimmer 1.8s linear infinite;
}

@keyframes osInstallOrbFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -10px, 0) scale(1.06);
    }
}

@keyframes osInstallLogoPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 32px rgba(0, 0, 0, 0.18);
    }

    50% {
        transform: scale(1.04);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 38px rgba(90, 200, 250, 0.18);
    }
}

@keyframes osInstallShimmer {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(300%);
    }
}

#power-boot-overlay {
    position: absolute;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.34s ease;
}

#power-boot-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.power-boot-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform: translateY(18px) scale(0.96);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

#power-boot-overlay.active .power-boot-shell {
    transform: translateY(0) scale(1);
}

#power-boot-logo {
    width: 88px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

.power-boot-bar {
    width: 142px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    transition: opacity 0.2s ease, transform 0.3s ease;
}

#power-boot-progress {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
    transition: width 0.14s linear;
}

#power-boot-overlay.shutting-down .power-boot-bar {
    opacity: 0;
    transform: scaleX(0.88);
}

#power-boot-overlay.shutting-down #power-boot-logo {
    opacity: 0.84;
    transform: scale(0.9);
    transition: transform 0.26s ease, opacity 0.24s ease;
}

#power-shutdown-overlay {
    position: absolute;
    inset: 0;
    z-index: 2095;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 20px 30px;
    background: rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

#power-shutdown-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.power-shutdown-panel {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: translateY(-18px) scale(0.96);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

#power-shutdown-overlay.active .power-shutdown-panel {
    transform: translateY(0) scale(1);
}

.power-shutdown-title {
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    align-self: flex-start;
    margin-left: 14px;
}

.power-shutdown-subtext {
    width: 100%;
    max-width: 320px;
    margin-top: -6px;
    padding-left: 14px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.25;
}

.power-shutdown-emergency-stack {
    width: 100%;
    max-width: 320px;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.power-shutdown-track {
    --power-slide-progress: 0;
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 64px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 34px rgba(0, 0, 0, 0.26);
    overflow: hidden;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.power-shutdown-track.pass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.18);
}

.power-shutdown-track.emergency {
    background: linear-gradient(135deg, rgba(255, 69, 58, 0.26), rgba(255, 59, 48, 0.14));
    border-color: rgba(255, 107, 98, 0.26);
}

.power-shutdown-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 59, 48, 0.3), rgba(255, 59, 48, 0));
    opacity: calc(0.16 + (var(--power-slide-progress) * 0.3));
    pointer-events: none;
}

.power-shutdown-track.pass::before {
    background: linear-gradient(90deg, rgba(255, 55, 95, 0.26), rgba(255, 255, 255, 0.05));
}

.power-shutdown-track.emergency::before {
    background: linear-gradient(90deg, rgba(255, 149, 0, 0.34), rgba(255, 59, 48, 0.05));
}

.power-shutdown-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 72px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.power-shutdown-thumb {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 26px;
    background: linear-gradient(135deg, #ff6b62, #ff3b30);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 16px 30px rgba(255, 59, 48, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.power-shutdown-thumb.pass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 244, 248, 0.82));
    color: #ff375f;
    box-shadow: 0 16px 30px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.power-shutdown-thumb.emergency {
    background: linear-gradient(135deg, #ff9f0a, #ff453a);
    box-shadow: 0 16px 30px rgba(255, 120, 42, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.power-shutdown-thumb-sos {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.power-shutdown-thumb:active {
    cursor: grabbing;
}

.power-shutdown-pass-hint,
.power-shutdown-emergency-hint {
    width: 100%;
    margin-top: -2px;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 1.25;
}

.power-shutdown-cancel-wrap {
    margin-top: auto;
    padding-top: 28px;
    padding-bottom: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.power-shutdown-cancel {
    width: 74px;
    height: 74px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.96);
    font-size: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.power-shutdown-cancel-label {
    color: rgba(255, 255, 255, 0.94);
    font-size: 15px;
    font-weight: 600;
}

#power-shutdown-overlay.confirmed .power-shutdown-panel {
    transform: translateY(-10px) scale(0.985);
    opacity: 0.84;
}

/* Light mode frame overrides - frame stays dark like a real Agency device */
#phone-frame:not(.dark-mode) {
    border-color: var(--shell-border-light);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.46),
        0 0 0 1.5px var(--shell-inner-ring),
        0 0 0 4.5px var(--shell-outer-ring-light),
        0 0 0 5.5px rgba(22, 24, 28, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.24),
        0 0 80px rgba(0, 0, 0, 0.24);
}

/* assistant-style purple gradient border when AgencyAI is active */
#phone-frame.agencyai-active-border {
    border-color: rgba(114, 98, 221, 0.9);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1.5px #1a1a1d,
        0 0 0 4.5px #3a3a40,
        0 0 0 5px #222225,
        inset 0 0 0 1px rgba(175, 82, 222, 0.26),
        inset 0 0 20px rgba(124, 84, 228, 0.28);
}

#phone-frame.agencyai-active-border:not(.dark-mode) {
    border-color: rgba(114, 98, 221, 0.85);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.12),
        0 0 0 1.5px #1a1a1d,
        0 0 0 4.5px #3a3a40,
        0 0 0 5px #d0d0d4,
        inset 0 0 0 1px rgba(88, 86, 214, 0.2),
        inset 0 0 18px rgba(114, 98, 221, 0.22);
}

@keyframes agencyAiBorderPulse {

    0%,
    100% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.6),
            0 0 0 3px rgba(88, 86, 214, 0.7),
            0 0 30px rgba(175, 82, 222, 0.4),
            0 0 60px rgba(88, 86, 214, 0.2),
            inset 0 0 0 1px rgba(175, 82, 222, 0.15);
    }

    33% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.6),
            0 0 0 3px rgba(175, 82, 222, 0.8),
            0 0 35px rgba(88, 86, 214, 0.5),
            0 0 70px rgba(175, 82, 222, 0.25),
            inset 0 0 0 1px rgba(88, 86, 214, 0.2);
    }

    66% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.6),
            0 0 0 3px rgba(125, 84, 228, 0.75),
            0 0 25px rgba(175, 82, 222, 0.35),
            0 0 55px rgba(88, 86, 214, 0.15),
            inset 0 0 0 1px rgba(125, 84, 228, 0.15);
    }
}

/* ═══════════════════════════════════════════════════════
   DYNAMIC ISLAND (top notch area)
   ═══════════════════════════════════════════════════════ */

#dynamic-island {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 126px;
    height: 36px;
    background: #000;
    border-radius: 24px;
    z-index: 960;
    transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1),
        height 0.5s cubic-bezier(0.32, 0.72, 0, 1),
        background 0.4s ease,
        box-shadow 0.35s ease,
        border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Camera Lens (realistic) */
.di-camera {
    position: absolute;
    top: 50%;
    left: calc(50% - 25px);
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease;
    z-index: 4;
}

.di-camera-lens {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #050a12;
    box-shadow: none;
}

.di-camera-ring {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(10, 10, 18, 0.8);
}

/* IR Sensor & Dot Projector */
.di-sensor {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease;
    z-index: 4;
}

.di-sensor-ir {
    left: calc(50% + 22px);
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #1a1025, #0d0816);
    box-shadow: 0 0 0 1px rgba(40, 20, 60, 0.4);
}

.di-sensor-dot {
    left: calc(50% + 33px);
    width: 4px;
    height: 4px;
    background: #0a0a12;
    box-shadow: 0 0 0 0.5px rgba(30, 30, 50, 0.5);
}

.di-cutout-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 30px;
    border-radius: 999px;
    background: #000;
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.84);
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), width 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}

.di-faceid-border {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    transform-origin: center center;
    width: 126px;
    height: 36px;
    pointer-events: none;
    z-index: 963;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}

.di-faceid-path {
    fill: none;
    stroke-width: 2.5;
    stroke-dasharray: 310;
    stroke-dashoffset: 310;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(52, 199, 89, 0.42));
}

.di-faceid-border.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.di-faceid-border.active .di-faceid-path {
    animation: diFaceIdTrace 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes diFaceIdTrace {
    0% {
        stroke-dashoffset: 310;
        stroke: #34c759;
    }

    80% {
        stroke-dashoffset: 0;
        stroke: #30d158;
    }

    100% {
        stroke-dashoffset: 0;
        stroke: #34c759;
    }
}

.di-faceid-border.success {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(0.84);
}

.di-faceid-border.success .di-faceid-path {
    stroke-dashoffset: 0;
    stroke: #34c759;
    animation: diFaceIdPulse 0.6s ease-in-out;
}

@keyframes diFaceIdPulse {
    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(52, 199, 89, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(52, 199, 89, 0.82));
    }
}

/* App Info Display (inside expanded island) */
.di-app-info {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    white-space: nowrap;
}

.di-app-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    flex-shrink: 0;
}

.di-app-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.2px;
}

/* App Active State */
#dynamic-island.app-active {
    width: 180px;
    height: 36px;
}

#dynamic-island.app-active .di-app-info {
    opacity: 1;
    transform: scale(1);
}

#dynamic-island.app-active .di-camera,
#dynamic-island.app-active .di-sensor {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Call Active State */
#dynamic-island.call-active {
    width: 220px;
    height: 38px;
    background: #0a1a0a;
    animation: diCallPulse 2s ease-in-out infinite;
}

#dynamic-island.call-active .di-camera,
#dynamic-island.call-active .di-sensor {
    opacity: 0;
}

#dynamic-island.call-active .di-call-info {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.di-call-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
}

.di-call-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #34c759;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.di-call-timer {
    color: #34c759;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-grow: 1;
    text-align: center;
}

.di-call-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 18px;
}

.di-call-waveform span {
    display: block;
    width: 3px;
    background: #34c759;
    border-radius: 1.5px;
    animation: diWaveform 1.2s ease-in-out infinite alternate;
}

.di-call-waveform span:nth-child(1) {
    animation-delay: 0.0s;
    height: 8px;
}

.di-call-waveform span:nth-child(2) {
    animation-delay: 0.2s;
    height: 16px;
}

.di-call-waveform span:nth-child(3) {
    animation-delay: 0.4s;
    height: 10px;
}

.di-call-waveform span:nth-child(4) {
    animation-delay: 0.6s;
    height: 18px;
}

.di-call-waveform span:nth-child(5) {
    animation-delay: 0.8s;
    height: 6px;
}

#dynamic-island.music-active {
    --di-music-core-width: 78px;
    --di-music-core-height: 30px;
    --di-music-left-width: 50px;
    --di-music-right-width: 70px;
    --di-music-pod-gap: 2px;
    width: 208px;
    height: 40px;
    background: linear-gradient(180deg, rgba(8, 8, 11, 0.99), rgba(0, 0, 0, 0.98));
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

#dynamic-island.music-active::before,
#dynamic-island.music-active::after {
    display: none;
}

#dynamic-island.music-active>* {
    z-index: 1;
}

#dynamic-island.music-active .di-cutout-core {
    width: var(--di-music-core-width);
    height: var(--di-music-core-height);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86);
    z-index: 3;
}

#dynamic-island.music-active .di-music-info {
    display: block;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

#dynamic-island.music-active .di-camera,
#dynamic-island.music-active .di-sensor {
    opacity: 0;
    z-index: 4;
}

#dynamic-island.music-active.expanded {
    --di-music-left-width: 52px;
    --di-music-right-width: 70px;
    --di-music-pod-gap: 2px;
    width: 314px;
    height: 274px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(6, 6, 9, 0.98), rgba(0, 0, 0, 0.98));
    border-radius: 42px;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 44px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

#dynamic-island.music-active.expanded::before {
    content: '';
    display: block;
    position: absolute;
    inset: 1px;
    border-radius: 41px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 22%, transparent 54%),
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.08), transparent 30%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

#dynamic-island.music-active.expanded::after {
    display: none;
}

#dynamic-island.music-active.expanded .di-camera,
#dynamic-island.music-active.expanded .di-sensor,
#dynamic-island.music-active.expanded .di-cutout-core {
    opacity: 0;
}

#dynamic-island.music-active.expanded .di-music-pod {
    position: relative;
}

.di-game-mode {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(4px) scale(0.9);
    pointer-events: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 2;
}

.di-game-mode i {
    color: #9fe2ff;
    font-size: 12px;
    text-shadow: 0 0 12px rgba(124, 213, 255, 0.45);
}

#dynamic-island.game-mode-active {
    width: 236px;
    height: 40px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(44, 104, 255, 0.44), rgba(66, 202, 255, 0.2), rgba(175, 82, 222, 0.26));
    border: 0.5px solid rgba(255, 255, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 10px 34px rgba(46, 98, 255, 0.24),
        0 4px 16px rgba(175, 82, 222, 0.2);
    backdrop-filter: blur(24px) saturate(195%);
    -webkit-backdrop-filter: blur(24px) saturate(195%);
    animation: diGameGlassIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#dynamic-island.game-mode-active::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 52px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.18));
    opacity: 0.66;
    pointer-events: none;
    z-index: 0;
}

#dynamic-island.game-mode-active>* {
    z-index: 1;
}

#dynamic-island.game-mode-active .di-camera,
#dynamic-island.game-mode-active .di-sensor,
#dynamic-island.game-mode-active .di-app-info,
#dynamic-island.game-mode-active .di-call-info,
#dynamic-island.game-mode-active .di-music-info {
    opacity: 0;
    pointer-events: none;
}

#dynamic-island.game-mode-active .di-game-mode {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes diGameGlassIn {
    from {
        transform: translateX(-50%) scale(0.92);
        filter: saturate(130%);
    }

    to {
        transform: translateX(-50%) scale(1);
        filter: saturate(100%);
    }
}

.di-music-info {
    position: absolute;
    inset: 0;
    display: none;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 2;
}

.di-music-compact {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 2;
}

.di-music-pod {
    position: relative;
    top: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
}

.di-music-pod-left {
    right: auto;
    width: auto;
}

.di-music-pod-right {
    left: auto;
    width: auto;
    justify-content: flex-end;
    padding: 0;
}

.di-music-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.di-music-compact-copy,
.di-music-waveform-compact {
    transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), max-width 0.26s ease;
}

.di-music-compact-copy {
    min-width: 0;
    flex: 1;
    opacity: 1;
    transform: translateY(0);
}

.di-music-compact-title,
.di-music-compact-artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.di-music-compact-title {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.di-music-compact-artist {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}

.di-music-waveform-compact {
    flex-shrink: 0;
    opacity: 1;
    transform: translateY(0) scale(1);
}

#dynamic-island.music-active:not(.expanded) .di-music-compact-copy {
    display: none;
}

#dynamic-island.music-active:not(.expanded) .di-music-cover {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 10px;
}

#dynamic-island.music-active:not(.expanded) .di-music-waveform-compact {
    width: 34px;
    justify-content: flex-end;
}

#dynamic-island.music-active:not(.expanded) .di-music-waveform-compact>div {
    gap: 3px;
}

#dynamic-island.music-active:not(.expanded) .di-music-waveform-compact span {
    width: 4px;
}

.di-music-expanded-panel {
    position: absolute;
    inset: 0;
    padding: 68px 18px 18px;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1;
}

#dynamic-island.music-active.expanded .di-music-expanded-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#dynamic-island.music-active.expanded .di-music-compact {
    opacity: 0;
    transform: translateY(-8px) scale(0.94);
    pointer-events: none;
}

#dynamic-island.music-active.expanded .di-music-expanded-panel {
    padding: 22px 24px 32px;
}

.di-music-expanded-top {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 42px;
    gap: 14px;
    align-items: center;
}

#dynamic-island.music-active.expanded .di-music-expanded-top {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 44px;
    gap: 14px;
    align-items: center;
    text-align: left;
}

#dynamic-island.music-active.expanded .di-music-expanded-copy {
    width: auto;
    padding-top: 0;
}

#dynamic-island.music-active.expanded .di-music-expanded-title {
    font-size: 17px;
    line-height: 1.08;
}

#dynamic-island.music-active.expanded .di-music-expanded-artist {
    margin-top: 4px;
    font-size: 13px;
}

#dynamic-island.music-active.expanded .di-music-expanded-cover {
    display: flex;
    width: 82px;
    height: 82px;
    border-radius: 22px;
}

#dynamic-island.music-active.expanded .di-music-waveform-expanded {
    display: flex;
    width: 44px;
    height: 36px;
    justify-self: end;
}

#dynamic-island.music-active.expanded .di-music-progress-row {
    margin-top: 18px;
    grid-template-columns: 42px minmax(0, 1fr) 48px;
}

#dynamic-island.music-active.expanded .di-music-progress-track,
#dynamic-island.music-active.expanded .di-music-progress-fill {
    height: 10px;
}

#dynamic-island.music-active.expanded .di-music-progress-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.74);
}

#dynamic-island.music-active.expanded .di-music-actions-expanded {
    margin-top: 26px;
    grid-template-columns: 34px 52px 68px 52px 34px;
    gap: 16px;
    padding: 0 6px;
}

#dynamic-island.music-active.expanded .di-music-btn-panel,
#dynamic-island.music-active.expanded .di-music-btn-panel-side {
    background: transparent;
    border: none;
    box-shadow: none;
}

#dynamic-island.music-active.expanded .di-music-btn-panel {
    width: 52px;
    height: 52px;
    border-radius: 20px;
    font-size: 32px;
}

#dynamic-island.music-active.expanded .di-music-btn-panel-main {
    width: 68px;
    height: 68px;
    border-radius: 24px;
    font-size: 44px;
}

#dynamic-island.music-active.expanded .di-music-btn-panel-side {
    width: 34px;
    height: 34px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.72);
}

#dynamic-island.music-active.expanded .di-music-btn-panel.active,
#dynamic-island.music-active.expanded .di-music-btn-panel-side.active {
    background: transparent;
    color: #fff;
}

.di-music-expanded-cover {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fc3c44, #f42c6c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 12px 26px rgba(0, 0, 0, 0.26);
}

.di-music-expanded-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.di-music-expanded-copy {
    min-width: 0;
}

.di-music-expanded-title {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.di-music-expanded-artist {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.di-music-progress-row {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 46px;
    gap: 10px;
    align-items: center;
}

.di-music-progress-time {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.di-music-progress-time-right {
    text-align: right;
}

.di-music-progress-shell {
    position: relative;
    height: 16px;
    display: flex;
    align-items: center;
}

.di-music-progress-track,
.di-music-progress-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 8px;
    border-radius: 999px;
    transform: translateY(-50%);
}

.di-music-progress-track {
    right: 0;
    background: rgba(255, 255, 255, 0.18);
}

.di-music-progress-fill {
    width: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
}

.di-music-actions-expanded {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 42px 48px 64px 48px 42px;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.di-music-btn {
    border: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.di-music-btn:active {
    transform: scale(0.92);
}

.di-music-btn i {
    pointer-events: none;
}

.di-music-btn-panel {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 18px;
}

.di-music-btn-panel-main {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 24px;
}

.di-music-btn-panel-side {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.92);
}

.di-music-btn-panel.active,
.di-music-btn-panel-side.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.di-music-cover {
    width: 25px;
    height: 25px;
    min-width: 25px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fc3c44, #f42c6c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.di-music-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.di-music-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
}

.di-music-waveform > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.di-music-waveform span {
    display: block;
    width: 4px;
    background: rgba(255, 255, 255, 0.84);
    border-radius: 999px;
    animation: diWaveform 0.82s ease-in-out infinite alternate;
}

.di-music-waveform-compact span:nth-child(1),
.di-music-waveform-expanded span:nth-child(1) {
    animation-delay: 0s;
    height: 10px;
}

.di-music-waveform-compact span:nth-child(2),
.di-music-waveform-expanded span:nth-child(2) {
    animation-delay: 0.16s;
    height: 16px;
}

.di-music-waveform-compact span:nth-child(3),
.di-music-waveform-expanded span:nth-child(3) {
    animation-delay: 0.28s;
    height: 22px;
}

.di-music-waveform-compact span:nth-child(4),
.di-music-waveform-expanded span:nth-child(4) {
    animation-delay: 0.12s;
    height: 14px;
}

.di-music-waveform-compact span:nth-child(5),
.di-music-waveform-expanded span:nth-child(5) {
    animation-delay: 0.24s;
    height: 9px;
}

.di-music-waveform-compact > div {
    gap: 3px;
}

.di-music-waveform-compact span {
    width: 3px;
}

.di-music-waveform-expanded {
    justify-self: end;
    width: 42px;
    height: 34px;
}

#dynamic-island.music-paused .di-music-waveform span,
.di-music-waveform.paused span {
    animation-play-state: paused;
    opacity: 0.42;
    transform: scaleY(0.52);
}

#dynamic-island.music-dismissed {
    opacity: 0.94;
}

@keyframes diWaveform {
    0% {
        transform: scaleY(0.32);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes diCallPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.2);
    }

    50% {
        box-shadow: 0 0 10px 3px rgba(52, 199, 89, 0.1);
    }
}

/* Island collapse animation */
#dynamic-island.collapsing {
    animation: diCollapse 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes diCollapse {
    0% {
        width: 180px;
    }

    40% {
        width: 116px;
    }

    70% {
        width: 132px;
    }

    100% {
        width: 126px;
    }
}

/* ═══════════════════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════════════════ */

#status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 30px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    z-index: 500;
    flex-shrink: 0;
    pointer-events: none;
}

#status-icons {
    display: flex;
    gap: 5px;
    font-size: 12px;
    align-items: center;
    color: #fff;
}

#status-icons i {
    opacity: 0.9;
}

#status-time {
    transition: opacity 0.22s ease, transform 0.22s ease;
}

html[data-theme="light"] #status-time,
html[data-theme="light"] #status-icons i {
    color: #000 !important;
}

/* ═══════════════════════════════════════════════════════
   SCREEN SYSTEM (smooth AgencyOS transitions)
   ═══════════════════════════════════════════════════════ */

#screen-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform, opacity;
    transform: translate3d(100%, 0, 0);
    opacity: 1;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--app-screen-bg);
    z-index: 10;
    /* Premium background effect */
    background: linear-gradient(165deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
}

.screen.app-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

/* app-closing animation is defined later with @keyframes appClose */

/* AgencyOS-style pop/fade up animation when opening app from home */
.screen.app-opening {
    transform: translate3d(0, 14px, 0) scale(0.965);
    opacity: 0;
    pointer-events: none;
    transition: none;
    /* Instant reset before animation starts */
}

.screen.active {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 20;
    /* Active screen is on top of returning screen elements */
}

.screen.slide-out-left {
    transform: translate3d(-18%, 0, 0) scale(0.985);
    opacity: 0.9;
    pointer-events: none;
    box-shadow: none;
    z-index: 5;
    /* Pushed to the background under the active screen */
}

.screen.slide-out-right {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
    pointer-events: none;
    z-index: 30;
    /* Sliding away to the right, stays strictly ABOVE the new active screen */
}

/* Home screen doesn't slide in from right */
#home-screen {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

#home-screen.slide-out-left {
    transform: translate3d(0, 0, 0) scale(0.965);
    opacity: 0.86;
    pointer-events: none;
}

.screen.home-close-underlay {
    display: flex;
    pointer-events: none;
    z-index: 18;
    animation: homeUnderlayIn 0.38s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    will-change: transform, opacity;
    transition: none !important;
}

@keyframes homeUnderlayIn {
    0% {
        transform: translate3d(0, 0, 0) scale(0.965);
        opacity: 0.86;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════
   HOME SCREEN
   ═══════════════════════════════════════════════════════ */

#home-screen {
    background: transparent !important;
    padding: 56px 20px 20px;
    align-items: center;
    overflow-y: auto;
}

#home-screen::-webkit-scrollbar {
    width: 0;
}

#home-clock {
    font-size: 68px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: -3.5px;
    margin-top: 6px;
    line-height: 1;
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease, transform 0.3s ease;
    position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    border: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(214, 231, 255, 0.74));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 12px 28px rgba(8, 18, 48, 0.18),
        0 0 22px rgba(255, 255, 255, 0.12);
    overflow: visible;
}

/* Edit mode: show delete button on clock */
.editing #home-clock::after {
    content: '\f057';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 18px;
    color: #ff3b30;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#home-date {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 6px;
    margin-bottom: 8px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: 0 8px 18px rgba(8, 18, 48, 0.14);
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease, transform 0.3s ease;
}

/* Home Screen Widgets (now integrated into app grid) */
#home-widgets {
    display: none !important;
}

/* Widget inside app grid - spans 2 columns */
.app-page .hw-widget-grid-item {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    touch-action: none;
}

.app-page .hw-widget-grid-item .hw-widget {
    flex: none;
    width: 100%;
    min-height: auto;
    max-width: none;
}

.hw-widget {
    border-radius: 18px;
    padding: 12px 14px;
    background: var(--card-bg, #fff);
    border: 0.5px solid var(--card-border, rgba(60, 60, 67, 0.08));
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    position: relative;
}

.hw-widget:active {
    transform: scale(0.96);
}

/* Small widget (in grid context) */
.hw-widget.hw-small {
    min-height: 80px;
    width: 100%;
}

/* Medium widget (full width) */
.hw-widget.hw-medium {
    min-height: 80px;
    width: 100%;
}

/* Widget grid item wiggle animation */
.hw-widget-grid-item.wiggle {
    animation: appWiggle 0.25s ease-in-out infinite alternate;
}

.hw-widget-grid-item.wiggle:nth-child(even) {
    animation-delay: 0.1s;
    animation-direction: alternate-reverse;
}

.hw-widget-grid-item.drag-over .hw-widget {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hw-widget-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.hw-widget-icon {
    font-size: 13px;
    color: var(--text-tertiary);
}

.hw-widget-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hw-widget-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.hw-widget-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Weather widget specific */
.hw-weather-icon {
    font-size: 28px;
    margin-right: 4px;
}

.hw-weather-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Music widget specific */
.hw-music-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hw-music-art {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--fill-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-quaternary);
    overflow: hidden;
    flex-shrink: 0;
}

.hw-music-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-music-info {
    min-width: 0;
    flex: 1;
}

.hw-music-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hw-music-title-muted {
    color: var(--text-tertiary);
}

.hw-music-artist {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AgencyOS26.3-style Dock */
#home-dock {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 18px;
    padding: 16px 12px 14px;
    margin: 6px 4px 10px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.dock-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.dock-icon:active {
    transform: scale(0.88);
}

.dock-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.dock-icon:active .dock-icon-circle {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dock-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.2px;
}

#home-os-label {
    margin-top: auto;
    padding: 10px 0 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-quaternary);
    letter-spacing: 1px;
    text-transform: uppercase;
    transform: translateY(6px);
}

#app-pages-container {
    width: 100%;
    overflow: hidden;
    flex: 1;
    position: relative;
    touch-action: pan-y;
}

#app-pages-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    height: 100%;
    will-change: transform;
}

.app-page {
    min-width: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 12px;
    padding: 0 4px;
    align-content: start;
}

#page-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 2px;
}

.page-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.page-dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

#app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 12px;
    width: 100%;
    padding: 0 4px;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    position: relative;
    touch-action: none;
}

.app-icon.icon-intro {
    animation: appIconIn 0.4s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.app-icon:active:not(.wiggle) {
    transform: scale(0.82);
}

@keyframes appIconIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.app-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
    margin-bottom: 6px;
    position: relative;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: #000;
    /* Deep black base for perfect rounding */
}


#phone-frame.dark-mode .app-icon-circle {
    background: #080808;
    border-color: rgba(255, 255, 255, 0.05);
}

.app-icon-label {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0px 6px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--badge-border);
}

/* Home Screen Edit Mode (wiggle) */
.app-icon.wiggle {
    animation: appWiggle 0.25s ease-in-out infinite alternate;
}

.app-icon.wiggle:nth-child(even) {
    animation-delay: 0.1s;
    animation-direction: alternate-reverse;
}

@keyframes appWiggle {
    0% {
        transform: rotate(-1.5deg) scale(1);
    }

    100% {
        transform: rotate(1.5deg) scale(1);
    }
}

.app-icon .app-delete-btn {
    display: none;
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(60, 60, 60, 0.9);
    border: none;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 5;
    backdrop-filter: blur(8px);
}

.app-icon.wiggle .app-delete-btn {
    display: flex;
}

/* Drag-over highlight (for existing folders) */
.app-icon.drag-over .app-icon-circle {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Lifted icon: invisible but keeps grid space */
.app-icon.drag-lifted {
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}

.app-icon.dragging-source {
    opacity: 0.3 !important;
}

.hw-widget-grid-item.dragging-source {
    opacity: 0.32 !important;
}

/* During drag: smooth gap transitions on all icons */
.home-grid-dragging .app-page .app-icon {
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
    animation: none !important;
}

/* Lifted icon should not transition */
.home-grid-dragging .app-page .app-icon.drag-lifted {
    transition: none !important;
}

/* Floating clone */
.dragging-clone {
    will-change: transform, left, top, filter;
    pointer-events: none !important;
    z-index: 11050 !important;
    animation: none !important;
    opacity: 1 !important;
}

.dragging-clone .app-delete-btn {
    display: none !important;
}

/* Folder merge target: scale up with glow */
.app-icon.folder-merge-target .app-icon-circle {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.25s ease;
}

.widget-dragging-clone {
    border-radius: 18px;
}

/* Download Progress Ring */
.app-icon-circle .download-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.app-icon-circle .download-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.app-icon-circle .download-ring circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 3;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.app-icon-circle.downloading {
    position: relative;
}

.app-icon-circle.downloading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 16px;
    animation: downloadDimIn 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes downloadDimIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.app-icon-circle.download-done {
    animation: downloadBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes downloadBounce {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.88);
    }

    50% {
        transform: scale(1.08);
    }

    75% {
        transform: scale(0.96);
    }

    100% {
        transform: scale(1);
    }
}

/* App Download Progress (AgencyOS26.3 Style) */
.app-download-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px) saturate(180%);
    -webkit-backdrop-filter: blur(6px) saturate(180%);
    border-radius: 16px;
    animation: downloadDimIn 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.app-download-progress svg {
    width: 36px;
    height: 36px;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 6px rgba(0, 122, 255, 0.4));
}

.download-progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 3;
}

.download-progress-ring {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 150.8;
    stroke-dashoffset: 150.8;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Pulse glow on the progress ring */
.app-download-progress svg circle.download-progress-ring {
    animation: downloadPulse 2s ease-in-out infinite;
}

@keyframes downloadPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
    }

    50% {
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    }
}

/* ═══════════════════════════════════════════════════════
   GENERIC APP SCREEN
   ═══════════════════════════════════════════════════════ */

.generic-app-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 30px;
    gap: 12px;
}

.generic-app-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.generic-app-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.generic-app-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.5;
    max-width: 260px;
}

#generic-app-body {
    padding: 0 16px 20px;
}

#generic-app-content.generic-game-mode {
    align-items: stretch;
    padding: 0;
    gap: 0;
    background: #000;
    justify-content: center;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    max-height: 100%;
}

#generic-app-content.generic-game-mode .generic-app-hero {
    display: none;
}

#generic-app-content.generic-game-mode #generic-app-body {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

#generic-app-content.generic-game-mode #generic-app-body > * {
    flex: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
}

.generic-casino-stage {
    width: min(100%, 332px);
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 18px 18px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}

.generic-casino-stage--wide {
    width: min(100%, 340px);
}

.generic-casino-reels,
.generic-casino-bets {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.flappy-stage {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #77dfff 0%, #b8f2ff 48%, #d9f0b6 68%, #79c85f 100%);
    touch-action: none;
    user-select: none;
    isolation: isolate;
}

.flappy-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.g2048-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 18px 18px 24px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    touch-action: none;
    user-select: none;
    overflow: hidden;
}

.g2048-shell {
    width: min(100%, 316px);
    margin: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.g2048-head {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.g2048-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.g2048-stat {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-radius: 16px;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.g2048-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: min(100%, 300px);
    margin: 0 auto;
    aspect-ratio: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    border-radius: 24px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
}

.g2048-new {
    margin-top: 4px;
    width: min(100%, 220px);
    padding: 14px 28px;
    border-radius: 18px;
    border: none;
    background: linear-gradient(135deg, #f59563, #e07840);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    font-family: Inter, sans-serif;
    box-shadow: 0 16px 34px rgba(240, 125, 72, 0.32);
}

.roulette-stage {
    width: min(100%, 332px);
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 18px 16px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.roulette-wheel-shell {
    position: relative;
    width: 194px;
    height: 194px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 38%, rgba(0, 0, 0, 0.18) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 26px 48px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -8px 18px rgba(0, 0, 0, 0.22);
}

.roulette-wheel-shell.is-spinning {
    animation: rouletteShellPulse 0.9s ease-in-out infinite;
}

.roulette-pointer {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 32px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: linear-gradient(180deg, #fff7cf, #f5c756);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.32));
    z-index: 2;
}

.roulette-wheel-shell.is-spinning .roulette-pointer {
    animation: roulettePointerTick 0.16s ease-in-out infinite alternate;
}

.roulette-wheel {
    position: relative;
    width: 164px;
    height: 164px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0 23%, transparent 24% 100%),
        conic-gradient(from -90deg,
            #34c759 0deg 9.72deg,
            #1b1b1d 9.72deg 19.44deg,
            #ff453a 19.44deg 29.16deg,
            #1b1b1d 29.16deg 38.88deg,
            #ff453a 38.88deg 48.6deg,
            #1b1b1d 48.6deg 58.32deg,
            #ff453a 58.32deg 68.04deg,
            #1b1b1d 68.04deg 77.76deg,
            #ff453a 77.76deg 87.48deg,
            #1b1b1d 87.48deg 97.2deg,
            #ff453a 97.2deg 106.92deg,
            #1b1b1d 106.92deg 116.64deg,
            #ff453a 116.64deg 126.36deg,
            #1b1b1d 126.36deg 136.08deg,
            #ff453a 136.08deg 145.8deg,
            #1b1b1d 145.8deg 155.52deg,
            #ff453a 155.52deg 165.24deg,
            #1b1b1d 165.24deg 174.96deg,
            #ff453a 174.96deg 184.68deg,
            #1b1b1d 184.68deg 194.4deg,
            #ff453a 194.4deg 204.12deg,
            #1b1b1d 204.12deg 213.84deg,
            #ff453a 213.84deg 223.56deg,
            #1b1b1d 223.56deg 233.28deg,
            #ff453a 233.28deg 243deg,
            #1b1b1d 243deg 252.72deg,
            #ff453a 252.72deg 262.44deg,
            #1b1b1d 262.44deg 272.16deg,
            #ff453a 272.16deg 281.88deg,
            #1b1b1d 281.88deg 291.6deg,
            #ff453a 291.6deg 301.32deg,
            #1b1b1d 301.32deg 311.04deg,
            #ff453a 311.04deg 320.76deg,
            #1b1b1d 320.76deg 330.48deg,
            #ff453a 330.48deg 340.2deg,
            #1b1b1d 340.2deg 349.92deg,
            #ff453a 349.92deg 360deg);
    border: 8px solid rgba(17, 17, 18, 0.72);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 18px rgba(0, 0, 0, 0.22);
    will-change: transform;
}

.roulette-wheel-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.roulette-wheel-cap {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff, #d6d6db 58%, #8e8e93 100%);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.roulette-number-badge {
    min-width: 90px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.8px;
}

.roulette-result-text {
    min-height: 40px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
}

.roulette-bet {
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.roulette-bet.active {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    filter: saturate(1.08);
}

@keyframes roulettePointerTick {
    from {
        transform: translateX(-50%) translateY(0);
    }

    to {
        transform: translateX(-50%) translateY(3px);
    }
}

@keyframes rouletteShellPulse {
    0%,
    100% {
        box-shadow:
            0 26px 48px rgba(0, 0, 0, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            inset 0 -8px 18px rgba(0, 0, 0, 0.22);
    }

    50% {
        box-shadow:
            0 30px 56px rgba(0, 0, 0, 0.38),
            0 0 36px rgba(245, 199, 86, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 -8px 18px rgba(0, 0, 0, 0.22);
    }
}

/* ═══════════════════════════════════════════════════════
   AGENCY AI
   ═══════════════════════════════════════════════════════ */

.ai-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-ride-paid {
    margin-left: auto;
    margin-right: 8px;
    padding: 5px 10px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    display: none;
    align-items: center;
    gap: 6px;
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ai-ride-paid.active {
    display: inline-flex;
}

.ai-ride-paid-card {
    margin: 8px 14px 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.16), rgba(88, 86, 214, 0.09));
    border: 0.5px solid rgba(175, 82, 222, 0.22);
    color: rgba(255, 255, 255, 0.88);
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}

.ai-ride-paid-card strong {
    margin-left: auto;
    color: #fff;
    font-size: 14px;
    letter-spacing: -0.2px;
}

.ai-ride-paid-card.active {
    display: flex;
}

.ai-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 20px;
    gap: 10px;
}

.ai-welcome.hidden-ai {
    display: none;
}

.ai-avatar-large {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(145deg, #af52de, #5856d6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(88, 86, 214, 0.4);
    animation: aiGlow 3s ease-in-out infinite;
}

@keyframes aiGlow {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(88, 86, 214, 0.3);
    }

    50% {
        box-shadow: 0 4px 30px rgba(175, 82, 222, 0.5);
    }
}

.ai-welcome-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #af52de, #5856d6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-welcome-sub {
    font-size: 14px;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
    text-align: center;
}

.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    padding: 0 8px;
}

.ai-suggest-btn {
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.12), rgba(88, 86, 214, 0.06));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(175, 82, 222, 0.2);
    border-radius: 18px;
    padding: 8px 14px;
    color: #af52de;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(88, 86, 214, 0.08);
}

.ai-suggest-btn:active {
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.25), rgba(88, 86, 214, 0.15));
    transform: scale(0.95);
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-messages::-webkit-scrollbar {
    width: 0;
}

.ai-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    animation: aiMsgIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes aiMsgIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-msg.user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.85), rgba(0, 100, 220, 0.7));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(0, 122, 255, 0.3);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-msg.ai {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
    border-bottom-left-radius: 4px;
}

#phone-frame:not(.dark-mode) .ai-msg.ai {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Light mode: ensure app screens have solid opaque background */
#phone-frame:not(.dark-mode) .app-screen {
    background: var(--app-screen-bg, #f2f2f7);
}

#phone-frame:not(.dark-mode) .app-header {
    background: var(--header-bg, rgba(242, 242, 247, 0.92));
    border-bottom-color: var(--header-border, rgba(60, 60, 67, 0.12));
}

#phone-frame:not(.dark-mode) .app-content {
    background: var(--bg-primary, #f2f2f7);
}

#phone-frame:not(.dark-mode) #home-bar {
    background: #000;
}

#phone-frame:not(.dark-mode) .phone-notification {
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    border-color: rgba(0, 0, 0, 0.08);
}

#phone-frame:not(.dark-mode) .phone-notification .notif-title {
    color: #000;
}

#phone-frame:not(.dark-mode) .phone-notification .notif-text {
    color: rgba(0, 0, 0, 0.6);
}

#phone-frame:not(.dark-mode) #lock-notification-list .phone-notification {
    border-color: rgba(20, 20, 24, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58));
    box-shadow: 0 10px 28px rgba(20, 20, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#phone-frame:not(.dark-mode) #lock-notification-list .phone-notification .notif-title {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) #lock-notification-list .phone-notification .notif-text {
    color: var(--text-secondary);
}

#phone-frame:not(.dark-mode) .agencyai-overlay {
    background: rgba(242, 242, 247, 0.85);
}

#phone-frame:not(.dark-mode) .agencyai-input input {
    background: rgba(0, 0, 0, 0.06);
    color: #000;
    border-color: rgba(0, 0, 0, 0.1);
}

#phone-frame:not(.dark-mode) .agencyai-input input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

/* Light mode fallback for legacy inline text colors across apps */
#phone-frame:not(.dark-mode) .app-screen :not(button):not(input):not(textarea):not(select)[style*="color:#fff"],
#phone-frame:not(.dark-mode) .app-screen :not(button):not(input):not(textarea):not(select)[style*="color: #fff"],
#phone-frame:not(.dark-mode) .app-screen :not(button):not(input):not(textarea):not(select)[style*="color:#ffffff"],
#phone-frame:not(.dark-mode) .app-screen :not(button):not(input):not(textarea):not(select)[style*="color: #ffffff"] {
    color: var(--text-primary) !important;
}

#phone-frame:not(.dark-mode) .app-screen :not(button):not(input):not(textarea):not(select)[style*="color:rgba(255,255,255"],
#phone-frame:not(.dark-mode) .app-screen :not(button):not(input):not(textarea):not(select)[style*="color: rgba(255,255,255"] {
    color: var(--text-secondary) !important;
}

.ai-msg.ai.typing {
    color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

.ai-typing-dots {
    display: inline-flex;
    gap: 4px;
}

.ai-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary, rgba(255, 255, 255, 0.4));
    animation: aiDot 1.2s infinite;
}

.ai-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes aiDot {

    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    30% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.ai-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 72px;
    background: var(--header-bg, rgba(28, 28, 30, 0.85));
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-top: 0.5px solid var(--separator, rgba(255, 255, 255, 0.1));
    flex-shrink: 0;
}

#ai-input {
    flex: 1;
    background: var(--input-bg, rgba(255, 255, 255, 0.06));
    border: 0.5px solid var(--separator, rgba(255, 255, 255, 0.08));
    border-radius: 20px;
    padding: 10px 16px;
    color: var(--text-primary, #fff);
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    outline: none;
}

#ai-input::placeholder {
    color: var(--text-tertiary, rgba(255, 255, 255, 0.3));
}

#ai-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(175, 82, 222, 0.8), rgba(88, 86, 214, 0.7));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(175, 82, 222, 0.3);
    box-shadow: 0 2px 8px rgba(88, 86, 214, 0.25);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
}

#ai-send-btn:active {
    transform: scale(0.9);
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════
   LIQUID GLASS DESIGN SYSTEM (AgencyOS26.3)
   ═══════════════════════════════════════════════════════ */

.glass {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 50%,
            rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 2px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

.glass-subtle {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.glass-strong {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

/* ═══════════════════════════════════════════════════════
   APP SCREENS (AgencyOS style)
   ═══════════════════════════════════════════════════════ */

.app-screen {
    background: var(--app-screen-bg);
    margin-top: 0;
}

.app-header {
    padding: 68px 16px 12px;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 0.5px solid var(--header-border);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
}

.back-btn {
    background: rgba(0, 122, 255, 0.1);
    border: 0.5px solid rgba(0, 122, 255, 0.15);
    border-radius: 18px;
    color: #007aff;
    font-size: 15px;
    cursor: pointer;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.2s;
    letter-spacing: -0.2px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.back-btn:active {
    opacity: 0.6;
    transform: scale(0.95);
    background: rgba(0, 122, 255, 0.18);
}

.app-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.header-action {
    background: none;
    border: none;
    color: #007aff;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: opacity 0.15s;
}

.header-action:active {
    opacity: 0.5;
}

.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 18px var(--app-content-bottom-clearance);
    -webkit-overflow-scrolling: touch;
    background: var(--bg-primary);
    box-sizing: border-box;
    scroll-padding-bottom: var(--app-content-bottom-clearance);
}

.app-screen .app-content[style*="padding:0"] {
    padding-bottom: var(--app-content-edge-spacer) !important;
    scroll-padding-bottom: var(--app-content-edge-spacer);
}

.app-screen .app-content[style*="padding:0"]::after {
    content: '';
    display: block;
    min-height: var(--app-content-edge-spacer);
    flex: 0 0 var(--app-content-edge-spacer);
}

/* Liquid Glass Card Mixin - used across apps */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 14px;
}

.app-content::-webkit-scrollbar {
    width: 0;
}

/* ═══════════════════════════════════════════════════════
   DIALER
   ═══════════════════════════════════════════════════════ */

#dialer-tabs {
    display: flex;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 2px;
}

.tab-btn {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

#dial-number {
    width: 100%;
    text-align: center;
    font-size: 36px;
    font-weight: 300;
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 0;
    letter-spacing: 2px;
}

#dialpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 8px 20px;
}

.dial-key {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    border-radius: 50%;
    cursor: pointer;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
    will-change: transform;
}

.dial-key:active {
    background: rgba(255, 255, 255, 0.3);
}

#dial-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 12px;
}

#dial-call {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #34c759;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}

#dial-call:active {
    transform: scale(0.9);
}

#dial-backspace {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   CALL SCREEN
   ═══════════════════════════════════════════════════════ */

#call-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #1c1c1e 0%, #000 100%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 40px;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

#call-screen.visible {
    transform: translateY(0);
}

#call-screen.video-mode {
    justify-content: flex-start;
    padding: 28px 16px 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(88, 86, 214, 0.42), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(90, 200, 250, 0.28), transparent 24%),
        radial-gradient(circle at 50% 88%, rgba(255, 92, 110, 0.16), transparent 30%),
        linear-gradient(180deg, #08101f 0%, #03060d 100%);
}

#call-screen.video-mode.incoming-video {
    padding-top: 74px;
}

#call-screen.video-mode.video-connected {
    padding: 62px 0 22px;
    background:
        radial-gradient(circle at 18% 18%, rgba(88, 86, 214, 0.34), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(90, 200, 250, 0.2), transparent 24%),
        radial-gradient(circle at 50% 88%, rgba(255, 92, 110, 0.14), transparent 30%),
        linear-gradient(180deg, #08101f 0%, #03060d 100%);
}

#call-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

#call-screen.video-mode #call-info {
    justify-content: flex-start;
    gap: 10px;
}

#call-video-shell {
    position: relative;
    width: min(100%, 320px);
    height: 388px;
    margin-bottom: 6px;
    border-radius: 34px;
    overflow: hidden;
    transition: height 0.24s ease, transform 0.24s ease;
}

#call-screen.video-mode.incoming-video #call-video-shell {
    width: min(100%, 338px);
    height: 430px;
    margin-bottom: 10px;
}

#call-screen.video-mode.video-connected #call-video-shell {
    width: 100%;
    max-width: none;
    height: calc(100% - 22px);
    margin-bottom: 0;
    border-radius: 0;
}

#call-video-shell.landscape {
    height: 320px;
}

#call-video-remote {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 24% 18%, rgba(90, 200, 250, 0.42), transparent 22%),
        radial-gradient(circle at 76% 82%, rgba(88, 86, 214, 0.4), transparent 28%),
        linear-gradient(160deg, rgba(13, 22, 38, 0.94), rgba(5, 10, 18, 0.98));
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#call-screen.video-mode.video-connected #call-video-remote {
    background:
        radial-gradient(circle at 24% 18%, rgba(90, 200, 250, 0.32), transparent 22%),
        radial-gradient(circle at 76% 82%, rgba(88, 86, 214, 0.34), transparent 28%),
        linear-gradient(160deg, rgba(13, 22, 38, 0.96), rgba(5, 10, 18, 0.98));
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-radius: 0;
}

.call-video-topbar {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    z-index: 2;
}

#call-screen.video-mode.video-connected .call-video-topbar {
    top: 10px;
    left: 14px;
    right: 14px;
}

.call-video-topmain {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.call-video-remote-meta {
    min-width: 0;
}

.call-video-badge {
    position: relative;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-shrink: 0;
}

.call-video-mode-chip {
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#call-video-remote-avatar,
#call-video-local-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    background: linear-gradient(145deg, rgba(88, 86, 214, 0.84), rgba(175, 82, 222, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 30px rgba(88, 86, 214, 0.34);
}

#call-video-remote-avatar {
    width: 164px;
    height: 206px;
    border-radius: 44px;
    font-size: 64px;
    position: relative;
    z-index: 1;
}

#call-screen.video-mode.incoming-video #call-video-remote-avatar {
    width: 154px;
    height: 194px;
    border-radius: 40px;
}

#call-screen.video-mode.video-connected #call-video-remote-avatar,
#call-screen.video-mode.video-connected .call-video-stage-glow {
    opacity: 1;
    visibility: visible;
}

#call-video-shell.landscape #call-video-remote-avatar {
    width: 184px;
    height: 132px;
    border-radius: 34px;
}

#call-video-remote-label {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#call-video-remote-sub {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.call-video-stage-glow {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24), transparent 68%);
    filter: blur(14px);
    bottom: 36px;
    left: calc(50% - 80px);
    opacity: 0.8;
}

#call-video-local {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 118px;
    height: 154px;
    border-radius: 28px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#call-screen.video-mode.incoming-video #call-video-local {
    display: none;
}

#call-screen.video-mode.video-connected #call-video-local {
    right: 14px;
    bottom: 22px;
}

#call-video-shell.landscape #call-video-local {
    height: 136px;
}

.call-video-local-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.call-video-local-chip,
.call-video-local-pill {
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.1);
    border: 0.5px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.84);
}

#call-video-local-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 26px;
}

#call-video-local-label {
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    font-weight: 700;
}

#call-screen.video-mode #call-avatar {
    display: none;
}

#call-screen.video-mode #call-name,
#call-screen.video-mode #call-number,
#call-screen.video-mode #call-status,
#call-screen.video-mode #call-timer {
    display: none;
}

#call-screen.video-mode #call-actions {
    gap: 14px;
    width: 100%;
    justify-content: center;
    padding-bottom: 2px;
    margin-top: auto;
}

#call-screen.video-mode.incoming-video #call-actions {
    margin-top: 12px;
}

#call-screen.video-mode.video-connected #call-actions {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: auto;
    padding: 0;
    margin: 0;
    transform: translateX(-50%);
    z-index: 3;
}

#call-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
}

#call-name {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.5px;
}

#call-number {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
}

#call-status {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

#call-timer {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
}

#call-actions {
    display: flex;
    gap: 50px;
    padding-bottom: 20px;
}

.call-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.call-btn:active {
    transform: scale(0.88);
}

.call-btn.answer {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.8), rgba(48, 209, 88, 0.6));
    border: 0.5px solid rgba(52, 199, 89, 0.4);
}

.call-btn.end {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.8), rgba(215, 50, 40, 0.6));
    border: 0.5px solid rgba(255, 59, 48, 0.4);
}

.call-btn.option {
    background: linear-gradient(135deg, rgba(88, 86, 214, 0.8), rgba(90, 200, 250, 0.56));
    border: 0.5px solid rgba(124, 122, 255, 0.35);
}

.social-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px 18px;
}

.social-card {
    border-radius: 22px;
    padding: 14px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.social-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.social-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
    background: linear-gradient(145deg, #0a84ff, #5856d6);
}

.social-muted {
    color: var(--text-tertiary);
    font-size: 12px;
}

.social-btn {
    border: none;
    border-radius: 14px;
    padding: 12px 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #0a84ff, #5ac8fa);
}

.social-btn.secondary {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.14);
}

.social-input,
.social-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    border-radius: 14px;
    padding: 11px 13px;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.social-textarea {
    min-height: 90px;
    resize: none;
}

/* ═══════════════════════════════════════════════════════
   FACEZOOM
   ═══════════════════════════════════════════════════════ */

#facezoom-content {
    height: 100%;
    overflow-y: auto;
    padding: 14px 12px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background:
        radial-gradient(circle at 18% 0%, rgba(45, 140, 255, 0.14), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(88, 86, 214, 0.12), transparent 26%),
        linear-gradient(180deg, var(--bg-primary, #0b0d12) 0%, var(--bg-secondary, #11131a) 100%);
}

.fz-hero {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fz-hero-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: linear-gradient(145deg, #2d8cff, #6d5cff);
    box-shadow: 0 16px 34px rgba(45, 140, 255, 0.24);
    flex-shrink: 0;
}

.fz-hero-copy {
    flex: 1;
    min-width: 0;
}

.fz-hero-title {
    color: var(--text-primary, #fff);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.45px;
}

.fz-hero-sub {
    margin-top: 4px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 13px;
    line-height: 1.45;
}

.fz-active-card,
.fz-list-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fz-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fz-card-title {
    color: var(--text-primary, #fff);
    font-size: 15px;
    font-weight: 800;
}

.fz-card-sub {
    color: var(--text-tertiary, rgba(255, 255, 255, 0.46));
    font-size: 12px;
    font-weight: 600;
}

.fz-active-row,
.fz-recent-item,
.fz-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.fz-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    background: linear-gradient(145deg, #2d8cff, #6d5cff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.fz-main {
    flex: 1;
    min-width: 0;
}

.fz-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fz-name {
    color: var(--text-primary, #fff);
    font-size: 15px;
    font-weight: 700;
}

.fz-meta,
.fz-number {
    color: var(--text-secondary, rgba(255, 255, 255, 0.66));
    font-size: 12px;
}

.fz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(45, 140, 255, 0.14);
    border: 0.5px solid rgba(45, 140, 255, 0.22);
    color: #8dc1ff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25px;
}

.fz-chip.audio {
    color: #aeb6c8;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.fz-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fz-btn {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease;
}

.fz-btn:active {
    transform: scale(0.92);
}

.fz-btn.video {
    background: linear-gradient(135deg, rgba(45, 140, 255, 0.9), rgba(88, 86, 214, 0.72));
}

.fz-btn.audio {
    background: linear-gradient(135deg, rgba(90, 200, 250, 0.86), rgba(45, 140, 255, 0.7));
}

.fz-btn.end {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.92), rgba(215, 50, 40, 0.72));
}

.fz-wide-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fz-wide-actions .social-btn {
    flex: 1 1 0;
    min-width: 0;
}

.fz-empty {
    padding: 18px 14px;
    border-radius: 18px;
    text-align: center;
    color: var(--text-secondary, rgba(255, 255, 255, 0.62));
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
}

#facezoom-full-overlay,
#facezoom-full-overlay.visible {
    display: none !important;
    pointer-events: none !important;
}

.fz-full-shell {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 16px 36px;
    background: linear-gradient(180deg,
        rgba(15, 15, 20, 0.95) 0%,
        rgba(20, 22, 30, 0.88) 30%,
        rgba(20, 22, 30, 0.88) 70%,
        rgba(10, 10, 15, 0.95) 100%);
}

/* Remote person – main area */
.fz-full-remote {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
}
.fz-full-remote-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(45, 140, 255, 0.3), rgba(88, 86, 214, 0.3));
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.fz-full-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.fz-full-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(45, 140, 255, 0.96), rgba(88, 86, 214, 0.9));
    box-shadow: 0 8px 20px rgba(45, 140, 255, 0.2);
}

.fz-full-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.fz-full-meta {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.fz-full-name {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.fz-full-status {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    line-height: 1.45;
}

/* PiP – local self-view (bottom-right corner) */
.fz-full-pip {
    position: absolute;
    bottom: 100px;
    right: 16px;
    width: 100px;
    height: 140px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(30, 32, 40, 0.95), rgba(20, 22, 28, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    overflow: hidden;
}
.fz-full-pip-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.fz-full-pip-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fz-full-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 12px;
}

.fz-full-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fz-full-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.16s ease, background 0.16s ease;
}

.fz-full-btn:active {
    transform: scale(0.9);
}

.fz-full-btn.end {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.95), rgba(215, 50, 40, 0.85));
    box-shadow: 0 6px 20px rgba(255, 59, 48, 0.3);
}

.fz-full-btn.mute {
    background: rgba(255, 255, 255, 0.08);
}

.fz-full-btn.flip {
    background: rgba(255, 255, 255, 0.08);
}

.fz-loading-state {
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding-top: 48px;
}

.fz-app-shell {
    position: relative;
    min-height: 100%;
}

.fz-app-topbar {
    display: grid;
    grid-template-columns: minmax(78px, 88px) minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fz-app-pill-btn,
.fz-app-circle-btn {
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(37, 37, 43, 0.94), rgba(23, 24, 29, 0.92));
    color: rgba(255, 255, 255, 0.96);
    cursor: pointer;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), background 0.18s ease, border-color 0.18s ease;
}

.fz-app-pill-btn {
    justify-self: start;
    min-width: 80px;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 21px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.35px;
}

.fz-app-circle-btn {
    justify-self: end;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 15px;
}

.fz-app-pill-btn:hover,
.fz-app-circle-btn:hover {
    transform: translateY(-1px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.2);
}

.fz-app-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fz-app-title {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.7px;
    line-height: 1.08;
    text-align: center;
}

.fz-app-subtitle {
    max-width: 140px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 8px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.fz-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.fz-grid.edit-mode .fz-grid-tile.recent {
    animation: agencyFaceZoomWiggle 0.18s ease-in-out infinite alternate;
}

.fz-grid-tile {
    position: relative;
    min-height: 124px;
    padding: 9px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, var(--fz-surface), var(--fz-surface-2));
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.fz-grid-tile::before,
.fz-grid-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fz-grid-tile::before {
    background:
        radial-gradient(circle at 22% 18%, var(--fz-highlight), transparent 30%),
        radial-gradient(circle at 78% 92%, var(--fz-accent), transparent 44%);
    opacity: 0.98;
}

.fz-grid-tile::after {
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.fz-grid-tile:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 30px 52px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.fz-grid-tile.featured {
    grid-column: span 2;
    min-height: 122px;
}

.fz-grid-tile.tone-soft {
    color: rgba(10, 14, 22, 0.96);
}

.fz-grid-tile.tone-soft .fz-grid-eyebrow,
.fz-grid-tile.tone-soft .fz-grid-meta {
    color: rgba(16, 23, 34, 0.58);
}

.fz-grid-tile.tone-soft .fz-grid-title,
.fz-grid-tile.tone-soft .fz-grid-action {
    color: rgba(12, 15, 22, 0.95);
}

.fz-grid-media,
.fz-grid-copy {
    position: relative;
    z-index: 1;
}

.fz-grid-media {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fz-grid-tile.featured .fz-grid-media {
    min-height: 56px;
    justify-content: flex-start;
}

.fz-grid-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.22), rgba(114, 88, 255, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 26px 38px rgba(0, 0, 0, 0.14);
}

.fz-grid-tile.featured .fz-grid-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 19px;
}

.fz-grid-live-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #36d67d;
    box-shadow: 0 0 0 5px rgba(54, 214, 125, 0.18);
}

.fz-grid-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fz-grid-eyebrow {
    color: rgba(255, 255, 255, 0.56);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12px;
    text-transform: uppercase;
}

.fz-grid-title {
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: -0.5px;
    line-height: 1.08;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fz-grid-meta {
    color: rgba(255, 255, 255, 0.68);
    font-size: 8px;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-right: 38px;
}

.fz-grid-action,
.fz-grid-delete {
    position: absolute;
    right: 14px;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 2;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), background 0.18s ease;
}

.fz-grid-action {
    bottom: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 28px rgba(0, 0, 0, 0.18);
    font-size: 15px;
}

.fz-grid-tile.tone-soft .fz-grid-action {
    background: rgba(255, 255, 255, 0.4);
}

.fz-grid-action:hover,
.fz-grid-delete:hover {
    transform: scale(1.05);
}

.fz-grid-delete {
    top: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.9);
    box-shadow: 0 12px 20px rgba(255, 59, 48, 0.24);
    font-size: 14px;
}

.fz-empty-state {
    grid-column: span 2;
    min-height: 214px;
    border-radius: 28px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(24, 25, 29, 0.9), rgba(14, 15, 18, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
}

.fz-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 24px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.fz-empty-title {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.fz-empty-sub {
    max-width: 214px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    line-height: 1.45;
}

.fz-bottom-cta {
    position: sticky;
    bottom: calc(var(--home-indicator-clearance) + 2px);
    display: flex;
    justify-content: center;
    padding-top: 16px;
    pointer-events: none;
}

.fz-new-call-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.4px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(88, 223, 114, 0.96), rgba(81, 210, 105, 0.84));
    box-shadow: 0 24px 40px rgba(81, 210, 105, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.18s ease;
}

.fz-new-call-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 28px 46px rgba(81, 210, 105, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

@keyframes agencyFaceZoomWiggle {
    from { transform: rotate(-0.8deg); }
    to { transform: rotate(0.8deg); }
}

#phone-frame:not(.dark-mode) #app-facezoom {
    background: var(--app-screen-bg, #f2f2f7);
}

#phone-frame:not(.dark-mode) #facezoom-content {
    background:
        radial-gradient(circle at 18% 0%, rgba(74, 135, 255, 0.08), transparent 34%),
        radial-gradient(circle at 82% 10%, rgba(139, 97, 255, 0.07), transparent 28%),
        linear-gradient(180deg, var(--bg-primary, #f2f2f7) 0%, var(--bg-secondary, #ffffff) 100%);
}

#phone-frame:not(.dark-mode) .fz-app-pill-btn,
#phone-frame:not(.dark-mode) .fz-app-circle-btn {
    border-color: rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 240, 245, 0.94));
    color: rgba(0, 0, 0, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.06);
}

#phone-frame:not(.dark-mode) .fz-app-pill-btn:hover,
#phone-frame:not(.dark-mode) .fz-app-circle-btn:hover {
    border-color: rgba(0, 0, 0, 0.14);
}

#phone-frame:not(.dark-mode) .fz-app-title {
    color: #000;
}

#phone-frame:not(.dark-mode) .fz-app-subtitle {
    color: rgba(0, 0, 0, 0.44);
}

#phone-frame:not(.dark-mode) .fz-grid-tile {
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#phone-frame:not(.dark-mode) .fz-grid-tile:hover {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#phone-frame:not(.dark-mode) .fz-grid-tile::after {
    border-color: rgba(255, 255, 255, 0.3);
}

#phone-frame:not(.dark-mode) .fz-grid-eyebrow {
    color: rgba(0, 0, 0, 0.42);
}

#phone-frame:not(.dark-mode) .fz-grid-title {
    color: rgba(0, 0, 0, 0.88);
}

#phone-frame:not(.dark-mode) .fz-grid-meta {
    color: rgba(0, 0, 0, 0.38);
}

#phone-frame:not(.dark-mode) .fz-grid-action {
    color: rgba(0, 0, 0, 0.72);
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#phone-frame:not(.dark-mode) .fz-empty-icon {
    color: rgba(0, 0, 0, 0.18);
}

#phone-frame:not(.dark-mode) .fz-empty-title {
    color: rgba(0, 0, 0, 0.48);
}

#phone-frame:not(.dark-mode) .fz-empty-sub {
    color: rgba(0, 0, 0, 0.32);
}

#phone-frame:not(.dark-mode) .fz-loading-state {
    color: rgba(0, 0, 0, 0.48);
}

/* ═══════════════════════════════════════════════════════
   BUZZ (Messages)
   ═══════════════════════════════════════════════════════ */

#buzz-chat-list {
    display: flex;
    flex-direction: column;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    cursor: pointer;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
    transition: opacity 0.15s;
}

.chat-item:active {
    opacity: 0.6;
}

.chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007aff, #5856d6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.chat-info {
    flex: 1;
    min-width: 0;
}

.chat-name {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.chat-preview {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Chat View */
#buzz-chat-meta {
    padding: 10px 16px 0;
    background: var(--bg-primary);
}

.buzz-quick-actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.buzz-quick-actions::-webkit-scrollbar {
    display: none;
}

.buzz-quick-action {
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.buzz-quick-action:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.buzz-quick-action:active {
    transform: scale(0.98);
}

.buzz-chat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.buzz-chat-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    flex-shrink: 0;
}

.buzz-chat-card-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.buzz-chat-card-copy strong {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buzz-chat-card-copy span {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buzz-chat-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.buzz-chat-action {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 122, 255, 0.18);
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#buzz-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px 22px;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}

#buzz-messages-container::-webkit-scrollbar {
    width: 0;
}

#buzz-messages {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    justify-content: flex-end;
}

.msg-bubble {
    max-width: 78%;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.35;
    word-wrap: break-word;
    animation: msgAppear 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes msgAppear {
    from {
        transform: scale(0.9) translateY(6px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.msg-bubble.sent {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.85), rgba(0, 100, 220, 0.7));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(0, 122, 255, 0.3);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.msg-bubble.received {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
    border-bottom-left-radius: 4px;
}

.msg-bubble.pending {
    opacity: 0.78;
    filter: saturate(0.92);
}

.msg-time {
    font-size: 10px;
    opacity: 0.5;
    margin-top: 2px;
}

#buzz-input-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px calc(var(--home-indicator-clearance) + 16px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-top: 0.5px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

#buzz-composer-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 0 8px;
}

#buzz-composer-meta.busy {
    color: #5ac8fa;
}

.buzz-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

#buzz-attach-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 122, 255, 0.18);
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

#buzz-message-input {
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 9px 16px;
    min-height: 40px;
    max-height: 104px;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    resize: none;
    overflow-y: auto;
    font-family: 'Inter', sans-serif;
}

#buzz-message-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#buzz-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.8), rgba(0, 100, 220, 0.6));
    border: 0.5px solid rgba(0, 122, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s;
}

#buzz-send-btn:disabled,
#buzz-attach-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

#buzz-send-btn.sending {
    background: linear-gradient(135deg, rgba(90, 200, 250, 0.85), rgba(0, 122, 255, 0.55));
}

#buzz-attach-btn.sending {
    color: rgba(0, 122, 255, 0.6);
}

#buzz-send-btn:active {
    transform: scale(0.88);
}

.buzz-attach-menu {
    padding: 18px 14px calc(var(--home-indicator-clearance) - 10px);
    background: var(--bg-secondary);
    border-top: 0.5px solid var(--separator);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 10px;
}

.attach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: center;
}

.attach-item span {
    font-size: 11px;
    color: var(--text-secondary);
}

.attach-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.attach-item-icon.photos { background: linear-gradient(135deg, #34c759, #30d158); }
.attach-item-icon.location { background: linear-gradient(135deg, #0a84ff, #5ac8fa); }
.attach-item-icon.contact { background: linear-gradient(135deg, #5856d6, #7d7aff); }
.attach-item-icon.emoji { background: linear-gradient(135deg, #ff9500, #ffb340); }

.buzz-inline-card {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.buzz-inline-card i {
    color: #ff3b30;
}

.buzz-contact-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
}

.buzz-contact-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.buzz-contact-card-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.buzz-contact-card-copy strong {
    font-size: 13px;
    color: inherit;
}

.buzz-contact-card-copy span {
    font-size: 11px;
    opacity: 0.68;
}

.buzz-contact-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.buzz-contact-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0.5px solid var(--separator);
    background: var(--fill-secondary);
    color: var(--text-primary);
    border-radius: 16px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
}

.buzz-contact-picker-avatar {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.buzz-contact-picker-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.buzz-contact-picker-copy strong {
    font-size: 14px;
    color: var(--text-primary);
}

.buzz-contact-picker-copy span {
    font-size: 12px;
    color: var(--text-tertiary);
}

.msg-delivery-status {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.74);
    text-align: right;
}

/* AgencyOS26.3 Buzz parity layer */
#app-buzz.buzz-liquid-screen,
#buzz-chat-view.buzz-thread-screen {
    background:
        radial-gradient(circle at 18% 0%, rgba(94, 120, 255, 0.18), transparent 28%),
        radial-gradient(circle at 84% 86%, rgba(135, 73, 255, 0.2), transparent 30%),
        linear-gradient(180deg, #040507 0%, #020203 100%);
    color: #fff;
}

#app-buzz.buzz-liquid-screen .app-content,
#buzz-chat-view.buzz-thread-screen .app-content {
    background: transparent;
}

.buzz-shell,
.buzz-thread-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.buzz-hub-topbar,
.buzz-thread-topbar {
    position: relative;
    z-index: 4;
}

.buzz-hub-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--liquid-screen-top-clearance, 82px) 16px 0;
}

.buzz-pill-btn,
.buzz-circle-btn,
.buzz-thread-back {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    color: rgba(255, 255, 255, 0.96);
}

.buzz-pill-btn {
    min-width: 96px;
    height: 50px;
    border-radius: 25px;
    padding: 0 20px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.buzz-circle-btn {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.buzz-circle-btn.small {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    font-size: 16px;
}

.buzz-filter-count {
    position: absolute;
    top: -3px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    padding: 0 6px;
    background: #0a84ff;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(10, 132, 255, 0.36);
}

.buzz-filter-count.hidden {
    display: none;
}

.buzz-hub-hero {
    padding: 20px 18px 8px;
}

.buzz-hub-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.buzz-hub-title {
    font-size: clamp(46px, 14vw, 58px);
    line-height: 0.95;
    font-weight: 760;
    letter-spacing: -0.04em;
    color: #fff;
}

.buzz-hub-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
}

.buzz-filter-panel {
    position: absolute;
    top: calc(var(--liquid-screen-top-clearance, 82px) + 68px);
    right: 16px;
    z-index: 8;
    width: 238px;
    padding: 10px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(24, 24, 27, 0.92), rgba(16, 16, 18, 0.9));
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(38px) saturate(170%);
    -webkit-backdrop-filter: blur(38px) saturate(170%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transform-origin: top right;
    will-change: opacity, transform;
    transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.22, 0.9, 0.2, 1), visibility 0.18s ease;
}

.buzz-filter-panel.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px) scale(0.96);
}

.buzz-filter-option {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    padding: 14px 16px;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.buzz-filter-option.active {
    background: rgba(255, 255, 255, 0.12);
}

.buzz-hub-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 18px 18px;
    -webkit-overflow-scrolling: touch;
}

.buzz-hub-content::-webkit-scrollbar,
#buzz-messages-container::-webkit-scrollbar {
    width: 0;
}

#buzz-chat-list {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    cursor: pointer;
    transition: opacity 0.16s ease, transform 0.16s ease, filter 0.16s ease;
    border-bottom: none;
}

.chat-item::after {
    content: '';
    position: absolute;
    left: 66px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.chat-item:active {
    opacity: 0.78;
    transform: scale(0.995);
}

.chat-item:last-child::after {
    opacity: 0;
}

.chat-item.ai-thread .chat-avatar {
    background: linear-gradient(135deg, rgba(160, 112, 255, 1), rgba(82, 90, 255, 0.96));
    box-shadow: 0 14px 30px rgba(110, 92, 255, 0.26);
}

.chat-item.unknown-thread .chat-badge {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.68);
}

.chat-item.has-unread .chat-name,
.chat-item.has-unread .chat-preview,
.chat-item.has-unread .chat-time {
    color: #fff;
}

.chat-select-indicator {
    width: 24px;
    height: 24px;
    margin-right: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}

#app-buzz.buzz-list-editing .chat-select-indicator {
    display: inline-flex;
}

.chat-item.selected .chat-select-indicator {
    border-color: rgba(10, 132, 255, 0.9);
    background: #0a84ff;
    box-shadow: 0 8px 16px rgba(10, 132, 255, 0.26);
}

.chat-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5e66a8, #3d3156);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-info {
    min-width: 0;
    flex: 1;
}

.chat-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-name {
    min-width: 0;
    flex: 1;
    font-size: 19px;
    font-weight: 640;
    letter-spacing: -0.02em;
    color: #f5f6fb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-time {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

.chat-preview-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}

.chat-preview {
    min-width: 0;
    flex: 1;
    font-size: 15px;
    line-height: 1.28;
    color: rgba(255, 255, 255, 0.42);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-row-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.chat-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 112px;
}

.chat-badge.assistant {
    background: linear-gradient(135deg, rgba(122, 99, 255, 0.34), rgba(87, 112, 255, 0.28));
    color: #f2efff;
}

.chat-unread-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #0a84ff;
    box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.12);
    flex-shrink: 0;
}

.chat-chevron {
    color: rgba(255, 255, 255, 0.36);
    font-size: 20px;
    line-height: 1;
    margin-left: 4px;
}

.buzz-hub-dock {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 5;
    margin: 0 16px calc(var(--home-indicator-clearance) + 14px);
    padding-top: 6px;
}

.buzz-search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 0 14px;
    border-radius: 29px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(27, 27, 31, 0.9), rgba(20, 20, 23, 0.84));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(36px) saturate(160%);
    -webkit-backdrop-filter: blur(36px) saturate(160%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.buzz-search-icon {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.66);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
    cursor: pointer;
}

.buzz-search-icon.mic {
    color: rgba(255, 255, 255, 0.82);
}

#buzz-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    font-size: 18px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

#buzz-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.buzz-compose-fab,
.buzz-delete-fab {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 29px;
    background: linear-gradient(180deg, rgba(29, 29, 33, 0.92), rgba(20, 20, 23, 0.84));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(36px) saturate(160%);
    -webkit-backdrop-filter: blur(36px) saturate(160%);
    color: #fff;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.buzz-delete-fab {
    background: linear-gradient(180deg, rgba(90, 29, 33, 0.95), rgba(62, 18, 22, 0.86));
    color: #ffd9dd;
}

#app-buzz.buzz-list-editing .buzz-compose-fab {
    display: none;
}

#app-buzz.buzz-list-editing .buzz-delete-fab:not(.hidden) {
    display: inline-flex;
}

.buzz-thread-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: calc(var(--liquid-screen-top-clearance, 82px) - 6px) 14px 0;
}

.buzz-thread-back {
    margin: 0;
    min-width: 74px;
    height: 42px;
    border-radius: 21px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
}

.buzz-thread-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    justify-self: center;
}

.buzz-thread-avatar {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background: linear-gradient(135deg, #6169b7, #433355);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.buzz-thread-avatar.ai {
    background: linear-gradient(135deg, #9a7cff, #516cff);
}

.buzz-thread-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.buzz-thread-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buzz-thread-status {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.52);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#buzz-chat-meta {
    padding: 10px 14px 0;
    background: transparent;
}

.buzz-chat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(35, 35, 39, 0.76), rgba(20, 20, 23, 0.54));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(34px) saturate(160%);
    -webkit-backdrop-filter: blur(34px) saturate(160%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.buzz-chat-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: linear-gradient(135deg, #5d67b8, #47324e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
}

.buzz-chat-card-avatar.ai {
    background: linear-gradient(135deg, #9a7cff, #516cff);
}

.buzz-chat-card-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.buzz-chat-card-copy strong {
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buzz-chat-card-copy span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buzz-chat-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.buzz-chat-action {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.buzz-chat-action.ai {
    background: rgba(114, 103, 255, 0.18);
}

.buzz-quick-actions {
    display: flex;
    gap: 7px;
    padding: 9px 14px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.buzz-quick-actions::-webkit-scrollbar {
    display: none;
}

.buzz-quick-action {
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.buzz-date-divider {
    align-self: center;
    margin: 8px 0 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.44);
    font-size: 11px;
    font-weight: 600;
}

.msg-bubble {
    max-width: 82%;
    padding: 11px 15px;
    border-radius: 26px;
    font-size: 15px;
    line-height: 1.36;
    word-wrap: break-word;
    animation: msgAppear 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.msg-bubble.sent {
    align-self: flex-end;
    margin-left: auto;
    background: linear-gradient(135deg, rgba(11, 120, 255, 0.92), rgba(0, 92, 217, 0.76));
    border: 1px solid rgba(75, 173, 255, 0.16);
    color: #fff;
    border-bottom-right-radius: 10px;
    box-shadow: 0 12px 32px rgba(10, 132, 255, 0.16);
}

.msg-bubble.received {
    align-self: flex-start;
    margin-right: auto;
    background: linear-gradient(180deg, rgba(40, 40, 46, 0.86), rgba(22, 22, 26, 0.76));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    border-bottom-left-radius: 10px;
}

.msg-bubble.ai {
    background: linear-gradient(180deg, rgba(61, 48, 113, 0.9), rgba(33, 28, 73, 0.82));
    border-color: rgba(146, 127, 255, 0.18);
}

.buzz-inline-card[data-buzz-location],
.buzz-contact-card[data-buzz-contact] {
    cursor: pointer;
}

.buzz-inline-app-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.buzz-ai-typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 16px;
}

.buzz-ai-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    animation: buzzTypingPulse 1.2s infinite ease-in-out;
}

.buzz-ai-typing span:nth-child(2) {
    animation-delay: 0.16s;
}

.buzz-ai-typing span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes buzzTypingPulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    40% {
        transform: scale(1.1);
        opacity: 1;
    }
}

#buzz-input-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px calc(var(--home-indicator-clearance) + 18px);
    margin: 0 10px;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    background: linear-gradient(180deg, rgba(24, 24, 28, 0.92), rgba(14, 14, 17, 0.84));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
    box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(34px) saturate(180%);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    flex-shrink: 0;
}

#buzz-composer-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.48);
    padding: 0 10px;
}

#buzz-composer-meta.busy {
    color: #78c0ff;
}

.buzz-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

#buzz-attach-btn,
#buzz-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

#buzz-attach-btn {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

#buzz-message-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 11px 16px;
    min-height: 46px;
    max-height: 112px;
    color: #fff;
    font-size: 15px;
    line-height: 1.42;
    outline: none;
    resize: none;
    overflow-y: auto;
    font-family: 'Inter', sans-serif;
}

#buzz-message-input::placeholder {
    color: rgba(255, 255, 255, 0.36);
}

#buzz-send-btn {
    background: linear-gradient(135deg, rgba(11, 120, 255, 0.94), rgba(0, 96, 228, 0.78));
    box-shadow: 0 8px 18px rgba(10, 132, 255, 0.24);
    color: #fff;
    font-size: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#buzz-send-btn:disabled,
#buzz-attach-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

#buzz-send-btn.sending {
    background: linear-gradient(135deg, rgba(90, 200, 250, 0.88), rgba(0, 122, 255, 0.58));
}

#buzz-send-btn:active {
    transform: scale(0.9);
}

.buzz-attach-menu {
    padding: 18px 14px calc(var(--home-indicator-clearance) + 4px);
    margin: 0 10px 0;
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
    background: linear-gradient(180deg, rgba(24, 24, 28, 0.94), rgba(14, 14, 17, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 10px;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.22);
}

/* ═══════════════════════════════════════════════════════
   CONTACTS
   ═══════════════════════════════════════════════════════ */

.search-input {
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-size: 15px;
    outline: none;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#contacts-list {
    display: flex;
    flex-direction: column;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: opacity 0.15s;
}

.contact-item:active {
    opacity: 0.6;
}

.contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9500, #ff3b30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.contact-info {
    flex: 1;
    min-width: 0;
}

.contact-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color, #000);
}

.contact-number {
    font-size: 13px;
    color: var(--text-muted, rgba(0, 0, 0, 0.5));
    margin-top: 1px;
}

.contact-actions {
    display: flex;
    gap: 10px;
}

.contact-emergency-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #ff6b62, #ff375f);
    box-shadow: 0 6px 14px rgba(255, 55, 95, 0.22);
    font-size: 10px;
    flex-shrink: 0;
}

.contact-avatar.emergency {
    box-shadow: 0 2px 12px rgba(255, 55, 95, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.contact-avatar.self {
    border-radius: 14px;
    background: linear-gradient(135deg, #007aff, #5ac8fa);
}

.contact-emergency-badge.self {
    background: linear-gradient(135deg, #0a84ff, #64d2ff);
    box-shadow: 0 6px 14px rgba(10, 132, 255, 0.24);
}

.own-contact-item {
    padding-top: 0;
}

.contact-action-btn {
    background: none;
    border: none;
    color: #007aff;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    transition: opacity 0.15s;
}

.contact-action-btn.emergency {
    color: rgba(255, 55, 95, 0.7);
}

.contact-action-btn.emergency.active {
    color: #ff375f;
}

.contact-action-btn:active {
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════
   CHIRPER
   ═══════════════════════════════════════════════════════ */

#chirper-feed {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chirp-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    padding: 14px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}

.chirp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.chirp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #af52de, #5856d6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.chirp-author {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.chirp-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin-left: auto;
}

.chirp-message {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}

.chirp-delete {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    cursor: pointer;
    margin-top: 8px;
    padding: 2px 8px;
    transition: color 0.15s;
}

.chirp-delete:hover {
    color: #ff3b30;
}

/* ═══════════════════════════════════════════════════════
   POSTBOX (Mail)
   ═══════════════════════════════════════════════════════ */

#mail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
}

.mail-item {
    position: relative;
    padding: 16px 48px 14px 16px;
    border-radius: 18px;
    border: var(--glass-border);
    background: var(--card-bg);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    transition: opacity 0.15s;
    flex: 0 0 auto;
}

.mail-item:active {
    opacity: 0.6;
}

.mail-sender {
    font-size: 13px;
    font-weight: 600;
    color: #007aff;
}

.mail-subject {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    margin-top: 2px;
}

.mail-preview {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mail-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 4px;
}

.mail-delete-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
}

.mail-delete-btn:hover {
    color: #ff3b30;
}

/* ═══════════════════════════════════════════════════════
   WALLET
   ═══════════════════════════════════════════════════════ */

#wallet-balance-card {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.6) 0%, rgba(88, 86, 214, 0.5) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow:
        0 8px 32px rgba(0, 122, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

#wallet-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

#wallet-amount {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-top: 6px;
    letter-spacing: -1px;
}

#wallet-transfer h3 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 14px;
}

#wallet-transfer input {
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 16px;
    color: #fff;
    font-size: 15px;
    outline: none;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
}

#wallet-transfer input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#transfer-btn {
    width: 100%;
    padding: 14px;
    border: 0.5px solid rgba(0, 122, 255, 0.4);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.7), rgba(0, 100, 220, 0.5));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: transform 0.15s;
    font-family: 'Inter', sans-serif;
}

#transfer-btn:active {
    transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════
   REPORT
   ═══════════════════════════════════════════════════════ */

#report-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 10px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════ */

#gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.gallery-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 2px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.gallery-img:active {
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════
   APP STORE
   ═══════════════════════════════════════════════════════ */

#appstore-header {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

#appstore-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 8px;
}

.store-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: 14px;
    margin: 0 14px 6px;
    padding: 12px 14px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.store-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.store-info {
    flex: 1;
    min-width: 0;
}

.store-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.store-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-btn {
    padding: 6px 18px;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    transition: transform 0.15s;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.store-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.store-detail-actions,
.store-detail-section:last-child {
    margin-bottom: 6px;
}

.store-btn:active {
    transform: scale(0.92);
}

.store-btn.install {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.7), rgba(0, 100, 220, 0.5));
    border: 0.5px solid rgba(0, 122, 255, 0.4);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15);
}

.store-btn.installed,
.store-btn.open {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.7), rgba(0, 100, 220, 0.5));
    border: 0.5px solid rgba(0, 122, 255, 0.4);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15);
}

.store-btn.remove {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.15), rgba(255, 59, 48, 0.08));
    border: 0.5px solid rgba(255, 59, 48, 0.2);
    --app-icon-bg: #8e8e93;
}

/* ═══════════════════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════════════════ */

.settings-group {
    margin-bottom: 16px;
}

.settings-group-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 4px 6px;
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    background: var(--card-bg);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    cursor: pointer;
    transition: opacity 0.15s;
}

.settings-item:active {
    opacity: 0.7;
}

.settings-item:first-child {
    border-radius: 14px 14px 0 0;
}

.settings-item:last-child {
    border-radius: 0 0 14px 14px;
}

.settings-item:only-child {
    border-radius: 14px;
}

.settings-item+.settings-item {
    border-top: 0.5px solid var(--separator);
}

.settings-label {
    font-size: 15px;
    color: var(--text-primary);
}

.settings-perf-desc {
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-tertiary);
}

.settings-value {
    font-size: 14px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-value i {
    font-size: 12px;
    color: var(--text-quaternary);
}

/* Settings Wallpaper Grid */
.settings-wallpaper-item {
    padding: 14px !important;
    cursor: default;
}

.settings-wallpaper-item:active {
    opacity: 1 !important;
}

.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}

.wallpaper-option {
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
}

.wallpaper-option:active {
    transform: scale(0.92);
}

.wallpaper-option.active {
    border-color: #007aff;
}

.wallpaper-option.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #007aff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
}

/* Custom Wallpaper URL Input - Liquid Glass Style */
.wallpaper-url-section {
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.wallpaper-url-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.wallpaper-url-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wallpaper-url-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 12px;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.3s, background 0.3s;
}

.wallpaper-url-input:focus {
    border-color: rgba(0, 122, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.wallpaper-url-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.wallpaper-url-apply {
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    transition: transform 0.2s, opacity 0.2s;
    flex-shrink: 0;
}

.wallpaper-url-apply:active {
    transform: scale(0.95);
    opacity: 0.8;
}

.wallpaper-url-preview {
    margin-top: 10px;
    width: 100%;
    height: 80px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    display: none;
    position: relative;
    overflow: hidden;
}

.wallpaper-url-preview.visible {
    display: block;
    animation: wallpaperPreviewFade 0.4s ease;
}

@keyframes wallpaperPreviewFade {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.wallpaper-url-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.wallpaper-url-remove:hover {
    background: rgba(255, 59, 48, 0.7);
}

/* Settings Slider Item */
.settings-slider-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    cursor: default;
    padding: 14px;
}

.settings-slider-item:active {
    opacity: 1;
}

.settings-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}

.settings-slider::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

.settings-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}

.settings-slider::-moz-range-thumb:active {
    transform: scale(1.1);
}

.settings-slider-value {
    min-width: 50px;
    text-align: right;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Settings Select */
.settings-select {
    background: var(--input-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-primary);
    border: 0.5px solid var(--separator);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.settings-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════ */

#modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: background 0.3s ease;
    pointer-events: none;
    border-radius: 52px;
    overflow: hidden;
}

#modal-overlay.visible {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

#modal-box {
    background: rgba(50, 50, 52, 0.97);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px 20px 18px;
    width: 100%;
    max-width: 260px;
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.25s ease;
}

#modal-overlay.visible #modal-box {
    transform: scale(1);
    opacity: 1;
}

#modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 14px;
    text-align: center;
}

#modal-body {
    margin-bottom: 18px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.74));
}

#modal-body p,
#modal-body label,
#modal-body small,
#modal-body .modal-help,
#modal-body .modal-label {
    color: inherit;
}

#modal-body [style*="color:#fff"],
#modal-body [style*="color: #fff"],
#modal-body [style*="color:#ffffff"],
#modal-body [style*="color: #ffffff"],
#modal-body [style*="color:white"],
#modal-body [style*="color: white"] {
    color: var(--text-primary, #fff) !important;
}

#modal-body [style*="color:#000"],
#modal-body [style*="color: #000"],
#modal-body [style*="color:#000000"],
#modal-body [style*="color: #000000"],
#modal-body [style*="color:black"],
#modal-body [style*="color: black"] {
    color: var(--text-primary, #fff) !important;
}

#modal-body [style*="color:rgba(255,255,255"],
#modal-body [style*="color: rgba(255,255,255"] {
    color: var(--text-secondary, rgba(255, 255, 255, 0.74)) !important;
}

#modal-body input,
#modal-body textarea,
#modal-body select,
#modal-body .modal-input {
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 11px 14px !important;
    color: var(--text-primary, #fff) !important;
    font-size: 15px !important;
    outline: none !important;
    margin-bottom: 8px !important;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    appearance: none;
}

#modal-body textarea {
    min-height: 92px;
    resize: vertical;
}

#modal-body input::placeholder,
#modal-body textarea::placeholder,
#modal-body .modal-input::placeholder {
    color: var(--text-tertiary, rgba(255, 255, 255, 0.35)) !important;
}

#modal-body input:focus,
#modal-body textarea:focus,
#modal-body select:focus,
#modal-body .modal-input:focus {
    border-color: rgba(90, 200, 250, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(90, 200, 250, 0.16), 0 8px 24px rgba(0, 0, 0, 0.22);
}

#modal-body select option {
    background: #1c1c1e;
    color: #fff;
}

#phone-frame:not(.dark-mode) #modal-body input,
#phone-frame:not(.dark-mode) #modal-body textarea,
#phone-frame:not(.dark-mode) #modal-body select,
#phone-frame:not(.dark-mode) #modal-body .modal-input {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(60, 60, 67, 0.14) !important;
    color: #000 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#phone-frame:not(.dark-mode) #modal-body input::placeholder,
#phone-frame:not(.dark-mode) #modal-body textarea::placeholder,
#phone-frame:not(.dark-mode) #modal-body .modal-input::placeholder {
    color: rgba(60, 60, 67, 0.55) !important;
}

#phone-frame:not(.dark-mode) #modal-body select option {
    background: #fff;
    color: #000;
}

#modal-actions {
    display: flex;
    gap: 8px;
}

#modal-actions button {
    flex: 1;
    padding: 11px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: transform 0.15s;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#modal-actions button:active {
    transform: scale(0.96);
}

.modal-btn-primary {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.8), rgba(0, 122, 255, 0.6));
    border: 0.5px solid rgba(0, 122, 255, 0.4);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.modal-btn-cancel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

#phone-frame:not(.dark-mode) .modal-btn-cancel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7));
    border: 0.5px solid rgba(60, 60, 67, 0.12);
    color: rgba(0, 0, 0, 0.72);
}

.report-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 18px 28px;
    text-align: center;
}

.report-provider-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--fill-secondary);
    border: 0.5px solid var(--separator);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.report-hero-icon {
    font-size: 44px;
    color: #ff3b30;
    margin-top: 18px;
}

.report-hero-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 18px;
}

.report-hero-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
    text-align: center;
    line-height: 1.5;
}

.report-submit-btn {
    margin-top: 28px;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff5b52, #ff3b30);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 14px 32px rgba(255, 59, 48, 0.2);
    transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.report-submit-btn:active {
    transform: scale(0.98);
}

.report-submit-btn:disabled {
    opacity: 0.58;
    cursor: default;
    box-shadow: none;
}

.report-status-copy {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════════════════ */

#notification-area {
    position: absolute;
    top: 58px;
    left: 10px;
    right: 10px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.phone-notification {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.04) 50%,
            rgba(255, 255, 255, 0.07) 100%);
    backdrop-filter: blur(50px) saturate(180%);
    -webkit-backdrop-filter: blur(50px) saturate(180%);
    border-radius: 20px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    pointer-events: auto;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
    animation: agencyNotifIn 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    touch-action: pan-y;
}

.phone-notification.exiting {
    animation: agencyNotifOut 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes agencyNotifIn {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes agencyNotifOut {
    from {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    to {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
}

.notif-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.notif-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════
   HOME INDICATOR
   ═══════════════════════════════════════════════════════ */

#home-indicator {
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    touch-action: none;
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* Show the home bar when inside an app or on the home screen */
#home-indicator.in-app,
#home-indicator.on-home {
    display: flex;
}

#home-indicator.setup-hidden {
    display: none !important;
}

/* Hide back buttons on all app screens — only the bottom home bar exits apps. */
.app-screen>.app-header>.back-btn {
    display: none !important;
}

/* Sub-navigation back buttons: higher specificity to override the hide rule */
.app-screen>.app-header>.back-btn.sub-nav-visible {
    display: inline-flex !important;
}

/* Dim on home screen */
#home-indicator.on-home #home-bar {
    opacity: 0.35;
    width: 110px;
}

#home-indicator.cc-active #home-bar {
    opacity: 0.95;
    width: 128px;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
}

#home-bar {
    width: 134px;
    height: 5px;
    background: #fff;
    border-radius: 100px;
    opacity: 0.85;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
    transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.3s ease;
}

/* Subtle float animation when inside an app — mimics AgencyOS dynamic bar */
#home-indicator:not(.on-home) #home-bar {
    animation: homeBarFloat 3s ease-in-out infinite;
}

@keyframes homeBarFloat {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-4px);
    }
}

/* Press feedback */
#home-indicator:active #home-bar {
    width: 90px;
    opacity: 1;
    transform: scaleY(1.2);
}

/* App close animation (shrink + glide upward) */
.screen.app-closing {
    animation: appClose 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    pointer-events: none;
    transform-origin: center bottom;
    will-change: transform, opacity;
    z-index: 35;
    contain: strict;
}

@keyframes appClose {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
        border-radius: 0;
    }

    40% {
        transform: translate3d(0, -3%, 0) scale(0.96);
        opacity: 0.9;
        border-radius: 16px;
    }

    100% {
        transform: translate3d(0, -8%, 0) scale(0.88);
        opacity: 0;
        border-radius: 32px;
    }
}

/* Swipe visual feedback — bar turns brighter and lifts */
#home-indicator.swiping #home-bar {
    width: 90px;
    opacity: 1;
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    animation: none;
}

/* ═══════════════════════════════════════════════════════
   RECENT CALLS
   ═══════════════════════════════════════════════════════ */

#recents-list {
    display: flex;
    flex-direction: column;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: opacity 0.15s;
}

.recent-item:active {
    opacity: 0.6;
}

.recent-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

.recent-icon.missed {
    color: #ff3b30;
}

.recent-icon.outgoing {
    color: #34c759;
}

.recent-icon.incoming {
    color: #007aff;
}

.recent-info {
    flex: 1;
}

.recent-name {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
}

.recent-time {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════ */

.empty-state {
    text-align: center;
    color: rgba(255, 255, 255, 0.25);
    padding: 40px 20px;
    font-size: 14px;
}

.empty-state i {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR & MISC
   ═══════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ═══════════════════════════════════════════════════════
   FACE ID OVERLAY
   ═══════════════════════════════════════════════════════ */

#faceid-overlay {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    width: 140px;
    height: auto;
    padding: 42px 16px 14px;
    background: #000;
    border-radius: 32px;
    z-index: 962;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
        width 0.4s cubic-bezier(0.32, 0.72, 0, 1),
        border-radius 0.4s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.5s ease;
}

#faceid-overlay.visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
    width: 166px;
    padding: 56px 16px 20px;
    border-radius: 36px;
}

/* Breathing glow during scanning */
#faceid-overlay.scanning {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(52, 199, 89, 0.15),
        0 0 40px rgba(52, 199, 89, 0.08);
    animation: faceidOverlayBreathe 1.6s ease-in-out infinite;
}

@keyframes faceidOverlayBreathe {

    0%,
    100% {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5),
            0 0 15px rgba(52, 199, 89, 0.1),
            0 0 30px rgba(52, 199, 89, 0.05);
    }

    50% {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5),
            0 0 25px rgba(52, 199, 89, 0.25),
            0 0 50px rgba(52, 199, 89, 0.12);
    }
}

/* Success state: bright green glow burst and shrink box */
#faceid-overlay.success {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(52, 199, 89, 0.4),
        0 0 60px rgba(52, 199, 89, 0.2);
    width: 120px;
    padding: 30px 16px 16px;
    border-radius: 32px;
}

.faceid-icon-container {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    will-change: transform;
}

.faceid-face {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
    will-change: transform, opacity;
}

.faceid-bracket {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #fff;
    border-style: solid;
    border-width: 0;
    transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform, border-color, filter;
}

.faceid-bracket.tl {
    top: 0;
    left: 0;
    border-top-width: 2px;
    border-left-width: 2px;
    border-radius: 12px 0 0 0;
}

.faceid-bracket.tr {
    top: 0;
    right: 0;
    border-top-width: 2px;
    border-right-width: 2px;
    border-radius: 0 12px 0 0;
}

.faceid-bracket.bl {
    bottom: 0;
    left: 0;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-radius: 0 0 0 12px;
}

.faceid-bracket.br {
    bottom: 0;
    right: 0;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-radius: 0 0 12px 0;
}

/* Scanning: brackets animate inward with breathing + subtle rotation */
#faceid-overlay.scanning .faceid-bracket {
    border-color: #34c759;
    filter: drop-shadow(0 0 3px rgba(52, 199, 89, 0.5));
}

#faceid-overlay.scanning .faceid-bracket.tl {
    animation: faceidBracketTL 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#faceid-overlay.scanning .faceid-bracket.tr {
    animation: faceidBracketTR 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#faceid-overlay.scanning .faceid-bracket.bl {
    animation: faceidBracketBL 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#faceid-overlay.scanning .faceid-bracket.br {
    animation: faceidBracketBR 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes faceidBracketTL {

    0%,
    100% {
        top: 0;
        left: 0;
    }

    50% {
        top: 3px;
        left: 3px;
    }
}

@keyframes faceidBracketTR {

    0%,
    100% {
        top: 0;
        right: 0;
    }

    50% {
        top: 3px;
        right: 3px;
    }
}

@keyframes faceidBracketBL {

    0%,
    100% {
        bottom: 0;
        left: 0;
    }

    50% {
        bottom: 3px;
        left: 3px;
    }
}

@keyframes faceidBracketBR {

    0%,
    100% {
        bottom: 0;
        right: 0;
    }

    50% {
        bottom: 3px;
        right: 3px;
    }
}

/* Success: brackets snap outward and glow */
#faceid-overlay.success .faceid-bracket {
    display: none;
}

@keyframes faceidBracketSuccess {
    0% {
        filter: drop-shadow(0 0 3px rgba(52, 199, 89, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(52, 199, 89, 1));
    }

    100% {
        filter: drop-shadow(0 0 6px rgba(52, 199, 89, 0.6));
    }
}

/* On success: face features immediately vanish to make room */
#faceid-overlay.success .faceid-bracket {
    display: none;
}

#faceid-overlay.success .faceid-face {
    display: none;
}

#faceid-overlay.success .faceid-checkmark {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 5px;
}

#faceid-overlay.success .faceid-text {
    margin-top: 10px;
}

/* Face elements animate during scan */
#faceid-overlay.scanning .faceid-face {
    animation: faceidFacePulse 2s ease-in-out infinite;
}

@keyframes faceidFacePulse {

    0%,
    100% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.05) rotate(2deg);
    }

    70% {
        transform: scale(0.97) rotate(-1deg);
    }
}

.faceid-eye {
    position: absolute;
    width: 3px;
    height: 5px;
    border: 1.5px solid #fff;
    border-radius: 2px;
    top: 2px;
    transition: border-color 0.4s, height 0.3s, transform 0.3s;
}

.faceid-eye.left {
    left: 2px;
}

.faceid-eye.right {
    right: 2px;
}

/* Eyes blink during scanning */
#faceid-overlay.scanning .faceid-eye {
    border-color: #34c759;
    animation: faceidEyeBlink 2.4s ease-in-out infinite;
}

#faceid-overlay.scanning .faceid-eye.right {
    animation-delay: 0.15s;
}

@keyframes faceidEyeBlink {

    0%,
    40%,
    50%,
    100% {
        height: 5px;
    }

    44%,
    46% {
        height: 1px;
    }
}

.faceid-nose {
    position: absolute;
    width: 1.5px;
    height: 4px;
    background: #fff;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    border-radius: 1px;
    transition: background 0.4s;
}

.faceid-nose::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 4px;
    height: 1.5px;
    background: #fff;
    border-radius: 1px;
    transition: background 0.4s;
}

.faceid-mouth {
    position: absolute;
    width: 8px;
    height: 3px;
    border: 1.5px solid #fff;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    transition: border-color 0.4s, width 0.3s;
}

#faceid-overlay.scanning .faceid-eye {
    border-color: #34c759;
}

#faceid-overlay.scanning .faceid-mouth {
    border-color: #34c759;
    animation: faceidMouthScan 2s ease-in-out infinite;
}

@keyframes faceidMouthScan {

    0%,
    100% {
        width: 8px;
    }

    50% {
        width: 6px;
    }
}

#faceid-overlay.scanning .faceid-nose,
#faceid-overlay.scanning .faceid-nose::after {
    background: #34c759;
}



/* Multi-pass scanline with glow */
.faceid-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(52, 199, 89, 0.3) 20%, rgba(52, 199, 89, 0.9) 50%, rgba(52, 199, 89, 0.3) 80%, transparent 100%);
    border-radius: 2px;
    opacity: 0;
    top: 0;
    filter: drop-shadow(0 0 6px rgba(52, 199, 89, 0.6));
}

#faceid-overlay.scanning .faceid-scanline {
    animation: faceidScanMulti 1.6s ease-in-out;
}

@keyframes faceidScanMulti {
    0% {
        top: 0;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    48% {
        top: 100%;
        opacity: 0.8;
    }

    52% {
        top: 100%;
        opacity: 0.6;
    }

    55% {
        opacity: 1;
    }

    95% {
        opacity: 0.8;
    }

    100% {
        top: 0;
        opacity: 0;
    }
}

.faceid-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
    transition: color 0.4s, transform 0.3s, opacity 0.3s;
    white-space: nowrap;
}

#faceid-overlay.success .faceid-label {
    color: #34c759;
    animation: faceidLabelSuccess 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

#faceid-overlay.failed .faceid-label {
    color: #ff3b30;
}

@keyframes faceidLabelSuccess {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.faceid-checkmark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #34c759;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    transform: scale(0) rotate(-90deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    margin: 0 auto;
}

/* Show checkmark only on success to fix layout */
#faceid-overlay.success .faceid-checkmark {
    display: flex;
    transform: scale(1) rotate(0deg);
    order: 1;
    margin-top: -10px;
    margin-bottom: 8px;
}

#faceid-overlay.success .faceid-label {
    color: #34c759;
    animation: faceidLabelSuccess 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    order: 2;
}

.faceid-checkmark::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(52, 199, 89, 0.5);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}



#faceid-overlay.success .faceid-checkmark::after {
    opacity: 1;
    transform: scale(1.3);
    animation: faceidRipple 0.35s ease-out forwards;
}

@keyframes faceidRipple {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Face Unlock: always black pill, all modes (matches Live Capsule hardware) */

/* ═══════════════════════════════════════════════════════
   SETTINGS TOGGLE SWITCH (AgencyOS style)
   ═══════════════════════════════════════════════════════ */

.agency-toggle {
    position: relative;
    width: 44px;
    height: 26px;
    background: rgba(118, 118, 128, 0.32);
    border-radius: 13px;
    cursor: pointer;
    transition: background 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    flex-shrink: 0;
}

.agency-toggle.active {
    background: #34c759;
}

.agency-toggle::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.agency-toggle.active::after {
    transform: translateX(18px);
}

/* ═══════════════════════════════════════════════════════
   STORE ITEM INSTALL ANIMATION
   ═══════════════════════════════════════════════════════ */

.store-action-btn.installing {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    pointer-events: none;
    min-width: 114px;
    padding: 6px 10px !important;
    border: 0.5px solid rgba(255, 255, 255, 0.32) !important;
    background: linear-gradient(135deg, rgba(28, 92, 229, 0.58), rgba(32, 160, 255, 0.32)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 16px rgba(0, 122, 255, 0.2);
    animation: storeInstallPulse 1.4s ease-in-out infinite;
}

.store-btn-progress-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.32);
}

#phone-frame:not(.dark-mode) .store-action-btn.installing {
    border-color: rgba(10, 132, 255, 0.22) !important;
    background: linear-gradient(135deg, rgba(108, 186, 255, 0.34), rgba(46, 143, 255, 0.16)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 4px 16px rgba(10, 132, 255, 0.14);
}

#phone-frame:not(.dark-mode) .store-btn-progress-text {
    color: #0a5ddc !important;
    text-shadow: none;
}

.store-btn-progress {
    width: 100%;
    min-width: 92px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.store-btn-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.store-btn-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffffff, #d6ecff 45%, #ffffff);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
    transition: width 0.16s linear;
}

.store-btn-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    right: -10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
    animation: storeLoadSheen 1.1s linear infinite;
}

.store-btn-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.store-btn-progress-meta svg {
    width: 15px;
    height: 15px;
    transform: rotate(-90deg);
    flex-shrink: 0;
}

.store-progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 3;
}

.store-progress-ring {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.14s linear;
}

.store-btn-progress-label {
    font-size: 10px;
    line-height: 1;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.25px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

@keyframes storeInstallPulse {

    0%,
    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 14px rgba(0, 122, 255, 0.18);
    }

    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 22px rgba(64, 160, 255, 0.28);
    }
}

@keyframes storeLoadSheen {
    from {
        transform: translateX(-14px);
    }

    to {
        transform: translateX(24px);
    }
}

/* ═══════════════════════════════════════════════════════
   LOCK SCREEN
   ═══════════════════════════════════════════════════════ */

#lock-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    background-size: cover;
    background-position: center;
    z-index: 250;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 120px;
    gap: 8px;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.3s ease;
}

/* Subtle dark overlay on lock screen for text readability */
#lock-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    z-index: -1;
}

#lock-screen.unlocked {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

#lock-clock {
    font-size: 80px;
    font-weight: 200;
    color: #fff;
    letter-spacing: -4px;
    line-height: 1;
}

#lock-date {
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
}

/* Lock Screen Widgets */
#lock-widgets {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
}

.lock-widget {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.lock-widget:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.14);
}

.lock-widget i {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

#lock-notification-list {
    width: calc(100% - 20px);
    max-height: 38%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 36px;
    margin-bottom: 0;
    scroll-padding-bottom: 36px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
}

#lock-notification-list:empty {
    display: none;
}

#lock-notification-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#lock-notification-list .phone-notification {
    margin: 0;
    border-radius: 18px;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(24, 24, 28, 0.46), rgba(24, 24, 28, 0.28));
    backdrop-filter: blur(34px) saturate(180%);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: lockNotifIn 0.24s cubic-bezier(0.2, 0.9, 0.2, 1);
}

#lock-notification-list .phone-notification .notif-title {
    font-size: 13px;
    color: #fff;
}

#lock-notification-list .phone-notification .notif-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lock-notification-list .phone-notification.important {
    border-color: rgba(255, 204, 0, 0.58);
}

@keyframes lockNotifIn {
    from {
        transform: translateY(-8px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

#lock-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

/* Swipe-up area */
#lock-swipe-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    padding-bottom: 30px;
    cursor: pointer;
    touch-action: none;
}

#lock-swipe-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    animation: lockSwipeBounce 2s ease-in-out infinite;
}

#lock-swipe-indicator i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1;
}

#lock-swipe-indicator i:first-child {
    color: rgba(255, 255, 255, 0.15);
    margin-bottom: -6px;
}

@keyframes lockSwipeBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

#lock-passcode-btn {
    background: none;
    border: none;
    color: #007aff;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    padding: 8px 16px;
    margin-top: 12px;
    transition: opacity 0.15s;
}

#lock-passcode-btn:active {
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════
   PASSCODE ENTRY (Lock screen + Setup)
   ═══════════════════════════════════════════════════════ */

#passcode-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(160deg, #1c1c1e 0%, #000 50%, #1c1c1e 100%);
    z-index: 260;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

#passcode-screen.visible {
    opacity: 1;
    pointer-events: auto;
}

.passcode-title {
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
}

.passcode-dots {
    display: flex;
    gap: 18px;
    margin-bottom: 32px;
    height: 18px;
}

.passcode-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.passcode-dot.filled {
    background: #fff;
    border-color: #fff;
    transform: scale(1.1);
}

.passcode-dot.error {
    border-color: #ff3b30;
    background: #ff3b30;
    animation: passcodeShake 0.4s ease;
}

@keyframes passcodeShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }
}

.passcode-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 240px;
}

.passcode-key {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.passcode-key:active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    transform: scale(0.92);
}

.passcode-key.empty {
    border: none;
    background: none;
    cursor: default;
    visibility: hidden;
}

.passcode-key.backspace {
    border: none;
    background: none;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.passcode-key.backspace:active {
    background: none;
    color: #fff;
}

.passcode-cancel {
    margin-top: 16px;
    background: none;
    border: none;
    color: #007aff;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    padding: 8px 16px;
}

.passcode-cancel:active {
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════
   SETUP WIZARD (AgencyOS first-boot)
   ═══════════════════════════════════════════════════════ */

#setup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f7;
    z-index: 950;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

#setup-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.setup-step {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 28px 40px;
    gap: 12px;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.4s ease;
    pointer-events: none;
}

.setup-step.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.setup-step.exit-left {
    opacity: 0;
    transform: translateX(-40%);
    pointer-events: none;
}

.setup-hello {
    font-size: 56px;
    font-weight: 200;
    color: #000;
    letter-spacing: -2px;
    opacity: 0;
    transform: translateY(30px);
    animation: setupFadeUp 1s cubic-bezier(0.32, 0.72, 0, 1) 0.3s forwards;
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.setup-hello.cycling {
    animation: none;
    opacity: 1;
    transform: translateY(0);
}

.setup-hello.fade-out {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.setup-hello.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

@keyframes setupFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.setup-subtitle {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    line-height: 1.5;
    max-width: 260px;
    opacity: 0;
    animation: setupFadeUp 0.8s cubic-bezier(0.32, 0.72, 0, 1) 0.7s forwards;
}

.setup-icon {
    font-size: 64px;
    color: #007aff;
    margin-bottom: 12px;
    opacity: 0;
    animation: setupFadeUp 0.8s cubic-bezier(0.32, 0.72, 0, 1) 0.2s forwards;
}

.setup-icon.green {
    color: #34c759;
}

.setup-icon.purple {
    color: #af52de;
}

.setup-title {
    font-size: 26px;
    font-weight: 600;
    color: #000;
    text-align: center;
    letter-spacing: -0.5px;
}

.setup-desc {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    line-height: 1.5;
    max-width: 270px;
}

.setup-perf-card {
    width: 100%;
    max-width: 270px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.setup-perf-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.setup-perf-title {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.setup-perf-hint {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.5);
}

.setup-btn {
    width: 100%;
    max-width: 270px;
    padding: 16px;
    border: 0.5px solid rgba(0, 122, 255, 0.4);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.7), rgba(0, 100, 220, 0.5));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    margin-top: 16px;
    transition: transform 0.15s;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.setup-btn:active {
    transform: scale(0.97);
}

.setup-btn.secondary {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
    margin-top: 8px;
    box-shadow: none;
}

.setup-btn.green {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.7), rgba(48, 209, 88, 0.5));
    border-color: rgba(52, 199, 89, 0.4);
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.setup-step-indicator {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.step-dot.active {
    background: #007aff;
    width: 24px;
    border-radius: 4px;
}

.setup-passcode-display {
    display: flex;
    gap: 18px;
    margin: 16px 0 20px;
}

.setup-passcode-display .passcode-dot {
    width: 16px;
    height: 16px;
    border-color: rgba(0, 0, 0, 0.3);
}

.setup-passcode-display .passcode-dot.filled {
    background: #000;
    border-color: #000;
}

.setup-dark .setup-passcode-display .passcode-dot {
    border-color: rgba(255, 255, 255, 0.5);
}

.setup-dark .setup-passcode-display .passcode-dot.filled {
    background: #fff;
    border-color: #fff;
}

.setup-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 240px;
}

.setup-numpad .passcode-key {
    width: 70px;
    height: 70px;
    font-size: 30px;
    color: #000;
    border-color: rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.setup-numpad .passcode-key:active {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.06));
}

.setup-numpad .passcode-key.backspace {
    color: rgba(0, 0, 0, 0.4);
    background: none;
}

.setup-numpad .passcode-key.backspace:active {
    color: #000;
    background: none;
}

.setup-dark .setup-numpad .passcode-key {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.setup-dark .setup-numpad .passcode-key:active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
}

.setup-dark .setup-numpad .passcode-key.backspace {
    color: rgba(255, 255, 255, 0.5);
    background: none;
}

.setup-dark .setup-numpad .passcode-key.backspace:active {
    color: #fff;
    background: none;
}

.setup-faceid-container {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.setup-faceid-container .faceid-bracket {
    width: 32px;
    height: 32px;
    border-color: #000;
}

.setup-faceid-container .faceid-face {
    width: 50px;
    height: 50px;
}

.setup-faceid-container .faceid-eye {
    width: 7px;
    height: 14px;
    border-width: 3px;
    top: 6px;
    border-color: #000;
}

.setup-faceid-container .faceid-eye.left {
    left: 8px;
}

.setup-faceid-container .faceid-eye.right {
    right: 8px;
}

.setup-faceid-container .faceid-nose {
    width: 3px;
    height: 14px;
    top: 14px;
    background: #000;
}

.setup-faceid-container .faceid-nose::after {
    width: 12px;
    height: 3px;
    background: #000;
}

.setup-faceid-container .faceid-mouth {
    width: 22px;
    height: 9px;
    border-width: 3px;
    bottom: 3px;
    border-color: #000;
}

.setup-faceid-container .faceid-bracket {
    transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.setup-faceid-container .faceid-face {
    transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.setup-faceid-container.scanning .faceid-bracket {
    border-color: #34c759;
}

.setup-faceid-container.scanning .faceid-eye,
.setup-faceid-container.scanning .faceid-mouth {
    border-color: #34c759;
    transition: border-color 0.4s ease;
}

.setup-faceid-container.scanning .faceid-nose,
.setup-faceid-container.scanning .faceid-nose::after {
    background: #34c759;
    transition: background 0.4s ease;
}

.setup-faceid-container.scanning .faceid-bracket.tl {
    top: 4px;
    left: 4px;
}

.setup-faceid-container.scanning .faceid-bracket.tr {
    top: 4px;
    right: 4px;
}

.setup-faceid-container.scanning .faceid-bracket.bl {
    bottom: 4px;
    left: 4px;
}

.setup-faceid-container.scanning .faceid-bracket.br {
    bottom: 4px;
    right: 4px;
}

.setup-faceid-container.scanning-pulse {
    animation: setupFaceidPulse 0.8s ease-in-out infinite alternate;
}

@keyframes setupFaceidPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(52, 199, 89, 0));
    }

    100% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 12px rgba(52, 199, 89, 0.4));
    }
}

.setup-faceid-container.success .faceid-bracket {
    border-color: #34c759;
    border-radius: 8px;
}

.setup-faceid-container.success .faceid-bracket.tl {
    top: 0;
    left: 0;
}

.setup-faceid-container.success .faceid-bracket.tr {
    top: 0;
    right: 0;
}

.setup-faceid-container.success .faceid-bracket.bl {
    bottom: 0;
    left: 0;
}

.setup-faceid-container.success .faceid-bracket.br {
    bottom: 0;
    right: 0;
}

.setup-faceid-container.success .faceid-eye,
.setup-faceid-container.success .faceid-mouth {
    border-color: #34c759;
}

.setup-faceid-container.success .faceid-nose,
.setup-faceid-container.success .faceid-nose::after {
    background: #34c759;
}

.setup-faceid-container.success {
    animation: setupFaceidSuccess 0.6s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes setupFaceidSuccess {
    0% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 12px rgba(52, 199, 89, 0.4));
    }

    40% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 24px rgba(52, 199, 89, 0.6));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 16px rgba(52, 199, 89, 0.3));
    }
}

.setup-dark .setup-faceid-container .faceid-bracket {
    border-color: #fff;
}

.setup-dark .setup-faceid-container .faceid-eye {
    border-color: #fff;
}

.setup-dark .setup-faceid-container .faceid-nose {
    background: #fff;
}

.setup-dark .setup-faceid-container .faceid-nose::after {
    background: #fff;
}

.setup-dark .setup-faceid-container .faceid-mouth {
    border-color: #fff;
}

.setup-dark .setup-perf-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.setup-dark .setup-perf-title {
    color: #fff;
}

.setup-dark .setup-perf-hint {
    color: rgba(255, 255, 255, 0.62);
}

.setup-faceid-container .faceid-scanline {
    height: 3px;
}

.setup-faceid-container.scanning .faceid-scanline {
    animation: faceidScan 1.5s ease-in-out infinite;
}

.setup-success-check {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #34c759;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    margin-bottom: 16px;
}

.setup-success-check.show {
    transform: scale(1);
}

/* ═══════════════════════════════════════════════════════
   THEME OVERRIDES (applies variables to all elements)
   ═══════════════════════════════════════════════════════ */

/* Settings */
.settings-group-title {
    color: var(--text-tertiary);
}

.settings-item {
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.settings-item+.settings-item {
    border-top: 0.5px solid var(--separator);
}

.settings-label {
    color: var(--text-primary);
}

.settings-value {
    color: var(--text-tertiary);
}

.settings-value i {
    color: var(--text-quaternary);
}

.settings-slider {
    background: var(--fill-primary);
}

.settings-slider-value {
    color: var(--text-secondary);
}

.settings-select {
    background: var(--input-bg);
    color: var(--text-primary);
}

.settings-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* AgencyOS Toggle - theme aware */
.agency-toggle {
    background: var(--toggle-bg);
}

.agency-toggle.active {
    background: var(--toggle-active);
}

/* App Store */
#appstore-header {
    color: #fff;
}

/* Dialer */
#dialer-tabs {
    background: var(--fill-secondary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0.5px solid var(--separator);
}

.tab-btn {
    color: var(--text-tertiary);
}

.tab-btn.active {
    background: var(--card-bg);
    border: 0.5px solid var(--separator);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

#dial-number {
    color: var(--text-primary);
}

.dial-key {
    background: var(--card-bg);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 0.5px solid var(--separator);
    color: var(--text-primary);
}

.dial-key:active {
    background: var(--fill-primary);
}

#dial-backspace {
    color: var(--text-tertiary);
}

.dialer-test-hint {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--card-bg);
    border: 0.5px solid var(--separator);
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.dialer-test-hint.hidden {
    display: none;
}

/* Messages / Buzz */
.chat-item {
    border-bottom: 0.5px solid var(--separator);
}

.chat-name {
    color: var(--text-primary);
}

.chat-preview {
    color: var(--text-tertiary);
}

#buzz-input-area {
    background: var(--header-bg);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-top: 0.5px solid var(--header-border);
}

#buzz-message-input {
    background: var(--input-bg);
    border: 0.5px solid var(--separator);
    color: var(--text-primary);
}

#buzz-message-input::placeholder {
    color: var(--text-tertiary);
}

.msg-bubble.received {
    background: var(--fill-secondary);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 0.5px solid var(--separator);
    color: var(--text-primary);
}

/* Contacts */
.search-input {
    background: var(--input-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0.5px solid var(--separator);
    color: var(--text-primary);
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.contact-item {
    border-bottom: 0.5px solid var(--separator);
}

.contact-name {
    color: var(--text-primary);
}

.contact-number {
    color: var(--text-tertiary);
}

/* Pulse */
.chirp-item {
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 0.5px solid var(--separator);
}

.chirp-author {
    color: var(--text-primary);
}

.chirp-time {
    color: var(--text-tertiary);
}

.chirp-message {
    color: var(--text-secondary);
}

.chirp-delete {
    color: var(--text-quaternary);
}

/* Mail */
.mail-item {
    border-bottom: 0.5px solid var(--separator);
}

.mail-subject {
    color: var(--text-primary);
}

.mail-preview {
    color: var(--text-tertiary);
}

.mail-date {
    color: var(--text-quaternary);
}

.mail-delete-btn {
    color: var(--text-quaternary);
}

/* Recent calls */
.recent-item {
    border-bottom: 0.5px solid var(--separator);
}

.recent-name {
    color: var(--text-primary);
}

.recent-number {
    color: var(--text-tertiary);
}

/* Modal */
#modal-box {
    background: var(--modal-bg);
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    border: 0.5px solid var(--separator);
}

#modal-title {
    color: var(--text-primary);
}

#modal-body input {
    background: var(--input-bg);
    border: 0.5px solid var(--separator);
    color: var(--text-primary);
}

#modal-body input::placeholder {
    color: var(--text-tertiary);
}

/* Calculator - theme aware */
.calc-container {
    background: var(--calc-bg);
}

.calc-display {
    color: var(--text-primary);
}

.calc-btn {
    background: var(--calc-btn-bg);
    border: 0.5px solid var(--separator);
    color: var(--calc-btn-color);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.calc-btn.func {
    background: var(--calc-func-bg);
    color: var(--calc-func-color);
}

/* Empty states */
.empty-state {
    color: var(--empty-state-color);
}

/* Notifications */
.phone-notification {
    background: var(--notif-bg);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.notif-title {
    color: var(--notif-text, #fff);
}

.notif-text {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

/* Wallet */
#wallet-amount {
    color: var(--text-primary);
}

#wallet-transfer h3 {
    color: var(--text-primary);
}

.wallet-input {
    background: var(--input-bg);
    border-color: var(--separator);
    color: var(--text-primary);
}

.wallet-input::placeholder {
    color: var(--text-tertiary);
}

/* Notes */
.note-title {
    color: var(--text-primary);
}

.note-preview {
    color: var(--text-tertiary);
}

.note-date {
    color: var(--text-quaternary);
}

.note-item {
    border-bottom: 0.5px solid var(--separator);
}

#note-editor-title,
#note-editor-content {
    color: var(--text-primary) !important;
}

#note-editor-title::placeholder,
#note-editor-content::placeholder {
    color: var(--text-tertiary) !important;
}

/* Call Screen */
#call-name {
    color: #fff;
}

/* Contact Input */
.contact-input {
    background: var(--input-bg);
    border-color: var(--separator);
    color: var(--text-primary);
}

.contact-input::placeholder {
    color: var(--text-tertiary);
}

.contact-emergency-toggle {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--card-bg);
    border: 0.5px solid var(--separator);
    color: var(--text-primary);
    cursor: pointer;
}

.contact-emergency-toggle input {
    display: none;
}

.contact-emergency-toggle-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 55, 95, 0.12);
    color: rgba(255, 55, 95, 0.55);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.contact-emergency-toggle input:checked + .contact-emergency-toggle-icon {
    background: linear-gradient(135deg, #ff6b62, #ff375f);
    color: #fff;
    transform: scale(1.04);
}

.contact-emergency-toggle-copy {
    font-size: 15px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   LIGHT MODE: Additional overrides for remaining hardcoded whites
   ═══════════════════════════════════════════════════════ */

#phone-frame:not(.dark-mode) .chat-name {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) .chat-preview {
    color: var(--text-tertiary);
}

#phone-frame:not(.dark-mode) .chat-avatar {
    color: #fff;
}

#phone-frame:not(.dark-mode) .tab-btn.active {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) .tab-btn {
    color: var(--text-tertiary);
}

#phone-frame:not(.dark-mode):not(.status-light-content) #status-bar {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode):not(.status-light-content) #status-icons {
    color: var(--text-primary);
}

#phone-frame.status-light-content #status-bar,
#phone-frame.status-light-content #status-time,
#phone-frame.status-light-content #status-icons,
#phone-frame.status-light-content #status-icons i {
    color: #fff !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.24);
}

#phone-frame:not(.dark-mode) .hw-widget-value {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) .hw-widget {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

#phone-frame:not(.dark-mode) .hw-widget-icon,
#phone-frame:not(.dark-mode) .hw-widget-label,
#phone-frame:not(.dark-mode) .hw-widget-sub,
#phone-frame:not(.dark-mode) .hw-music-artist {
    color: var(--text-secondary);
}

#phone-frame:not(.dark-mode) .hw-music-title {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) .hw-music-title-muted {
    color: var(--text-secondary);
}

#phone-frame:not(.dark-mode) #buzz-message-input {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) .radio-freq-input {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen {
    background:
        radial-gradient(circle at 14% 0%, rgba(102, 148, 255, 0.16), transparent 28%),
        radial-gradient(circle at 88% 92%, rgba(135, 97, 255, 0.12), transparent 30%),
        linear-gradient(180deg, #fbfcff 0%, #eef2f8 100%);
    color: #141a24;
}

#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .chat-item {
    border-bottom: none;
}

#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .chat-item::after {
    background: rgba(24, 30, 42, 0.08);
}

#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .buzz-pill-btn,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .buzz-circle-btn,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .buzz-search-bar,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .buzz-filter-panel,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-thread-back,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-chat-card,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-chat-action,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-quick-action,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen #buzz-input-area,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen #buzz-attach-btn,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen #buzz-send-btn {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 249, 253, 0.84)),
        rgba(255, 255, 255, 0.78);
    border-color: rgba(146, 156, 178, 0.16);
    color: #141a24;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 16px 34px rgba(38, 48, 72, 0.1);
}

#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .buzz-hub-title,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .chat-name,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-thread-name,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-chat-card-copy strong,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-contact-card-copy strong,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-inline-app-button {
    color: #141a24;
}

#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .buzz-hub-subtitle,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .chat-preview,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .chat-time,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .chat-chevron,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .chat-badge,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-thread-status,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-chat-card-copy span,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen #buzz-composer-meta,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .msg-time,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-contact-card-copy span,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-date-divider {
    color: rgba(37, 48, 67, 0.56);
}

#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .chat-item.unknown-thread .chat-badge,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .buzz-filter-option.active,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-quick-action,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-inline-app-button,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-inline-card,
#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .buzz-contact-card {
    background: rgba(19, 31, 49, 0.06);
    color: #141a24;
}

#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen .buzz-filter-option {
    color: #141a24;
}

#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen #buzz-input-area {
    border-top: 1px solid rgba(146, 156, 178, 0.16);
}

#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen #buzz-message-input,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen #buzz-search-input {
    background: transparent;
    color: #141a24;
}

#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen #buzz-message-input::placeholder,
#phone-frame:not(.dark-mode) #app-buzz.buzz-liquid-screen #buzz-search-input::placeholder {
    color: rgba(37, 48, 67, 0.42);
}

#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .msg-bubble.received {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 247, 252, 0.9));
    border-color: rgba(146, 156, 178, 0.18);
    color: #141a24;
}

#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .msg-bubble.ai {
    background: linear-gradient(180deg, rgba(240, 236, 255, 0.96), rgba(225, 231, 255, 0.92));
    border-color: rgba(141, 126, 255, 0.18);
    color: #141a24;
}

#phone-frame:not(.dark-mode) #buzz-chat-view.buzz-thread-screen .msg-bubble.sent {
    color: #fff;
}

#phone-frame:not(.dark-mode) .msg-bubble.received {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) #appstore-header {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) .settings-label {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) .settings-group-title {
    color: var(--text-tertiary);
}

/* Appearance Selector (AgencyOS26.3 style) */
.appearance-selector {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    justify-content: center;
}

.appearance-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.appearance-preview {
    width: 72px;
    height: 130px;
    border-radius: 16px;
    border: 3px solid transparent;
    transition: border-color 0.3s, transform 0.2s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.appearance-preview:active {
    transform: scale(0.95);
}

.appearance-option.active .appearance-preview {
    border-color: #007aff;
}

.appearance-preview.light-preview {
    background: linear-gradient(180deg, #f2f2f7, #fff);
}

.appearance-preview.light-preview::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 5px;
    background: #000;
    border-radius: 4px;
}

.appearance-preview.light-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.03));
}

.appearance-preview.dark-preview {
    background: linear-gradient(180deg, #1c1c1e, #000);
}

.appearance-preview.dark-preview::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 5px;
    background: #333;
    border-radius: 4px;
}

.appearance-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.appearance-option.active .appearance-label {
    color: #007aff;
    font-weight: 600;
}

.frame-finish-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 4px;
}

.frame-finish-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 108px;
    padding: 14px 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    text-align: center;
}

.frame-finish-option:active {
    transform: scale(0.98);
}

.frame-finish-option.active {
    border-color: rgba(90, 190, 255, 0.72);
    background: linear-gradient(135deg, rgba(90, 190, 255, 0.16), rgba(120, 224, 255, 0.06));
    box-shadow: 0 12px 24px rgba(33, 120, 255, 0.12);
}

.frame-finish-swatch {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 10px 18px rgba(0, 0, 0, 0.16);
}

.frame-finish-swatch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 45%, rgba(0, 0, 0, 0.18) 100%);
}

.frame-finish-silver {
    background: linear-gradient(145deg, #f5f7fb, #cad1dc 52%, #f0f3f7);
}

.frame-finish-graphite {
    background: linear-gradient(145deg, #4f5661, #1f252d 54%, #626b77);
}

.frame-finish-starlight {
    background: linear-gradient(145deg, #fbf6eb, #d7c7ae 54%, #fff8ef);
}

.frame-finish-blue {
    background: linear-gradient(145deg, #b1c8e7, #45668f 54%, #d9e8f7);
}

.frame-finish-desert {
    background: linear-gradient(145deg, #f0d4b6, #986845 54%, #f8e6d1);
}

.frame-finish-green {
    background: linear-gradient(145deg, #d8f2e1, #4f9c72 54%, #e8fbef);
}

.frame-finish-pink {
    background: linear-gradient(145deg, #f7d8e8, #bf6c96 54%, #fdebf3);
}

.frame-finish-violet {
    background: linear-gradient(145deg, #e2d8fb, #6f63b9 54%, #f0ebff);
}

.frame-finish-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.05;
}

.frame-finish-note {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.2;
}

.frame-finish-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--text-quaternary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.frame-finish-option.active .frame-finish-check {
    background: #0a84ff;
    border-color: #0a84ff;
    color: #fff;
}

/* Home Screen Widget Toggles (Settings) */
.hw-widget-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hw-toggle-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--fill-tertiary, rgba(118, 118, 128, 0.12));
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.2s;
}

.hw-toggle-item input {
    display: none;
}

.hw-toggle-item:has(input:checked) {
    background: rgba(0, 122, 255, 0.15);
    color: #007aff;
}

.hw-toggle-item i {
    font-size: 14px;
}

/* Lock Clock Style Selector (Settings) */
.lock-clock-styles {
    display: flex;
    gap: 8px;
}

.lock-style-btn {
    flex: 1;
    padding: 10px 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.lock-style-btn.active {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
}

.appearance-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--text-quaternary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    transition: all 0.2s;
}

.appearance-option.active .appearance-check {
    background: #007aff;
    border-color: #007aff;
    color: #fff;
}

/* Settings Pages (AgencyOS26.3 drill-down) */
.settings-page {
    display: none;
    padding: 0;
}

.settings-page.active {
    display: block;
    animation: settingsPageIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes settingsPageIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Settings nav item with icon */
.settings-nav-item {
    cursor: pointer;
}

.settings-nav-item:active {
    background: var(--fill-tertiary, rgba(120, 120, 128, 0.12));
}

.settings-nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 4px;
}

/* Generic App Content */
#generic-app-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 16px;
    text-align: center;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.generic-app-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.generic-app-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.generic-app-desc {
    font-size: 14px;
    color: var(--text-tertiary);
    line-height: 1.5;
    max-width: 260px;
}

/* ═══════════════════════════════════════════════════════
   LANGUAGE SELECTOR
   ═══════════════════════════════════════════════════════ */

.language-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px 0;
}

.language-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 12px;
    background: var(--fill-tertiary, rgba(0, 0, 0, 0.04));
    border: 2px solid var(--separator, rgba(0, 0, 0, 0.08));
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary, rgba(0, 0, 0, 0.8));
}

.language-option.active {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.1);
}

.language-option:active {
    transform: scale(0.95);
}

.lang-flag {
    font-size: 22px;
    line-height: 1;
}

.lang-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
    text-align: center;
}

.language-option.active .lang-label {
    color: #007aff;
    font-weight: 600;
}

.setup-dark .language-option {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.setup-dark .language-option .lang-label {
    color: rgba(255, 255, 255, 0.7);
}

.setup-dark .language-option.active {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.2);
}

.setup-dark .language-option.active .lang-label {
    color: #007aff;
}

/* ═══════════════════════════════════════════════════════
   SETUP LOCALE STEP
   ═══════════════════════════════════════════════════════ */

.setup-locale-step {
    justify-content: flex-start;
    padding-top: 46px;
    padding-bottom: 104px;
    gap: 8px;
}

.setup-locale-step .setup-desc {
    max-width: 288px;
}

.setup-locale-shell {
    width: 100%;
    max-width: 290px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 1px 6px;
}

.setup-locale-group {
    width: 100%;
    padding: 14px 12px 12px;
    border-radius: 24px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.34));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.setup-locale-group-title {
    margin: 0 0 10px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.36);
}

.setup-locale-grid {
    width: 100%;
    display: grid;
    align-content: start;
}

.setup-language-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.setup-timezone-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: 126px;
    overflow-y: auto;
    padding-right: 2px;
}

.setup-timezone-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.setup-locale-grid .language-option {
    min-height: 74px;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px !important;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: rgba(0, 0, 0, 0.9);
}

.setup-language-grid .lang-flag {
    font-size: 20px;
}

.setup-language-grid .lang-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.56);
}

.setup-timezone-grid .language-option {
    min-height: 0;
    gap: 0;
    padding: 10px 8px !important;
    border-radius: 16px;
}

.setup-timezone-grid .lang-label {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
}

.setup-locale-grid .language-option.active .lang-label {
    color: #007aff;
}

.setup-locale-step .setup-btn {
    margin-top: 8px;
    margin-bottom: 34px;
    flex-shrink: 0;
}

.setup-locale-step .setup-step-indicator {
    bottom: 18px;
}

.setup-dark .setup-locale-group {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.setup-dark .setup-locale-group-title {
    color: rgba(255, 255, 255, 0.46);
}

.setup-dark .setup-locale-grid .language-option {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.96);
}

.setup-dark .setup-locale-grid .lang-label {
    color: rgba(255, 255, 255, 0.74);
}

.setup-dark .setup-locale-grid .language-option.active .lang-label {
    color: #8ec3ff;
}

/* Force high contrast on setup locale step in light mode */
#setup-overlay:not(.setup-dark) .setup-locale-group-title {
    color: rgba(0, 0, 0, 0.5) !important;
}

#setup-overlay:not(.setup-dark) .setup-locale-grid .language-option {
    color: rgba(0, 0, 0, 0.94) !important;
}

#setup-overlay:not(.setup-dark) .setup-locale-grid .lang-label {
    color: #4c4c57 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.01);
}

#setup-overlay:not(.setup-dark) .setup-locale-grid .lang-flag {
    opacity: 1 !important;
    filter: saturate(1.05) contrast(1.02);
}

#setup-overlay:not(.setup-dark) .setup-locale-grid .language-option:not(.active) {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.11);
}

#setup-overlay:not(.setup-dark) .setup-locale-grid .language-option.active .lang-label {
    color: #007aff !important;
}

/* ═══════════════════════════════════════════════════════
   SETUP FACE ID ENROLLMENT
   ═══════════════════════════════════════════════════════ */

.setup-faceid-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 2px;
}

.setup-faceid-container {
    position: relative;
    width: 158px;
    height: 158px;
    margin-bottom: 0;
    border-radius: 40px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.68) 38%, rgba(255, 255, 255, 0.22) 72%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    animation: setupFaceidIdleFloat 4.6s ease-in-out infinite;
}

.setup-faceid-aura {
    position: absolute;
    inset: -18px;
    border-radius: 52px;
    background: radial-gradient(circle, rgba(10, 132, 255, 0.18), transparent 64%);
    filter: blur(14px);
    opacity: 0.95;
    z-index: 0;
    animation: setupFaceidAuraDrift 3.4s ease-in-out infinite;
}

.setup-faceid-ring {
    position: absolute;
    inset: 10px;
    border-radius: 32px;
    border: 1.5px solid rgba(0, 122, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
    z-index: 1;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.setup-faceid-orbit {
    position: absolute;
    inset: 9px;
    border-radius: 33px;
    z-index: 1;
    opacity: 0.88;
    animation: setupFaceidOrbit 6s linear infinite;
}

.setup-faceid-orbit::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #68bbff, #007aff);
    box-shadow: 0 0 18px rgba(0, 122, 255, 0.45);
}

.setup-faceid-grid {
    position: absolute;
    inset: 20px;
    border-radius: 26px;
    background-image:
        linear-gradient(rgba(52, 199, 89, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52, 199, 89, 0.18) 1px, transparent 1px);
    background-size: 100% 16px, 16px 100%;
    opacity: 0;
    transform: scale(0.94);
    z-index: 1;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.setup-faceid-check {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.96), rgba(48, 209, 88, 0.84));
    color: #fff;
    font-size: 24px;
    box-shadow: 0 18px 32px rgba(52, 199, 89, 0.28);
    z-index: 4;
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.setup-faceid-status {
    max-width: 240px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.42);
    transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.setup-faceid-container .faceid-bracket {
    width: 40px;
    height: 40px;
    border-color: rgba(0, 0, 0, 0.88);
    z-index: 3;
    transition: border-color 0.35s ease, opacity 0.3s ease, transform 0.35s ease, filter 0.35s ease;
}

.setup-faceid-container .faceid-bracket.tl {
    top: 18px;
    left: 18px;
    border-top-width: 3px;
    border-left-width: 3px;
    border-radius: 18px 0 0 0;
}

.setup-faceid-container .faceid-bracket.tr {
    top: 18px;
    right: 18px;
    border-top-width: 3px;
    border-right-width: 3px;
    border-radius: 0 18px 0 0;
}

.setup-faceid-container .faceid-bracket.bl {
    bottom: 18px;
    left: 18px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-radius: 0 0 0 18px;
}

.setup-faceid-container .faceid-bracket.br {
    bottom: 18px;
    right: 18px;
    border-bottom-width: 3px;
    border-right-width: 3px;
    border-radius: 0 0 18px 0;
}

.setup-faceid-container .faceid-face {
    width: 60px;
    height: 60px;
    z-index: 3;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease, filter 0.35s ease;
}

.setup-faceid-container .faceid-eye {
    width: 8px;
    height: 15px;
    top: 8px;
    border-width: 3px;
    border-color: rgba(0, 0, 0, 0.88);
}

.setup-faceid-container .faceid-eye.left {
    left: 9px;
}

.setup-faceid-container .faceid-eye.right {
    right: 9px;
}

.setup-faceid-container .faceid-nose {
    width: 3px;
    height: 15px;
    top: 16px;
    background: rgba(0, 0, 0, 0.88);
}

.setup-faceid-container .faceid-nose::after {
    width: 12px;
    height: 3px;
    background: rgba(0, 0, 0, 0.88);
}

.setup-faceid-container .faceid-mouth {
    width: 22px;
    height: 9px;
    bottom: 4px;
    border-width: 3px;
    border-color: rgba(0, 0, 0, 0.88);
}

.setup-faceid-container .faceid-scanline {
    left: 18px;
    right: 18px;
    height: 4px;
    top: 16px;
    z-index: 2;
    opacity: 0;
}

.setup-faceid-container.scanning {
    animation: none;
    box-shadow:
        0 22px 50px rgba(52, 199, 89, 0.16),
        0 0 0 1px rgba(52, 199, 89, 0.1) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.setup-faceid-container.scanning .setup-faceid-aura {
    background: radial-gradient(circle, rgba(52, 199, 89, 0.28), transparent 66%);
    animation: setupFaceidAuraScan 1.1s ease-in-out infinite;
}

.setup-faceid-container.scanning .setup-faceid-ring {
    border-color: rgba(52, 199, 89, 0.38);
    box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.14), 0 0 24px rgba(52, 199, 89, 0.08);
}

.setup-faceid-container.scanning .setup-faceid-grid {
    opacity: 0.54;
    transform: scale(1);
}

.setup-faceid-container.scanning .setup-faceid-orbit {
    animation-duration: 2.1s;
}

.setup-faceid-container.scanning .setup-faceid-orbit::before {
    background: linear-gradient(135deg, #8bffb9, #34c759);
    box-shadow: 0 0 20px rgba(52, 199, 89, 0.52);
}

.setup-faceid-container.scanning .faceid-bracket {
    border-color: #34c759;
    filter: drop-shadow(0 0 8px rgba(52, 199, 89, 0.24));
}

.setup-faceid-container.scanning .faceid-bracket.tl {
    animation: setupFaceidBracketTL 1.3s ease-in-out infinite;
}

.setup-faceid-container.scanning .faceid-bracket.tr {
    animation: setupFaceidBracketTR 1.3s ease-in-out infinite;
}

.setup-faceid-container.scanning .faceid-bracket.bl {
    animation: setupFaceidBracketBL 1.3s ease-in-out infinite;
}

.setup-faceid-container.scanning .faceid-bracket.br {
    animation: setupFaceidBracketBR 1.3s ease-in-out infinite;
}

.setup-faceid-container.scanning .faceid-face {
    filter: drop-shadow(0 0 10px rgba(52, 199, 89, 0.12));
}

.setup-faceid-container.scanning .faceid-eye,
.setup-faceid-container.scanning .faceid-mouth {
    border-color: #34c759;
}

.setup-faceid-container.scanning .faceid-nose,
.setup-faceid-container.scanning .faceid-nose::after {
    background: #34c759;
}

.setup-faceid-container.scanning .faceid-scanline {
    opacity: 1;
    animation: faceidScanMulti 1.3s ease-in-out infinite;
}

.setup-faceid-container.scanning-phase-2 .setup-faceid-grid {
    opacity: 0.76;
}

.setup-faceid-container.scanning-phase-2 .faceid-face {
    transform: scale(1.08);
}

.setup-faceid-container.scanning-phase-2 .setup-faceid-ring {
    transform: scale(1.015);
}

.setup-faceid-container.scanning-phase-3 .setup-faceid-orbit {
    animation-duration: 1.2s;
}

.setup-faceid-container.scanning-phase-3 .setup-faceid-ring {
    box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.22), 0 0 30px rgba(52, 199, 89, 0.16);
}

.setup-faceid-container.scanning-phase-3 .faceid-face {
    transform: scale(1.04);
}

.setup-faceid-container.success {
    animation: none;
    box-shadow:
        0 24px 54px rgba(52, 199, 89, 0.22),
        0 0 0 1px rgba(52, 199, 89, 0.16) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.setup-faceid-container.success .setup-faceid-aura {
    background: radial-gradient(circle, rgba(52, 199, 89, 0.34), transparent 64%);
    opacity: 1;
}

.setup-faceid-container.success .setup-faceid-ring {
    border-color: rgba(52, 199, 89, 0.62);
    transform: scale(1.03);
}

.setup-faceid-container.success .setup-faceid-grid,
.setup-faceid-container.success .faceid-bracket,
.setup-faceid-container.success .faceid-face,
.setup-faceid-container.success .faceid-scanline {
    opacity: 0;
}

.setup-faceid-container.success .setup-faceid-check {
    opacity: 1;
    transform: scale(1);
}

.setup-faceid-container.scanning+.setup-faceid-status,
.setup-faceid-container.scanning-phase-2+.setup-faceid-status,
.setup-faceid-container.scanning-phase-3+.setup-faceid-status {
    color: #34c759;
    transform: translateY(-1px);
}

.setup-faceid-container.success+.setup-faceid-status {
    color: #34c759;
    font-weight: 700;
    transform: translateY(-1px);
}

.setup-dark .setup-faceid-container {
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.02) 72%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.setup-dark .setup-faceid-status {
    color: rgba(255, 255, 255, 0.56);
}

.setup-dark .setup-faceid-container .faceid-bracket,
.setup-dark .setup-faceid-container .faceid-eye,
.setup-dark .setup-faceid-container .faceid-mouth {
    border-color: rgba(255, 255, 255, 0.92);
}

.setup-dark .setup-faceid-container .faceid-nose,
.setup-dark .setup-faceid-container .faceid-nose::after {
    background: rgba(255, 255, 255, 0.92);
}

/* Setup FaceID alignment + neutral face proportions */
.setup-faceid-container .faceid-face {
    top: 50%;
    left: 50%;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
}

.setup-faceid-container.scanning-phase-2 .faceid-face {
    transform: translate(-50%, -50%) scale(1.06);
}

.setup-faceid-container.scanning-phase-3 .faceid-face {
    transform: translate(-50%, -50%) scale(1.03);
}

.setup-faceid-container .faceid-eye {
    top: 14px;
    width: 8px;
    height: 11px;
    border-width: 2.5px;
    border-radius: 6px;
}

.setup-faceid-container .faceid-eye.left {
    left: 12px;
}

.setup-faceid-container .faceid-eye.right {
    right: 12px;
}

.setup-faceid-container .faceid-nose {
    top: 24px;
    width: 3px;
    height: 12px;
    border-radius: 2px;
}

.setup-faceid-container .faceid-nose::after {
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
}

.setup-faceid-container .faceid-mouth {
    bottom: 6px;
    width: 20px;
    height: 8px;
    border-width: 2.5px;
    border-radius: 0 0 10px 10px;
}

@keyframes setupFaceidIdleFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.01);
    }
}

@keyframes setupFaceidAuraDrift {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.84;
    }

    50% {
        transform: scale(1.03);
        opacity: 1;
    }
}

@keyframes setupFaceidAuraScan {
    0%,
    100% {
        transform: scale(0.94);
        opacity: 0.78;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes setupFaceidOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes setupFaceidBracketTL {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(4px, 4px);
    }
}

@keyframes setupFaceidBracketTR {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-4px, 4px);
    }
}

@keyframes setupFaceidBracketBL {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(4px, -4px);
    }
}

@keyframes setupFaceidBracketBR {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-4px, -4px);
    }
}

/* ═══════════════════════════════════════════════════════
   CONTROL CENTER (AgencyOS26.3 Style)
   ═══════════════════════════════════════════════════════ */

#cc-swipe-zone {
    position: absolute;
    top: 0;
    right: 0;
    width: 33%;
    height: 118px;
    z-index: 900;
    cursor: pointer;
    pointer-events: none;
    touch-action: none;
}

#nc-swipe-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 118px;
    z-index: 900;
    cursor: ns-resize;
    pointer-events: none;
    touch-action: none;
}

#control-center {
    position: absolute;
    inset: 0;
    z-index: 800;
    display: none;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

#notification-center {
    --nc-pull-progress: 0;
    position: absolute;
    inset: 0;
    z-index: 790;
    display: none;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

#notification-center.visible {
    display: block;
    pointer-events: auto;
}

#notification-center.pulling {
    display: block;
    pointer-events: none;
}

#notification-center.closing {
    display: block;
    pointer-events: none;
}

#notification-center.closing #nc-panel {
    transform: translate3d(0, -122%, 0) scale(0.96);
    opacity: 0;
    filter: blur(8px);
}

#nc-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(46px) saturate(200%) brightness(0.84);
    -webkit-backdrop-filter: blur(46px) saturate(200%) brightness(0.84);
    opacity: 0;
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

#notification-center.visible #nc-backdrop {
    opacity: 1;
}

#notification-center.pulling #nc-backdrop {
    opacity: calc(0.08 + (var(--nc-pull-progress) * 0.92));
}

#nc-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    padding: 42px 12px 18px;
    transform: translate3d(0, -126%, 0) scale(0.94);
    opacity: 0;
    filter: blur(10px);
    transition:
        transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    transform-origin: top center;
}

#notification-center.visible #nc-panel {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: blur(0);
}

#notification-center.pulling #nc-panel {
    transform: translate3d(0, calc((-126%) + (126% * var(--nc-pull-progress))), 0)
        scale(calc(0.94 + (0.06 * var(--nc-pull-progress))));
    opacity: calc(0.14 + (0.86 * var(--nc-pull-progress)));
    filter: blur(calc(10px * (1 - var(--nc-pull-progress))));
}

#notification-center:not(.visible):not(.closing):not(.pulling) .nc-handle,
#notification-center:not(.visible):not(.closing):not(.pulling) .nc-header,
#notification-center:not(.visible):not(.closing):not(.pulling) .nc-item,
#notification-center:not(.visible):not(.closing):not(.pulling) .nc-empty {
    opacity: 0;
    transform: translate3d(0, -18px, 0) scale(0.94);
    filter: blur(5px);
}

#notification-center.pulling .nc-handle,
#notification-center.pulling .nc-header,
#notification-center.pulling .nc-item,
#notification-center.pulling .nc-empty {
    opacity: calc(0.12 + (0.88 * var(--nc-pull-progress)));
    transform: translate3d(0, calc(-18px * (1 - var(--nc-pull-progress))), 0)
        scale(calc(0.94 + (0.06 * var(--nc-pull-progress))));
    filter: blur(calc(5px * (1 - var(--nc-pull-progress))));
}

#notification-center.visible .nc-handle {
    animation: ncChromeIn 0.4s 0.02s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#notification-center.visible .nc-header {
    animation: ncChromeIn 0.46s 0.06s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#notification-center.visible .nc-item {
    animation: ncItemIn 0.5s calc(0.08s + (var(--nc-item-index, 0) * 0.045s)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

#notification-center.visible .nc-empty {
    animation: ncItemIn 0.48s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nc-handle {
    width: 46px;
    height: 5px;
    border-radius: 999px;
    margin: 2px auto 10px;
    background: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 10px rgba(0, 0, 0, 0.24);
}

.nc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    margin-bottom: 8px;
}

.nc-title {
    font-size: 27px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.6px;
}

#phone-frame:not(.dark-mode) .nc-title {
    color: var(--text-primary);
}

#nc-clear-btn {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.16s ease, background 0.2s ease;
}

#nc-clear-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.14);
}

#phone-frame:not(.dark-mode) #nc-clear-btn {
    border-color: rgba(20, 20, 24, 0.08);
    background: rgba(255, 255, 255, 0.74);
    color: var(--text-secondary);
}

#nc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 2px 0 6px;
}

#nc-list::-webkit-scrollbar {
    display: none;
}

.nc-item {
    border-radius: 20px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(36px) saturate(185%);
    -webkit-backdrop-filter: blur(36px) saturate(185%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    touch-action: pan-y;
    will-change: transform, opacity, filter;
}

#phone-frame:not(.dark-mode) .nc-item {
    border-color: rgba(20, 20, 24, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58));
    box-shadow: 0 10px 28px rgba(20, 20, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

#phone-frame:not(.dark-mode) .nc-item .notif-title {
    color: var(--text-primary);
}

#phone-frame:not(.dark-mode) .nc-item .notif-text {
    color: var(--text-secondary);
}

.nc-item.important {
    border-color: rgba(255, 204, 0, 0.58);
    box-shadow: 0 10px 34px rgba(255, 171, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.nc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.nc-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.52);
    white-space: nowrap;
}

#phone-frame:not(.dark-mode) .nc-time {
    color: var(--text-tertiary);
}

.nc-empty {
    border-radius: 20px;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 24px 14px;
    font-size: 13px;
}

#phone-frame:not(.dark-mode) .nc-empty {
    border-color: rgba(20, 20, 24, 0.08);
    background: rgba(255, 255, 255, 0.68);
    color: var(--text-secondary);
}

@keyframes ncChromeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -18px, 0) scale(0.94);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes ncItemIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0) scale(0.92);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

#control-center.visible {
    display: block;
    pointer-events: auto;
}

#control-center.closing {
    display: block;
    pointer-events: none;
}

#control-center.closing #cc-backdrop {
    opacity: 0;
}

#control-center.closing #cc-panel {
    transform: translate3d(0, -105%, 0);
}

#cc-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(50px) saturate(220%) brightness(0.8);
    -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(0.8);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

#control-center.visible #cc-backdrop {
    opacity: 1;
}

#cc-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 42px 12px 22px;
    transform: translate3d(0, -105%, 0);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;
}

#cc-panel::-webkit-scrollbar {
    display: none;
}

#control-center.visible #cc-panel {
    transform: translate3d(0, 0, 0);
}

#control-center:not(.visible):not(.closing) .cc-grid > * {
    opacity: 0;
    transform: translateY(-18px) scale(0.94);
    filter: blur(4px);
}

.cc-handle {
    width: 48px;
    height: 5px;
    border-radius: 999px;
    margin: 2px auto 10px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2);
}

.cc-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    padding: 0 4px;
    margin-bottom: 8px;
}

.cc-top-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
}

.cc-top-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

/* Staggered entry animation for CC items - liquid glass cascade */
#control-center.visible .cc-grid > :nth-child(1) {
    animation: ccItemIn 0.5s 0.04s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#control-center.visible .cc-grid > :nth-child(2) {
    animation: ccItemIn 0.5s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#control-center.visible .cc-grid > :nth-child(3) {
    animation: ccItemIn 0.5s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#control-center.visible .cc-grid > :nth-child(4) {
    animation: ccItemIn 0.5s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#control-center.visible .cc-grid > :nth-child(5) {
    animation: ccItemIn 0.5s 0.20s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#control-center.visible .cc-grid > :nth-child(6) {
    animation: ccItemIn 0.5s 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#control-center.visible .cc-grid > :nth-child(7) {
    animation: ccItemIn 0.5s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#control-center.visible .cc-grid > :nth-child(8) {
    animation: ccItemIn 0.5s 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#control-center.visible .cc-grid > :nth-child(9) {
    animation: ccItemIn 0.5s 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ccItemIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.92);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.mu-progress {
    width: 60%;
    height: 4px;
    background: linear-gradient(90deg, #ff2d55, #ff9500);
    border-radius: 2px;
    position: relative;
    box-shadow: 0 0 10px rgba(255, 45, 85, 0.4);
}

.mu-progress-handle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.cc-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    justify-content: flex-start;
    min-height: 0;
    padding-bottom: 20px;
}

/* Toggle Group (2x2) - Liquid Glass */
.cc-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 18px;
    padding: 8px;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cc-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.cc-toggle-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.cc-toggle-icon.active {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.85), rgba(0, 122, 255, 0.65));
    border-color: rgba(0, 122, 255, 0.3);
    color: #fff;
    box-shadow: 0 2px 16px rgba(0, 122, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: ccTogglePop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes ccTogglePop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* Airplane mode: orange when active */
#cc-airplane .cc-toggle-icon.active {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.85), rgba(255, 149, 0, 0.65));
    border-color: rgba(255, 149, 0, 0.3);
    box-shadow: 0 2px 16px rgba(255, 149, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cc-toggle-label {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

/* Music Widget - Liquid Glass */
.cc-music-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 16px;
    padding: 8px 10px;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cc-music-art {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: rgba(118, 118, 128, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.cc-music-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-music-info {
    flex: 1;
    min-width: 0;
}

.cc-music-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-music-artist {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.cc-music-controls {
    display: flex;
    gap: 4px;
}

.cc-music-controls button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    padding: 6px;
    transition: color 0.15s;
}

.cc-music-controls button:active {
    color: #fff;
}

/* DND / Silent Row */
.cc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cc-tile-row {
    display: flex;
}

.cc-tile {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 14px;
    padding: 10px;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cc-tile:active {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(0.96);
}

/* Agency Drop tile special styling */
.cc-tile-wide {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 14px;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-tile-wide:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.2);
}

.cc-tile-wide.active {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.2) 0%, rgba(90, 200, 250, 0.1) 100%);
    border-color: rgba(0, 122, 255, 0.3);
    box-shadow: 0 2px 16px rgba(0, 122, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: ccAirdropActivate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-airdrop-tile {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.cc-performance-tile {
    width: 100%;
}

.cc-airdrop-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    border-color: rgba(90, 200, 250, 0.3);
    color: #fff;
}

.cc-airdrop-icon i {
    font-size: 14px;
}

.cc-airdrop-text {
    flex: 1;
    text-align: left;
}

.cc-airdrop-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.cc-airdrop-status {
    font-size: 11px;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

@keyframes ccAirdropActivate {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.03);
        box-shadow: 0 4px 24px rgba(0, 122, 255, 0.35);
    }

    100% {
        transform: scale(1);
    }
}

.cc-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.cc-tile.active .cc-tile-icon {
    background: linear-gradient(135deg, rgba(94, 92, 230, 0.85), rgba(94, 92, 230, 0.65));
    border-color: rgba(94, 92, 230, 0.3);
    color: #fff;
    box-shadow: 0 2px 12px rgba(94, 92, 230, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cc-tile-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
}

/* Sliders - Liquid Glass */
.cc-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 14px;
    padding: 8px 12px;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cc-slider-icon {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    width: 18px;
    text-align: center;
}

.cc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
}

.cc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

/* Bottom Utilities */
.cc-utils {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.cc-util-btn {
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cc-util-btn:active {
    transform: scale(0.92);
}

.cc-util-btn.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    border-color: rgba(255, 255, 255, 0.5);
    color: #000;
    box-shadow: 0 2px 16px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* CC Edit Mode */
#cc-panel.cc-editing .cc-handle {
    background: #007aff;
    width: 60px;
}

#cc-panel.cc-editing .cc-utils {
    outline: 2px dashed rgba(0, 122, 255, 0.4);
    outline-offset: 4px;
    border-radius: 18px;
}

.cc-util-btn.cc-util-disabled {
    opacity: 0.3;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    background: rgba(44, 44, 46, 0.3);
}

#cc-panel.cc-editing .cc-util-btn {
    animation: ccWiggle 0.4s ease-in-out infinite alternate;
}

@keyframes ccWiggle {
    0% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(1deg);
    }
}

/* ═══════════════════════════════════════════════════════
   SIRI-LIKE AGENCYAI OVERLAY
   ═══════════════════════════════════════════════════════ */

@keyframes agencyAiPulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translateX(-50%) scale(1.3);
        opacity: 1;
    }
}

@keyframes agencyAiSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#agencyai-overlay.agencyai-visible {
    display: flex !important;
    animation: agencyAiSlideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

#agencyai-overlay .ai-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 6px;
    word-wrap: break-word;
}

#agencyai-overlay .ai-msg.user {
    align-self: flex-end;
    background: #007aff;
    color: #fff;
    border-bottom-right-radius: 4px;
}

#agencyai-overlay .ai-msg.ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-bottom-left-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════ */
/* MDT APP STYLES                                                  */
/* ═══════════════════════════════════════════════════════════════ */

.mdt-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 0.5px solid var(--separator);
    padding: 0 4px;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mdt-tab {
    flex: 1;
    padding: 10px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.mdt-tab i {
    font-size: 14px;
}

.mdt-tab.active {
    color: var(--text-primary);
    border-bottom-color: #007aff;
}

#app-ems-mdt .mdt-tab.active {
    border-bottom-color: #ff3b30;
}

.mdt-tab-content {
    display: none;
}

.mdt-tab-content.active {
    display: block;
}

.mdt-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
}

.mdt-input::placeholder {
    color: var(--text-tertiary);
}

.mdt-input:focus {
    border-color: #007aff;
}

.mdt-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    outline: none;
    cursor: pointer;
}

.mdt-btn-primary {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #007aff, #0056cc);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.2s;
}

#app-ems-mdt .mdt-btn-primary {
    background: linear-gradient(135deg, #ff3b30, #d63025);
}

.mdt-btn-primary:active {
    opacity: 0.7;
}

.mdt-search-toggle {
    padding: 8px 14px;
    border-radius: 8px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

.mdt-search-toggle.active {
    background: #007aff;
    color: #fff;
    border-color: #007aff;
}

.mdt-card {
    padding: 14px;
    border-radius: 14px;
    background: var(--card-bg);
    border: 0.5px solid var(--separator);
}

.mdt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mdt-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.mdt-card-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.mdt-badge-high {
    background: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

.mdt-badge-medium {
    background: rgba(255, 149, 0, 0.2);
    color: #ff9500;
}

.mdt-badge-low {
    background: rgba(52, 199, 89, 0.2);
    color: #34c759;
}

.mdt-badge-active {
    background: rgba(0, 122, 255, 0.2);
    color: #007aff;
}

.mdt-card-detail {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.mdt-card-detail i {
    width: 16px;
    text-align: center;
    margin-right: 6px;
    color: var(--text-tertiary);
}

.mdt-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.mdt-card-actions button {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.2s;
}

.mdt-action-primary {
    background: linear-gradient(135deg, #007aff, #0056cc);
    color: #fff;
    border: none;
}

#app-ems-mdt .mdt-action-primary {
    background: linear-gradient(135deg, #ff3b30, #d63025);
}

.mdt-action-ghost {
    background: var(--fill-secondary);
    color: var(--text-primary);
    border: 0.5px solid var(--separator);
}

.mdt-card-actions button:active {
    opacity: 0.7;
}

.mdt-unit-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 0.5px solid var(--separator);
}

.mdt-unit-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.mdt-unit-info {
    flex: 1;
    min-width: 0;
}

.mdt-unit-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdt-unit-status {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.mdt-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.mdt-status-available {
    background: #34c759;
}

.mdt-status-busy {
    background: #ff9500;
}

.mdt-status-offline {
    background: #8e8e93;
}

.mdt-status-emergency {
    background: #ff3b30;
    animation: pulse 1s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.mdt-protocol-card {
    padding: 14px;
    border-radius: 14px;
    background: var(--card-bg);
    border: 0.5px solid var(--separator);
    border-left: 4px solid #ff3b30;
}

.mdt-protocol-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.mdt-protocol-steps {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.mdt-protocol-steps li {
    margin-bottom: 4px;
}

.mdt-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.mdt-empty-state i {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

#phone-frame:not(.dark-mode) .mdt-select option {
    background: #fff;
    color: #111;
}

#phone-frame:not(.dark-mode) #app-police-mdt :not(button)[style*="color:#fff"],
#phone-frame:not(.dark-mode) #app-police-mdt :not(button)[style*="color: #fff"],
#phone-frame:not(.dark-mode) #app-police-mdt :not(button)[style*="color:#ffffff"],
#phone-frame:not(.dark-mode) #app-police-mdt :not(button)[style*="color: #ffffff"],
#phone-frame:not(.dark-mode) #app-ems-mdt :not(button)[style*="color:#fff"],
#phone-frame:not(.dark-mode) #app-ems-mdt :not(button)[style*="color: #fff"],
#phone-frame:not(.dark-mode) #app-ems-mdt :not(button)[style*="color:#ffffff"],
#phone-frame:not(.dark-mode) #app-ems-mdt :not(button)[style*="color: #ffffff"] {
    color: var(--text-primary) !important;
}

#phone-frame:not(.dark-mode) #app-police-mdt :not(button)[style*="color:rgba(255,255,255"],
#phone-frame:not(.dark-mode) #app-police-mdt :not(button)[style*="color: rgba(255,255,255"],
#phone-frame:not(.dark-mode) #app-ems-mdt :not(button)[style*="color:rgba(255,255,255"],
#phone-frame:not(.dark-mode) #app-ems-mdt :not(button)[style*="color: rgba(255,255,255"] {
    color: var(--text-secondary) !important;
}

/* Extra EMS light-mode hardening */
#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-tabs {
    background: #f4f4f8;
}

#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-tab {
    color: rgba(28, 28, 30, 0.72);
}

#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-tab.active {
    color: #111;
}

#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-card,
#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-unit-card,
#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-protocol-card {
    background: #fff;
    border-color: rgba(60, 60, 67, 0.18);
}

#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-card-title,
#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-unit-name,
#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-protocol-title,
#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-empty-state {
    color: #111 !important;
}

#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-card-detail,
#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-unit-status,
#phone-frame:not(.dark-mode) #app-ems-mdt .mdt-protocol-steps {
    color: rgba(28, 28, 30, 0.72) !important;
}

/* Emoji Picker */
.emoji-picker-overlay {
    position: absolute;
    inset: 0;
    z-index: 860;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.18s ease;
}

.emoji-picker-sheet {
    width: 100%;
    max-height: 90%;
    min-height: 58%;
    border-radius: 24px 24px 0 0;
    background: var(--bg-secondary);
    border-top: 0.5px solid var(--separator);
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.emoji-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 18px 12px;
}

.emoji-picker-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.emoji-picker-close {
    border: none;
    background: transparent;
    color: #007aff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.emoji-picker-search-wrap {
    padding: 0 16px 12px;
}

.emoji-picker-search {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 0.5px solid var(--separator);
    background: var(--fill-secondary);
    color: var(--text-primary);
    font-size: 14px;
    padding: 12px 14px;
    outline: none;
}

.emoji-picker-search::placeholder {
    color: var(--text-tertiary);
}

.emoji-picker-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 16px 12px;
}

.emoji-picker-tabs::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.emoji-tab {
    border: 0.5px solid var(--separator);
    background: var(--fill-secondary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.emoji-tab.active {
    color: #fff;
    border-color: #007aff;
    background: linear-gradient(135deg, #007aff, #5ac8fa);
}

.emoji-picker-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 16px 26px;
}

.emoji-picker-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.emoji-btn {
    border: none;
    border-radius: 16px;
    background: var(--fill-tertiary);
    font-size: 28px;
    line-height: 1;
    min-height: 52px;
    padding: 12px 0;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}

.emoji-btn:active {
    transform: scale(0.92);
    background: var(--fill-secondary);
}

/* Share Sheet slide-up animation */
@keyframes slideUpShare {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* AgencyOS26.3 additions */

#game-mode-banner {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translate(-50%, -12px) scale(0.95);
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(30, 170, 255, 0.28), rgba(88, 86, 214, 0.24));
    border: 0.5px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}

#game-mode-banner.active {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

#game-mode-banner i {
    color: #7cd5ff;
}

.phone-notification.important {
    border-color: rgba(255, 204, 0, 0.58);
    box-shadow: 0 10px 34px rgba(255, 171, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.phone-notification.stacked {
    padding-right: 42px;
}

.notif-stack-count {
    position: absolute;
    right: 10px;
    top: 8px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 122, 255, 0.85);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
}

.wallet-app-content {
    position: relative;
    background:
        radial-gradient(circle at 18% 8%, rgba(90, 200, 250, 0.2), transparent 26%),
        radial-gradient(circle at 82% 4%, rgba(255, 159, 10, 0.16), transparent 24%),
        linear-gradient(180deg, rgba(8, 11, 18, 0.98), rgba(11, 14, 24, 0.98));
}

.wallet-app-content.wallet-agencypay-active {
    overflow: hidden;
}

.wallet-app-content.wallet-agencypay-active .wallet-shell {
    visibility: hidden;
    pointer-events: none;
}

.wallet-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding: 16px 16px 48px;
    box-sizing: border-box;
}

#phone-frame:not(.dark-mode) .wallet-app-content {
    background:
        radial-gradient(circle at 18% 8%, rgba(90, 200, 250, 0.14), transparent 26%),
        radial-gradient(circle at 82% 4%, rgba(255, 159, 10, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(246, 248, 252, 0.98), rgba(232, 236, 244, 0.98));
}

.wallet-balance-card-v2 {
    position: relative;
    padding: 18px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 24%),
        linear-gradient(145deg, rgba(19, 84, 255, 0.66), rgba(32, 198, 255, 0.24) 56%, rgba(88, 104, 255, 0.5));
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 26px 56px rgba(4, 16, 38, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.wallet-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.wallet-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wallet-balance-card-v2 .wallet-balance-label {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
}

.wallet-balance-amount {
    margin-top: 8px;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.wallet-hero-number {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 500;
}

.wallet-glass-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.wallet-card-spotlight {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wallet-spotlight-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wallet-spotlight-sub {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.wallet-card-face {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 18px;
    min-height: 162px;
    background:
        linear-gradient(135deg, var(--wallet-card-a), var(--wallet-card-b) 58%, var(--wallet-card-c));
    box-shadow:
        0 18px 36px var(--wallet-card-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    isolation: isolate;
}

.wallet-card-face.compact {
    min-height: 138px;
    border-radius: 24px;
}

.wallet-card-face.overlay {
    min-height: 150px;
}

.wallet-card-shine {
    position: absolute;
    inset: -30% auto auto 34%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.42), transparent 62%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.wallet-card-topline,
.wallet-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wallet-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wallet-card-glyph {
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
}

.wallet-card-title {
    position: relative;
    z-index: 1;
    margin-top: 26px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wallet-card-number {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.15;
    word-break: break-word;
}

.wallet-card-footer {
    margin-top: 26px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wallet-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
}

.wallet-tab {
    min-width: 0;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-radius: 14px;
    padding: 11px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    line-height: 1.15;
    text-align: center;
}

.wallet-tab.active {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.56), rgba(90, 200, 250, 0.34));
    color: #fff;
    border-color: rgba(90, 200, 250, 0.54);
    box-shadow: 0 10px 24px rgba(10, 132, 255, 0.18);
}

.wallet-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.wallet-panel.active {
    display: flex;
}

.wallet-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wallet-panel-title {
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.wallet-panel-sub {
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}

.wallet-mini-pill,
.wallet-chip-btn,
.wallet-primary-btn,
.wallet-secondary-btn,
.wallet-theme-pill {
    font-family: 'Inter', sans-serif;
}

.wallet-mini-pill,
.wallet-chip-btn {
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.15;
}

.wallet-chip-btn.active {
    background: rgba(52, 199, 89, 0.18);
    border-color: rgba(52, 199, 89, 0.34);
    color: #7ef7a5;
}

.wallet-chip-btn.danger {
    color: #ff9f9a;
}

.wallet-chip-btn[disabled] {
    opacity: 0.45;
    cursor: default;
}

.wallet-card-list,
.wallet-activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wallet-card-entry,
.wallet-stack-card,
.wallet-card-builder,
.wallet-pay-sheet,
.wallet-activity-item,
.wallet-activity-empty,
.wallet-fixed-item {
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 34px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.wallet-card-entry {
    padding: 12px;
    border-radius: 24px;
}

.wallet-card-entry.active {
    border-color: rgba(90, 200, 250, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 40px rgba(10, 132, 255, 0.16);
}

.wallet-card-entry-actions,
.wallet-pay-actions,
.wallet-agencypay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.wallet-card-entry-actions > *,
.wallet-pay-actions > *,
.wallet-agencypay-actions > * {
    flex: 1 1 120px;
    min-width: 0;
}

.wallet-card-builder,
.wallet-stack-card,
.wallet-pay-sheet {
    padding: 16px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wallet-builder-title,
.wallet-section-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 800;
}

.wallet-builder-sub,
.wallet-section-sub {
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}

.wallet-input,
.wallet-fixed-create input,
.wallet-fixed-create select {
    width: 100%;
    box-sizing: border-box;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-radius: 15px;
    padding: 13px 14px;
    font-size: 14px;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.wallet-input::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.wallet-theme-row,
.wallet-fixed-create {
    display: grid;
    gap: 10px;
}

.wallet-theme-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wallet-theme-pill {
    position: relative;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, var(--wallet-theme-a), var(--wallet-theme-b));
    color: #fff;
    border-radius: 16px;
    padding: 12px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
}

.wallet-theme-pill.active {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.wallet-primary-btn,
.wallet-secondary-btn,
.wallet-fixed-create button,
.wallet-fixed-claim {
    border: none;
    border-radius: 15px;
    padding: 13px 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1.15;
    min-height: 46px;
    text-align: center;
}

.wallet-fixed-create button {
    background: linear-gradient(135deg, #34c759, #2ea64f);
    box-shadow: 0 16px 30px rgba(52, 199, 89, 0.22);
}

.wallet-fixed-claim {
    margin-top: 10px;
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    box-shadow: 0 14px 24px rgba(10, 132, 255, 0.18);
}

.wallet-primary-btn {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.92), rgba(90, 200, 250, 0.82));
    box-shadow: 0 16px 30px rgba(10, 132, 255, 0.22);
}

.wallet-secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.wallet-inline-status,
.wallet-fixed-status {
    min-height: 18px;
    padding-top: 2px;
    color: var(--text-tertiary);
    font-size: 12px;
    text-align: center;
}

.wallet-pay-request,
.wallet-agencypay-merchant {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wallet-pay-request-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--wallet-pay-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.02);
}

.wallet-pay-request-copy {
    flex: 1;
    min-width: 0;
}

.wallet-pay-request-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
}

.wallet-pay-request-sub {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.wallet-pay-request-amount {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.wallet-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
}

.wallet-activity-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--wallet-activity-accent), rgba(255, 255, 255, 0.18));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.wallet-activity-copy {
    flex: 1;
    min-width: 0;
}

.wallet-activity-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

.wallet-activity-sub {
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.wallet-activity-side {
    text-align: right;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.wallet-activity-side span {
    display: block;
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
}

.wallet-activity-side.positive {
    color: #4be28c;
}

.wallet-activity-side.negative {
    color: #ff9a8b;
}

.wallet-activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 18px;
    border-radius: 24px;
    text-align: center;
    color: var(--text-secondary);
}

.wallet-activity-empty i {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.3);
}

.wallet-activity-empty span {
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}

.wallet-empty-state,
.wallet-empty-spotlight {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.wallet-empty-state {
    padding: 18px;
    border-radius: 24px;
}

.wallet-empty-state-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(10,132,255,0.28), rgba(90,200,250,0.16));
    color: #8fdcff;
    font-size: 20px;
}

.wallet-empty-state-title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.wallet-empty-state-text {
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.5;
}

.wallet-empty-spotlight {
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.wallet-fixed-head {
    padding: 0;
}

.wallet-fixed-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 800;
}

.wallet-fixed-sub {
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}

.wallet-fixed-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wallet-fixed-item {
    padding: 14px;
    border-radius: 20px;
}

.wallet-fixed-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wallet-fixed-name,
.wallet-fixed-amount {
    font-size: 14px;
    font-weight: 800;
}

.wallet-fixed-name {
    color: var(--text-primary);
}

.wallet-fixed-amount {
    color: #7ef7a5;
}

.wallet-fixed-meta {
    margin-top: 7px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.wallet-fixed-claim[disabled] {
    opacity: 0.45;
    cursor: default;
}

.wallet-agencypay-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(5, 8, 14, 0.98), rgba(9, 12, 20, 0.98));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.wallet-agencypay-overlay.visible {
    display: flex;
}

.wallet-agencypay-sheet {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 20px 18px 44px;
    padding-bottom: calc(44px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(22, 28, 40, 0.96), rgba(12, 15, 24, 0.96));
    border: none;
    box-shadow: none;
    transform: translateY(22px) scale(0.96);
    opacity: 0;
    animation: walletAgencyPayIn 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

@keyframes walletAgencyPayIn {
    from {
        transform: translateY(22px) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.wallet-agencypay-scan,
.wallet-agencypay-cardstage {
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.wallet-agencypay-scan {
    display: flex;
    justify-content: center;
    min-height: 116px;
    margin-bottom: 2px;
}

.wallet-agencypay-scan-visual {
    position: relative;
    width: 116px;
    height: 116px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 40px;
    overflow: hidden;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.wallet-agencypay-face {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wallet-face-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: #4dd8ff;
    border-style: solid;
    border-width: 0;
}

.wallet-face-corner.tl { top: 10px; left: 10px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 8px; }
.wallet-face-corner.tr { top: 10px; right: 10px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 8px; }
.wallet-face-corner.bl { bottom: 10px; left: 10px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 8px; }
.wallet-face-corner.br { bottom: 10px; right: 10px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 8px; }

.wallet-agencypay-scanline {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8ce7ff, transparent);
    top: 18px;
    animation: walletAgencyScanline 1.15s ease-in-out infinite alternate;
    box-shadow: 0 0 14px rgba(77, 216, 255, 0.5);
}

@keyframes walletAgencyScanline {
    from { transform: translateY(0); }
    to { transform: translateY(72px); }
}

.wallet-agencypay-nfc {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(10px) scale(0.92);
}

.wallet-agencypay-nfc-core {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 28%, rgba(152, 241, 255, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(8, 30, 68, 0.96), rgba(7, 20, 48, 0.88));
    border: 1px solid rgba(117, 222, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(4, 11, 24, 0.28),
        0 16px 34px rgba(10, 132, 255, 0.18),
        0 0 0 1px rgba(14, 32, 66, 0.42);
    z-index: 2;
}

.wallet-agencypay-nfc-core::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(116, 230, 255, 0.1), rgba(12, 34, 71, 0.02)),
        rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(132, 233, 255, 0.1);
}

.wallet-agencypay-nfc-core::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 30px;
    background: radial-gradient(circle, rgba(24, 156, 255, 0.22), transparent 68%);
    opacity: 0.68;
    filter: blur(10px);
    z-index: -1;
}

.wallet-agencypay-nfc-glyph {
    position: relative;
    width: 40px;
    height: 34px;
    margin: 0 auto;
}

.wallet-agencypay-nfc-chip {
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 10px;
    height: 5px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #d0fbff, #72ddff);
    box-shadow:
        0 0 14px rgba(121, 227, 255, 0.34),
        0 0 0 1px rgba(186, 246, 255, 0.14);
}

.wallet-agencypay-nfc-wave {
    position: absolute;
    left: 50%;
    bottom: 4px;
    border: 2.5px solid #94f0ff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 999px 999px 0 0;
    transform: translateX(-50%);
    opacity: 0.96;
    filter: drop-shadow(0 0 8px rgba(112, 229, 255, 0.28));
    animation: walletAgencyNfcGlyphPulse 1.4s ease-in-out infinite;
}

.wallet-agencypay-nfc-wave.wave-a {
    width: 14px;
    height: 9px;
    animation-delay: 0s;
}

.wallet-agencypay-nfc-wave.wave-b {
    width: 24px;
    height: 17px;
    animation-delay: 0.16s;
}

.wallet-agencypay-nfc-wave.wave-c {
    width: 34px;
    height: 25px;
    animation-delay: 0.32s;
}

.wallet-agencypay-nfc-ring {
    position: absolute;
    border: 1px solid rgba(120, 229, 255, 0.22);
    border-radius: 34px;
    inset: 22px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 0 18px rgba(66, 167, 255, 0.08);
    animation: walletAgencyNfcPulse 1.8s ease-out infinite;
}

.wallet-agencypay-nfc-ring.ring-b {
    inset: 11px;
    animation-delay: 0.24s;
}

.wallet-agencypay-nfc-ring.ring-c {
    inset: 0;
    animation-delay: 0.48s;
}

@keyframes walletAgencyNfcPulse {
    0% {
        opacity: 0.1;
        transform: scale(0.88);
    }

    55% {
        opacity: 0.62;
    }

    100% {
        opacity: 0.08;
        transform: scale(1.02);
    }
}

@keyframes walletAgencyNfcGlyphPulse {
    0%, 100% {
        opacity: 0.84;
        transform: translateX(-50%) scale(0.96);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.04);
    }
}

.wallet-agencypay-cardstage {
    margin-top: 12px;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-agencypay-cardstage .wallet-card-face {
    width: 100%;
    max-width: 320px;
}

.wallet-agencypay-status {
    margin-top: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: center;
}

.wallet-agencypay-note {
    margin-top: 6px;
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.wallet-agencypay-overlay.is-scan .wallet-agencypay-cardstage {
    opacity: 0.18;
    transform: translateY(10px) scale(0.95);
}

.wallet-agencypay-overlay.is-scan .wallet-agencypay-face {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wallet-agencypay-overlay.is-scan .wallet-agencypay-nfc {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
}

.wallet-agencypay-overlay.is-search .wallet-agencypay-scan {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wallet-agencypay-overlay.is-search .wallet-agencypay-face {
    opacity: 0;
    transform: translateY(-10px) scale(0.88);
}

.wallet-agencypay-overlay.is-search .wallet-agencypay-nfc {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wallet-agencypay-overlay.is-search .wallet-agencypay-cardstage {
    opacity: 0.34;
    transform: translateY(8px) scale(0.96);
}

.wallet-agencypay-overlay.is-cards .wallet-agencypay-scan,
.wallet-agencypay-overlay.is-processing .wallet-agencypay-scan,
.wallet-agencypay-overlay.is-success .wallet-agencypay-scan,
.wallet-agencypay-overlay.is-failed .wallet-agencypay-scan {
    opacity: 0.28;
    transform: translateY(-8px) scale(0.9);
}

.wallet-agencypay-overlay.is-cards .wallet-agencypay-face,
.wallet-agencypay-overlay.is-processing .wallet-agencypay-face,
.wallet-agencypay-overlay.is-success .wallet-agencypay-face,
.wallet-agencypay-overlay.is-failed .wallet-agencypay-face,
.wallet-agencypay-overlay.is-cards .wallet-agencypay-nfc,
.wallet-agencypay-overlay.is-processing .wallet-agencypay-nfc,
.wallet-agencypay-overlay.is-success .wallet-agencypay-nfc,
.wallet-agencypay-overlay.is-failed .wallet-agencypay-nfc {
    opacity: 0.16;
    transform: translateY(-8px) scale(0.88);
}

.wallet-agencypay-overlay.is-cards .wallet-agencypay-cardstage,
.wallet-agencypay-overlay.is-processing .wallet-agencypay-cardstage,
.wallet-agencypay-overlay.is-success .wallet-agencypay-cardstage,
.wallet-agencypay-overlay.is-failed .wallet-agencypay-cardstage {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wallet-agencypay-actions {
    margin-top: auto;
    padding-top: 8px;
    padding-bottom: 4px;
}

.wallet-agencypay-overlay.is-success .wallet-agencypay-status {
    color: #7ef7a5;
}

.wallet-agencypay-overlay.is-failed .wallet-agencypay-status {
    color: #ff9a8b;
}

#phone-frame:not(.dark-mode) .wallet-tab,
#phone-frame:not(.dark-mode) .wallet-mini-pill,
#phone-frame:not(.dark-mode) .wallet-chip-btn,
#phone-frame:not(.dark-mode) .wallet-secondary-btn,
#phone-frame:not(.dark-mode) .wallet-pay-request-icon,
#phone-frame:not(.dark-mode) .wallet-empty-spotlight {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(146, 156, 178, 0.2);
    color: rgba(22, 28, 40, 0.84);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 12px 22px rgba(38, 48, 72, 0.08);
}

#phone-frame:not(.dark-mode) .wallet-tab.active {
    color: #fff;
    border-color: rgba(10, 132, 255, 0.32);
}

#phone-frame:not(.dark-mode) .wallet-chip-btn.active {
    color: #1f9f5f;
}

#phone-frame:not(.dark-mode) .wallet-card-entry,
#phone-frame:not(.dark-mode) .wallet-stack-card,
#phone-frame:not(.dark-mode) .wallet-card-builder,
#phone-frame:not(.dark-mode) .wallet-pay-sheet,
#phone-frame:not(.dark-mode) .wallet-activity-item,
#phone-frame:not(.dark-mode) .wallet-activity-empty,
#phone-frame:not(.dark-mode) .wallet-fixed-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(244, 247, 251, 0.74));
    border-color: rgba(146, 156, 178, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.54),
        0 18px 34px rgba(38, 48, 72, 0.08);
}

#phone-frame:not(.dark-mode) .wallet-input,
#phone-frame:not(.dark-mode) .wallet-fixed-create input,
#phone-frame:not(.dark-mode) .wallet-fixed-create select {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(146, 156, 178, 0.22);
    color: #161c28;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#phone-frame:not(.dark-mode) .wallet-input::placeholder,
#phone-frame:not(.dark-mode) .wallet-fixed-create input::placeholder {
    color: rgba(38, 46, 62, 0.38);
}

#phone-frame:not(.dark-mode) .wallet-fixed-create select,
#phone-frame:not(.dark-mode) .wallet-fixed-create select option {
    color: #161c28;
}

#phone-frame:not(.dark-mode) .wallet-pay-request-amount {
    color: #161c28;
}

#phone-frame:not(.dark-mode) .wallet-activity-empty i {
    color: rgba(38, 46, 62, 0.24);
}

#phone-frame:not(.dark-mode) .wallet-empty-state-icon {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.16), rgba(90, 200, 250, 0.12));
    color: #0a84ff;
}

.aipickup-app-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background:
        radial-gradient(circle at 18% 6%, rgba(90, 200, 250, 0.12), transparent 24%),
        radial-gradient(circle at 82% 14%, rgba(104, 92, 255, 0.12), transparent 28%),
        linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
}

.aipickup-hero {
    border-radius: 28px;
    padding: 18px;
}

.aipickup-hero-glass,
.aipickup-status-card,
.aipickup-drive-card,
.aipickup-highlight-card {
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 34px rgba(0,0,0,0.12);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.aipickup-hero-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.aipickup-hero-copy {
    flex: 1;
    min-width: 0;
}

.aipickup-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0a84ff, #6e7bff);
    box-shadow: 0 14px 28px rgba(10, 132, 255, 0.3);
}

.aipickup-hero-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.aipickup-hero-sub {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.aipickup-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.aipickup-hero-pill {
    border-radius: 18px;
    padding: 12px;
    border: 0.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aipickup-hero-pill-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
}

.aipickup-hero-pill strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 800;
}

.aipickup-tabbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.aipickup-tab {
    border: none;
    border-radius: 18px;
    padding: 11px 10px;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.aipickup-tab.active {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.94), rgba(104, 92, 255, 0.84));
    color: #fff;
    box-shadow: 0 14px 24px rgba(88, 86, 214, 0.22);
}

.aipickup-tab:active {
    transform: scale(0.97);
}

.aipickup-tab-panels {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aipickup-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.aipickup-panel.active {
    display: flex;
}

.aipickup-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.aipickup-status-card {
    border-radius: 20px;
    padding: 14px;
}

.aipickup-status-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--text-tertiary);
}

.aipickup-status-text {
    margin-top: 6px;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.3;
}

.aipickup-total-card .aipickup-status-text {
    color: #7fd6ff;
}

.aipickup-highlight-card {
    border-radius: 24px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aipickup-highlight-copy {
    flex: 1;
    min-width: 0;
}

.aipickup-highlight-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
}

.aipickup-highlight-sub {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.aipickup-highlight-chip,
.aipickup-live-phase {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(10, 132, 255, 0.12);
    border: 0.5px solid rgba(10, 132, 255, 0.22);
    color: #88c3ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.aipickup-select {
    margin-top: 10px;
    width: 100%;
    border-radius: 14px;
    border: 0.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 11px 12px;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.aipickup-select option {
    color: #111;
    background: #fff;
}

#phone-frame.dark-mode .aipickup-select option {
    color: #fff;
    background: #1c1c1e;
}

.aipickup-actions {
    display: grid;
    gap: 10px;
}

.aipickup-request-footnote,
.aipickup-hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: center;
}

.aipickup-drive-card {
    border-radius: 24px;
    padding: 16px;
}

.aipickup-live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aipickup-live-price {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.4px;
}

.aipickup-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.aipickup-mode-btn {
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.08);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.aipickup-mode-btn.active {
    color: #fff;
    border-color: rgba(10, 132, 255, 0.24);
    background: linear-gradient(135deg, #0a84ff, #5ac8fa);
}

.aipickup-mode-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.aipickup-drive-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.aipickup-mini-btn {
    border: none;
    border-radius: 14px;
    padding: 11px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.75), rgba(90, 200, 250, 0.55));
}

.aipickup-mini-btn.traffic-on {
    background: linear-gradient(135deg, #ff3b30, #ff9500);
}

.aipickup-speed-wrap {
    margin-top: 12px;
}

.aipickup-speed-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

#aipickup-speed-slider {
    width: 100%;
    accent-color: #00c7be;
}

.aipickup-btn {
    width: 100%;
    border: none;
    border-radius: 18px;
    padding: 13px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.aipickup-btn.primary {
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    box-shadow: 0 14px 26px rgba(0, 122, 255, 0.22);
}

.aipickup-btn.danger {
    background: linear-gradient(135deg, #ff3b30, #d63025);
}

.aipickup-live-hint {
    padding-bottom: 6px;
}

#phone-frame:not(.dark-mode) .aipickup-hero-glass,
#phone-frame:not(.dark-mode) .aipickup-status-card,
#phone-frame:not(.dark-mode) .aipickup-drive-card,
#phone-frame:not(.dark-mode) .aipickup-highlight-card,
#phone-frame:not(.dark-mode) .aipickup-hero-pill {
    background: linear-gradient(145deg, rgba(255,255,255,0.84), rgba(255,255,255,0.6));
    border-color: rgba(17, 24, 39, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 16px 32px rgba(24, 39, 75, 0.1);
}

#phone-frame:not(.dark-mode) .aipickup-tab {
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-secondary);
}

#aipickup-ride-overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 42px;
    z-index: 620;
    padding: 10px 10px 12px;
    border-radius: 14px;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(12, 25, 54, 0.86), rgba(18, 54, 112, 0.72));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

#aipickup-ride-overlay.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.aipickup-ride-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.aipickup-ride-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.84);
}

#aipickup-ride-price {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.aipickup-ride-meta {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.aipickup-ride-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 9px;
}

.aipickup-ride-mode-row .aipickup-mode-btn {
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.1);
}

.aipickup-ride-mode-row .aipickup-mode-btn.active {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, #5856d6, #af52de);
}

.aipickup-ride-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 9px;
}

.aipickup-ride-btn {
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.aipickup-ride-btn.traffic-on {
    background: linear-gradient(135deg, #ff3b30, #ff9500);
    border-color: rgba(255, 255, 255, 0.32);
}

.aipickup-ride-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.aipickup-ride-speed-label {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.86);
}

#aipickup-ride-speed-slider {
    margin-top: 6px;
    width: 100%;
    accent-color: #00c7be;
}

.crypto-trade-row,
.stock-trade-row {
    padding: 12px 16px 0;
}

.crypto-trade-row input,
.stock-trade-row input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 0.5px solid var(--separator);
    background: var(--fill-secondary);
    color: var(--text-primary);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.stocks-balance-pnl {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.stocks-overview {
    margin: 0 16px 12px;
    border-radius: 14px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
    padding: 10px;
}

.stocks-overview-range {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: right;
}

.stock-detail-chart-wrap {
    margin: 0 16px 8px;
    border-radius: 14px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
    padding: 8px;
}

.stock-holdings-pnl {
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.crypto-balance,
.stocks-balance {
    margin: 0 16px 12px;
    border-radius: 16px;
    padding: 14px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
}

.crypto-balance-label,
.stocks-balance-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: var(--text-tertiary);
}

.crypto-balance-amount,
.stocks-balance-amount {
    margin-top: 3px;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
}

#crypto-list,
#stocks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 16px;
}

.crypto-item,
.stock-item {
    border-radius: 14px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.crypto-icon,
.stock-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.crypto-info,
.stock-info {
    flex: 1;
    min-width: 0;
}

.crypto-name,
.stock-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crypto-symbol,
.stock-symbol {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.crypto-price-info,
.stock-price-info {
    text-align: right;
}

.crypto-price,
.stock-price {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

.crypto-change,
.stock-change {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
}

.crypto-change.positive,
.stock-change.positive {
    color: #34c759;
}

.crypto-change.negative,
.stock-change.negative {
    color: #ff3b30;
}

.crypto-detail-hero,
.stock-detail-hero {
    margin: 0 16px 10px;
    border-radius: 16px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
    padding: 16px;
    text-align: center;
}

.crypto-detail-icon,
.stock-detail-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.crypto-detail-name,
.stock-detail-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.crypto-detail-symbol,
.stock-detail-symbol {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.crypto-detail-price,
.stock-detail-price {
    margin-top: 8px;
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 800;
}

.crypto-detail-change,
.stock-detail-change {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
}

.crypto-holdings,
.stock-holdings {
    margin: 0 16px 10px;
    border-radius: 14px;
    border: 0.5px solid var(--separator);
    background: var(--card-bg);
    padding: 12px;
}

.crypto-holdings-label,
.stock-holdings-label {
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.crypto-holdings-amount,
.stock-holdings-amount {
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.crypto-holdings-value,
.stock-holdings-value {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.crypto-actions,
.stock-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px 16px;
}

.crypto-action-btn,
.stock-action-btn {
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.crypto-action-btn.buy,
.stock-action-btn.buy {
    background: linear-gradient(135deg, #34c759, #2ea64f);
}

.crypto-action-btn.sell,
.stock-action-btn.sell {
    background: linear-gradient(135deg, #ff3b30, #d63025);
}

.settings-item {
    border-radius: 14px !important;
    margin-bottom: 8px;
}

.settings-item+.settings-item {
    border-top: none !important;
}

.settings-nav-icon {
    border-radius: 10px;
}

#modal-body,
#modal-body p,
#modal-body label,
#modal-body div,
#modal-body span,
#modal-body strong {
    color: var(--text-primary) !important;
}

.performance-mode *,
.performance-mode *::before,
.performance-mode *::after {
    animation: none !important;
    transition-duration: 0.08s !important;
}

.performance-mode .phone-notification,
.performance-mode .settings-item,
.performance-mode .hw-widget,
.performance-mode .app-icon-circle,
.performance-mode #home-dock,
.performance-mode #modal-box,
.performance-mode #game-mode-banner,
.performance-mode #notification-area .phone-notification {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Settings rebuild */
#app-settings {
    background:
        radial-gradient(circle at top left, rgba(120, 179, 255, 0.18), transparent 24%),
        radial-gradient(circle at top right, rgba(255, 214, 138, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(241, 243, 248, 0.98), rgba(225, 229, 237, 0.96));
}

#phone-frame.dark-mode #app-settings {
    background:
        radial-gradient(circle at top left, rgba(54, 123, 255, 0.18), transparent 26%),
        radial-gradient(circle at top right, rgba(140, 103, 255, 0.16), transparent 24%),
        linear-gradient(180deg, rgba(12, 15, 22, 0.98), rgba(16, 20, 28, 0.98));
}

#app-settings .app-header {
    padding: 62px 18px 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.12));
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

#phone-frame.dark-mode #app-settings .app-header {
    background: linear-gradient(180deg, rgba(22, 26, 36, 0.82), rgba(18, 22, 30, 0.38));
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

#app-settings .app-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

#app-settings .back-btn {
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--text-primary);
}

#phone-frame.dark-mode #app-settings .back-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

#app-settings .back-btn:not(.sub-nav-visible) ~ .app-title {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.settings-app-content {
    padding: 0 14px 46px;
    background: transparent;
}

.settings-shell {
    padding: 14px 0 24px;
}

#app-settings .settings-page {
    padding: 0;
}

#app-settings .settings-main-lead {
    padding: 8px 8px 4px;
}

#app-settings .settings-main-title {
    font-size: 44px;
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.08em;
    color: var(--text-primary);
}

#app-settings .settings-main-sub {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-tertiary);
    max-width: 280px;
}

#app-settings .settings-profile-card,
#app-settings .settings-info-banner,
#app-settings .settings-about-hero {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18)),
        rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 20px 40px rgba(40, 51, 78, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}

#phone-frame.dark-mode #app-settings .settings-profile-card,
#phone-frame.dark-mode #app-settings .settings-info-banner,
#phone-frame.dark-mode #app-settings .settings-about-hero {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(18, 23, 32, 0.74);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 22px 44px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#app-settings .settings-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 32px;
    margin: 14px 0 12px;
    cursor: pointer;
}

#app-settings .settings-search-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--text-tertiary);
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
    margin-bottom: 14px;
    overflow: hidden;
}

#phone-frame.dark-mode #app-settings .settings-search-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

#app-settings .settings-search-pill input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

#app-settings .settings-search-pill input::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

#app-settings .settings-search-clear {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(16, 22, 34, 0.38);
    opacity: 0;
    transform: scale(0.82);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
    cursor: pointer;
}

#phone-frame.dark-mode #app-settings .settings-search-clear {
    color: rgba(255, 255, 255, 0.55);
}

#app-settings .settings-search-pill.has-value .settings-search-clear {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

#app-settings .settings-search-empty {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    margin: 2px 0 14px;
    padding: 0 18px;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
        rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--text-tertiary);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

#phone-frame.dark-mode #app-settings .settings-search-empty {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
        rgba(18, 23, 32, 0.74);
    border-color: rgba(255, 255, 255, 0.08);
}

#app-settings .settings-search-empty.visible {
    display: flex;
}

#app-settings .settings-group {
    margin-bottom: 16px;
}

#app-settings .settings-group-title {
    padding: 0 12px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

#app-settings .settings-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 15px 18px;
    border-radius: 26px !important;
    margin-bottom: 10px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
        rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow:
        0 18px 32px rgba(40, 51, 78, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(28px) saturate(175%);
    -webkit-backdrop-filter: blur(28px) saturate(175%);
    cursor: pointer;
}

#phone-frame.dark-mode #app-settings .settings-item {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
        rgba(18, 23, 32, 0.74);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#app-settings .settings-item + .settings-item {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#app-settings .settings-item:active {
    opacity: 1;
    transform: scale(0.985);
}

#app-settings .settings-row-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

#app-settings .settings-item.settings-toggle-row {
    justify-content: space-between;
}

#app-settings .settings-item.settings-toggle-row .settings-row-copy {
    flex: 1;
    min-width: 0;
    padding-right: 12px;
}

#app-settings .settings-item.settings-toggle-row .agency-toggle {
    margin-left: auto;
    pointer-events: none;
}

#app-settings .settings-label {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
}

#app-settings .settings-item-note,
#app-settings .settings-info-banner-sub,
#app-settings .settings-profile-sub,
#app-settings .settings-about-owner-sub,
#app-settings .settings-store-sub,
#app-settings .settings-update-status {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-tertiary);
}

#app-settings .settings-value {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

#app-settings .settings-value i {
    font-size: 12px;
}

#app-settings .settings-nav-icon,
#app-settings .settings-profile-avatar {
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 10px 18px rgba(0, 0, 0, 0.12);
}

#app-settings .settings-nav-icon {
    width: 38px;
    height: 38px;
    margin-right: 0;
    border-radius: 13px;
    font-size: 16px;
}

#app-settings .settings-profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7af0ae, #6fb6ff);
    color: #06213b;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

#app-settings .settings-profile-avatar-small,
#app-settings .settings-about-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 20px;
}

#app-settings .settings-profile-copy,
#app-settings .settings-info-banner-copy,
#app-settings .settings-about-owner-copy {
    min-width: 0;
    flex: 1;
}

#app-settings .settings-profile-name,
#app-settings .settings-info-banner-title,
#app-settings .settings-about-owner-name {
    font-size: 24px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.06em;
    color: var(--text-primary);
}

#app-settings .settings-profile-arrow {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

#app-settings .settings-info-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 28px;
    margin-bottom: 16px;
}

#app-settings .settings-about-hero {
    padding: 18px;
    border-radius: 34px;
    margin-bottom: 16px;
}

#app-settings .settings-about-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
}

#phone-frame.dark-mode #app-settings .settings-about-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#app-settings .settings-about-owner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

#app-settings .settings-about-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

#app-settings .settings-about-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 0;
}

#phone-frame.dark-mode #app-settings .settings-about-stat {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

#app-settings .settings-about-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

#app-settings .settings-about-stat strong {
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#app-settings .settings-item-stack {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    cursor: default;
}

#app-settings .settings-item-stack-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#app-settings .settings-update-name,
#app-settings .settings-store-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

#app-settings .settings-progress-track {
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
}

#app-settings .settings-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4f8dff, #78e1ff);
    transition: width 0.3s ease;
}

#app-settings .settings-store-card {
    flex-direction: row;
    align-items: center;
}

#app-settings .settings-store-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

#app-settings .settings-store-sub {
    font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    font-size: 17px;
    line-height: 0.98;
    letter-spacing: 0.02em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    font-smooth: always;
}

#phone-frame:not(.dark-mode) #app-settings .settings-store-sub {
    color: rgba(28, 35, 47, 0.72);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

#app-settings .settings-link-btn {
    min-height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #4f8dff, #7be0ff);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(79, 141, 255, 0.2);
}

#app-settings .settings-link-btn:active {
    transform: scale(0.97);
}

#app-settings .settings-select,
#app-settings .settings-slider-container,
#app-settings .wallpaper-url-input,
#app-settings .wallpaper-url-apply {
    border-radius: 18px;
}

#app-settings .settings-select {
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--text-primary);
}

#phone-frame.dark-mode #app-settings .settings-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
}

#app-settings .settings-slider {
    accent-color: #4f8dff;
}

#app-settings .language-option {
    border-radius: 16px;
}

#app-settings .wallpaper-grid {
    gap: 10px;
}

#app-settings .wallpaper-option {
    border-radius: 16px;
}

#phone-frame:not(.dark-mode) #app-settings .hw-toggle-item,
#phone-frame:not(.dark-mode) #app-settings .lock-style-btn {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(146, 156, 178, 0.2);
    color: rgba(22, 28, 40, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

#phone-frame:not(.dark-mode) #app-settings .hw-toggle-item:has(input:checked),
#phone-frame:not(.dark-mode) #app-settings .lock-style-btn.active {
    background: rgba(10, 132, 255, 0.12);
    border-color: rgba(10, 132, 255, 0.38);
    color: #0a84ff;
}

#phone-frame:not(.dark-mode) #app-settings .wallpaper-url-section {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(244, 247, 251, 0.7)),
        rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(146, 156, 178, 0.22);
    box-shadow:
        0 14px 28px rgba(38, 48, 72, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

#phone-frame:not(.dark-mode) #app-settings .wallpaper-url-label {
    color: rgba(38, 46, 62, 0.56);
}

#phone-frame:not(.dark-mode) #app-settings .wallpaper-url-input {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(146, 156, 178, 0.24);
    color: #161c28;
}

#phone-frame:not(.dark-mode) #app-settings .wallpaper-url-input:focus {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(10, 132, 255, 0.42);
}

#phone-frame:not(.dark-mode) #app-settings .wallpaper-url-input::placeholder {
    color: rgba(38, 46, 62, 0.36);
}

body.web-demo {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(76, 140, 255, 0.28), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(120, 67, 255, 0.2), transparent 30%),
        radial-gradient(circle at 74% 14%, rgba(32, 24, 112, 0.44), transparent 26%),
        linear-gradient(180deg, #02081a 0%, #020617 44%, #040512 100%);
}

body.web-demo #phone-container {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    z-index: 1000;
    transform: translate3d(-50%, calc(-50% + 110px), 0) scale(var(--phone-scale, 0.88));
    transform-origin: center center;
}

body.web-demo #phone-container.visible {
    transform: translate3d(-50%, -50%, 0) scale(var(--phone-scale, 0.88));
}

body.web-demo #phone-container.peek {
    transform: translate3d(-50%, calc(-50% + 76px), 0) scale(var(--phone-scale, 0.88));
}

body.web-demo #phone-container.peek.visible {
    transform: translate3d(-50%, -50%, 0) scale(var(--phone-scale, 0.88));
}

body.web-demo::before,
body.web-demo::after {
    content: '';
    position: fixed;
    inset: auto;
    pointer-events: none;
    z-index: 0;
    border-radius: 999px;
    filter: blur(0);
}

body.web-demo::before {
    width: 680px;
    height: 680px;
    left: -220px;
    top: -40px;
    background: radial-gradient(circle, rgba(63, 133, 255, 0.3), transparent 66%);
}

body.web-demo::after {
    width: 760px;
    height: 760px;
    right: -260px;
    bottom: -240px;
    background: radial-gradient(circle, rgba(133, 73, 255, 0.24), transparent 70%);
}

body.web-demo #phone-container.demo-hidden {
    opacity: 0;
    pointer-events: none;
}

body.web-demo .phone-wrapper {
    --demo-control-bottom: max(22px, calc(50% - 418px));
    --demo-power-offset-x: 344px;
    --demo-side-control-offset-x: 248px;
    --demo-side-control-y: calc(50% + 232px);
    --demo-power-start: #8f98a7;
    --demo-power-mid: #dbe2ea;
    --demo-power-end: #8f98a7;
    --demo-power-highlight: rgba(255, 255, 255, 0.82);
    --demo-power-inner-shadow: rgba(62, 71, 84, 0.42);
    --demo-power-soft-shadow: rgba(160, 172, 190, 0.2);
}

body.web-demo .phone-demo-controls {
    position: absolute;
    inset: 0;
    z-index: 11020;
    pointer-events: none;
}

body.web-demo #demo-config-btn,
body.web-demo #demo-reset-btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #f4ebd8;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    z-index: 11020;
    transition: transform 0.22s ease, opacity 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    pointer-events: auto;
    transform: translateX(var(--demo-control-shift-x, 0));
}

body.web-demo .phone-demo-control {
    position: absolute;
    top: var(--demo-side-control-y);
}

body.web-demo .phone-demo-control-left {
    left: auto;
    right: calc(50% + var(--demo-side-control-offset-x));
    --demo-control-shift-x: 0%;
}

body.web-demo .phone-demo-control-right {
    left: calc(50% + var(--demo-side-control-offset-x));
    --demo-control-shift-x: 0%;
}

body.web-demo #demo-config-btn {
    gap: 10px;
    min-width: 166px;
    height: 54px;
    padding: 0 22px;
    border: 1px solid rgba(214, 163, 33, 0.14);
    background: rgba(14, 10, 4, 0.82);
    cursor: pointer;
}

body.web-demo #demo-reset-btn {
    gap: 10px;
    min-width: 166px;
    height: 54px;
    padding: 0 22px;
    border: 1px solid rgba(214, 163, 33, 0.12);
    background: rgba(12, 9, 4, 0.78);
    cursor: pointer;
}

body.web-demo #demo-config-btn i {
    font-size: 15px;
}

body.web-demo #demo-reset-btn i {
    font-size: 14px;
}

body.web-demo #demo-config-btn:hover,
body.web-demo #demo-reset-btn:hover {
    transform: translateX(var(--demo-control-shift-x, 0)) translateY(-1px);
    border-color: rgba(214, 163, 33, 0.3);
}

body.web-demo #demo-config-btn:hover {
    background: rgba(22, 15, 6, 0.92);
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.32);
}

body.web-demo #demo-reset-btn:hover {
    background: rgba(22, 15, 6, 0.9);
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.28);
}

body.web-demo #demo-buy-btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 166px;
    height: 54px;
    padding: 0 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #d6a321, #c49318);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    z-index: 11020;
    top: calc(var(--demo-side-control-y) + 68px);
    right: calc(50% + var(--demo-side-control-offset-x));
    transform: translateX(var(--demo-control-shift-x, 0));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 18px 34px rgba(214, 163, 33, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
body.web-demo #demo-buy-btn:hover {
    transform: translateX(var(--demo-control-shift-x, 0)) translateY(-2px);
    box-shadow: 0 22px 42px rgba(214, 163, 33, 0.38);
    background: linear-gradient(180deg, #e0b42a, #d6a321);
}

body.web-demo #demo-power-btn {
    position: absolute;
    left: calc(50% + var(--demo-power-offset-x));
    top: calc(50% + 4px);
    width: 24px;
    height: 194px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--demo-power-highlight) 70%, white 30%),
            color-mix(in srgb, var(--demo-power-mid) 82%, white 18%) 16%,
            color-mix(in srgb, var(--demo-power-start) 92%, black 8%) 54%,
            color-mix(in srgb, var(--demo-power-end) 86%, black 14%) 100%);
    box-shadow:
        inset 1px 0 1px color-mix(in srgb, var(--demo-power-highlight) 42%, white 58%),
        inset -1px 0 1px rgba(0, 0, 0, 0.42),
        0 16px 38px rgba(0, 0, 0, 0.32),
        0 0 22px color-mix(in srgb, var(--demo-power-mid) 22%, transparent 78%);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 10010;
    cursor: pointer;
    transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    color: transparent;
    font-size: 0;
    overflow: hidden;
}

body.web-demo #demo-power-btn::before {
    content: '';
    position: absolute;
    inset: 18px 4px;
    border-radius: 999px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--demo-power-highlight) 50%, white 50%),
        color-mix(in srgb, var(--demo-power-mid) 60%, transparent 40%) 18%,
        color-mix(in srgb, var(--demo-power-start) 84%, black 16%) 60%,
        color-mix(in srgb, var(--demo-power-end) 54%, transparent 46%));
}

body.web-demo #demo-power-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--demo-power-highlight) 68%, white 32%);
    transform: translateX(-50%);
    opacity: 0.95;
}

body.web-demo #demo-power-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
}

body.web-demo #demo-power-btn.visible:hover {
    box-shadow:
        inset 1px 0 1px color-mix(in srgb, var(--demo-power-highlight) 52%, white 48%),
        inset -1px 0 1px rgba(0, 0, 0, 0.46),
        0 18px 34px rgba(0, 0, 0, 0.34),
        0 0 28px color-mix(in srgb, var(--demo-power-mid) 28%, transparent 72%);
}

body.web-demo #demo-config-modal {
    position: fixed;
    inset: 0;
    z-index: 12040;
    display: none;
}

body.web-demo #demo-config-modal.open {
    display: block;
}

body.web-demo #demo-config-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 13, 0.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.web-demo #demo-config-panel {
    position: relative;
    z-index: 1;
    width: min(820px, calc(100vw - 44px));
    max-height: calc(100vh - 44px);
    margin: 22px auto;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(14, 21, 34, 0.96), rgba(8, 13, 22, 0.98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
}

body.web-demo #demo-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

body.web-demo #demo-config-eyebrow {
    color: rgba(255, 255, 255, 0.52);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.web-demo #demo-config-title {
    margin-top: 6px;
    color: #f5f8ff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

body.web-demo #demo-config-close {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #f5f8ff;
    font-size: 18px;
    cursor: pointer;
}

body.web-demo #demo-config-content {
    margin: 0;
    padding: 18px;
    border-radius: 22px;
    background: rgba(3, 8, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #dce8ff;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: auto;
    max-height: calc(100vh - 170px);
    font-family: "SFMono-Regular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

@media (max-width: 700px) {
    body.web-demo .phone-wrapper {
        --demo-control-bottom: 18px;
        --demo-power-offset-x: 228px;
        --demo-side-control-offset-x: 138px;
        --demo-side-control-y: calc(50% + 286px);
    }

    body.web-demo .phone-demo-controls {
        inset: auto 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding-bottom: var(--demo-control-bottom);
        pointer-events: none;
    }

    body.web-demo .phone-demo-control,
    body.web-demo .phone-demo-control-left,
    body.web-demo .phone-demo-control-right {
        position: relative;
        top: auto;
        left: auto;
    }

    body.web-demo #demo-config-btn {
        min-width: 140px;
        height: 48px;
        padding: 0 18px;
    }

    body.web-demo #demo-reset-btn {
        min-width: 140px;
        height: 48px;
        padding: 0 18px;
    }

    body.web-demo #demo-buy-btn {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        min-width: 140px;
        height: 48px;
        padding: 0 18px;
    }

    body.web-demo #demo-power-btn {
        width: 18px;
        height: 152px;
    }

    body.web-demo #phone-container,
    body.web-demo #phone-container.visible,
    body.web-demo #phone-container.peek,
    body.web-demo #phone-container.peek.visible {
        left: 50%;
        top: 52%;
        transform: translate3d(-50%, -50%, 0) scale(0.72);
    }

    body.web-demo #demo-config-panel {
        width: calc(100vw - 24px);
        margin: 12px auto;
        padding: 16px;
        border-radius: 22px;
    }

    body.web-demo #demo-config-title {
        font-size: 18px;
    }

    body.web-demo #demo-config-content {
        max-height: calc(100vh - 150px);
    }
}

/* ═══════════════════════════════════════════════════════
   NEW LIQUID DIALER (appended from in-game phone.css)
   ═══════════════════════════════════════════════════════ */

/* Ensure CSS variables have fallbacks for web demo */
:root {
    --home-indicator-clearance: 34px;
    --app-content-bottom-clearance: 58px;
    --app-content-edge-spacer: 52px;
    --liquid-screen-top-clearance: 78px;
}

.dialer-liquid-screen {
    height: 100%;
    overflow: hidden;
}

.dialer-liquid-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 68px 0 calc(var(--home-indicator-clearance, 34px) + 8px);
    color: #07080d;
}

.dialer-liquid-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 28%),
        radial-gradient(circle at 76% 86%, rgba(155, 184, 255, 0.18), rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 84% 16%, rgba(203, 221, 255, 0.42), rgba(255, 255, 255, 0) 18%);
    pointer-events: none;
}

.dialer-liquid-shell::after {
    content: '';
    position: absolute;
    top: 82px;
    left: 18px;
    right: 18px;
    height: 86px;
    border-radius: 36px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08)),
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 52%);
    filter: blur(18px);
    opacity: 0.72;
    pointer-events: none;
}

.dialer-liquid-toolbar,
.dialer-liquid-hero,
.dialer-search-shell,
.dialer-liquid-body,
.dialer-floating-footer {
    position: relative;
    z-index: 1;
}

.dialer-liquid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    min-height: 48px;
    transition: opacity 0.26s ease, transform 0.26s ease;
}

#app-dialer.keypad-mode .dialer-liquid-toolbar,
#app-dialer.keypad-mode .dialer-liquid-hero,
#app-dialer.keypad-mode .dialer-search-shell {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    min-height: 0;
    max-height: 0;
    height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.dialer-liquid-pill-btn,
.dialer-liquid-circle-btn,
.dialer-nav-pill,
.dialer-floating-search,
#app-dialer .dial-key,
.dialer-call-main,
.dialer-call-shortcut,
.dialer-recent-delete,
.dialer-keypad-delete,
.dialer-search-shell,
.dialer-row {
    backdrop-filter: blur(26px) saturate(185%);
    -webkit-backdrop-filter: blur(26px) saturate(185%);
}

.dialer-liquid-pill-btn,
.dialer-liquid-circle-btn,
.dialer-floating-search,
.dialer-call-shortcut,
.dialer-recent-delete,
.dialer-keypad-delete {
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 245, 249, 0.7));
    box-shadow:
        0 18px 34px rgba(160, 169, 189, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.dialer-liquid-pill-btn::after,
.dialer-liquid-circle-btn::after,
.dialer-floating-search::after,
.dialer-call-shortcut::after,
.dialer-recent-delete::after,
.dialer-keypad-delete::after,
.dialer-nav-pill::after,
#app-dialer .dial-key::after,
.dialer-call-main::after,
.dialer-row::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
    opacity: 0.66;
    pointer-events: none;
}

.dialer-liquid-pill-btn {
    position: relative;
    min-width: 112px;
    height: 46px;
    padding: 0 22px;
    border-radius: 24px;
    color: #15161d;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    border: 1px solid rgba(233, 236, 242, 0.92);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dialer-liquid-circle-btn,
.dialer-floating-search {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #1a1b22;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(233, 236, 242, 0.92);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dialer-floating-search.active {
    color: #377fff;
    background: linear-gradient(180deg, rgba(226, 236, 255, 0.96), rgba(216, 229, 255, 0.72));
}

.dialer-liquid-hero {
    padding: 0 22px 2px;
    text-align: center;
}

.dialer-liquid-title {
    font-size: 28px;
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #06070c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dialer-liquid-subtitle {
    min-height: 16px;
    margin-top: 2px;
    color: rgba(25, 29, 38, 0.48);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.dialer-search-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 18px 8px;
    padding: 0 16px;
    min-height: 50px;
    border-radius: 26px;
    border: 1px solid rgba(233, 236, 242, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(242, 244, 248, 0.68));
    box-shadow:
        0 18px 34px rgba(160, 169, 189, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.dialer-search-shell.hidden {
    display: none !important;
}

.dialer-search-shell i {
    color: rgba(24, 27, 34, 0.48);
    font-size: 18px;
}

.dialer-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: #14161c;
    font-size: 16px;
    font-weight: 600;
    user-select: text;
    -webkit-user-select: text;
}

.dialer-search-input::placeholder {
    color: rgba(24, 27, 34, 0.42);
}

.dialer-search-clear {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 16, 20, 0.08);
    color: rgba(14, 16, 22, 0.56);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease;
}

.dialer-search-clear.hidden {
    display: none !important;
}

.dialer-liquid-body {
    flex: 1;
    min-height: 0;
    position: relative;
}

.dialer-pane {
    display: none;
    height: 100%;
}

.dialer-pane.active {
    display: block;
    animation: dialerPaneFade 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes dialerPaneFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#dialer-favorites-view,
#dialer-recents-view,
#dialer-contacts-view {
    overflow-y: auto;
    padding: 0 18px calc(var(--home-indicator-clearance) + 74px);
    -webkit-overflow-scrolling: touch;
}

#dialer-keypad-view {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.dialer-rows {
    display: flex;
    flex-direction: column;
}

.dialer-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px 14px;
    border-radius: 30px;
    border: 1px solid rgba(240, 242, 247, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(243, 245, 249, 0.54));
    box-shadow:
        0 18px 34px rgba(179, 187, 203, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

.dialer-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #b4c5ec 0%, #808fd0 100%);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 20px 32px rgba(128, 143, 208, 0.18);
}

.dialer-row-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dialer-row-main {
    font-size: 18px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #07080d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialer-row-main.missed {
    color: #f04d54;
}

.dialer-row-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
    color: rgba(27, 32, 42, 0.42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialer-row-sub i {
    font-size: 13px;
    color: rgba(31, 34, 44, 0.36);
}

.dialer-row-sub span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialer-row-sub .is-missed {
    color: #f04d54;
}

.dialer-row-time {
    min-width: 64px;
    text-align: right;
    color: rgba(27, 32, 42, 0.46);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.dialer-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.dialer-call-shortcut,
.dialer-recent-delete {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: #3580ff;
    font-size: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dialer-recent-delete {
    color: #ff4d57;
}

.dialer-row-editing .dialer-call-shortcut {
    display: none;
}

.dialer-keypad-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 52px 24px calc(var(--home-indicator-clearance) + 126px);
    box-sizing: border-box;
}

.dialer-keypad-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    margin-bottom: 14px;
}

.dialer-keypad-display {
    width: 100%;
    max-width: 240px;
    min-height: 42px;
    border: none;
    background: transparent;
    text-align: center;
    color: #05060b;
    font-size: 34px;
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.05em;
    outline: none;
    padding: 0;
}

.dialer-keypad-match {
    min-height: 20px;
    margin-top: 6px;
    color: rgba(24, 27, 34, 0.5);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
}

.dialer-keypad-match.hidden {
    display: none !important;
}

.dialer-keypad-delete {
    position: relative;
    margin-top: 8px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: rgba(24, 27, 34, 0.76);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.dialer-keypad-delete.hidden {
    display: none !important;
}

.dialer-keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 22px;
    width: 100%;
    max-width: 296px;
    margin-top: 0;
}

#app-dialer .dial-key {
    position: relative;
    width: 84px;
    height: 84px;
    padding: 0;
    border: 1px solid rgba(240, 242, 246, 0.94);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 245, 249, 0.72));
    box-shadow:
        0 22px 36px rgba(180, 188, 205, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    color: #05060b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#app-dialer .dial-key-main {
    font-size: 31px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.06em;
}

#app-dialer .dial-key-sub {
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #11131b;
}

.dialer-keypad-actions {
    margin-top: 16px;
}

.dialer-call-main {
    position: relative;
    width: 84px;
    height: 84px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, #76df72 0%, #5cc95d 100%);
    box-shadow:
        0 24px 46px rgba(99, 208, 100, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: #fff;
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.dialer-floating-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--home-indicator-clearance, 34px) - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px 4px;
    pointer-events: none;
}

.dialer-nav-pill,
.dialer-floating-search {
    pointer-events: auto;
}

.dialer-nav-pill {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex: 1;
    max-width: 324px;
    min-height: 68px;
    padding: 7px;
    border-radius: 34px;
    border: 1px solid rgba(232, 236, 243, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(243, 245, 248, 0.76));
    box-shadow:
        0 24px 42px rgba(181, 188, 204, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.dialer-nav-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 30px;
    color: rgba(12, 14, 20, 0.76);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.2s ease;
}

.dialer-nav-btn i {
    font-size: 21px;
}

.dialer-nav-btn.active {
    color: #377fff;
    background: linear-gradient(180deg, rgba(226, 236, 255, 0.9), rgba(216, 229, 255, 0.6));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 22px rgba(143, 174, 235, 0.16);
}

.dialer-empty-state {
    padding: 52px 20px 24px;
    text-align: center;
    color: rgba(18, 22, 30, 0.34);
}

.dialer-favorites-hero {
    margin-bottom: 14px;
    padding: 18px 18px 16px;
    border-radius: 32px;
    border: 1px solid rgba(240, 242, 247, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(243, 245, 249, 0.56));
    box-shadow:
        0 22px 40px rgba(177, 185, 201, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.dialer-favorites-hero strong {
    display: block;
    font-size: 22px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #090a10;
}

.dialer-favorites-hero span {
    display: block;
    margin-top: 6px;
    color: rgba(24, 27, 35, 0.46);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.dialer-empty-state i {
    display: block;
    margin-bottom: 14px;
    font-size: 34px;
    opacity: 0.42;
}

#app-dialer .empty-state {
    color: rgba(18, 22, 30, 0.34);
}

#app-dialer .empty-state i {
    opacity: 0.42;
}

@media (hover: hover) and (pointer: fine) {
    .dialer-liquid-pill-btn:hover,
    .dialer-liquid-circle-btn:hover,
    .dialer-floating-search:hover,
    .dialer-call-shortcut:hover,
    .dialer-recent-delete:hover,
    .dialer-keypad-delete:hover {
        transform: translateY(-2px);
        box-shadow:
            0 24px 42px rgba(160, 169, 189, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
    }

    .dialer-nav-btn:hover {
        transform: translateY(-1px);
        background: rgba(221, 229, 242, 0.44);
    }

    .dialer-row:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.14);
    }

    #app-dialer .dial-key:hover,
    .dialer-call-main:hover {
        transform: translateY(-2px) scale(1.01);
    }
}

.dialer-liquid-pill-btn:active,
.dialer-liquid-circle-btn:active,
.dialer-floating-search:active,
.dialer-nav-btn:active,
.dialer-call-shortcut:active,
.dialer-recent-delete:active,
.dialer-keypad-delete:active,
#app-dialer .dial-key:active,
.dialer-call-main:active {
    transform: scale(0.96);
}

#app-dialer .dial-key:active {
    background: linear-gradient(180deg, rgba(247, 248, 251, 0.96), rgba(235, 237, 242, 0.78));
}

.dialer-call-main:active {
    filter: brightness(0.96);
}

/* ═══════════════════════════════════════════════════════
   CONTACTS APP
   ═══════════════════════════════════════════════════════ */

#app-contacts.contacts-liquid-screen {
    background:
        radial-gradient(circle at 18% 0%, rgba(94, 120, 255, 0.18), transparent 28%),
        radial-gradient(circle at 84% 86%, rgba(135, 73, 255, 0.2), transparent 30%),
        linear-gradient(180deg, #040507 0%, #020203 100%);
}

#app-contacts.contacts-liquid-screen .app-header {
    display: none;
}

#app-contacts.contacts-liquid-screen .app-content {
    padding: 0;
    background: transparent;
}

.contacts-app-content {
    height: 100%;
}

.contacts-liquid-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 74px 14px calc(var(--home-indicator-clearance) + 16px);
    color: #fff;
    background:
        radial-gradient(circle at 16% 4%, rgba(94, 120, 255, 0.16), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(147, 101, 255, 0.14), transparent 24%);
}

.contacts-topbar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.contacts-pill-btn,
.contacts-circle-btn,
.contacts-search-shell,
.contacts-primary-fab,
.contacts-self-card,
.contacts-row,
.contacts-list-card {
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.contacts-pill-btn,
.contacts-circle-btn,
.contacts-primary-fab,
.contacts-self-action,
.contacts-row-call {
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.contacts-pill-btn,
.contacts-circle-btn {
    background: linear-gradient(180deg, rgba(33, 37, 49, 0.94), rgba(20, 23, 31, 0.9));
    color: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 28px rgba(0, 0, 0, 0.2);
}

.contacts-pill-btn {
    min-height: 52px;
    padding: 0 20px;
    border-radius: 26px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.03em;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contacts-pill-btn-strong {
    background: linear-gradient(180deg, rgba(45, 48, 60, 0.98), rgba(25, 28, 38, 0.94));
}

.contacts-circle-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.contacts-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.contacts-title {
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1.02;
}

.contacts-subtitle {
    max-width: 188px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.contacts-scroll-region {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0 calc(var(--home-indicator-clearance) + 92px);
    -webkit-overflow-scrolling: touch;
}

.contacts-scroll-region-lists {
    padding-bottom: calc(var(--home-indicator-clearance) + 26px);
}

.contacts-self-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(26, 29, 40, 0.9), rgba(13, 16, 23, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 32px rgba(0, 0, 0, 0.22);
    margin-bottom: 10px;
}

.contacts-self-avatar,
.contacts-row-avatar,
.contacts-list-picker-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.2), rgba(113, 89, 255, 0.86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 30px rgba(0, 0, 0, 0.2);
}

.contacts-self-avatar {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    font-size: 18px;
}

.contacts-self-copy {
    min-width: 0;
}

.contacts-self-title,
.contacts-row-title,
.contacts-list-card-title {
    color: #fff;
    font-size: 14px;
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.contacts-self-sub,
.contacts-self-number,
.contacts-row-sub,
.contacts-list-card-sub {
    color: rgba(255, 255, 255, 0.58);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.35;
}

.contacts-self-sub {
    margin-top: 2px;
}

.contacts-self-number {
    margin-top: 4px;
}

.contacts-self-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contacts-self-action,
.contacts-row-call {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.contacts-directory-shell {
    position: relative;
    padding-right: 20px;
}

.contacts-directory-list,
.contacts-letter-stack,
.contacts-lists-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contacts-letter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contacts-letter-heading {
    padding: 0 4px;
    color: rgba(255, 255, 255, 0.36);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contacts-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px 10px 8px 8px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(23, 27, 36, 0.86), rgba(14, 16, 24, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 28px rgba(0, 0, 0, 0.2);
    text-align: left;
    color: inherit;
}

.contacts-row-avatar {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    font-size: 16px;
}

.contacts-row-avatar.emergency {
    background: linear-gradient(165deg, rgba(255, 126, 126, 0.58), rgba(255, 77, 87, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 30px rgba(255, 77, 87, 0.2);
}

.contacts-row-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.contacts-row-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.contacts-row-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contacts-row-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff6b62, #ff375f);
    color: #fff;
    font-size: 10px;
    box-shadow: 0 8px 16px rgba(255, 55, 95, 0.22);
}

.contacts-row-side {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contacts-row-chevron {
    color: rgba(255, 255, 255, 0.24);
    font-size: 15px;
}

.contacts-alpha-rail {
    position: absolute;
    top: 4px;
    right: 0;
    bottom: calc(var(--home-indicator-clearance) + 104px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.contacts-alpha-btn {
    border: none;
    background: transparent;
    color: rgba(118, 163, 255, 0.94);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: transform 0.16s ease, color 0.16s ease;
}

.contacts-list-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(25, 28, 38, 0.88), rgba(15, 17, 24, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 30px rgba(0, 0, 0, 0.22);
    text-align: left;
    color: inherit;
}

.contacts-list-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.14), rgba(79, 143, 255, 0.84));
    color: #fff;
    font-size: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 28px rgba(0, 0, 0, 0.18);
}

.contacts-list-card-all .contacts-list-card-icon {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.14), rgba(69, 199, 132, 0.84));
}

.contacts-list-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contacts-list-card-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-list-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.42);
}

.contacts-list-card-meta strong {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    font-weight: 700;
}

.contacts-empty-state {
    min-height: 180px;
    border-radius: 30px;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(22, 24, 31, 0.88), rgba(12, 14, 20, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}

.contacts-empty-state small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.35;
}

.contacts-empty-state i {
    font-size: 26px;
    color: rgba(255, 255, 255, 0.34);
}

.contacts-floating-footer {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: calc(var(--home-indicator-clearance) + 10px);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
}

.contacts-search-shell {
    flex: 1;
    min-height: 58px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(25, 28, 38, 0.94), rgba(17, 20, 29, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 28px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
}

.contacts-search-shell i {
    color: rgba(255, 255, 255, 0.42);
    font-size: 20px;
}

.contacts-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.contacts-search-input::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.contacts-primary-fab {
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(86, 133, 255, 0.96), rgba(96, 102, 255, 0.88));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 18px 32px rgba(76, 119, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.contacts-list-picker {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contacts-list-picker-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.contacts-list-picker-check {
    accent-color: #5b89ff;
}

.contacts-list-picker-avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 16px;
}

.contacts-list-picker-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contacts-list-picker-copy strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contacts-list-picker-copy small,
.contacts-list-picker-empty {
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
}

@media (hover: hover) and (pointer: fine) {
    .contacts-pill-btn:hover,
    .contacts-circle-btn:hover,
    .contacts-primary-fab:hover,
    .contacts-self-action:hover,
    .contacts-row-call:hover {
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.22);
    }

    .contacts-row:hover,
    .contacts-list-card:hover,
    .contacts-self-card:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.18);
    }

    .contacts-alpha-btn:hover {
        transform: scale(1.08);
        color: #fff;
    }
}

.contacts-pill-btn:active,
.contacts-circle-btn:active,
.contacts-primary-fab:active,
.contacts-self-action:active,
.contacts-row-call:active,
.contacts-row:active,
.contacts-list-card:active,
.contacts-alpha-btn:active {
    transform: scale(0.97);
}

/* ── Contacts Light-Mode Overrides ── */

#phone-frame:not(.dark-mode) #app-contacts.contacts-liquid-screen {
    background:
        radial-gradient(circle at 14% 0%, rgba(109, 148, 255, 0.14), transparent 30%),
        radial-gradient(circle at 88% 92%, rgba(145, 109, 255, 0.1), transparent 32%),
        linear-gradient(180deg, #fbfcff 0%, #eef2f8 100%);
    color: #141a24;
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-liquid-shell {
    color: #141a24;
    background:
        radial-gradient(circle at 16% 4%, rgba(112, 148, 255, 0.12), transparent 28%),
        radial-gradient(circle at 84% 14%, rgba(139, 97, 255, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(240, 244, 251, 0.18));
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-pill-btn,
#phone-frame:not(.dark-mode) #app-contacts .contacts-circle-btn,
#phone-frame:not(.dark-mode) #app-contacts .contacts-search-shell,
#phone-frame:not(.dark-mode) #app-contacts .contacts-self-card,
#phone-frame:not(.dark-mode) #app-contacts .contacts-row,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-card,
#phone-frame:not(.dark-mode) #app-contacts .contacts-empty-state,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-picker-row {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 252, 0.88)),
        rgba(255, 255, 255, 0.84);
    border-color: rgba(146, 156, 178, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 16px 34px rgba(38, 48, 72, 0.08);
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-pill-btn,
#phone-frame:not(.dark-mode) #app-contacts .contacts-circle-btn {
    color: #141a24;
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-pill-btn-strong {
    background: linear-gradient(180deg, rgba(228, 238, 255, 0.98), rgba(214, 229, 255, 0.9));
    border-color: rgba(92, 140, 255, 0.22);
    color: #0d57b8;
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-title,
#phone-frame:not(.dark-mode) #app-contacts .contacts-self-title,
#phone-frame:not(.dark-mode) #app-contacts .contacts-row-title,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-card-title,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-picker-copy strong {
    color: #141a24;
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-subtitle,
#phone-frame:not(.dark-mode) #app-contacts .contacts-self-sub,
#phone-frame:not(.dark-mode) #app-contacts .contacts-self-number,
#phone-frame:not(.dark-mode) #app-contacts .contacts-row-sub,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-card-sub,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-card-meta,
#phone-frame:not(.dark-mode) #app-contacts .contacts-empty-state,
#phone-frame:not(.dark-mode) #app-contacts .contacts-empty-state small,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-picker-copy small,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-picker-empty,
#phone-frame:not(.dark-mode) #app-contacts .contacts-letter-heading {
    color: rgba(37, 48, 67, 0.58);
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-list-card-meta strong {
    color: rgba(20, 26, 36, 0.78);
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-row,
#phone-frame:not(.dark-mode) #app-contacts .contacts-list-card,
#phone-frame:not(.dark-mode) #app-contacts .contacts-self-card {
    color: inherit;
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-row-chevron,
#phone-frame:not(.dark-mode) #app-contacts .contacts-empty-state i {
    color: rgba(37, 48, 67, 0.34);
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-self-action,
#phone-frame:not(.dark-mode) #app-contacts .contacts-row-call {
    background: rgba(19, 31, 49, 0.06);
    color: #2f6fe8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        0 10px 20px rgba(38, 48, 72, 0.06);
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-search-shell i {
    color: rgba(37, 48, 67, 0.44);
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-search-input {
    color: #141a24;
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-search-input::placeholder {
    color: rgba(37, 48, 67, 0.42);
}

#phone-frame:not(.dark-mode) #app-contacts .contacts-alpha-btn {
    color: #2f6fe8;
}

/* ═══════════════════════════════════════════════════════
   MAIL / POSTBOX APP
   ═══════════════════════════════════════════════════════ */

#app-postbox .mail-app-content {
    padding: 0 !important;
    scroll-padding-bottom: calc(var(--home-indicator-clearance) + 22px);
}

.mail-root {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.mail-liquid-shell {
    position: relative;
    min-height: 100%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--liquid-screen-top-clearance, 78px) 14px calc(var(--home-indicator-clearance) + 82px);
    overflow: hidden;
}

.mail-liquid-shell::before,
.mail-liquid-shell::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    filter: blur(56px);
    pointer-events: none;
}

.mail-liquid-shell::before {
    width: 180px;
    height: 180px;
    top: 34px;
    right: -58px;
    background: rgba(102, 112, 255, 0.16);
}

.mail-liquid-shell::after {
    width: 170px;
    height: 170px;
    bottom: 84px;
    left: -84px;
    background: rgba(65, 168, 255, 0.1);
}

.mail-liquid-topbar,
.mail-liquid-hero,
.mail-mailbox-board,
.mail-filter-row,
.mail-message-list,
.mail-detail-card,
.mail-detail-actions,
.mail-bottom-toolbar,
.mail-limit-note {
    position: relative;
    z-index: 1;
}

.mail-liquid-topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 44px;
}

.mail-liquid-topbar > div:first-child {
    min-width: 0;
}

.mail-liquid-topbar > .mail-liquid-round:first-child {
    flex: 0 0 auto;
}

.mail-liquid-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.mail-liquid-topbar-actions > * {
    flex: 0 1 auto;
    min-width: 0;
}

.mail-liquid-round,
.mail-liquid-pill,
.mail-sheet-btn,
.mail-compose-fab,
.mail-mailbox-primary,
.mail-detail-button {
    border: 0.5px solid rgba(var(--device-accent-rgb), 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 62%),
        linear-gradient(135deg, rgba(var(--device-accent-rgb), 0.18), rgba(18, 18, 24, 0.86) 74%);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 0 1px rgba(var(--device-accent-rgb), 0.05);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    color: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.mail-liquid-round,
.mail-compose-fab {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;
}

.mail-liquid-pill,
.mail-sheet-btn,
.mail-detail-button {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    max-width: 100%;
    min-width: 0;
}

.mail-liquid-pill.mailbox {
    max-width: min(48vw, 152px);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 14px;
    font-size: 12.5px;
}

.mail-pill-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-liquid-round:disabled,
.mail-liquid-pill:disabled,
.mail-sheet-btn:disabled,
.mail-mailbox-primary:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.mail-liquid-round:active,
.mail-liquid-pill:active,
.mail-sheet-btn:active,
.mail-mailbox-primary:active,
.mail-compose-fab:active,
.mail-detail-button:active {
    transform: scale(0.97);
    opacity: 0.92;
}

.mail-liquid-round.danger,
.mail-sheet-btn.secondary,
.mail-detail-button.secondary {
    color: rgba(255, 255, 255, 0.86);
}

.mail-sheet-btn.primary,
.mail-detail-button.primary,
.mail-compose-fab {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, rgba(33, 144, 255, 0.95), rgba(119, 104, 255, 0.92));
    border-color: rgba(121, 181, 255, 0.52);
    box-shadow:
        0 22px 42px rgba(53, 106, 255, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.mail-liquid-hero {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mail-liquid-hero h1 {
    margin: 0;
    font-size: clamp(30px, 10.2vw, 42px);
    line-height: 0.96;
    letter-spacing: -1.5px;
    color: #fff;
    font-weight: 780;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.mail-liquid-hero p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.46);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.mail-liquid-hero.onboarding {
    margin-top: 10px;
}

.mail-liquid-hero.detail h1 {
    font-size: 30px;
    line-height: 1.04;
}

.mail-hub-stats {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.mail-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11.5px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(var(--device-accent-rgb), 0.14), rgba(255, 255, 255, 0.05));
    border: 0.5px solid rgba(var(--device-accent-rgb), 0.18);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    max-width: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.mail-mailbox-board,
.mail-detail-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 24px;
    padding: 2px 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, rgba(var(--device-accent-rgb), 0.14), rgba(15, 15, 20, 0.82) 74%);
    border: 0.5px solid rgba(var(--device-accent-rgb), 0.16);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(32px) saturate(145%);
    -webkit-backdrop-filter: blur(32px) saturate(145%);
}

.mail-mailbox-board.auth {
    margin-top: 4px;
}

.mail-mailbox-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 0 10px;
}

.mail-mailbox-row + .mail-mailbox-row,
.mail-message-row + .mail-message-row,
.mail-detail-row + .mail-detail-row {
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}

.mail-mailbox-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
    background: none;
    border: none;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.mail-mailbox-icon,
.mail-message-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0a9bff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mail-mailbox-icon i {
    font-size: 18px;
}

.mail-mailbox-copy,
.mail-message-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mail-mailbox-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mail-mailbox-copy strong,
.mail-message-head strong {
    font-size: 15px;
    font-weight: 680;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-mailbox-copy span,
.mail-message-preview,
.mail-message-tag,
.mail-message-head span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 12px;
    line-height: 1.35;
}

.mail-mailbox-side {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.38);
    font-size: 14px;
    flex-shrink: 0;
}

.mail-mailbox-count {
    min-width: 18px;
    text-align: right;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.44);
}

.mail-mailbox-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(var(--device-accent-rgb), 0.18);
    border: 0.5px solid rgba(var(--device-accent-rgb), 0.28);
    color: rgba(255, 255, 255, 0.86);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-mailbox-primary {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
}

.mail-mailbox-primary.active {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(var(--device-accent-rgb), 0.35);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
        rgba(var(--device-accent-rgb), 0.24);
}

.mail-filter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.mail-filter-row::-webkit-scrollbar {
    display: none;
}

.mail-filter-pill {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 999px;
    border: 0.5px solid rgba(var(--device-accent-rgb), 0.16);
    background: linear-gradient(135deg, rgba(var(--device-accent-rgb), 0.14), rgba(255, 255, 255, 0.05));
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.mail-filter-pill i {
    flex: 0 0 auto;
}

.mail-filter-pill-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-filter-pill.active {
    color: #111216;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(var(--device-accent-rgb), 0.2);
    box-shadow: 0 14px 32px rgba(var(--device-accent-rgb), 0.12);
}

.mail-message-list {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, rgba(var(--device-accent-rgb), 0.12), rgba(15, 15, 20, 0.82) 74%);
    border: 0.5px solid rgba(var(--device-accent-rgb), 0.14);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    overflow: hidden;
}

.mail-message-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 10px;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: none;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

.mail-message-row.unread {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}

.mail-message-avatar {
    position: relative;
    color: #fff;
    background:
        linear-gradient(145deg, var(--mail-accent-a), var(--mail-accent-b));
    box-shadow:
        0 16px 30px rgba(24, 112, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.mail-message-avatar span {
    font-size: 16px;
    font-weight: 760;
}

.mail-message-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mail-message-head span {
    margin-left: auto;
    flex-shrink: 0;
}

.mail-message-subject {
    font-size: 14px;
    font-weight: 620;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-message-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mail-message-tag {
    margin-top: 4px;
}

.mail-message-chevron {
    color: rgba(255, 255, 255, 0.26);
    font-size: 14px;
}

.mail-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 18px;
    text-align: center;
}

.mail-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 24px;
    background: linear-gradient(135deg, rgba(var(--device-accent-rgb), 0.16), rgba(255, 255, 255, 0.06));
    border: 0.5px solid rgba(var(--device-accent-rgb), 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.mail-empty-title {
    color: #fff;
    font-size: 18px;
    font-weight: 720;
    letter-spacing: -0.04em;
}

.mail-empty-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1.45;
    max-width: 250px;
}

.mail-limit-note {
    color: rgba(255, 255, 255, 0.42);
    font-size: 13px;
    text-align: center;
}

.mail-bottom-toolbar {
    position: sticky;
    bottom: calc(var(--home-indicator-clearance) + 16px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: center;
}

.mail-bottom-search {
    min-height: 48px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 18px;
    gap: 8px;
    align-items: center;
    padding: 0 16px;
    border-radius: 25px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, rgba(var(--device-accent-rgb), 0.14), rgba(16, 16, 20, 0.9) 74%);
    border: 0.5px solid rgba(var(--device-accent-rgb), 0.16);
    box-shadow:
        0 20px 38px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .buzz-pill-btn:hover,
    .buzz-circle-btn:hover,
    .buzz-compose-fab:hover,
    .buzz-delete-fab:hover,
    .buzz-chat-card:hover,
    .buzz-chat-action:hover,
    #buzz-attach-btn:hover,
    #buzz-send-btn:hover,
    .mail-liquid-round:hover,
    .mail-liquid-pill:hover,
    .mail-sheet-btn:hover,
    .mail-compose-fab:hover,
    .mail-mailbox-primary:hover,
    .mail-detail-button:hover,
    .mail-stat-chip:hover,
    .mail-filter-pill:hover,
    .mail-bottom-search:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    .buzz-filter-option:hover {
        transform: translateX(-1px);
        background: rgba(255, 255, 255, 0.08);
    }

    .buzz-search-bar:hover,
    .buzz-chat-card:hover,
    .mail-bottom-search:hover {
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 24px 52px rgba(0, 0, 0, 0.38);
    }

    .chat-item:hover,
    .mail-mailbox-main:hover,
    .mail-message-row:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
    }
}

.mail-bottom-search input {
    width: 100%;
    min-width: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 14px;
    outline: none;
    font-family: inherit;
}

.mail-bottom-search input::placeholder {
    color: rgba(255, 255, 255, 0.36);
}

.mail-bottom-voice {
    border: none;
    background: none;
    color: inherit;
    padding: 0;
}

.mail-detail-card {
    padding: 0 18px;
}

.mail-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
}

.mail-detail-row span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
}

.mail-detail-row strong {
    font-size: 15px;
    color: #fff;
    text-align: right;
    word-break: break-word;
}

.mail-detail-row.subtle strong {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.mail-detail-body {
    padding: 22px 0 24px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    line-height: 1.58;
    word-break: break-word;
}

.mail-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mail-detail-button {
    flex: 1 1 0;
}

.mail-detail-button.full {
    flex-basis: 100%;
}

.mail-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 28px 18px calc(var(--home-indicator-clearance) + 22px);
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 20;
}

.mail-overlay.visible {
    display: flex;
}

.mail-sheet {
    width: 100%;
    border-radius: 30px;
    padding: 22px 20px 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
        rgba(20, 20, 24, 0.94);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(34px) saturate(150%);
    -webkit-backdrop-filter: blur(34px) saturate(150%);
}

.mail-sheet.compose {
    max-height: calc(100% - 44px);
    overflow-y: auto;
}

.mail-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mail-sheet-head h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.mail-sheet-close {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.mail-sheet-copy {
    color: rgba(255, 255, 255, 0.52);
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 18px;
}

.mail-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.mail-field.grow textarea {
    min-height: 180px;
}

.mail-field span,
.mail-sheet-meta {
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.mail-field input,
.mail-field textarea,
.mail-field select {
    width: 100%;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: 18px;
    padding: 14px 16px;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}

.mail-field textarea {
    resize: none;
    line-height: 1.5;
}

.mail-field input::placeholder,
.mail-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.mail-address-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border-radius: 20px;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    padding: 0 16px 0 0;
}

.mail-address-field input {
    border: none;
    background: none;
}

.mail-address-field strong {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    white-space: nowrap;
}

.mail-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    margin-bottom: 16px;
}

.mail-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: #2597ff;
}

.mail-sheet-status {
    min-height: 20px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
    margin-bottom: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mail-sheet-status.visible {
    opacity: 1;
}

.mail-sheet-actions {
    display: flex;
    gap: 12px;
}

.mail-sheet-actions .mail-sheet-btn {
    flex: 1 1 0;
}

.mail-sheet-btn.inline {
    margin-top: 10px;
}

@media (max-width: 420px) {
    .mail-liquid-hero h1 {
        font-size: 44px;
    }

    .mail-liquid-pill.mailbox {
        max-width: 140px;
    }
}

/* ── Mail / Postbox: Light-mode overrides ── */

#phone-frame:not(.dark-mode) #app-postbox .mail-liquid-shell {
    background:
        radial-gradient(circle at 16% 4%, rgba(112, 148, 255, 0.14), transparent 28%),
        radial-gradient(circle at 86% 88%, rgba(139, 97, 255, 0.1), transparent 30%),
        linear-gradient(180deg, #fbfcff 0%, #eef2f8 100%);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-liquid-round,
#phone-frame:not(.dark-mode) #app-postbox .mail-liquid-pill,
#phone-frame:not(.dark-mode) #app-postbox .mail-mailbox-primary,
#phone-frame:not(.dark-mode) #app-postbox .mail-detail-button,
#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-btn,
#phone-frame:not(.dark-mode) #app-postbox .mail-bottom-search,
#phone-frame:not(.dark-mode) #app-postbox .mail-filter-pill,
#phone-frame:not(.dark-mode) #app-postbox .mail-stat-chip,
#phone-frame:not(.dark-mode) #app-postbox .mail-empty-icon {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 252, 0.88)),
        rgba(255, 255, 255, 0.82);
    border-color: rgba(146, 156, 178, 0.18);
    color: #151b25;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 16px 34px rgba(38, 48, 72, 0.08);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-btn.primary,
#phone-frame:not(.dark-mode) #app-postbox .mail-detail-button.primary,
#phone-frame:not(.dark-mode) #app-postbox .mail-compose-fab {
    color: #fff;
    background: linear-gradient(135deg, rgba(17, 113, 255, 0.96), rgba(108, 115, 255, 0.92));
    border-color: rgba(80, 133, 255, 0.32);
    box-shadow:
        0 16px 28px rgba(43, 105, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-btn.primary:disabled,
#phone-frame:not(.dark-mode) #app-postbox .mail-detail-button.primary:disabled,
#phone-frame:not(.dark-mode) #app-postbox .mail-compose-fab:disabled {
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(135deg, rgba(146, 185, 255, 0.94), rgba(189, 198, 255, 0.92));
    border-color: rgba(137, 160, 211, 0.22);
    box-shadow:
        0 12px 20px rgba(137, 160, 211, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-liquid-hero h1,
#phone-frame:not(.dark-mode) #app-postbox .mail-mailbox-copy strong,
#phone-frame:not(.dark-mode) #app-postbox .mail-message-head strong,
#phone-frame:not(.dark-mode) #app-postbox .mail-message-subject,
#phone-frame:not(.dark-mode) #app-postbox .mail-empty-title,
#phone-frame:not(.dark-mode) #app-postbox .mail-detail-row strong,
#phone-frame:not(.dark-mode) #app-postbox .mail-detail-body,
#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-head h2,
#phone-frame:not(.dark-mode) #app-postbox .mail-address-field strong {
    color: #151b25;
}

#phone-frame:not(.dark-mode) #app-postbox .mail-liquid-hero p,
#phone-frame:not(.dark-mode) #app-postbox .mail-stat-chip,
#phone-frame:not(.dark-mode) #app-postbox .mail-mailbox-copy span,
#phone-frame:not(.dark-mode) #app-postbox .mail-message-preview,
#phone-frame:not(.dark-mode) #app-postbox .mail-message-tag,
#phone-frame:not(.dark-mode) #app-postbox .mail-message-head span,
#phone-frame:not(.dark-mode) #app-postbox .mail-mailbox-side,
#phone-frame:not(.dark-mode) #app-postbox .mail-mailbox-count,
#phone-frame:not(.dark-mode) #app-postbox .mail-empty-text,
#phone-frame:not(.dark-mode) #app-postbox .mail-limit-note,
#phone-frame:not(.dark-mode) #app-postbox .mail-detail-row span,
#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-copy,
#phone-frame:not(.dark-mode) #app-postbox .mail-field span,
#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-meta,
#phone-frame:not(.dark-mode) #app-postbox .mail-checkbox,
#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-status {
    color: rgba(37, 48, 67, 0.56);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-mailbox-board,
#phone-frame:not(.dark-mode) #app-postbox .mail-message-list,
#phone-frame:not(.dark-mode) #app-postbox .mail-detail-card,
#phone-frame:not(.dark-mode) #app-postbox .mail-sheet {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 249, 253, 0.9)),
        rgba(255, 255, 255, 0.84);
    border-color: rgba(146, 156, 178, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 18px 38px rgba(38, 48, 72, 0.08);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-mailbox-row + .mail-mailbox-row,
#phone-frame:not(.dark-mode) #app-postbox .mail-message-row + .mail-message-row,
#phone-frame:not(.dark-mode) #app-postbox .mail-detail-row + .mail-detail-row {
    border-top-color: rgba(24, 30, 42, 0.08);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-field input,
#phone-frame:not(.dark-mode) #app-postbox .mail-field textarea,
#phone-frame:not(.dark-mode) #app-postbox .mail-field select,
#phone-frame:not(.dark-mode) #app-postbox .mail-address-field {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(146, 156, 178, 0.18);
    color: #151b25;
}

#phone-frame:not(.dark-mode) #app-postbox .mail-field input::placeholder,
#phone-frame:not(.dark-mode) #app-postbox .mail-field textarea::placeholder,
#phone-frame:not(.dark-mode) #app-postbox .mail-bottom-search input::placeholder {
    color: rgba(37, 48, 67, 0.42);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-mailbox-badge {
    background: rgba(13, 87, 184, 0.08);
    border-color: rgba(13, 87, 184, 0.16);
    color: #0d57b8;
}

#phone-frame:not(.dark-mode) #app-postbox .mail-message-chevron,
#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-close {
    color: rgba(37, 48, 67, 0.6);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-sheet-close {
    background: rgba(19, 31, 49, 0.06);
    border-color: rgba(146, 156, 178, 0.14);
}

#phone-frame:not(.dark-mode) #app-postbox .mail-bottom-search input {
    color: #151b25;
}

#phone-frame:not(.dark-mode) #app-postbox .mail-filter-pill.active {
    color: #0d57b8;
    background: linear-gradient(180deg, rgba(225, 238, 255, 0.98), rgba(212, 228, 255, 0.92));
    border-color: rgba(92, 140, 255, 0.26);
}

/* ═══════════════════════════════════════════════════
   PICTOGRAM LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════ */
#phone-frame:not(.dark-mode) .social-btn.secondary {
    color: var(--text-primary) !important;
    background: var(--fill-secondary, rgba(0,0,0,0.06)) !important;
    border-color: var(--separator, rgba(0,0,0,0.12)) !important;
}
#phone-frame:not(.dark-mode) .pg-post {
    background: var(--card-bg, rgba(0,0,0,0.04));
    border-color: var(--separator, rgba(0,0,0,0.1));
}
#phone-frame:not(.dark-mode) .pg-tab-bar {
    background: var(--card-bg, rgba(255,255,255,0.9));
    border-color: var(--separator, rgba(0,0,0,0.1));
}
#phone-frame:not(.dark-mode) .pg-tab {
    color: var(--text-tertiary, rgba(0,0,0,0.4));
}
#phone-frame:not(.dark-mode) .pg-tab.active { color: #007aff; }
#phone-frame:not(.dark-mode) .pg-story-compose-empty {
    color: var(--text-secondary, rgba(0,0,0,0.5));
    border-color: var(--separator, rgba(0,0,0,0.15));
    background: var(--fill-secondary, rgba(0,0,0,0.04));
}
#phone-frame:not(.dark-mode) .pg-story-compose-thumb {
    background: var(--fill-secondary, rgba(0,0,0,0.04));
    border-color: transparent;
}
#phone-frame:not(.dark-mode) .pg-section-head {
    color: var(--text-primary);
}