:root {
      --bg: #0d0c14;
      --panel: rgba(255,255,255,.055);
      --panel-2: rgba(255,255,255,.082);
      --line: rgba(255,255,255,.12);
      --text: #f8f4ea;
      --muted: rgba(248,244,234,.66);
      --hero-muted: rgba(248,244,234,.84);
      --link: #ffe1a1;
      --accent: #ffb64d;
      --accent-2: #ff7a59;
      --accent-rgb: 255,182,77;
      --accent-2-rgb: 255,122,89;
      --accent-soft: rgba(var(--accent-rgb),.16);
      --accent-border: rgba(var(--accent-rgb),.34);
      --accent-shadow: rgba(var(--accent-rgb),.30);
      --good: #52e0a8;
      --good-2: #7be7bd;
      --good-rgb: 82,224,168;
      --good-soft: rgba(var(--good-rgb),.14);
      --good-border: rgba(var(--good-rgb),.36);
      --danger: #ff6f87;
      --bad: #ff6f87;
      --danger-rgb: 255,111,135;
      --danger-text: #ffd9df;
      --danger-soft: rgba(var(--danger-rgb),.13);
      --danger-border: rgba(var(--danger-rgb),.34);
      --warn: #ffd166;
      --warn-rgb: 255,209,102;
      --warn-text: #ffe39d;
      --warn-soft: rgba(var(--warn-rgb),.13);
      --warn-border: rgba(var(--warn-rgb),.34);
      --nav-h: 78px;
      --glass-1: rgba(255,247,222,.052);
      --glass-2: rgba(255,247,222,.092);
      --glass-3: rgba(255,247,222,.145);
      --glass-tint: rgba(var(--accent-rgb),.09);
      --edge-top: rgba(255,255,255,.46);
      --edge-mid: rgba(255,255,255,.085);
      --edge-bot: rgba(20,18,34,.38);
      --shine: rgba(255,255,255,.26);
      --shadow-card: 0 14px 46px rgba(0,0,0,.38), 0 2px 10px rgba(255,255,255,.035);
      --shadow-float: 0 24px 72px rgba(0,0,0,.55), 0 2px 14px rgba(255,255,255,.055);
      --brand-gradient: linear-gradient(145deg, rgba(var(--accent-rgb),.95), rgba(var(--accent-2-rgb),.70));
      --brand-shadow: 0 10px 26px rgba(var(--accent-2-rgb),.30), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -12px 22px rgba(80,44,18,.25);
      --primary-gradient: linear-gradient(135deg, rgba(var(--accent-rgb),.94), rgba(var(--accent-2-rgb),.74));
      --primary-shadow: 0 16px 34px rgba(var(--accent-2-rgb),.25), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -16px 26px rgba(88,48,18,.22);
      --control-gradient: linear-gradient(135deg, rgba(var(--accent-rgb),.30), rgba(var(--good-rgb),.12));
      --nav-active-gradient: linear-gradient(145deg, rgba(var(--accent-rgb),.34), rgba(var(--accent-2-rgb),.20));
      --nav-active-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.22), 0 8px 22px rgba(var(--accent-2-rgb),.18);
      --theme-card-a: rgba(255,255,255,.16);
      --theme-card-b: rgba(var(--accent-rgb),.12);
      --theme-overview-a: rgba(var(--good-rgb),.16);
      --theme-overview-b: rgba(var(--accent-rgb),.18);
      --theme-panel: linear-gradient(180deg, rgba(54,39,26,.94), rgba(28,22,18,.96));
      --sky-1: #3c2818;
      --sky-2: #1a1110;
      --sky-3: #090606;
      --wx-glow-a: rgba(var(--accent-rgb),.46);
      --wx-glow-b: rgba(var(--good-rgb),.24);
      --wx-haze: 0;
      --wx-sat: 1.06;
      --wx-drift: 34s;
    }
    * { box-sizing: border-box; }
    html { min-height: 100%; background: var(--sky-3); scroll-padding-bottom: calc(var(--nav-h) + 24px); }
    html.keyboard-open { scroll-padding-bottom: 18px; }
    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      position: relative;
      overflow-x: hidden;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: transparent;
    }
    :root[data-weather="unknown"] {
      --text: #f1f5f7; --muted: rgba(241,245,247,.64); --hero-muted: rgba(241,245,247,.82); --link: #c9dce8;
      --accent: #a9c0ce; --accent-2: #748a98; --accent-rgb: 169,192,206; --accent-2-rgb: 116,138,152;
      --good: #8dc9b7; --good-2: #a9d8ca; --good-rgb: 141,201,183;
      --danger: #ff8297; --bad: #ff8297; --danger-rgb: 255,130,151; --danger-text: #ffdde3;
      --warn: #dbc77e; --warn-rgb: 219,199,126; --warn-text: #f1e2ac;
      --glass-1: rgba(225,237,243,.054); --glass-2: rgba(225,237,243,.09); --glass-3: rgba(225,237,243,.132);
      --glass-tint: rgba(var(--accent-rgb),.10); --edge-bot: rgba(8,15,20,.48);
      --brand-shadow: 0 10px 26px rgba(var(--accent-2-rgb),.26), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -12px 22px rgba(22,38,48,.28);
      --primary-shadow: 0 16px 34px rgba(var(--accent-2-rgb),.22), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -16px 26px rgba(22,38,48,.24);
      --theme-card-a: rgba(255,255,255,.12); --theme-card-b: rgba(var(--accent-rgb),.09);
      --theme-overview-a: rgba(var(--good-rgb),.10); --theme-overview-b: rgba(var(--accent-rgb),.13);
      --theme-panel: linear-gradient(180deg, rgba(27,37,44,.95), rgba(12,18,23,.97));
      --sky-1: #263640; --sky-2: #131d24; --sky-3: #070b0e;
      --wx-glow-a: rgba(var(--accent-rgb),.22); --wx-glow-b: rgba(var(--good-rgb),.10);
      --wx-haze: .12; --wx-sat: .76; --wx-drift: 48s;
    }
    :root[data-weather="clear"] {
      --text: #f4fbff; --muted: rgba(244,251,255,.66); --hero-muted: rgba(244,251,255,.84); --link: #a8edff;
      --accent: #55d7ff; --accent-2: #ff8f6b; --accent-rgb: 85,215,255; --accent-2-rgb: 255,143,107;
      --good: #57e0b2; --good-2: #83ebc6; --good-rgb: 87,224,178;
      --danger: #ff6682; --bad: #ff6682; --danger-rgb: 255,102,130; --danger-text: #ffd8e0;
      --warn: #ffd166; --warn-rgb: 255,209,102; --warn-text: #ffe39d;
      --glass-1: rgba(220,246,255,.054); --glass-2: rgba(220,246,255,.094); --glass-3: rgba(220,246,255,.145);
      --glass-tint: rgba(var(--accent-rgb),.10); --edge-bot: rgba(4,25,34,.42);
      --brand-shadow: 0 10px 28px rgba(var(--accent-2-rgb),.24), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -12px 22px rgba(10,67,84,.27);
      --primary-shadow: 0 16px 36px rgba(var(--accent-2-rgb),.21), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -16px 26px rgba(8,57,74,.25);
      --theme-card-a: rgba(255,255,255,.15); --theme-card-b: rgba(var(--accent-rgb),.12);
      --theme-overview-a: rgba(var(--good-rgb),.16); --theme-overview-b: rgba(var(--accent-2-rgb),.15);
      --theme-panel: linear-gradient(180deg, rgba(18,50,63,.94), rgba(7,21,28,.96));
      --sky-1: #157fc5; --sky-2: #0c5792; --sky-3: #062b49;
      --wx-glow-a: rgba(var(--accent-rgb),.30); --wx-glow-b: rgba(var(--accent-2-rgb),.16);
      --wx-haze: .04; --wx-sat: 1.04; --wx-drift: 34s;
    }
    :root[data-weather="clouds"] {
      --text: #f7fcff; --muted: rgba(247,252,255,.68); --hero-muted: rgba(247,252,255,.86); --link: #b9ecff;
      --accent: #82d8ff; --accent-2: #ffd27a; --accent-rgb: 130,216,255; --accent-2-rgb: 255,210,122;
      --good: #75dfbd; --good-2: #a2ebd2; --good-rgb: 117,223,189;
      --danger: #ff8fa5; --bad: #ff8fa5; --danger-rgb: 255,143,165; --danger-text: #ffe1e7;
      --warn: #ffd27a; --warn-rgb: 255,210,122; --warn-text: #ffebbc;
      --glass-1: rgba(229,247,255,.068); --glass-2: rgba(229,247,255,.108); --glass-3: rgba(229,247,255,.154);
      --glass-tint: rgba(var(--accent-rgb),.10); --edge-bot: rgba(7,27,40,.38);
      --brand-shadow: 0 10px 28px rgba(var(--accent-2-rgb),.18), inset 0 1px 0 rgba(255,255,255,.54), inset 0 -12px 22px rgba(20,74,99,.24);
      --primary-shadow: 0 16px 36px rgba(var(--accent-rgb),.18), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -16px 26px rgba(18,67,91,.22);
      --theme-card-a: rgba(255,255,255,.15); --theme-card-b: rgba(var(--accent-rgb),.11);
      --theme-overview-a: rgba(var(--good-rgb),.14); --theme-overview-b: rgba(var(--accent-2-rgb),.13);
      --theme-panel: linear-gradient(180deg, rgba(35,76,99,.93), rgba(13,39,56,.96));
      --sky-1: #4f91bd; --sky-2: #2f6d94; --sky-3: #17445f;
      --wx-glow-a: rgba(var(--accent-rgb),.30); --wx-glow-b: rgba(var(--accent-2-rgb),.22);
      --wx-haze: .08; --wx-sat: 1.02; --wx-drift: 46s;
    }
    :root[data-weather="rain"] {
      --text: #eaf8ff; --muted: rgba(234,248,255,.64); --hero-muted: rgba(234,248,255,.82); --link: #90e6ff;
      --accent: #36c3ff; --accent-2: #127dba; --accent-rgb: 54,195,255; --accent-2-rgb: 18,125,186;
      --good: #5fe3c8; --good-2: #86f0dc; --good-rgb: 95,227,200;
      --danger: #ff758f; --bad: #ff758f; --danger-rgb: 255,117,143; --danger-text: #ffdce3;
      --warn: #ffc857; --warn-rgb: 255,200,87; --warn-text: #ffe3a1;
      --glass-1: rgba(202,236,255,.054); --glass-2: rgba(202,236,255,.092); --glass-3: rgba(202,236,255,.132);
      --glass-tint: rgba(var(--accent-rgb),.10); --edge-bot: rgba(4,22,36,.46);
      --brand-shadow: 0 10px 26px rgba(var(--accent-2-rgb),.30), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -12px 22px rgba(0,52,84,.28);
      --primary-shadow: 0 16px 34px rgba(var(--accent-2-rgb),.25), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -16px 26px rgba(0,44,72,.25);
      --theme-card-a: rgba(255,255,255,.13); --theme-card-b: rgba(var(--accent-rgb),.10);
      --theme-overview-a: rgba(var(--good-rgb),.14); --theme-overview-b: rgba(var(--accent-rgb),.18);
      --theme-panel: linear-gradient(180deg, rgba(18,43,61,.94), rgba(8,22,34,.96));
      --sky-1: #12344a; --sky-2: #0a1a28; --sky-3: #03080e;
      --wx-glow-a: rgba(var(--accent-rgb),.34); --wx-glow-b: rgba(var(--good-rgb),.16);
      --wx-haze: .26; --wx-sat: .84; --wx-drift: 40s;
    }
    :root[data-weather="storm"] {
      --text: #edf4fa; --muted: rgba(237,244,250,.62); --hero-muted: rgba(237,244,250,.80); --link: #b9dcff;
      --accent: #b8d9ff; --accent-2: #5b789c; --accent-rgb: 184,217,255; --accent-2-rgb: 91,120,156;
      --good: #68d8bd; --good-2: #91e5d1; --good-rgb: 104,216,189;
      --danger: #ff5f78; --bad: #ff5f78; --danger-rgb: 255,95,120; --danger-text: #ffd8df;
      --warn: #ffd36b; --warn-rgb: 255,211,107; --warn-text: #ffe6a8;
      --glass-1: rgba(218,232,246,.052); --glass-2: rgba(218,232,246,.088); --glass-3: rgba(218,232,246,.128);
      --glass-tint: rgba(var(--accent-rgb),.09); --edge-bot: rgba(3,8,14,.56);
      --brand-shadow: 0 10px 28px rgba(var(--accent-2-rgb),.28), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -12px 22px rgba(19,37,58,.34);
      --primary-shadow: 0 16px 36px rgba(var(--accent-2-rgb),.24), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -16px 26px rgba(15,30,47,.30);
      --theme-card-a: rgba(255,255,255,.11); --theme-card-b: rgba(var(--accent-rgb),.09);
      --theme-overview-a: rgba(var(--danger-rgb),.12); --theme-overview-b: rgba(var(--accent-rgb),.13);
      --theme-panel: linear-gradient(180deg, rgba(29,37,47,.95), rgba(10,14,20,.97));
      --sky-1: #27313d; --sky-2: #121820; --sky-3: #05080c;
      --wx-glow-a: rgba(var(--accent-rgb),.24); --wx-glow-b: rgba(var(--warn-rgb),.09);
      --wx-haze: .38; --wx-sat: .70; --wx-drift: 26s;
    }
    :root[data-weather="fog"] {
      --text: #f4f1e8; --muted: rgba(244,241,232,.62); --hero-muted: rgba(244,241,232,.80); --link: #d8d1bc;
      --accent: #b9b09a; --accent-2: #7d8978; --accent-rgb: 185,176,154; --accent-2-rgb: 125,137,120;
      --good: #a7d3b8; --good-2: #c0dfca; --good-rgb: 167,211,184;
      --danger: #ff8c98; --bad: #ff8c98; --danger-rgb: 255,140,152; --danger-text: #ffe0e4;
      --warn: #ddc177; --warn-rgb: 221,193,119; --warn-text: #f0dfa9;
      --glass-1: rgba(242,238,226,.056); --glass-2: rgba(242,238,226,.092); --glass-3: rgba(242,238,226,.132);
      --glass-tint: rgba(var(--accent-rgb),.12); --edge-bot: rgba(18,20,18,.44);
      --brand-shadow: 0 10px 26px rgba(var(--accent-2-rgb),.26), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -12px 22px rgba(50,54,48,.28);
      --primary-shadow: 0 16px 34px rgba(var(--accent-2-rgb),.23), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -16px 26px rgba(50,54,48,.24);
      --theme-card-a: rgba(255,255,255,.12); --theme-card-b: rgba(var(--accent-rgb),.10);
      --theme-overview-a: rgba(var(--warn-rgb),.13); --theme-overview-b: rgba(var(--accent-rgb),.15);
      --theme-panel: linear-gradient(180deg, rgba(41,42,37,.94), rgba(22,23,21,.96));
      --sky-1: #343733; --sky-2: #20231f; --sky-3: #111310;
      --wx-glow-a: rgba(var(--accent-rgb),.26); --wx-glow-b: rgba(var(--warn-rgb),.14);
      --wx-haze: .46; --wx-sat: .66; --wx-drift: 60s;
    }
    :root[data-weather="snow"] {
      --text: #effaff; --muted: rgba(239,250,255,.64); --hero-muted: rgba(239,250,255,.82); --link: #bdeeff;
      --accent: #9ddcff; --accent-2: #67a8ff; --accent-rgb: 157,220,255; --accent-2-rgb: 103,168,255;
      --good: #86efd7; --good-2: #b9fff0; --good-rgb: 134,239,215;
      --danger: #ff7b9c; --bad: #ff7b9c; --danger-rgb: 255,123,156; --danger-text: #ffdeea;
      --warn: #ffe08a; --warn-rgb: 255,224,138; --warn-text: #fff0bd;
      --glass-1: rgba(226,247,255,.060); --glass-2: rgba(226,247,255,.102); --glass-3: rgba(226,247,255,.152);
      --glass-tint: rgba(var(--accent-rgb),.13); --edge-bot: rgba(5,19,38,.42);
      --brand-shadow: 0 10px 26px rgba(var(--accent-2-rgb),.30), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -12px 22px rgba(20,56,94,.25);
      --primary-shadow: 0 16px 34px rgba(var(--accent-2-rgb),.25), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -16px 26px rgba(20,56,94,.22);
      --theme-card-a: rgba(255,255,255,.17); --theme-card-b: rgba(var(--accent-rgb),.12);
      --theme-overview-a: rgba(var(--good-rgb),.15); --theme-overview-b: rgba(var(--accent-rgb),.19);
      --theme-panel: linear-gradient(180deg, rgba(18,39,58,.94), rgba(8,18,30,.96));
      --sky-1: #183954; --sky-2: #0d1d30; --sky-3: #040a12;
      --wx-glow-a: rgba(var(--accent-rgb),.32); --wx-glow-b: rgba(var(--good-rgb),.18);
      --wx-haze: .18; --wx-sat: .94; --wx-drift: 52s;
    }
    :root[data-weather="clear"][data-night="1"] {
      --sky-1: #102e46; --sky-2: #071728; --sky-3: #02070d;
      --wx-glow-a: rgba(var(--accent-rgb),.22); --wx-glow-b: rgba(var(--accent-2-rgb),.10);
    }
    :root[data-weather="clouds"][data-night="1"] {
      --sky-1: #171d2b; --sky-2: #0b1019; --sky-3: #030509;
      --wx-glow-a: rgba(var(--accent-rgb),.22); --wx-glow-b: rgba(var(--good-rgb),.10);
    }
    :root[data-color-scheme="dark"][data-weather="clear"][data-night="0"] {
      --sky-1: #105f95; --sky-2: #0a416c; --sky-3: #041e35;
      --wx-glow-a: rgba(var(--accent-rgb),.20); --wx-glow-b: rgba(var(--accent-2-rgb),.09);
      --glass-1: rgba(220,246,255,.072); --glass-2: rgba(220,246,255,.13);
      --theme-card-a: rgba(255,255,255,.20); --theme-card-b: rgba(var(--accent-rgb),.10);
      --wx-sat: .88;
    }
    :root[data-color-scheme="dark"][data-weather="clouds"][data-night="0"] {
      --sky-1: #3c6d8b; --sky-2: #27536d; --sky-3: #123247;
      --wx-glow-a: rgba(var(--accent-rgb),.18); --wx-glow-b: rgba(var(--accent-2-rgb),.10);
      --glass-1: rgba(229,247,255,.080); --glass-2: rgba(229,247,255,.14);
      --theme-card-a: rgba(255,255,255,.21); --theme-card-b: rgba(var(--accent-rgb),.10);
      --wx-sat: .84;
    }
    :root[data-color-scheme="dark"][data-weather="clear"][data-night="0"] #wxCanvas {
      filter: brightness(.72) saturate(.86);
    }
    :root[data-color-scheme="dark"][data-weather="clouds"][data-night="0"] #wxCanvas {
      filter: brightness(.76) saturate(.82);
    }
    :root[data-weather="rain"][data-night="1"] {
      --sky-1: #08233a; --sky-2: #06121f; --sky-3: #02050a;
      --wx-glow-a: rgba(var(--accent-rgb),.26); --wx-glow-b: rgba(var(--good-rgb),.10);
    }
    :root[data-weather="storm"][data-night="1"] {
      --sky-1: #151c25; --sky-2: #090e14; --sky-3: #020407;
      --wx-glow-a: rgba(var(--accent-rgb),.19); --wx-glow-b: rgba(var(--warn-rgb),.06);
    }
    :root[data-weather="fog"][data-night="1"] {
      --sky-1: #20241f; --sky-2: #11140f; --sky-3: #050605;
      --wx-glow-a: rgba(var(--accent-rgb),.18); --wx-glow-b: rgba(var(--warn-rgb),.08);
    }
    :root[data-weather="snow"][data-night="1"] {
      --sky-1: #0e2a43; --sky-2: #071525; --sky-3: #02050b;
      --wx-glow-a: rgba(var(--accent-rgb),.25); --wx-glow-b: rgba(var(--good-rgb),.12);
    }
    :root[data-color-scheme="light"] {
      color-scheme: light;
      --bg: #edf5f8;
      --panel: rgba(249,252,254,.90);
      --panel-2: rgba(255,255,255,.96);
      --line: rgba(255,255,255,.92);
      --text: #102633;
      --muted: #425966;
      --hero-muted: #405865;
      --link: #006b91;
      --danger-text: #9f2840;
      --warn-text: #765300;
      --glass-1: rgba(246,251,253,.82);
      --glass-2: rgba(252,254,255,.90);
      --glass-3: rgba(255,255,255,.96);
      --glass-tint: rgba(var(--accent-rgb),.08);
      --edge-top: rgba(255,255,255,.94);
      --edge-mid: rgba(255,255,255,.50);
      --edge-bot: rgba(39,66,82,.20);
      --shine: rgba(255,255,255,.72);
      --shadow-card: 0 16px 42px rgba(31,59,75,.18), 0 2px 8px rgba(255,255,255,.34);
      --shadow-float: 0 22px 58px rgba(29,55,72,.24), 0 2px 12px rgba(255,255,255,.42);
      --primary-gradient: linear-gradient(135deg, color-mix(in srgb, var(--accent) 68%, #15516a), color-mix(in srgb, var(--accent-2) 68%, #713f35));
      --primary-shadow: 0 14px 30px rgba(var(--accent-2-rgb),.20), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -12px 22px rgba(20,58,72,.18);
      --control-gradient: linear-gradient(135deg, rgba(255,255,255,.62), rgba(var(--accent-rgb),.18));
      --nav-active-gradient: linear-gradient(145deg, rgba(255,255,255,.78), rgba(var(--accent-rgb),.22));
      --nav-active-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(45,72,88,.12), 0 8px 20px rgba(37,66,82,.12);
      --theme-card-a: rgba(255,255,255,.96);
      --theme-card-b: rgba(var(--accent-rgb),.08);
      --theme-overview-a: rgba(255,255,255,.94);
      --theme-overview-b: rgba(var(--accent-rgb),.10);
      --theme-panel: linear-gradient(180deg, rgba(250,253,255,.96), rgba(224,236,242,.96));
      --good-ink: #126b51;
      --danger-ink: #a52a45;
      --warn-ink: #795600;
    }
    :root[data-color-scheme="light"] .hero h1,
    :root[data-color-scheme="light"] .brand,
    :root[data-color-scheme="light"] .hero-sub,
    :root[data-color-scheme="light"] .page-head h1,
    :root[data-color-scheme="light"] .page-head p {
      color: #f7fbff;
      text-shadow: 0 2px 14px rgba(3,18,29,.52), 0 1px 2px rgba(3,18,29,.7);
    }
    :root[data-color-scheme="light"] .weather-strip,
    :root[data-color-scheme="light"] .card,
    :root[data-color-scheme="light"] .quick-card,
    :root[data-color-scheme="light"] .bottom-nav {
      border-color: rgba(255,255,255,.72);
    }
    :root[data-color-scheme="light"] .card {
      color: var(--text);
      background:
        radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,.98), transparent 48%),
        radial-gradient(90% 90% at 92% 4%, rgba(var(--accent-rgb),.09), transparent 52%),
        linear-gradient(155deg, rgba(255,255,255,.94), rgba(242,248,251,.86));
      box-shadow: 0 16px 42px rgba(16,42,57,.16), inset 0 1px 0 rgba(255,255,255,1);
    }
    :root[data-color-scheme="light"] .weather-strip {
      color: var(--text);
      text-shadow: none;
      border-color: rgba(255,255,255,.94);
      background:
        radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.98), transparent 48%),
        linear-gradient(160deg, rgba(255,255,255,.90), rgba(239,247,250,.78));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 12px 30px rgba(18,46,62,.20);
    }
    :root[data-color-scheme="light"] .weather-strip b { color: #102633; font-weight: 900; }
    :root[data-color-scheme="light"] .weather-strip small { color: #35515f; font-weight: 650; }
    :root[data-color-scheme="light"] .weather-icon {
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 8px 20px rgba(var(--accent-rgb),.28), inset 0 1px 0 rgba(255,255,255,.68), inset 0 -8px 14px rgba(18,46,62,.12);
    }
    :root[data-color-scheme="light"] .card::after,
    :root[data-color-scheme="light"] .overview::after,
    :root[data-color-scheme="light"] .quick-card::after {
      opacity: .20;
      mix-blend-mode: normal;
      background: linear-gradient(118deg, rgba(255,255,255,.82), rgba(255,255,255,.10) 38%, transparent 70%);
    }
    :root[data-color-scheme="light"] .overview {
      background:
        radial-gradient(circle at 14% 8%, var(--theme-overview-a), transparent 34%),
        radial-gradient(circle at 88% 14%, var(--theme-overview-b), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(240,247,250,.88));
    }
    :root[data-color-scheme="light"] .tariff,
    :root[data-color-scheme="light"] .referral,
    :root[data-color-scheme="light"] .diagnostic-hero {
      color: var(--text);
      background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.98), transparent 42%),
        radial-gradient(circle at 94% 0%, rgba(var(--accent-rgb),.10), transparent 38%),
        linear-gradient(150deg, rgba(255,255,255,.95), rgba(239,247,250,.87));
    }
    :root[data-color-scheme="light"] .metric,
    :root[data-color-scheme="light"] .client-card,
    :root[data-color-scheme="light"] .connection-shell,
    :root[data-color-scheme="light"] .app-link,
    :root[data-color-scheme="light"] .sub-link,
    :root[data-color-scheme="light"] .subscription-tab,
    :root[data-color-scheme="light"] .gift-link-row,
    :root[data-color-scheme="light"] .referral-tier,
    :root[data-color-scheme="light"] .referral-link,
    :root[data-color-scheme="light"] .diagnostic-item,
    :root[data-color-scheme="light"] .diagnostic-panel,
    :root[data-color-scheme="light"] .diagnostic-report,
    :root[data-color-scheme="light"] .payment-layer {
      color: var(--text);
      border-color: rgba(255,255,255,.92);
      background: rgba(255,255,255,.78);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 22px rgba(34,61,77,.09);
    }
    :root[data-color-scheme="light"] .metric {
      background:
        radial-gradient(90% 80% at 14% 0%, rgba(255,255,255,.82), transparent 60%),
        linear-gradient(160deg, rgba(255,255,255,.94), rgba(235,244,248,.82));
    }
    :root[data-color-scheme="light"] .term-track {
      border-color: rgba(255,255,255,.72);
      background: rgba(220,233,240,.66);
      box-shadow: inset 0 1px 4px rgba(32,58,72,.18), inset 0 1px 0 rgba(255,255,255,.72);
    }
    :root[data-color-scheme="light"] .action-link,
    :root[data-color-scheme="light"] .text-action,
    :root[data-color-scheme="light"] .quick-card,
    :root[data-color-scheme="light"] .connection-option,
    :root[data-color-scheme="light"] .btn.secondary,
    :root[data-color-scheme="light"] .tiny-icon-btn,
    :root[data-color-scheme="light"] .subscription-action-btn,
    :root[data-color-scheme="light"] .referral-stat,
    :root[data-color-scheme="light"] .diagnostic-inbounds span {
      color: var(--text);
      border-color: rgba(255,255,255,.94);
      background: rgba(255,255,255,.82);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 20px rgba(34,61,77,.09);
    }
    :root[data-color-scheme="light"] .tariff-price,
    :root[data-color-scheme="light"] .app-install-chevron,
    :root[data-color-scheme="light"] .connection-action,
    :root[data-color-scheme="light"] .subscription-label-editor input,
    :root[data-color-scheme="light"] .subscription-edit-row input,
    :root[data-color-scheme="light"] .reserve-copy {
      color: var(--text);
      border-color: rgba(255,255,255,.94);
      background: rgba(255,255,255,.86);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 20px rgba(34,61,77,.09);
    }
    :root[data-color-scheme="light"] .subscription-manager {
      border-color: rgba(255,255,255,.94);
      background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(var(--accent-rgb),.09));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 10px 26px rgba(30,58,73,.08);
    }
    :root[data-color-scheme="light"] .subscription-tab.active {
      background: color-mix(in srgb, white 82%, var(--accent));
      border-color: rgba(var(--accent-rgb),.42);
    }
    :root[data-color-scheme="light"] .extra-share-card,
    :root[data-color-scheme="light"] .reserve-link-card,
    :root[data-color-scheme="light"] .notice {
      color: var(--text);
      background: rgba(255,255,255,.82);
    }
    :root[data-color-scheme="light"] .muted,
    :root[data-color-scheme="light"] .tariff-note,
    :root[data-color-scheme="light"] .row,
    :root[data-color-scheme="light"] .connection-main small,
    :root[data-color-scheme="light"] .connection-page-summary span,
    :root[data-color-scheme="light"] .subscription-tab-meta,
    :root[data-color-scheme="light"] .referral-title span,
    :root[data-color-scheme="light"] .payment-layer p,
    :root[data-color-scheme="light"] .payment-meta,
    :root[data-color-scheme="light"] .loader {
      color: var(--muted);
    }
    :root[data-color-scheme="light"] .bottom-nav {
      background:
        radial-gradient(120% 100% at 12% 0%, rgba(255,255,255,.92), transparent 44%),
        linear-gradient(160deg, rgba(255,255,255,.72), rgba(235,245,249,.48));
      box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(43,70,86,.12);
    }
    :root[data-color-scheme="light"] .bottom-nav::before { opacity: .48; }
    :root[data-color-scheme="light"] .theme-toggle {
      color: var(--text);
      border-color: rgba(255,255,255,.90);
      background: rgba(255,255,255,.82);
      box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 26px rgba(20,48,64,.16);
    }
    :root[data-color-scheme="light"] .badge,
    :root[data-color-scheme="light"] .state-line,
    :root[data-color-scheme="light"] .overview h2,
    :root[data-color-scheme="light"] .metric span,
    :root[data-color-scheme="light"] .quick-card span,
    :root[data-color-scheme="light"] .diagnostic-status,
    :root[data-color-scheme="light"] .diagnostic-pill { color: var(--good-ink); }
    :root[data-color-scheme="light"] .badge.off,
    :root[data-color-scheme="light"] .state-line.off,
    :root[data-color-scheme="light"] .diagnostic-status.fail,
    :root[data-color-scheme="light"] .diagnostic-pill.fail { color: var(--danger-ink); }
    :root[data-color-scheme="light"] .badge.warn,
    :root[data-color-scheme="light"] .diagnostic-status.warn,
    :root[data-color-scheme="light"] .diagnostic-pill.warn { color: var(--warn-ink); }
    :root[data-color-scheme="light"] .reserve-link-card strong { color: var(--danger-ink); }
    :root[data-color-scheme="light"] .referral-tier b,
    :root[data-color-scheme="light"] .referral-link code,
    :root[data-color-scheme="light"] .gift-link-row code,
    :root[data-color-scheme="light"] .gift-link-row span { color: var(--link); }
    :root[data-color-scheme="light"] .notice strong { color: var(--good-ink); }
    :root.theme-transition body,
    :root.theme-transition .weather-strip,
    :root.theme-transition .card,
    :root.theme-transition .quick-card,
    :root.theme-transition .bottom-nav,
    :root.theme-transition .metric,
    :root.theme-transition .client-card,
    :root.theme-transition .connection-shell,
    :root.theme-transition .toast {
      transition-duration: .45s !important;
      transition-timing-function: ease !important;
    }
    .sky-stack { position: fixed; inset: 0; z-index: -4; pointer-events: none; }
    .sky {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.4s ease;
      background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 58%, var(--sky-3) 100%);
    }
    .sky.on { opacity: 1; }
    .sky-glow {
      position: fixed;
      inset: -25%;
      z-index: -3;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.4s ease;
      background:
        radial-gradient(36% 30% at 18% 12%, var(--wx-glow-a), transparent 68%),
        radial-gradient(32% 28% at 84% 22%, var(--wx-glow-b), transparent 68%),
        radial-gradient(40% 34% at 60% 88%, var(--wx-glow-a), transparent 72%);
      animation: wxDrift var(--wx-drift) ease-in-out infinite alternate;
      will-change: transform;
    }
    .sky-glow.on { opacity: 1; }
    @keyframes wxDrift {
      from { transform: translate3d(0,0,0) scale(1); }
      to { transform: translate3d(-5%, 4%, 0) scale(1.1); }
    }
    #wxCanvas {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: 1;
      transition: opacity .42s ease;
    }
    :root.night-transition #wxCanvas { opacity: 0; }
    .sky-haze {
      position: fixed;
      inset: -30%;
      z-index: -2;
      pointer-events: none;
      opacity: var(--wx-haze);
      transition: opacity 1.4s ease;
      background:
        radial-gradient(46% 26% at 22% 26%, rgba(255,255,255,.5), transparent 70%),
        radial-gradient(52% 30% at 76% 40%, rgba(255,255,255,.42), transparent 70%),
        radial-gradient(44% 24% at 48% 72%, rgba(255,255,255,.36), transparent 70%);
      filter: blur(28px);
      animation: wxHaze 58s linear infinite;
      will-change: transform;
    }
    @keyframes wxHaze {
      from { transform: translate3d(-6%,0,0); }
      to { transform: translate3d(6%,0,0); }
    }
    .sky-grain {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .032;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .bolt {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(180deg, rgba(232,244,255,.56), rgba(173,211,255,.13) 40%, transparent 70%);
    }
    .bolt.flash { animation: wxBolt 620ms ease-out; }
    @keyframes wxBolt {
      0% { opacity: 0; }
      6% { opacity: .9; }
      12% { opacity: .15; }
      20% { opacity: .75; }
      34% { opacity: .05; }
      100% { opacity: 0; }
    }
    [hidden] { display: none !important; }
    button:focus { outline: none; }
    button:focus-visible, a:focus-visible {
      outline: 2px solid rgba(var(--accent-rgb),.7);
      outline-offset: 2px;
    }
    button, a { -webkit-tap-highlight-color: transparent; }
    .wrap {
      position: relative;
      z-index: 1;
      width: min(720px, 100%);
      margin: 0 auto;
      padding: 22px 14px calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px);
    }
    @media (max-width: 760px) {
      .wrap { padding-top: 78px; }
    }
    body.keyboard-open .wrap { padding-bottom: 20px; }
    .page { display: none; animation: fadeIn .18s ease; }
    .page.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
    .hero { padding: 4px 0 20px; }
    .hero-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 0;
      color: var(--hero-muted);
      font-size: 14px;
      font-weight: 800;
    }
    .brand-mark {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: #fff;
      background:
        radial-gradient(circle at 32% 22%, rgba(255,255,255,.52), transparent 27%),
        var(--brand-gradient);
      border: 1px solid rgba(255,255,255,.24);
      box-shadow: var(--brand-shadow);
    }
    .theme-toggle {
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.20);
      border-radius: 15px;
      color: #f7fbff;
      background:
        radial-gradient(100% 90% at 18% 0%, rgba(255,255,255,.24), transparent 52%),
        rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 28px rgba(0,0,0,.22);
      -webkit-backdrop-filter: blur(18px) saturate(165%);
      backdrop-filter: blur(18px) saturate(165%);
      cursor: pointer;
      transition: transform .18s ease, color .45s ease, background .45s ease, box-shadow .45s ease;
    }
    .theme-toggle:active { transform: scale(.94); }
    .theme-toggle:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.72); outline-offset: 3px; }
    .theme-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .theme-toggle-moon { display: none; }
    :root[data-color-scheme="light"] .theme-toggle-sun { display: none; }
    :root[data-color-scheme="light"] .theme-toggle-moon { display: block; }
    .hero h1 {
      margin: 0;
      color: var(--text);
      font-size: 30px;
      line-height: 1.13;
      font-weight: 900;
    }
    .hero-sub {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
      color: var(--hero-muted);
      font-size: 15px;
      flex-wrap: wrap;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 28px;
      border: 1px solid var(--good-border);
      background: var(--good-soft);
      color: var(--good);
      padding: 6px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 850;
    }
    .badge.off {
      border-color: var(--danger-border);
      background: var(--danger-soft);
      color: var(--danger);
    }
    .badge.warn {
      border-color: var(--warn-border);
      background: var(--warn-soft);
      color: var(--warn);
    }
    #status {
      min-height: 27px;
      gap: 8px;
      padding: 5px 10px;
      border-radius: 11px;
      border-color: rgba(255,255,255,.28);
      background:
        radial-gradient(100% 100% at 18% 0%, rgba(255,255,255,.18), transparent 52%),
        rgba(8,25,36,.46);
      color: #f7fbff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 7px 18px rgba(2,14,23,.20);
      -webkit-backdrop-filter: blur(14px) saturate(150%);
      backdrop-filter: blur(14px) saturate(150%);
    }
    #status::before {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--good);
      box-shadow: 0 0 0 4px rgba(var(--good-rgb),.14), 0 0 12px rgba(var(--good-rgb),.46);
    }
    #status.off,
    #status.warn {
      border-color: rgba(255,255,255,.24);
      background:
        radial-gradient(100% 100% at 18% 0%, rgba(255,255,255,.14), transparent 52%),
        rgba(8,25,36,.46);
      color: #f7fbff;
    }
    #status.off::before {
      background: var(--bad);
      box-shadow: 0 0 0 4px rgba(var(--danger-rgb),.14), 0 0 12px rgba(var(--danger-rgb),.44);
    }
    #status.warn::before {
      background: var(--warn);
      box-shadow: 0 0 0 4px rgba(var(--warn-rgb),.14), 0 0 12px rgba(var(--warn-rgb),.42);
    }
    body.profile-loading #status::before { display: none; }
    .home-sub-card-title .badge {
      min-height: 27px;
      gap: 8px;
      padding: 5px 10px;
      border-radius: 11px;
      border-color: rgba(255,255,255,.24);
      background:
        radial-gradient(100% 100% at 18% 0%, rgba(255,255,255,.16), transparent 52%),
        rgba(8,25,36,.42);
      color: #f7fbff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 7px 16px rgba(2,14,23,.16);
    }
    .home-sub-card-title .badge::before {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--good);
      box-shadow: 0 0 0 4px rgba(var(--good-rgb),.14), 0 0 12px rgba(var(--good-rgb),.42);
    }
    .home-sub-card-title .badge.off,
    .home-sub-card-title .badge.warn {
      border-color: rgba(255,255,255,.22);
      background:
        radial-gradient(100% 100% at 18% 0%, rgba(255,255,255,.14), transparent 52%),
        rgba(8,25,36,.42);
      color: #f7fbff;
    }
    .home-sub-card-title .badge.off::before {
      background: var(--bad);
      box-shadow: 0 0 0 4px rgba(var(--danger-rgb),.14), 0 0 12px rgba(var(--danger-rgb),.42);
    }
    .home-sub-card-title .badge.warn::before {
      background: var(--warn);
      box-shadow: 0 0 0 4px rgba(var(--warn-rgb),.14), 0 0 12px rgba(var(--warn-rgb),.40);
    }
    :root[data-color-scheme="light"] .home-sub-card-title .badge,
    :root[data-color-scheme="light"] .home-sub-card-title .badge.off,
    :root[data-color-scheme="light"] .home-sub-card-title .badge.warn {
      color: #f7fbff;
    }
    body.profile-loading .profile-skeleton {
      position: relative;
      display: inline-block;
      overflow: hidden;
      color: transparent !important;
      border-radius: 8px;
      background: rgba(255,255,255,.11);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
      user-select: none;
    }
    body.profile-loading .profile-skeleton::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-110%);
      background: linear-gradient(100deg, transparent 12%, rgba(255,255,255,.22) 48%, transparent 84%);
      animation: profileShimmer 1.45s ease-in-out infinite;
    }
    body.profile-loading .skeleton-name { min-width: 132px; min-height: 1em; }
    body.profile-loading .skeleton-badge { width: 86px; min-height: 28px; border-color: rgba(255,255,255,.11); }
    body.profile-loading .skeleton-plan { width: 96px; min-height: 24px; }
    body.profile-loading .skeleton-days { width: 112px; min-height: 24px; }
    body.profile-loading .skeleton-note { width: 128px; min-height: 16px; }
    @keyframes profileShimmer { to { transform: translateX(110%); } }
    .weather-strip {
      display: flex;
      align-items: center;
      gap: 11px;
      width: 100%;
      margin-top: 13px;
      padding: 12px 14px;
      border-radius: 15px;
      color: var(--text);
      background:
        radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.18), transparent 44%),
        linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.048));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: inset 0 1px 0 var(--edge-top), inset 0 -1px 0 var(--edge-bot), 0 10px 28px rgba(0,0,0,.22);
      -webkit-backdrop-filter: blur(20px) saturate(calc(170% * var(--wx-sat)));
      backdrop-filter: blur(20px) saturate(calc(170% * var(--wx-sat)));
    }
    .weather-icon {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 11px;
      color: #fff;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 28%),
        linear-gradient(140deg, var(--accent), var(--accent-2));
      box-shadow: 0 8px 22px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -10px 18px rgba(0,0,0,.24);
    }
    .weather-strip b { display: block; font-size: 13px; font-weight: 850; letter-spacing: 0; }
    .weather-strip small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
    .card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      background:
        radial-gradient(140% 120% at 12% 0%, var(--theme-card-a), transparent 38%),
        radial-gradient(90% 90% at 88% 8%, var(--glass-tint), transparent 46%),
        linear-gradient(160deg, var(--glass-2), var(--glass-1) 58%, rgba(255,255,255,.036));
      border-radius: 24px;
      padding: 20px;
      box-shadow: var(--shadow-card), inset 0 1px 0 var(--edge-top);
      margin-bottom: 16px;
      transition: background .9s ease, box-shadow .9s ease, border-color .9s ease;
      -webkit-backdrop-filter: blur(18px) saturate(calc(155% * var(--wx-sat)));
      backdrop-filter: blur(18px) saturate(calc(155% * var(--wx-sat)));
    }
    .card > * { position: relative; z-index: 1; }
    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      padding: 1px;
      background:
        linear-gradient(155deg, var(--edge-top) 0%, var(--edge-mid) 30%, transparent 52%, var(--edge-bot) 100%),
        linear-gradient(20deg, rgba(255,255,255,.18), transparent 34%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .card::after {
      content: "";
      position: absolute;
      inset: 1px;
      z-index: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(115deg, rgba(255,255,255,.22), rgba(255,255,255,.045) 18%, transparent 44%),
        radial-gradient(85% 65% at 12% 0%, rgba(255,255,255,.16), transparent 58%),
        radial-gradient(70% 60% at 96% 100%, rgba(0,0,0,.20), transparent 72%);
      opacity: .72;
      mix-blend-mode: screen;
    }
    .overview, .diagnostic-hero, .payment-layer, .bottom-nav {
      -webkit-backdrop-filter: blur(24px) saturate(calc(170% * var(--wx-sat)));
      backdrop-filter: blur(24px) saturate(calc(170% * var(--wx-sat)));
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .card, .overview, .diagnostic-hero, .payment-layer, .bottom-nav {
        background: var(--theme-panel);
      }
    }
    .overview {
      position: relative;
      overflow: hidden;
      min-height: 0;
      border-color: rgba(255,255,255,.13);
      background:
        radial-gradient(circle at 14% 8%, var(--theme-overview-a), transparent 28%),
        radial-gradient(circle at 88% 14%, var(--theme-overview-b), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.13), var(--glass-1));
    }
    .overview::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background:
        linear-gradient(115deg, rgba(255,255,255,.24), rgba(255,255,255,.06) 18%, transparent 45%),
        radial-gradient(95% 70% at 10% 0%, rgba(255,255,255,.15), transparent 60%),
        radial-gradient(75% 70% at 100% 100%, rgba(0,0,0,.2), transparent 74%);
      pointer-events: none;
      opacity: .75;
      mix-blend-mode: screen;
    }
    .overview-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }
    .state-line {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--good);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .state-line.off { color: var(--danger); }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 18px currentColor;
    }
    .infinity {
      color: var(--good);
      font-size: 30px;
      line-height: 1;
      font-weight: 900;
      opacity: .92;
    }
    .overview h2 {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--good);
      font-size: 22px;
      line-height: 1.2;
    }
    .overview p {
      position: relative;
      z-index: 1;
      margin: 9px 0 18px;
      color: var(--muted);
      line-height: 1.5;
    }
    .summary-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }
    .metric {
      min-height: 88px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(90% 80% at 14% 0%, rgba(255,255,255,.12), transparent 58%),
        linear-gradient(160deg, rgba(255,255,255,.09), rgba(0,0,0,.18));
      padding: 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22);
    }
    .metric span {
      display: flex;
      align-items: center;
      gap: 7px;
      color: rgba(var(--good-rgb),.78);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .metric strong {
      display: block;
      margin-top: 10px;
      color: var(--text);
      font-size: 24px;
      line-height: 1;
      font-weight: 900;
    }
    .metric small {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .term {
      position: relative;
      z-index: 1;
      margin: 16px 0 0;
    }
    .term-track {
      position: relative;
      height: 16px;
      overflow: hidden;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(120% 160% at 12% 0%, rgba(255,255,255,.12), transparent 48%),
        rgba(0,0,0,.24);
      box-shadow: inset 0 1px 3px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .term-bar {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background:
        linear-gradient(90deg, var(--accent-2), var(--accent) 54%, var(--good-2));
      box-shadow: 0 0 18px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,.36);
      transition: width 1.1s cubic-bezier(.22,.68,.32,1);
    }
    .term-track::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 48%);
    }
    .home-actions {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }
    .home-actions.single { grid-template-columns: 1fr; }
    .home-subscriptions-list {
      display: grid;
      gap: 14px;
      margin-top: 14px;
    }
    .home-sub-card-title {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }
    .home-sub-card-title strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
    }
    .action-link, .text-action {
      position: relative;
      overflow: hidden;
      min-height: 46px;
      border: 0;
      border-radius: 16px;
      color: var(--text);
      background:
        radial-gradient(120% 110% at 18% 0%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
      border: 1px solid rgba(255,255,255,.14);
      font: inherit;
      font-size: 14px;
      font-weight: 850;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 14px;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.24), 0 10px 24px rgba(0,0,0,.18);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      backdrop-filter: blur(14px) saturate(160%);
      transition: transform .18s cubic-bezier(.22,.68,.32,1), border-color .18s ease, filter .18s ease;
    }
    .action-link::after, .text-action::after, .btn::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,.035) 35%, transparent 68%);
      opacity: .62;
    }
    .action-link:active, .text-action:active { transform: scale(.975); }
    .action-link.primary {
      color: #fff;
      background:
        radial-gradient(100% 120% at 20% 0%, rgba(255,255,255,.28), transparent 40%),
        var(--primary-gradient);
      border-color: rgba(255,255,255,.22);
      box-shadow: var(--primary-shadow);
    }
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .quick-card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 118px;
      border-radius: 23px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(110% 90% at 12% 0%, rgba(255,255,255,.14), transparent 46%),
        linear-gradient(150deg, rgba(255,255,255,.092), rgba(255,255,255,.038));
      padding: 16px;
      color: var(--text);
      text-align: left;
      font: inherit;
      box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.26);
      -webkit-backdrop-filter: blur(16px) saturate(calc(150% * var(--wx-sat)));
      backdrop-filter: blur(16px) saturate(calc(150% * var(--wx-sat)));
      transition: transform .18s cubic-bezier(.22,.68,.32,1), border-color .18s ease;
    }
    .quick-card::after {
      content: "";
      position: absolute;
      inset: 1px;
      z-index: -1;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.18), transparent 38%),
        radial-gradient(90% 70% at 100% 100%, rgba(0,0,0,.22), transparent 68%);
    }
    .quick-card:active { transform: scale(.975); }
    .quick-card span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: rgba(var(--good-rgb),.74);
      font-size: 13px;
      font-weight: 850;
    }
    .quick-card strong {
      display: block;
      margin-top: 18px;
      font-size: 24px;
      line-height: 1;
      font-weight: 900;
    }
    .quick-card small {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      line-height: 1.35;
    }
    .legal-card { min-height: 118px; }
    .legal-card .doc-link {
      display: block;
      margin-top: 8px;
      color: var(--link);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.25;
      text-decoration: none;
    }
    .legal-card .doc-link:first-of-type { margin-top: 14px; }
    .page-head { padding: 4px 0 14px; }
    .page-head h1, .page-head h2 {
      margin: 0;
      font-size: 28px;
      line-height: 1.15;
      color: var(--text);
    }
    .page-head p { margin: 8px 0 0; color: var(--muted); line-height: 1.45; }
    .tariff {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--accent-border);
      background:
        radial-gradient(circle at 15% 0%, rgba(var(--good-rgb),.20), transparent 34%),
        radial-gradient(circle at 95% 10%, rgba(var(--accent-rgb),.32), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
    }
    .tariff-head {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      z-index: 1;
    }
    .tariff-metric {
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }
    .tariff-price {
      flex: 0 0 auto;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(0,0,0,.28);
      border: 1px solid rgba(255,255,255,.1);
      text-align: right;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .tariff-price strong { display: block; font-size: 22px; line-height: 1; }
    .tariff-price span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
    .tariff-note { position: relative; margin: 14px 0 0; color: var(--muted); line-height: 1.45; z-index: 1; }
    h2 { margin: 0 0 18px; font-size: 20px; }
    .row { display: flex; justify-content: space-between; gap: 18px; margin: 12px 0; color: var(--muted); }
    .row strong { color: var(--text); text-align: right; }
    .row .green { color: var(--good); }
    .quick-connect {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.1);
    }
    .connection-guide-link {
      width: 100%;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
      text-align: left;
      cursor: pointer;
    }
    .connection-guide-link strong { color: var(--text); font-weight: 800; }
    .connection-guide-arrow {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--text);
      background: var(--accent-soft);
      border: 1px solid rgba(var(--accent-rgb),.32);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 22px rgba(0,0,0,.16);
    }
    .connection-guide-arrow svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .quick-connect-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }
    .quick-connect-button {
      min-height: 48px;
      border: 1px solid rgba(var(--accent-rgb),.30);
      border-radius: 14px;
      padding: 10px 9px;
      color: var(--text);
      background: var(--control-gradient);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.15);
      font: inherit;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.25;
      cursor: pointer;
    }
    .quick-connect-button:active { transform: translateY(1px); }
    #renew { margin-top: 16px; }
    .connection-page-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }
    .connection-page-summary span { color: var(--muted); font-size: 12px; font-weight: 750; }
    .connection-page-summary strong { display: block; margin-top: 4px; font-size: 19px; }
    .connection-instructions-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      text-decoration: none;
    }
    .connection-instructions-link svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .connection-page-mark {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      color: var(--text);
      background: var(--accent-soft);
      border: 1px solid rgba(var(--accent-rgb),.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.16);
    }
    .connection-page-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .connection-empty { text-align: center; }
    .connection-empty h2 { margin-bottom: 8px; }
    .support-diagnostics { margin-top: 30px; }
    .support-diagnostics > .page-head { margin-bottom: 18px; }
    .client-card {
      margin-top: 16px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(0,0,0,.16);
    }
    .client-card h3 { margin: 0; font-size: 17px; }
    .client-card p { margin: 8px 0 0; }
    .connection-shell {
      margin-top: 0;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(0,0,0,.14);
    }
    .connection-main {
      position: relative;
      overflow: hidden;
      width: 100%;
      min-height: 68px;
      border: 1px solid rgba(var(--accent-rgb),.26);
      border-radius: 18px;
      background:
        radial-gradient(120% 100% at 16% 0%, rgba(255,255,255,.22), transparent 42%),
        var(--control-gradient);
      color: var(--text);
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
      text-align: left;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.22), 0 12px 28px rgba(0,0,0,.2);
      transition: transform .16s ease, border-color .16s ease, background .16s ease;
    }
    .connection-main::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(118deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 34%, transparent 68%);
    }
    .connection-main:hover,
    .connection-main:focus-visible {
      border-color: rgba(var(--accent-rgb),.52);
      background: var(--control-gradient);
    }
    .connection-main:active { transform: translateY(1px); }
    .connection-main small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .connection-action {
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--text);
      background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.2), rgba(13,12,20,.42));
      border: 1px solid rgba(var(--accent-rgb),.26);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.22);
      font-size: 0;
      line-height: 1;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .connection-action svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .18s ease;
    }
    .connection-main[aria-expanded="true"] .connection-action {
      background: var(--accent-soft);
      border-color: rgba(var(--accent-rgb),.36);
    }
    .connection-main[aria-expanded="true"] .connection-action svg { transform: rotate(180deg); }
    .connection-picker { margin-top: 12px; }
    .connection-shell.standalone .connection-picker { margin-top: 0; }
    .connection-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .connection-option {
      min-height: 44px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.08);
      color: var(--text);
      font: inherit;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }
    .connection-option.active {
      border-color: rgba(var(--accent-rgb),.48);
      background: var(--accent-soft);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .app-install {
      margin: 16px 0 0;
      border-radius: 15px;
      background: linear-gradient(135deg, rgba(var(--accent-rgb),.13), rgba(var(--good-rgb),.08));
      border: 1px solid rgba(255,255,255,.1);
      overflow: hidden;
    }
    .app-install-toggle {
      width: 100%;
      border: 0;
      padding: 15px 14px;
      background: transparent;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    .app-install-toggle strong { display: block; font-size: 15px; font-weight: 850; }
    .app-install-toggle small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 650; }
    .app-install-chevron {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--text);
      background: rgba(13,12,20,.3);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.16);
      transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }
    .app-install-chevron svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .18s ease;
    }
    .app-install-toggle:hover .app-install-chevron,
    .app-install-toggle:focus-visible .app-install-chevron {
      background: rgba(var(--accent-rgb),.18);
      border-color: rgba(var(--accent-rgb),.34);
    }
    .app-install.open .app-install-chevron {
      background: rgba(var(--accent-rgb),.20);
      border-color: rgba(var(--accent-rgb),.42);
    }
    .app-install.open .app-install-chevron svg { transform: rotate(180deg); }
    .app-install-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 14px; }
    .app-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 44px;
      border-radius: 12px;
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.08);
      color: var(--text);
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
    }
    .btn {
      position: relative;
      overflow: hidden;
      width: 100%;
      border: 0;
      border-radius: 16px;
      color: white;
      background:
        radial-gradient(110% 120% at 18% 0%, rgba(255,255,255,.27), transparent 40%),
        var(--primary-gradient);
      padding: 15px 16px;
      margin-top: 18px;
      font-size: 16px;
      font-weight: 900;
      box-shadow: var(--primary-shadow);
      cursor: pointer;
    }
    .btn.secondary {
      color: var(--text);
      margin-top: 10px;
      background: rgba(255,255,255,.1);
      box-shadow: none;
      border: 1px solid rgba(255,255,255,.12);
    }
    .btn:disabled {
      cursor: default;
      opacity: .58;
      box-shadow: none;
    }
    .extra-share-card .btn { pointer-events: auto; }
    .sub-link {
      display: block;
      border-radius: 12px;
      background: rgba(0,0,0,.28);
      padding: 14px;
      margin-top: 16px;
      border: 1px solid rgba(255,255,255,.08);
    }
    .sub-link a {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--link);
      font-size: 13px;
      text-decoration: none;
      display: block;
    }
    .subscription-manager {
      margin: 14px 0 16px;
      padding: 14px;
      border-radius: 15px;
      border: 1px solid rgba(255,255,255,.1);
      background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(var(--accent-rgb),.075));
    }
    .subscription-manager-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .subscription-manager-head strong { font-size: 14px; }
    .tiny-btn {
      border: 1px solid rgba(var(--accent-rgb),.28);
      border-radius: 11px;
      background: rgba(var(--accent-rgb),.16);
      color: var(--text);
      padding: 9px 11px;
      font: inherit;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
      white-space: nowrap;
    }
    .tiny-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.08);
      color: var(--link);
      font: inherit;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }
    .subscription-tabs { display: grid; gap: 8px; }
    .subscription-tab-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
      position: relative;
    }
    .subscription-tab {
      position: relative;
      width: 100%;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 14px;
      background: rgba(0,0,0,.18);
      color: var(--text);
      padding: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .subscription-tab-main {
      min-width: 0;
      display: grid;
      gap: 5px;
    }
    .subscription-tab-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
    }
    .subscription-action-btn {
      min-width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 11px;
      background: rgba(255,255,255,.07);
      color: var(--hero-muted);
      font: inherit;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .subscription-action-btn.rename { color: var(--link); }
    .subscription-action-btn.remove {
      border: 1px solid rgba(255,114,143,.22);
      background: rgba(255,114,143,.1);
      color: var(--danger-text);
    }
    .subscription-action-btn:hover,
    .subscription-action-btn:focus-visible { background: rgba(var(--accent-rgb),.17); color: #fff; }
    .subscription-action-btn.remove:hover,
    .subscription-action-btn.remove:focus-visible { background: rgba(255,114,143,.17); }
    .subscription-tab.active {
      background: rgba(var(--accent-rgb),.18);
      border-color: rgba(var(--accent-rgb),.42);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .subscription-tab-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 850;
    }
    .subscription-tab-meta {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }
    .subscription-label-editor {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      margin-top: 12px;
    }
    .subscription-label-editor.create { grid-template-columns: minmax(0, 1fr) auto 38px; }
    .subscription-create-title {
      display: block;
      margin: 0 0 8px;
      color: var(--hero-muted);
      font-size: 12px;
      font-weight: 850;
    }
    .subscription-label-editor.create {
      margin-top: 10px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(var(--accent-rgb),.24);
      background: rgba(var(--accent-rgb),.08);
    }
    .subscription-label-editor input {
      min-width: 0;
      border-radius: 11px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(0,0,0,.22);
      color: var(--text);
      padding: 10px 11px;
      font: inherit;
      font-size: 13px;
    }
    .subscription-edit-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto 38px;
      gap: 8px;
      grid-column: 1 / -1;
    }
    .subscription-edit-row input {
      min-width: 0;
      border-radius: 11px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(0,0,0,.24);
      color: var(--text);
      padding: 10px 11px;
      font: inherit;
      font-size: 13px;
    }
    .extra-share-card {
      margin-top: 16px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(var(--accent-rgb),.22);
      background: linear-gradient(135deg, rgba(var(--accent-rgb),.12), rgba(var(--good-rgb),.06));
    }
    .extra-share-card strong { display: block; font-size: 15px; margin-bottom: 10px; }
    .gift-link-row {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      margin-top: 9px;
      padding: 12px 13px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.22);
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .gift-link-row span {
      border-radius: 999px;
      padding: 5px 8px;
      background: rgba(var(--accent-rgb),.16);
      color: var(--link);
      font-size: 11px;
      font-weight: 900;
    }
    .gift-link-row code {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--link);
      font-size: 12px;
    }
    .reserve-link-card {
      margin-top: 16px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(var(--danger-rgb),.26);
      background: linear-gradient(135deg, rgba(var(--danger-rgb),.13), rgba(var(--accent-rgb),.07));
    }
    .reserve-link-card strong {
      display: block;
      color: color-mix(in srgb, var(--danger) 28%, white);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 850;
    }
    .reserve-copy {
      width: 100%;
      min-width: 0;
      margin-top: 12px;
      padding: 13px 14px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px;
      color: var(--danger-text);
      background: rgba(0,0,0,.26);
      font: inherit;
      font-size: 13px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    .reserve-copy:focus-visible {
      outline: 2px solid rgba(var(--danger-rgb),.55);
      outline-offset: 2px;
    }
    .referral {
      position: relative;
      overflow: hidden;
      border-color: rgba(var(--good-rgb),.22);
      background:
        radial-gradient(circle at 12% 8%, rgba(var(--good-rgb),.16), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(var(--accent-rgb),.20), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.04));
    }
    .referral-title { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
    .referral-title-icon { font-size: 28px; line-height: 1; }
    .referral-title strong { display: block; font-size: 18px; }
    .referral-title span { color: var(--muted); font-size: 13px; }
    .referral-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
    .referral-tier { border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.055); padding: 13px 10px; text-align: center; }
    .referral-tier b { display: block; color: var(--accent); font-size: 18px; margin-top: 3px; }
    .referral-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 16px; }
    .referral-stat { border-radius: 12px; background: rgba(255,255,255,.055); padding: 10px; color: var(--muted); font-size: 12px; }
    .referral-stat b { display: block; color: var(--text); font-size: 16px; margin-top: 4px; }
    .referral-link {
      display: flex;
      align-items: center;
      gap: 10px;
      border-radius: 13px;
      border: 1px dashed rgba(255,255,255,.18);
      background: rgba(0,0,0,.22);
      padding: 13px;
      margin-top: 10px;
    }
    .referral-link code {
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--link);
      font-size: 13px;
    }
    .icon-btn { border: 0; background: transparent; color: var(--link); font-size: 18px; padding: 4px; }
    .legal-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
    .legal-links a { color: var(--link); font-size: 13px; text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rgb),.35); }
    .support-link { color: var(--link); text-decoration: none; font-weight: 800; }
    .notice { border: 1px solid var(--good-border); background: linear-gradient(135deg, rgba(var(--good-rgb),.18), rgba(var(--accent-rgb),.12)); border-radius: 14px; padding: 14px; margin: 0 0 16px; }
    .notice strong { display: block; margin-bottom: 6px; color: var(--good); }
    .cookie-notice {
      position: fixed;
      z-index: 40;
      left: max(14px, env(safe-area-inset-left));
      right: max(14px, env(safe-area-inset-right));
      bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px 18px;
      align-items: center;
      width: min(680px, calc(100% - 28px));
      margin-inline: auto;
      padding: 14px 16px;
      border: 1px solid var(--accent-border);
      border-radius: 16px;
      background: var(--theme-panel);
      box-shadow: var(--shadow-float);
      color: var(--text);
      backdrop-filter: blur(18px);
    }
    .cookie-notice[hidden] { display: none; }
    .cookie-notice strong { display: block; margin-bottom: 4px; font-size: 14px; }
    .cookie-notice p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .cookie-notice a { color: var(--link); font-weight: 800; text-decoration: none; }
    .cookie-notice .btn { min-height: 38px; padding: 9px 14px; white-space: nowrap; }
    @media (max-width: 520px) {
      .cookie-notice { grid-template-columns: 1fr; gap: 10px; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); }
      .cookie-notice .btn { width: 100%; }
    }
    .diagnostic-hero {
      border-color: rgba(var(--accent-rgb),.28);
      background:
        radial-gradient(circle at 12% 6%, rgba(var(--good-rgb),.16), transparent 34%),
        radial-gradient(circle at 94% 0%, rgba(var(--accent-rgb),.22), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    }
    .diagnostic-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      margin: 2px 0 12px;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid rgba(var(--good-rgb),.34);
      color: var(--good);
      background: rgba(var(--good-rgb),.12);
      font-size: 12px;
      font-weight: 900;
    }
    .diagnostic-status.warn { border-color: var(--warn-border); color: var(--warn); background: var(--warn-soft); }
    .diagnostic-status.fail { border-color: var(--danger-border); color: var(--danger-text); background: var(--danger-soft); }
    .diagnostic-actions { display: grid; gap: 10px; margin-top: 14px; }
    .diagnostic-progress { margin: 12px 0 0; }
    .diagnostic-progress[hidden] { display: none; }
    .diagnostic-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
    .diagnostic-progress-bar { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--good), var(--accent)); transition: width .25s ease; }
    .diagnostic-progress-label { margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .diagnostic-grid { display: grid; gap: 10px; margin-top: 14px; }
    .diagnostic-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
      padding: 13px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.18);
    }
    .diagnostic-item strong { display: block; color: var(--text); font-size: 14px; }
    .diagnostic-item small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.35; }
    .diagnostic-pill {
      min-width: 58px;
      padding: 6px 9px;
      border-radius: 999px;
      text-align: center;
      font-size: 11px;
      font-weight: 950;
      color: var(--good);
      background: rgba(var(--good-rgb),.12);
      border: 1px solid rgba(var(--good-rgb),.28);
    }
    .diagnostic-pill.warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(var(--warn-rgb),.28); }
    .diagnostic-pill.fail { color: var(--danger-text); background: var(--danger-soft); border-color: rgba(var(--danger-rgb),.28); }
    .diagnostic-panels { display: grid; gap: 10px; margin-top: 12px; }
    .diagnostic-panel { padding: 13px; border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.09); }
    .diagnostic-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .diagnostic-panel-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostic-panel code { display: block; margin-top: 8px; color: var(--link); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostic-inbounds { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
    .diagnostic-inbounds span { padding: 5px 7px; border-radius: 999px; color: var(--hero-muted); background: rgba(255,255,255,.07); font-size: 11px; font-weight: 850; }
    .diagnostic-report { margin-top: 12px; padding: 13px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); color: var(--hero-muted); font-size: 12px; line-height: 1.45; white-space: pre-wrap; max-height: 260px; overflow: auto; }
    .payment-layer {
      margin-top: 14px;
      border: 1px solid rgba(var(--accent-rgb),.32);
      border-radius: 18px;
      padding: 16px;
      background:
        radial-gradient(circle at 14% 0%, rgba(var(--accent-rgb),.22), transparent 34%),
        radial-gradient(circle at 92% 20%, rgba(var(--good-rgb),.13), transparent 30%),
        rgba(0,0,0,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .payment-layer h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.02em; }
    .payment-layer p { margin: 0; color: var(--muted); line-height: 1.45; font-size: 13px; }
    .payment-layer strong { color: var(--text); }
    .payment-actions { display: grid; gap: 10px; margin-top: 14px; }
    .payment-actions .btn { margin-top: 0; }
    .payment-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 12px;
    }
    .payment-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--good);
      box-shadow: 0 0 0 5px rgba(var(--good-rgb),.12);
    }
    .payment-layer.expired { border-color: var(--danger-border); background: linear-gradient(135deg, rgba(var(--danger-rgb),.13), rgba(var(--accent-rgb),.09)); }
    .payment-layer.expired .payment-dot { background: var(--bad); box-shadow: 0 0 0 5px rgba(255,114,143,.12); }
    .muted { color: var(--muted); line-height: 1.5; }
    .tiny { font-size: 13px; }
    .loader { color: var(--muted); padding: 20px; text-align: center; }
    .bottom-nav {
      position: fixed;
      z-index: 20;
      left: 50%;
      bottom: max(10px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      width: min(720px, calc(100% - 24px));
      height: var(--nav-h);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 4px;
      padding: 8px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(120% 100% at 12% 0%, rgba(255,255,255,.17), transparent 42%),
        linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
      box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.34), inset 0 0 0 1px var(--edge-mid);
      -webkit-backdrop-filter: blur(30px) saturate(calc(185% * var(--wx-sat)));
      backdrop-filter: blur(30px) saturate(calc(185% * var(--wx-sat)));
      transition: transform .3s cubic-bezier(.22,.68,.32,1), opacity .3s ease, background .9s ease;
    }
    .bottom-nav::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(115deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 34%, transparent 68%),
        radial-gradient(85% 70% at 100% 100%, rgba(0,0,0,.22), transparent 72%);
    }
    .bottom-nav.three-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.keyboard-open .bottom-nav,
    body:has(input:focus) .bottom-nav,
    body:has(textarea:focus) .bottom-nav,
    body:has([contenteditable='true']:focus) .bottom-nav,
    body:has(#subscriptionCreateBox:not([hidden])) .bottom-nav,
    body:has(.subscription-edit-row) .bottom-nav {
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, calc(100% + 24px));
    }
    .nav-item {
      position: relative;
      z-index: 1;
      overflow: hidden;
      min-width: 0;
      border: 0;
      border-radius: 18px;
      background: transparent;
      color: var(--muted);
      display: grid;
      place-items: center;
      align-content: center;
      gap: 5px;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      padding: 6px 4px;
    }
    .nav-item::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      opacity: 0;
      background:
        radial-gradient(105% 95% at 18% 0%, rgba(255,255,255,.26), transparent 45%),
        var(--nav-active-gradient);
      box-shadow: var(--nav-active-shadow);
      transform: scale(.94);
      transition: opacity .24s ease, transform .32s cubic-bezier(.34,1.3,.42,1);
    }
    .nav-item svg { width: 21px; height: 21px; stroke-width: 1.9; transition: transform .32s cubic-bezier(.34,1.3,.42,1); }
    .nav-item.active { color: var(--text); background: transparent; }
    .nav-item.active::before { opacity: 1; transform: scale(1); }
    .nav-item.active svg { transform: translateY(-1px) scale(1.08); }
    .toast-host {
      position: fixed;
      z-index: 60;
      left: 50%;
      bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
      transform: translateX(-50%);
      width: min(420px, calc(100% - 28px));
      display: grid;
      gap: 8px;
      pointer-events: none;
    }
    .toast {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 13px 15px;
      border-radius: 15px;
      color: var(--text);
      font-size: 13.5px;
      font-weight: 750;
      background: var(--glass-3);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      backdrop-filter: blur(30px) saturate(180%);
      box-shadow: var(--shadow-float), inset 0 1px 0 var(--edge-top), inset 0 0 0 1px var(--edge-mid);
      animation: toastIn .34s cubic-bezier(.22,.68,.32,1);
    }
    .toast.out { animation: toastOut .26s ease forwards; }
    .toast-mark {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--good);
      background: var(--good-soft);
      font-size: 13px;
      font-weight: 900;
    }
    .toast.err .toast-mark { color: var(--danger); background: var(--danger-soft); }
    @keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
    @keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.96); } }
    :root[data-performance="lite"] .sky-glow,
    :root[data-performance="lite"] .sky-haze {
      animation: none;
      will-change: auto;
      transform: none;
    }
    :root[data-performance="lite"] .sky-haze {
      inset: 0;
      filter: none;
      opacity: calc(var(--wx-haze) * .78);
    }
    :root[data-performance="lite"] .sky-grain { display: none; }
    :root[data-performance="lite"] .page { animation: none; }
    :root[data-performance="lite"] .page.page-entering {
      animation: cabinetPageIn .22s cubic-bezier(.22,.68,.32,1) both;
    }
    @keyframes cabinetPageIn {
      from { opacity: .18; transform: translate3d(7px,0,0) scale(.996); }
      to { opacity: 1; transform: none; }
    }
    :root[data-performance="lite"] .weather-strip,
    :root[data-performance="lite"] .card,
    :root[data-performance="lite"] .overview,
    :root[data-performance="lite"] .diagnostic-hero,
    :root[data-performance="lite"] .payment-layer,
    :root[data-performance="lite"] .action-link,
    :root[data-performance="lite"] .text-action,
    :root[data-performance="lite"] .quick-card {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    :root[data-performance="lite"] .card::after,
    :root[data-performance="lite"] .overview::after {
      mix-blend-mode: normal;
      opacity: .54;
    }
    :root[data-performance="lite"] .bottom-nav {
      -webkit-backdrop-filter: blur(14px) saturate(145%);
      backdrop-filter: blur(14px) saturate(145%);
    }
    :root[data-performance="lite"] .toast {
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      backdrop-filter: blur(12px) saturate(140%);
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
      .sky, .sky-glow { transition-duration: .35s !important; }
      #wxCanvas { display: none; }
    }
    @media (max-width: 430px) {
      .wrap { padding: 78px 12px calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); }
      body.keyboard-open .wrap,
      body:has(input:focus) .wrap,
      body:has(textarea:focus) .wrap,
      body:has([contenteditable='true']:focus) .wrap,
      body:has(#subscriptionCreateBox:not([hidden])) .wrap,
      body:has(.subscription-edit-row) .wrap { padding-bottom: 18px; }
      .card { padding: 18px; border-radius: 16px; }
      .hero h1 { font-size: 26px; }
      .summary-grid, .home-actions, .quick-grid { grid-template-columns: 1fr; }
      .quick-connect-actions { grid-template-columns: 1fr; }
      .app-install-panel, .referral-tiers, .referral-stats { grid-template-columns: 1fr; }
      .bottom-nav { width: calc(100% - 12px); gap: 2px; padding-inline: 6px; border-radius: 16px; }
      .nav-item { font-size: 10px; padding-inline: 2px; }
      .nav-item[data-nav="connection"] span { font-size: 8px; }
    }