*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── DARK THEME (default) ─── */
    :root {
      --ink: #1a1a2e; --navy: #16213e; --navy2: #12192e;
      --amber: #c9923a; --gold: #e8c97a; --gold-light: #f5e4b0;
      --cream: #f7f0e3; --muted: #a09080;
      --glass: rgba(255,255,255,0.06);
      --glass-border: rgba(232,201,122,0.18);
      --error: #e07070;
      --bg-body: #1a1a2e;
      --bg-shell: linear-gradient(170deg, #12192e 0%, #0e1424 60%, #0b1018 100%);
      --bg-scene: radial-gradient(ellipse 80% 60% at 75% 0%, rgba(201,146,58,0.22) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 100% 30%, rgba(232,201,122,0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 0% 100%, rgba(22,33,62,0.9) 0%, transparent 70%), linear-gradient(165deg, #1a1a2e 0%, #0f1628 50%, #0d1020 100%);
      --text-primary: #e8dcc8;
      --text-secondary: #b8a898;
      --text-muted: #9a9080;
      --text-bright: #f0e6d0;
      --card-bg: rgba(255,255,255,0.035);
      --card-border: rgba(232,201,122,0.1);
      --card-hover: rgba(201,146,58,0.08);
      --input-bg: rgba(255,255,255,0.05);
      --input-border: rgba(232,201,122,0.15);
      --nav-bg: linear-gradient(0deg, rgba(10,13,22,0.98) 0%, rgba(10,13,22,0.92) 100%);
      --nav-border: rgba(232,201,122,0.1);
      --weather-bg: #12192e;
      --weather-text: #faf7f2;
      --pill-aspect-bg: rgba(201,146,58,0.08);
      --pill-aspect-border: rgba(232,201,122,0.12);
      --pill-aspect-text: rgba(247,240,227,0.65);
      --focus-card-bg: rgba(255,255,255,0.04);
      --affirmation-bg: rgba(184,146,42,0.06);
      --brief-card-bg: linear-gradient(135deg, rgba(201,146,58,0.12) 0%, rgba(232,201,122,0.05) 100%);
      --modal-bg: #12192e;
      --modal-border: rgba(232,201,122,0.2);
      --settings-row-border: rgba(232,201,122,0.08);
      --logout-text: #e07070;
      --logout-border: rgba(224,112,112,0.2);
      --logout-hover: rgba(224,112,112,0.08);
    }

    /* ─── TIER GATING ─── */
    .tier-gate { position:relative; }
    .tier-gate-blur { filter:blur(5px); pointer-events:none; user-select:none; }
    .tier-gate-overlay {
      position:absolute; inset:0; display:flex; flex-direction:column;
      align-items:center; justify-content:center; z-index:10;
      background:rgba(13,17,23,0.55); border-radius:inherit; padding:1rem;
      text-align:center;
    }
    .tier-gate-icon { font-size:1.1rem; color:var(--gold); margin-bottom:6px; opacity:0.8; }
    .tier-gate-title { font-size:0.75rem; font-weight:500; color:var(--cream); margin-bottom:4px; letter-spacing:0.04em; }
    .tier-gate-desc { font-size:0.67rem; color:var(--secondary); line-height:1.5; margin-bottom:10px; max-width:200px; }
    .tier-gate-btn {
      background:var(--gold); border:none; color:#0d1117;
      font-family:'DM Sans',sans-serif; font-weight:500; font-size:0.62rem;
      letter-spacing:0.16em; text-transform:uppercase; padding:9px 16px;
      border-radius:7px; cursor:pointer; transition:opacity 0.2s;
    }
    .tier-gate-btn:hover { opacity:0.85; }

    /* ─── LIGHT THEME ─── */
    body.light {
      --ink: #1a1410;
      --navy: #f5f0e8;
      --navy2: #ede8df;
      --amber: #b8922a;
      --gold: #b8922a;
      --gold-light: #8a6a1a;
      --cream: #1a1410;
      --muted: #8a8078;
      --glass: rgba(255,255,255,0.6);
      --glass-border: rgba(184,146,42,0.2);
      --error: #c0392b;
      --bg-body: #f5f0e8;
      --bg-shell: linear-gradient(170deg, #faf7f2 0%, #f5f0e8 60%, #ede8df 100%);
      --bg-scene: radial-gradient(ellipse at 20% 10%, rgba(184,146,42,0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(138,128,120,0.1) 0%, transparent 50%);
      --text-primary: #1a1410;
      --text-secondary: #6a6058;
      --text-muted: #8a8078;
      --text-bright: #0a0806;
      --card-bg: rgba(255,255,255,0.6);
      --card-border: rgba(184,146,42,0.2);
      --card-hover: rgba(184,146,42,0.06);
      --input-bg: rgba(255,255,255,0.8);
      --input-border: rgba(184,146,42,0.25);
      --nav-bg: linear-gradient(0deg, rgba(245,240,232,0.98) 0%, rgba(245,240,232,0.92) 100%);
      --nav-border: rgba(184,146,42,0.2);
      --weather-bg: #1a1410;
      --weather-text: #faf7f2;
      --pill-aspect-bg: rgba(184,146,42,0.06);
      --pill-aspect-border: rgba(184,146,42,0.15);
      --pill-aspect-text: rgba(26,20,16,0.6);
      --focus-card-bg: rgba(255,255,255,0.7);
      --affirmation-bg: rgba(184,146,42,0.04);
      --brief-card-bg: linear-gradient(135deg, rgba(184,146,42,0.08) 0%, rgba(184,146,42,0.03) 100%);
      --modal-bg: #faf7f2;
      --modal-border: rgba(184,146,42,0.25);
      --settings-row-border: rgba(184,146,42,0.12);
      --logout-text: #c0392b;
      --logout-border: rgba(192,57,43,0.2);
      --logout-hover: rgba(192,57,43,0.06);
    }

    html, body { height:100%; background:var(--bg-body); color:var(--text-primary); font-family:"DM Sans",sans-serif; font-weight:400; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition: background 0.3s, color 0.3s; }
    .scene-bg { position:fixed; inset:0; z-index:0; pointer-events:none; background: var(--bg-scene); }
    .window-light { position:fixed; top:-120px; right:-60px; width:420px; height:520px; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 60% 20%, rgba(201,146,58,0.28) 0%, rgba(201,146,58,0.08) 40%, transparent 70%); }
    body.light .window-light { display:none; }
    .grain { position:fixed; inset:0; opacity:0.032; z-index:1000; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-size:200px 200px; }
    body.light .grain { opacity:0.015; }
    #app { position:relative; z-index:10; min-height:100vh; display:flex; justify-content:center; align-items:flex-start; padding:0; }
    .shell { width:100%; max-width:390px; min-height:100vh; background:var(--bg-shell); position:relative; display:flex; flex-direction:column; transition: background 0.3s; }
    @media(min-width:500px) {
      #app { padding:40px 24px 80px; }
      .shell { min-height:820px; height:auto; border-radius:44px; border:1px solid rgba(232,201,122,0.15); box-shadow:0 40px 120px rgba(0,0,0,0.7), 0 0 80px rgba(201,146,58,0.08), inset 0 1px 0 rgba(255,255,255,0.06); overflow:hidden; }
      body.light .shell { border:1px solid rgba(184,146,42,0.2); box-shadow:0 40px 80px rgba(26,20,16,0.2), 0 8px 24px rgba(26,20,16,0.08); }
    }
    .status-bar { display:none; justify-content:space-between; align-items:center; padding:14px 28px 0; font-size:12px; font-weight:500; color:rgba(245,228,176,0.6); letter-spacing:0.02em; }
    body.light .status-bar { color:rgba(138,128,120,0.8); }
    @media(min-width:500px) { .status-bar { display:flex; } }
    .screen { display:none; flex-direction:column; flex:1; }
    .screen.active { display:flex; }
    #screen-landing { align-items:center; justify-content:center; padding:3rem 2.5rem; text-align:center; position:relative; }
    .landing-orb { position:absolute; top:0; left:50%; transform:translateX(-50%); width:280px; height:280px; background:radial-gradient(ellipse at 50% 40%, rgba(201,146,58,0.13) 0%, rgba(201,146,58,0.04) 50%, transparent 70%); pointer-events:none; border-radius:50%; }
    body.light .landing-orb { background:radial-gradient(ellipse at 50% 40%, rgba(184,146,42,0.08) 0%, transparent 70%); }
    .landing-glyph { font-size:1.5rem; opacity:0.5; margin-bottom:2.2rem; animation:fadeUp 0.8s ease both; letter-spacing:0.4em; color:var(--amber); }
    .landing-title { font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(2.2rem,9vw,2.8rem); letter-spacing:0.14em; color:var(--gold); line-height:1.05; margin-bottom:0.5rem; animation:fadeUp 0.9s 0.08s ease both; }
    .landing-title-sub { font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(1rem,4vw,1.15rem); letter-spacing:0.08em; color:var(--gold); line-height:1.2; margin-bottom:3rem; opacity:0.7; animation:fadeUp 0.9s 0.12s ease both; font-style:italic; }
    .landing-moon { margin:0 auto 2.5rem; animation:fadeUp 0.9s 0.18s ease both; font-size:2.8rem; line-height:1; filter:drop-shadow(0 0 18px rgba(201,146,58,0.35)); }
    .landing-hero { font-size:0.78rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); line-height:2; margin-bottom:3.5rem; animation:fadeUp 0.9s 0.25s ease both; }
    body.light .landing-hero { color:var(--text-secondary); }
    .landing-btns { display:flex; flex-direction:column; gap:0.75rem; width:100%; animation:fadeUp 0.9s 0.35s ease both; }
    .btn-primary { width:100%; background:transparent; border:1px solid var(--gold); color:var(--gold); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.68rem; letter-spacing:0.3em; text-transform:uppercase; padding:1rem; cursor:pointer; transition:background 0.2s,color 0.2s; border-radius:4px; }
    .btn-primary:hover { background:var(--gold); color:var(--ink); }
    .btn-primary:disabled { opacity:0.4; cursor:not-allowed; }
    .btn-secondary { width:100%; background:transparent; border:none; color:var(--muted); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; padding:0.75rem; cursor:pointer; transition:color 0.2s; border-radius:4px; }
    .btn-secondary:hover { color:var(--text-primary); }
    .landing-footer { font-size:0.6rem; letter-spacing:0.12em; color:var(--muted); margin-top:2rem; line-height:1.8; opacity:0.6; animation:fadeUp 0.9s 0.45s ease both; }
    #screen-auth { padding:2rem 1.8rem; justify-content:flex-start; padding-top:1.5rem; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .auth-back { background:none; border:none; color:var(--muted); font-family:"DM Sans",sans-serif; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; padding:0; margin-bottom:1.8rem; }
    .auth-back:hover { color:var(--cream); }
    .auth-title { font-family:"Cormorant Garamond",serif; font-weight:300; font-size:1.8rem; color:var(--gold); margin-bottom:0.3rem; letter-spacing:0.05em; }
    .auth-sub { font-size:0.88rem; color:var(--muted); margin-bottom:2rem; }
    .auth-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:1.8rem; }
    body.light .auth-tabs { border-bottom:1px solid rgba(184,146,42,0.15); }
    .auth-tab { flex:1; background:none; border:none; color:var(--muted); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.75rem; cursor:pointer; transition:color 0.2s; position:relative; }
    .auth-tab.active { color:var(--gold); }
    .auth-tab.active::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--gold); }
    .form-group { margin-bottom:1.2rem; }
    .form-label { display:block; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:0.4rem; font-weight:500; }
    .form-input { width:100%; background:var(--input-bg); border:1px solid var(--input-border); color:var(--text-primary); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.95rem; padding:0.8rem 1rem; outline:none; transition:border-color 0.2s; border-radius:8px; }
    .form-input:focus { border-color:rgba(232,201,122,0.45); background:rgba(255,255,255,0.07); }
    body.light .form-input:focus { background:rgba(255,255,255,0.9); border-color:rgba(184,146,42,0.5); }
    .form-input::placeholder { color:rgba(139,127,114,0.6); font-size:0.83rem; }
    .code-wrap { position:relative; }
    .code-tag { position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); font-size:0.55rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--amber); background:rgba(201,146,58,0.12); padding:0.2rem 0.5rem; border-radius:4px; pointer-events:none; display:none; }
    .code-tag.visible { display:block; }
    .remember-row { display:flex; align-items:center; gap:0.6rem; margin-bottom:1.2rem; }
    .remember-check { width:14px; height:14px; accent-color:var(--amber); cursor:pointer; }
    .remember-label { font-size:0.72rem; color:var(--muted); cursor:pointer; }
    .msg { font-size:0.75rem; text-align:center; margin-top:0.75rem; min-height:1.2em; }
    .msg.error { color:var(--error); }
    .msg.success { color:var(--gold); }
    .spinner { display:inline-block; width:12px; height:12px; border:1px solid rgba(232,201,122,0.2); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; margin-right:0.4rem; vertical-align:middle; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* ─── DASHBOARD ─── */
    #screen-dashboard { flex:1; display:none; flex-direction:column; position:relative; overflow:hidden; min-height:0; }
    #screen-dashboard.active { display:flex; }

    /* Fix scroll-in-scroll on desktop: shell is fixed height, only inner content scrolls */
    @media(min-width:500px) {
      .shell { height:844px; max-height:844px; overflow:hidden; }
    }

    /* ─── WELCOME HEADER ─── */
    .top-bar { display:flex; justify-content:space-between; align-items:flex-start; padding:1rem 1.4rem 0; flex-shrink:0; }
    .top-wordmark { font-family:"DM Sans",sans-serif; font-size:0.85rem; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); opacity:0.85; }
    .top-welcome { display:flex; flex-direction:column; gap:1px; }
    .top-greeting { font-family:"DM Sans",sans-serif; font-size:1.2rem; font-weight:300; color:var(--text-primary); line-height:1.2; }
    .top-greeting em { font-style:normal; color:var(--gold); }
    .top-date-chip { font-size:0.62rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:1px; }

    /* ─── TOP TEXT NAV ─── */
    .top-nav { display:flex; border-bottom:1px solid var(--nav-border); padding:0 1.4rem; margin-top:0.75rem; flex-shrink:0; gap:0; }
    .top-nav-item { flex:1; background:none; border:none; font-family:"DM Sans",sans-serif; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); padding:0.65rem 0; cursor:pointer; transition:color 0.2s; position:relative; font-weight:500; text-align:center; }
    .top-nav-item.active { color:var(--gold); }
    .top-nav-item.active::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--gold); }
    .top-nav-item:hover:not(.active) { color:var(--text-primary); }

    .page-content { flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:80px; -webkit-overflow-scrolling:touch; min-height:0; }
    .page-content::-webkit-scrollbar { width:3px; }
    .page-content::-webkit-scrollbar-thumb { background:rgba(232,201,122,0.2); border-radius:2px; }
    .dash-page { display:none; }
    .dash-page.active { display:block; }

    /* ─── THIN RULE ─── */
    .thin-rule { height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0.3; margin:0.9rem 1.4rem; }

    /* ─── WEATHER STRIP ─── */
    .weather-strip { margin:0 1.1rem; background:var(--weather-bg); border-radius:18px; padding:1.3rem 1.4rem; position:relative; overflow:hidden; }
    .weather-strip::before { content:''; position:absolute; top:-30px; right:-20px; width:120px; height:120px; background:radial-gradient(circle, rgba(201,146,58,0.15) 0%, transparent 70%); pointer-events:none; }
    .weather-label { font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:0.5rem; opacity:0.85; }
    .weather-headline { font-family:"DM Sans",sans-serif; font-size:1.2rem; font-weight:500; color:#f0e6d0; line-height:1.35; letter-spacing:0.01em; }
    .weather-headline em { font-style:normal; color:var(--gold); }
    body.light .weather-headline { color:#f0e6d0; }
    .energy-meter { display:flex; gap:4px; margin-top:0.9rem; align-items:center; }
    .energy-bar { height:3px; border-radius:2px; flex:1; background:rgba(255,255,255,0.1); position:relative; overflow:hidden; }
    .energy-fill { position:absolute; inset:0; border-radius:2px; background:linear-gradient(90deg, var(--amber), var(--gold)); }
    .energy-fill.empty { background:rgba(255,255,255,0.08); }
    .energy-label { font-size:0.6rem; color:rgba(255,255,255,0.35); letter-spacing:0.1em; text-transform:uppercase; margin-left:4px; }

    /* ─── HORIZONTAL TRANSIT PILLS ─── */
    .transits-scroll { display:flex; gap:8px; padding:0.9rem 1.1rem 0; overflow-x:auto; scrollbar-width:none; }
    .transits-scroll::-webkit-scrollbar { display:none; }
    .transit-chip { flex-shrink:0; background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:7px 14px; display:flex; align-items:center; gap:6px; cursor:pointer; transition:border-color 0.2s, background 0.2s; }
    .transit-chip:hover { background:var(--card-hover); border-color:rgba(232,201,122,0.25); }
    .transit-chip-glyph { font-size:14px; line-height:1; }
    .transit-chip-name { font-size:0.8rem; color:var(--text-primary); font-weight:500; letter-spacing:0.02em; white-space:nowrap; }
    .transit-chip-aspect { font-size:0.68rem; color:var(--text-secondary); white-space:nowrap; }

    /* ─── MAIN BRIEF SECTION ─── */
    .brief-section { padding:1rem 1.1rem 0; }
    .section-eyebrow { font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); font-weight:500; opacity:0.85; margin-bottom:0.6rem; }
    .brief-card { padding:1.2rem 1.3rem; background:var(--brief-card-bg); border:1px solid var(--glass-border); border-radius:18px; position:relative; overflow:hidden; }
    .brief-card::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.45),transparent); }
    body.light .brief-card::before { background:linear-gradient(90deg,transparent,rgba(184,146,42,0.4),transparent); }
    .brief-text { font-family:"DM Sans",sans-serif; font-size:1rem; font-weight:400; line-height:1.8; color:var(--text-primary); letter-spacing:0.01em; }
    .brief-text strong { font-weight:600; color:var(--text-bright); }
    .brief-loading { display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; color:var(--muted); font-style:normal; }
    .brief-mercury { font-size:0.65rem; color:var(--text-secondary); margin-top:0.6rem; letter-spacing:0.08em; }

    /* ─── REGENERATE BRIEF ─── */
    .regen-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:5px; font-family:"DM Sans",sans-serif; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary); opacity:0.55; transition:opacity 0.2s, color 0.2s; padding:0; }
    .regen-btn:hover:not(:disabled) { opacity:1; color:var(--gold); }
    .regen-btn:disabled { opacity:0.25; cursor:not-allowed; }
    .regen-btn svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .regen-count { font-size:0.55rem; color:var(--muted); opacity:0.7; }

    /* ─── FOCUS GRID ─── */
    .focus-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0.9rem 1.1rem 0; }
    .focus-card { background:var(--focus-card-bg); border:1px solid var(--card-border); border-radius:14px; padding:1rem; }
    .focus-icon { font-size:20px; margin-bottom:6px; }
    .focus-title { font-size:0.62rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:4px; }
    .focus-desc { font-family:"DM Sans",sans-serif; font-size:0.88rem; font-weight:400; line-height:1.6; color:var(--text-primary); }

    /* ─── AFFIRMATION ─── */
    .affirmation-block { margin:0.9rem 1.1rem 0; border-left:2px solid var(--gold); padding:0.9rem 1.1rem; background:var(--affirmation-bg); border-radius:0 10px 10px 0; }
    .affirmation-label { font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); font-weight:500; opacity:0.75; margin-bottom:5px; }
    .affirmation-text { font-family:"DM Sans",sans-serif; font-size:1rem; font-weight:400; color:var(--text-primary); line-height:1.6; }

    /* ─── TRANSIT DETAIL PILLS (expanded list) ─── */
    .section-label { font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-secondary); font-weight:500; padding:1.1rem 1.4rem 0.5rem; }
    .pills-list { padding:0 1.1rem; display:flex; flex-direction:column; gap:0.5rem; }
    .transit-pill { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; cursor:pointer; overflow:hidden; transition:border-color 0.2s, background 0.2s; }
    .transit-pill:hover { background:var(--card-hover); border-color:rgba(232,201,122,0.22); }
    .transit-pill.open { border-color:rgba(232,201,122,0.28); background:var(--card-hover); }
    .pill-header { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1rem; gap:0.75rem; }
    .pill-left { display:flex; align-items:center; gap:0.75rem; }
    .pill-icon { width:34px; height:34px; border-radius:9px; background:rgba(201,146,58,0.15); border:1px solid rgba(232,201,122,0.2); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
    .pill-name-wrap { display:flex; flex-direction:column; gap:2px; }
    .pill-name { font-family:"DM Sans",sans-serif; font-size:0.95rem; font-weight:500; color:var(--text-primary); line-height:1.2; }
    body.light .pill-name { color:var(--amber); }
    .pill-aspect-tag { font-size:0.65rem; color:var(--text-secondary); letter-spacing:0.03em; }
    .pill-right { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
    .pill-orb { font-size:0.65rem; color:var(--text-secondary); }
    .pill-chev { font-size:0.5rem; color:var(--amber); opacity:0.6; transition:transform 0.25s; }
    .transit-pill.open .pill-chev { transform:rotate(180deg); opacity:1; }
    .pill-body { display:none; padding:0 1rem 1rem; border-top:1px solid var(--card-border); }
    .transit-pill.open .pill-body { display:block; }
    .pill-aspect-def { margin-top:0.8rem; margin-bottom:0.8rem; padding:0.7rem 0.9rem; background:var(--pill-aspect-bg); border:1px solid var(--pill-aspect-border); border-radius:10px; }
    .pill-aspect-def-name { font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber); font-weight:500; margin-bottom:4px; }
    .pill-aspect-def-text { font-size:0.82rem; color:var(--text-secondary); line-height:1.65; }
    .pill-desc { font-family:"DM Sans",sans-serif; font-size:0.92rem; font-weight:400; line-height:1.75; color:var(--text-primary); margin-bottom:0.8rem; margin-top:0.8rem; }
    .pill-action-label { font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:0.4rem; font-weight:500; }
    .pill-action { font-size:0.85rem; color:var(--text-secondary); line-height:1.65; font-weight:400; }
    body.light .pill-action { color:rgba(26,20,16,0.65); }
    .no-transits { margin:0 1.1rem; padding:2.5rem 1.5rem; text-align:center; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; }
    .no-transits p { font-size:0.88rem; color:var(--text-secondary); line-height:1.8; }
    .loading-wrap { text-align:center; padding:3rem 1rem; }
    .loading-wrap p { font-size:0.82rem; color:var(--text-secondary); letter-spacing:0.1em; margin-top:0.75rem; }

    /* ─── BIRTH CHART PAGE ─── */
    .chart-page-header { padding:1.2rem 1.4rem 0; }
    .chart-intro { font-family:"DM Sans",sans-serif; font-size:0.88rem; color:var(--text-secondary); line-height:1.65; margin-top:0.4rem; }
    .chart-grid { display:flex; flex-direction:column; gap:0.5rem; padding:1rem 1.1rem 0; }

    /* ─── NATAL WHEEL ─── */
    .wheel-wrap { padding:1rem 1.1rem 0; }
    .wheel-toggle-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }
    .wheel-toggle-label { font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); font-weight:500; opacity:0.85; }
    .wheel-toggle-btn { background:none; border:1px solid var(--glass-border); color:var(--text-secondary); font-family:"DM Sans",sans-serif; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; padding:0.3rem 0.75rem; border-radius:20px; cursor:pointer; transition:color 0.2s, border-color 0.2s; }
    .wheel-toggle-btn:hover { color:var(--gold); border-color:rgba(232,201,122,0.3); }
    .wheel-container { position:relative; width:100%; aspect-ratio:1; max-width:320px; margin:0 auto; }
    .wheel-svg { width:100%; height:100%; overflow:visible; }
    .wheel-svg .sign-segment { cursor:default; transition:opacity 0.2s; }
    .wheel-svg .planet-glyph { cursor:pointer; font-size:13px; font-family:"DM Sans",sans-serif; fill:var(--text-primary); transition:all 0.2s; }
    .wheel-svg .planet-glyph:hover { fill:var(--gold); }
    .wheel-svg .planet-glyph.highlighted { fill:#fff; filter:drop-shadow(0 0 6px rgba(232,201,122,1)) drop-shadow(0 0 12px rgba(232,201,122,0.7)); font-size:15px; }
    .wheel-svg .planet-dot { transition:all 0.2s; }
    .wheel-svg .planet-dot.highlighted { r:4; fill:#fff; filter:drop-shadow(0 0 6px rgba(232,201,122,1)); }
    .wheel-svg .planet-halo { opacity:0; transition:opacity 0.2s; }
    .wheel-svg .planet-halo.highlighted { opacity:1; }
    .wheel-svg .rx-label { font-size:6px; fill:rgba(224,112,112,0.8); font-family:"DM Sans",sans-serif; pointer-events:none; }
    .chart-card.wheel-highlight { border-color:rgba(232,201,122,0.7) !important; background:rgba(201,146,58,0.13) !important; box-shadow:0 0 0 1px rgba(232,201,122,0.3), 0 0 16px rgba(201,146,58,0.15) !important; }
    .rx-badge { display:inline-block; font-size:0.58rem; color:#e07070; letter-spacing:0.05em; margin-left:4px; vertical-align:middle; font-style:italic; }
    .chart-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; cursor:pointer; overflow:hidden; transition:border-color 0.2s, background 0.2s; }
    .chart-card:hover { background:var(--card-hover); }
    .chart-card.open { border-color:rgba(232,201,122,0.28); }
    .chart-card-header { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1rem; }
    .chart-card-left { display:flex; align-items:center; gap:0.75rem; }
    .chart-card-icon { width:36px; height:36px; border-radius:10px; background:rgba(201,146,58,0.12); border:1px solid rgba(232,201,122,0.18); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
    .chart-card-info { display:flex; flex-direction:column; gap:3px; }
    .chart-card-planet { font-family:"DM Sans",sans-serif; font-size:0.95rem; font-weight:500; color:var(--text-primary); line-height:1; }
    body.light .chart-card-planet { color:var(--amber); }
    .chart-card-placement { font-size:0.72rem; color:var(--text-secondary); letter-spacing:0.03em; }
    .chart-card-chev { font-size:0.5rem; color:var(--amber); opacity:0.5; transition:transform 0.25s; }
    .chart-card.open .chart-card-chev { transform:rotate(180deg); opacity:1; }
    .chart-card-body { display:none; border-top:1px solid var(--card-border); }
    .chart-card.open .chart-card-body { display:block; }
    .chart-tab-row { display:flex; border-bottom:1px solid var(--card-border); }
    .chart-tab { flex:1; background:none; border:none; font-family:"DM Sans",sans-serif; font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary); padding:0.7rem; cursor:pointer; transition:color 0.2s; position:relative; font-weight:500; }
    .chart-tab.active { color:var(--gold); }
    .chart-tab.active::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--gold); }
    .chart-tab-content { padding:1rem 1.1rem; display:none; }
    .chart-tab-content.active { display:block; }
    .chart-reading { font-family:"DM Sans",sans-serif; font-size:0.9rem; font-weight:400; line-height:1.75; color:var(--text-primary); }
    .chart-reading-loading { font-size:0.8rem; color:var(--muted); display:flex; align-items:center; gap:0.5rem; }

    /* ─── CHART SECTION CARDS (Profile / Placements / Glossary) ─── */
    .chart-sections { display:flex; flex-direction:column; gap:0.6rem; padding:0.75rem 1.1rem 0; }
    .csec-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden; transition:border-color 0.2s; }
    .csec-card.open { border-color:rgba(232,201,122,0.28); }
    .csec-header { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1rem; cursor:pointer; transition:background 0.15s; }
    .csec-header:hover { background:var(--card-hover); }
    .csec-left { display:flex; align-items:center; gap:0.75rem; }
    .csec-icon { width:36px; height:36px; border-radius:10px; background:rgba(201,146,58,0.12); border:1px solid rgba(232,201,122,0.18); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
    .csec-icon-profile { background:rgba(140,100,180,0.12); border-color:rgba(180,140,220,0.2); }
    .csec-icon-gloss { background:rgba(80,120,180,0.1); border-color:rgba(120,160,220,0.18); }
    .csec-info { display:flex; flex-direction:column; gap:3px; }
    .csec-title { font-family:"DM Sans",sans-serif; font-size:0.95rem; font-weight:500; color:var(--text-primary); line-height:1; }
    body.light .csec-title { color:var(--amber); }
    .csec-sub { font-size:0.72rem; color:var(--text-secondary); letter-spacing:0.02em; }
    .csec-chev { font-size:0.5rem; color:var(--amber); opacity:0.5; transition:transform 0.25s; }
    .csec-card.open .csec-chev { transform:rotate(180deg); opacity:1; }
    .csec-body { display:none; border-top:1px solid var(--card-border); }
    .csec-card.open .csec-body { display:block; }

    /* Balance bars (elements + modalities) */
    .bal-section { padding:1rem 1rem 0; }
    .bal-label { font-size:0.55rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); opacity:0.7; margin-bottom:0.55rem; font-weight:500; }
    .bal-rows { display:flex; flex-direction:column; gap:0; }
    .bal-row { display:flex; align-items:center; gap:0.65rem; padding:0.38rem 0.4rem; cursor:pointer; border-radius:8px; transition:background 0.15s; }
    .bal-row:hover { background:rgba(255,255,255,0.03); }
    .bal-glyph { font-size:0.85rem; width:18px; text-align:center; flex-shrink:0; }
    .bal-name { font-size:0.72rem; color:var(--text-secondary); width:54px; flex-shrink:0; }
    .bal-track { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.06); overflow:hidden; }
    .bal-fill { height:100%; border-radius:3px; width:0; transition:width 0.7s cubic-bezier(0.4,0,0.2,1); }
    .bal-pct { font-size:0.65rem; color:var(--text-muted); width:28px; text-align:right; flex-shrink:0; }
    .bal-row-chev { font-size:0.42rem; color:var(--amber); opacity:0.4; transition:transform 0.2s; flex-shrink:0; }
    .bal-row.open .bal-row-chev { transform:rotate(180deg); opacity:0.8; }
    .bal-desc { display:none; font-size:0.75rem; color:var(--text-secondary); line-height:1.65; padding:0.1rem 0.4rem 0.6rem 2.7rem; }
    .bal-row.open + .bal-desc { display:block; }
    .fill-fire    { background:linear-gradient(90deg,#c0544a,#e8844a); }
    .fill-earth   { background:linear-gradient(90deg,#7a9e6e,#a0be8e); }
    .fill-air     { background:linear-gradient(90deg,#6b9ab8,#8bbcd8); }
    .fill-water   { background:linear-gradient(90deg,#5e6fad,#8e88cb); }
    .fill-cardinal{ background:linear-gradient(90deg,#c9923a,#e8c97a); }
    .fill-fixed   { background:linear-gradient(90deg,#8b5e8b,#bb88bb); }
    .fill-mutable { background:linear-gradient(90deg,#4a9a8a,#7acaba); }
    .bal-divider { border:none; border-top:1px solid var(--settings-row-border); margin:0.75rem 0 0; }

    /* Chart Profile AI reading */
    .profile-reading-wrap { padding:0 1rem 1.1rem; }
    .profile-reading-label { font-size:0.55rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); opacity:0.7; margin-bottom:0.6rem; font-weight:500; }
    .profile-reading-text { font-family:"DM Sans",sans-serif; font-size:0.88rem; line-height:1.75; color:var(--text-primary); }
    .profile-reading-text p + p { margin-top:0.85rem; }
    .profile-reading-loading { font-size:0.8rem; color:var(--muted); display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0; }

    /* Glossary */
    .gloss-tabs { display:flex; border-bottom:1px solid var(--card-border); overflow-x:auto; scrollbar-width:none; }
    .gloss-tabs::-webkit-scrollbar { display:none; }
    .gloss-tab { flex-shrink:0; padding:0.65rem 0.85rem; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; transition:color 0.2s; white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none; font-family:"DM Sans",sans-serif; font-weight:500; }
    .gloss-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
    .gloss-panel { display:none; padding:0.6rem 1rem 0.9rem; }
    .gloss-panel.active { display:block; }
    .gloss-item { padding:0.55rem 0; border-bottom:1px solid var(--settings-row-border); }
    .gloss-item:last-child { border-bottom:none; }
    .gloss-term { font-size:0.78rem; font-weight:500; color:var(--text-primary); margin-bottom:3px; display:flex; align-items:center; gap:0.4rem; }
    .gloss-term-meta { font-size:0.58rem; color:var(--text-muted); font-weight:400; }
    .gloss-def { font-size:0.72rem; color:var(--text-secondary); line-height:1.6; }

    /* ─── PROFILE / SETTINGS PAGE ─── */
    .profile-wrap { padding:1.4rem; }
    .profile-saved { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:1.2rem 1.4rem; margin-bottom:1.2rem; position:relative; overflow:hidden; }
    .profile-saved::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.3),transparent); }
    .profile-name { font-family:"DM Sans",sans-serif; font-size:1.2rem; font-weight:500; color:var(--text-primary); margin-bottom:0.3rem; }
    body.light .profile-name { color:var(--amber); }
    .profile-data { font-size:0.82rem; color:var(--text-secondary); line-height:2; }
    .form-section { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:1.4rem; margin-bottom:1rem; }
    .form-section-title { font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); font-weight:500; margin-bottom:1.2rem; }
    .row-2 { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
    .hint { font-size:0.75rem; color:var(--text-secondary); margin-top:-0.6rem; margin-bottom:1rem; line-height:1.6; }
    .form-select { width:100%; background:var(--input-bg); border:1px solid var(--input-border); color:var(--text-primary); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.92rem; padding:0.8rem 1rem; outline:none; transition:border-color 0.2s; border-radius:8px; -webkit-appearance:none; appearance:none; }
    .form-select:focus { border-color:rgba(232,201,122,0.45); }
    .form-select option { background:#12192e; color:#f7f0e3; }
    body.light .form-select option { background:#faf7f2; color:#1a1410; }
    .city-wrap { position:relative; }
    .city-suggestions { position:absolute; top:100%; left:0; right:0; background:var(--modal-bg); border:1px solid var(--modal-border); border-top:none; border-radius:0 0 10px 10px; z-index:100; display:none; }
    .city-suggestion { padding:0.65rem 1rem; cursor:pointer; font-size:0.8rem; color:var(--text-secondary); border-bottom:1px solid var(--card-border); transition:background 0.15s; }
    .city-suggestion:hover { background:var(--card-hover); }
    .city-status { font-size:0.65rem; color:var(--amber); margin-top:0.35rem; min-height:1em; }
    .save-btn { width:100%; background:transparent; border:1px solid var(--gold); color:var(--gold); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.65rem; letter-spacing:0.28em; text-transform:uppercase; padding:1rem; cursor:pointer; transition:background 0.2s,color 0.2s; border-radius:8px; margin-top:0.5rem; }
    .save-btn:hover { background:var(--gold); color:var(--ink); }
    .save-btn:disabled { opacity:0.4; cursor:not-allowed; }

    /* ─── SETTINGS SECTION ─── */
    .settings-section { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; margin-bottom:1rem; overflow:hidden; }
    .settings-row { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--settings-row-border); }
    .settings-row:last-child { border-bottom:none; }
    .settings-row-label { font-size:0.88rem; color:var(--text-primary); font-weight:400; }
    .settings-row-sub { font-size:0.75rem; color:var(--text-secondary); margin-top:2px; }
    .toggle-wrap { position:relative; width:42px; height:24px; flex-shrink:0; }
    .toggle-wrap input { opacity:0; width:0; height:0; position:absolute; }
    .toggle-slider { position:absolute; inset:0; background:rgba(255,255,255,0.1); border-radius:24px; cursor:pointer; transition:background 0.25s; border:1px solid var(--card-border); }
    body.light .toggle-slider { background:rgba(0,0,0,0.08); }
    .toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; background:var(--muted); border-radius:50%; transition:transform 0.25s, background 0.25s; }
    input:checked + .toggle-slider { background:rgba(201,146,58,0.3); border-color:rgba(232,201,122,0.3); }
    input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--gold); }
    .logout-btn { width:100%; background:transparent; border:1px solid var(--logout-border); color:var(--logout-text); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.65rem; letter-spacing:0.28em; text-transform:uppercase; padding:1rem; cursor:pointer; transition:background 0.2s; border-radius:8px; margin-top:0.5rem; }
    .logout-btn:hover { background:var(--logout-hover); }

    /* ─── NAV — fixed, always visible ─── */
    .bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:390px; background:var(--nav-bg); border-top:1px solid var(--nav-border); padding:10px 0 24px; display:flex; justify-content:space-around; align-items:center; backdrop-filter:blur(20px); z-index:200; }
    @media(min-width:500px) { .bottom-nav { padding:10px 0 16px; } }
    @media(max-width:499px) { .bottom-nav { padding:10px 0 28px; } }
    .nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; opacity:0.4; transition:opacity 0.2s; }
    .nav-item.active { opacity:1; }
    .nav-item:hover { opacity:0.7; }
    .nav-item svg { width:19px; height:19px; stroke:var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
    .nav-label { font-size:0.52rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--gold); font-weight:500; }
    .nav-dot { width:3px; height:3px; background:var(--amber); border-radius:50%; display:none; }
    .nav-item.active .nav-dot { display:block; }

    /* ─── AVATAR BUTTON ─── */
    .avatar-btn { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,rgba(201,146,58,0.18),rgba(232,201,122,0.05)); border:1px solid rgba(232,201,122,0.28); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; position:relative; transition:all 0.2s; }
    .avatar-btn:hover { border-color:rgba(232,201,122,0.55); background:rgba(201,146,58,0.25); }
    .avatar-initials { font-family:"DM Sans",sans-serif; font-size:0.82rem; font-weight:500; color:var(--gold); line-height:1; }
    .avatar-pending-dot { position:absolute; top:-1px; right:-1px; width:9px; height:9px; background:var(--amber); border-radius:50%; border:2px solid var(--navy); display:none; }
    .avatar-pending-dot.visible { display:block; }

    /* ─── SHEET OVERLAY + BASE ─── */
    .sheet-overlay { position:fixed; inset:0; background:rgba(8,12,22,0.65); z-index:300; backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity 0.25s; }
    .sheet-overlay.open { opacity:1; pointer-events:all; }
    .slide-sheet { position:fixed; bottom:0; left:50%; transform:translateX(-50%) translateY(100%); width:100%; max-width:390px; background:linear-gradient(180deg,#14203a 0%,#0a1020 100%); border-top:1px solid rgba(232,201,122,0.18); border-radius:24px 24px 0 0; transition:transform 0.3s cubic-bezier(0.32,0.72,0,1); }
    .slide-sheet.open { transform:translateX(-50%) translateY(0); }
    .sheet-handle { width:36px; height:3px; background:rgba(232,201,122,0.2); border-radius:2px; margin:12px auto 18px; }

    /* ─── PROFILE SHEET ─── */
    .profile-sheet { padding:0 1.4rem 2.5rem; z-index:310; max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .profile-sheet::-webkit-scrollbar { width:3px; }
    .profile-sheet::-webkit-scrollbar-thumb { background:rgba(232,201,122,0.2); border-radius:2px; }
    .sheet-profile-row { display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:4px; border-bottom:1px solid rgba(232,201,122,0.08); }
    .sheet-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,rgba(201,146,58,0.25),rgba(232,201,122,0.06)); border:1px solid rgba(232,201,122,0.28); display:flex; align-items:center; justify-content:center; font-family:"DM Sans",sans-serif; font-size:0.95rem; font-weight:500; color:var(--gold); flex-shrink:0; }
    .sheet-name { font-family:"DM Sans",sans-serif; font-size:1rem; color:var(--text-primary); font-weight:500; }
    .sheet-meta { font-size:0.65rem; color:var(--amber); margin-top:2px; letter-spacing:0.04em; }
    .sheet-row { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 0; border-bottom:1px solid rgba(232,201,122,0.06); cursor:pointer; }
    .sheet-row:last-of-type { border-bottom:none; }
    .sheet-row-label { font-size:0.88rem; color:var(--text-primary); }
    .sheet-row-sub { font-size:0.68rem; color:var(--muted); margin-top:2px; }
    .sheet-row-right { font-size:0.7rem; color:var(--amber); opacity:0.6; }
    .sheet-logout { width:100%; background:transparent; border:1px solid var(--logout-border); color:var(--logout-text); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.62rem; letter-spacing:0.25em; text-transform:uppercase; padding:0.9rem; cursor:pointer; transition:background 0.2s; border-radius:8px; margin-top:0.75rem; }
    .sheet-logout:hover { background:var(--logout-hover); }

    /* ─── SETTINGS GROUPS (collapsible) ─── */
    .sgroup { border:1px solid rgba(232,201,122,0.08); border-radius:14px; margin-bottom:8px; overflow:hidden; background:rgba(255,255,255,0.02); }
    .sgroup-header { width:100%; display:flex; align-items:center; justify-content:space-between; padding:13px 14px; background:none; border:none; cursor:pointer; color:var(--text-primary); font-family:"DM Sans",sans-serif; font-size:0.82rem; font-weight:500; text-align:left; -webkit-tap-highlight-color:rgba(232,201,122,0.06); transition:background 0.15s; }
    .sgroup-header:active { background:rgba(232,201,122,0.04); }
    .sgroup-left { display:flex; align-items:center; gap:10px; }
    .sgroup-left svg { stroke:var(--amber); flex-shrink:0; opacity:0.7; }
    .sgroup-chevron { stroke:var(--muted); transition:transform 0.25s; flex-shrink:0; opacity:0.5; }
    .sgroup.open .sgroup-chevron { transform:rotate(180deg); }
    .sgroup-body { display:none; border-top:1px solid rgba(232,201,122,0.06); padding:0 14px; }
    .sgroup.open .sgroup-body { display:block; }
    .srow { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(232,201,122,0.05); cursor:pointer; }
    .srow:last-child { border-bottom:none; }
    .srow-label { font-size:0.85rem; color:var(--text-primary); }
    .srow-sub { font-size:0.68rem; color:var(--muted); margin-top:2px; }
    .srow-action { font-size:0.68rem; color:var(--amber); opacity:0.6; flex-shrink:0; margin-left:10px; }

    /* ─── MONTHLY TRANSIT CARDS ─── */
    .mtcard { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden; }
    .mtcard-header { width:100%; display:flex; align-items:center; justify-content:space-between; padding:13px 14px; background:none; border:none; cursor:pointer; color:var(--text-primary); font-family:"DM Sans",sans-serif; text-align:left; -webkit-tap-highlight-color:rgba(232,201,122,0.06); }
    .mtcard-left { display:flex; align-items:center; gap:10px; }
    .mtcard-icon { font-size:1rem; color:var(--gold); opacity:0.75; line-height:1; }
    .mtcard-title { font-size:0.82rem; font-weight:500; color:var(--text-primary); }
    .mtcard-sub { font-size:0.65rem; color:var(--text-muted); margin-top:1px; }
    .mtcard-chevron { stroke:var(--muted); transition:transform 0.25s; flex-shrink:0; opacity:0.5; }
    .mtcard.open .mtcard-chevron { transform:rotate(180deg); }
    .mtcard-body { display:none; border-top:1px solid rgba(232,201,122,0.07); }
    .mtcard.open .mtcard-body { display:block; }
    .mtcard-loading { padding:12px 14px; font-size:0.72rem; color:var(--text-muted); }
    .mt-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-bottom:1px solid rgba(232,201,122,0.05); }
    .mt-item:last-child { border-bottom:none; }
    .mt-date { font-size:0.6rem; letter-spacing:0.06em; color:var(--amber); white-space:nowrap; min-width:38px; padding-top:2px; }
    .mt-pill { font-size:0.6rem; font-weight:500; padding:2px 7px; border-radius:5px; background:rgba(201,146,58,0.1); color:var(--gold); border:1px solid rgba(232,201,122,0.15); white-space:nowrap; flex-shrink:0; margin-top:1px; }
    .mt-desc { font-size:0.72rem; color:var(--text-secondary); line-height:1.5; }

    /* ─── BIRTH EDITOR SHEET ─── */
    .birth-sheet { padding:0 1.4rem 2rem; z-index:330; max-height:88vh; overflow-y:auto; }
    .birth-sheet::-webkit-scrollbar { width:3px; }
    .birth-sheet::-webkit-scrollbar-thumb { background:rgba(232,201,122,0.2); border-radius:2px; }

    /* ─── CONNECTIONS PAGE ─── */
    .connections-header { padding:1rem 1.4rem 0.5rem; }
    .connections-title { font-family:"Cormorant Garamond",serif; font-size:1.8rem; font-weight:300; color:var(--gold); line-height:1.1; }
    .connections-subtitle { font-family:"DM Sans",sans-serif; font-size:0.88rem; color:var(--text-secondary); margin-top:2px; }
    .connections-toolbar { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 1.4rem 0.75rem; }
    .connections-count { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber); font-weight:500; }
    .invite-chip { font-size:0.62rem; color:var(--gold); background:none; border:1px solid rgba(232,201,122,0.25); padding:5px 14px; border-radius:12px; cursor:pointer; font-family:"DM Sans",sans-serif; transition:all 0.2s; }
    .invite-chip:hover { background:rgba(232,201,122,0.08); border-color:rgba(232,201,122,0.4); }
    .connections-list { padding:0 1.1rem; display:flex; flex-direction:column; gap:0.6rem; }
    .connection-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:0.9rem 1rem; display:flex; align-items:center; gap:0.85rem; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; }
    .connection-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.18),transparent); }
    .connection-card:hover { background:var(--card-hover); border-color:rgba(232,201,122,0.22); }
    .connection-card.pending { opacity:0.65; border-style:dashed; }
    .conn-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,rgba(201,146,58,0.22),rgba(232,201,122,0.06)); border:1px solid rgba(232,201,122,0.2); display:flex; align-items:center; justify-content:center; font-family:"DM Sans",sans-serif; font-size:0.85rem; font-weight:500; color:var(--gold); flex-shrink:0; }
    .conn-info { flex:1; min-width:0; }
    .conn-name { font-family:"DM Sans",sans-serif; font-size:0.95rem; color:var(--text-primary); font-weight:500; margin-bottom:2px; }
    .conn-compat { font-size:0.65rem; color:var(--amber); }
    .conn-status { font-size:0.62rem; color:var(--muted); }
    .conn-chev { font-size:0.65rem; color:var(--amber); opacity:0.5; flex-shrink:0; }
    .connections-invite-btn { width:100%; background:transparent; border:1px solid rgba(232,201,122,0.18); color:var(--gold); font-family:"DM Sans",sans-serif; font-weight:400; font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; padding:0.9rem; cursor:pointer; transition:all 0.2s; border-radius:12px; }
    .connections-invite-btn:hover { background:rgba(232,201,122,0.06); border-color:rgba(232,201,122,0.3); }
    .conn-tier-note { font-size:0.65rem; color:var(--muted); text-align:center; margin-top:0.5rem; line-height:1.5; }

    /* ─── COSMIC CODE ─── */
    .cosmic-code-card { background:linear-gradient(135deg,rgba(201,146,58,0.12),rgba(232,201,122,0.04)); border:1px solid rgba(232,201,122,0.22); border-radius:16px; padding:1rem 1.2rem; margin:0 1.1rem 0.75rem; position:relative; overflow:hidden; }
    .cosmic-code-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.4),transparent); }
    .cosmic-code-eyebrow { font-size:0.56rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber); font-weight:500; margin-bottom:0.5rem; }
    .cosmic-code-value { font-family:"DM Sans",sans-serif; font-size:1.6rem; font-weight:500; color:var(--gold); letter-spacing:0.08em; line-height:1; margin-bottom:0.6rem; }
    .cosmic-code-actions { display:flex; gap:8px; }
    .code-action-btn { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(232,201,122,0.15); color:var(--text-secondary); font-family:"DM Sans",sans-serif; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; padding:7px 0; border-radius:8px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:5px; }
    .code-action-btn:hover { background:rgba(201,146,58,0.1); border-color:rgba(232,201,122,0.3); color:var(--gold); }
    .code-action-btn svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

    /* ─── CODE SEARCH ─── */
    .code-search-wrap { padding:0 1.1rem 0.75rem; }
    .code-search-inner { display:flex; gap:8px; align-items:center; }
    .code-search-input { flex:1; background:var(--input-bg); border:1px solid var(--input-border); color:var(--text-primary); font-family:"DM Sans",sans-serif; font-size:0.95rem; padding:0.7rem 1rem; outline:none; border-radius:10px; transition:border-color 0.2s; letter-spacing:0.05em; text-transform:uppercase; }
    .code-search-input::placeholder { text-transform:none; letter-spacing:0; font-size:0.82rem; color:rgba(139,127,114,0.5); }
    .code-search-input:focus { border-color:rgba(232,201,122,0.45); }
    .code-search-btn { background:var(--amber); border:none; color:var(--navy); font-family:"DM Sans",sans-serif; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; padding:0.7rem 1rem; border-radius:10px; cursor:pointer; font-weight:500; white-space:nowrap; transition:background 0.2s; }
    .code-search-btn:hover { background:var(--gold); }
    .code-search-result { margin-top:0.6rem; padding:0.8rem 1rem; background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; display:none; }
    .code-search-result.visible { display:block; }
    .code-result-name { font-family:"DM Sans",sans-serif; font-size:0.95rem; font-weight:500; color:var(--text-primary); margin-bottom:4px; }
    .code-result-action { font-size:0.72rem; color:var(--amber); cursor:pointer; }

    /* ─── QR SHEET ─── */
    .qr-sheet { padding:0 1.4rem 2.5rem; z-index:350; text-align:center; }
    .qr-canvas-wrap { display:flex; justify-content:center; margin:1rem 0; }
    .qr-canvas-wrap canvas { border-radius:12px; border:2px solid rgba(232,201,122,0.2); }

    /* ─── CONNECTION DETAIL SHEET ─── */
    .conn-detail-sheet { padding:0 1.4rem 2.5rem; z-index:330; max-height:88vh; overflow-y:auto; }
    .conn-detail-sheet::-webkit-scrollbar { width:3px; }
    .conn-detail-sheet::-webkit-scrollbar-thumb { background:rgba(232,201,122,0.2); border-radius:2px; }
    .synastry-headline { font-family:"DM Sans",sans-serif; font-size:0.95rem; font-weight:400; line-height:1.7; color:var(--text-primary); margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--card-border); }
    .synastry-area { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:0.85rem 1rem; margin-bottom:0.6rem; }
    .synastry-area-name { font-family:"DM Sans",sans-serif; font-size:0.88rem; font-weight:500; color:var(--gold); margin-bottom:0.3rem; }
    .synastry-area-desc { font-family:"DM Sans",sans-serif; font-size:0.84rem; color:var(--text-secondary); line-height:1.65; }

    /* ─── SHARE ─── */
    .share-btn { background:none; border:none; cursor:pointer; padding:6px; opacity:0.5; transition:opacity 0.2s; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .share-btn:hover { opacity:1; }
    .share-btn svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
    .brief-card-top { display:flex; justify-content:space-between; align-items:flex-start; }
    .share-toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:rgba(201,146,58,0.95); color:#0e1424; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.5rem 1.2rem; border-radius:20px; font-weight:500; z-index:999; opacity:0; transition:opacity 0.3s; pointer-events:none; white-space:nowrap; }
    .share-toast.visible { opacity:1; }

    /* ─── BRIEF LIFE AREAS ─── */
    .brief-areas-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:1rem 1.1rem; margin:0 1.1rem; }
    .brief-area-row { padding:0.65rem 0; border-bottom:1px solid rgba(232,201,122,0.07); cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .brief-area-top { display:flex; align-items:center; gap:8px; }
    .brief-area-name { font-size:0.8rem; font-weight:500; color:var(--text-secondary); letter-spacing:0.06em; flex:1; }
    .brief-area-chev { font-size:0.55rem; color:var(--gold); transition:transform 0.2s; flex-shrink:0; opacity:0.7; }
    .brief-area-meter-track { height:2px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; margin-top:6px; }
    .brief-area-meter-fill { height:100%; border-radius:2px; transition:width 0.4s ease; }
    .brief-area-expand { font-size:0.84rem; color:var(--text-secondary); line-height:1.65; padding-top:0.65rem; display:none; }
    .brief-area-expand.open { display:block; }

    /* ─── ALMANAC PAGE ─── */
    .almanac-header { padding:1rem 1.4rem 0.9rem; border-bottom:1px solid var(--nav-border); }
    .almanac-title { font-family:"Cormorant Garamond",serif; font-size:1.8rem; font-weight:300; color:var(--gold); line-height:1.1; }
    .almanac-subtitle { font-family:"DM Sans",sans-serif; font-size:0.88rem; color:var(--text-secondary); margin-top:2px; }
    .almanac-grid { padding:1rem 1.1rem; display:flex; flex-direction:column; gap:0.75rem; }
    .almanac-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; overflow:hidden; position:relative; }
    .almanac-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.25),transparent); }
    .almanac-card-inner { padding:1rem 1.1rem; }
    .almanac-card-eyebrow { font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber); font-weight:500; margin-bottom:0.4rem; opacity:0.85; }
    .almanac-card-value { font-family:"DM Sans",sans-serif; font-size:1.2rem; font-weight:500; color:var(--text-primary); line-height:1.2; margin-bottom:0.4rem; }
    .almanac-card-value em { font-style:normal; color:var(--gold); }
    .almanac-card-desc { font-family:"DM Sans",sans-serif; font-size:0.84rem; color:var(--text-secondary); line-height:1.65; }
    .almanac-card-desc.loading { display:flex; align-items:center; gap:0.5rem; font-style:italic; color:var(--muted); }

    /* Tarot card special layout */
    .almanac-tarot { display:flex; gap:1rem; align-items:flex-start; }
    .almanac-tarot-img-wrap { flex-shrink:0; width:72px; }
    .almanac-tarot-content { flex:1; min-width:0; }

    /* Color swatch */
    .almanac-color-row { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.4rem; }
    .almanac-color-swatch { width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,0.15); flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.3); }

    /* Two-col mini grid for compact items */
    .almanac-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
    .almanac-mini-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:0.9rem 1rem; position:relative; overflow:hidden; }
    .almanac-mini-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.2),transparent); }
    .almanac-mini-eyebrow { font-size:0.56rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber); font-weight:500; margin-bottom:0.35rem; opacity:0.85; }
    .almanac-mini-value { font-family:"DM Sans",sans-serif; font-size:1rem; font-weight:500; color:var(--text-primary); line-height:1.2; margin-bottom:0.3rem; }
    .almanac-mini-desc { font-size:0.75rem; color:var(--text-secondary); line-height:1.55; }

    @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
    @keyframes float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
    @media(max-width:499px) { .row-2 { grid-template-columns:1fr; } .bottom-nav { padding:10px 0 28px; } }

    /* ─── FONT SIZE SCALING ─── */
    body.font-large { font-size:18px; }
    body.font-xlarge { font-size:20px; }
    body.font-large .brief-text { font-size:1.25rem; }
    body.font-xlarge .brief-text { font-size:1.38rem; }
    body.font-large .pill-desc, body.font-large .chart-reading, body.font-large .brief-area-desc,
    body.font-large .synastry-area-desc, body.font-large .almanac-card-desc,
    body.font-large .focus-desc, body.font-large .pill-action { font-size:1rem; }
    body.font-xlarge .pill-desc, body.font-xlarge .chart-reading, body.font-xlarge .brief-area-desc,
    body.font-xlarge .synastry-area-desc, body.font-xlarge .almanac-card-desc,
    body.font-xlarge .focus-desc, body.font-xlarge .pill-action { font-size:1.1rem; }
    .install-banner { margin:0 1.1rem 0.75rem; background:linear-gradient(135deg,rgba(201,146,42,0.18),rgba(201,146,42,0.08)); border:1px solid rgba(201,146,42,0.35); border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:10px; position:relative; overflow:hidden; }
    .install-banner::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(201,146,42,0.6),transparent); }
    .install-banner-icon { font-size:18px; flex-shrink:0; }
    .install-banner-text strong { display:block; font-size:13px; font-weight:500; color:var(--text-primary); margin-bottom:1px; }
    .install-banner-text span { font-size:11px; color:var(--text-secondary); }
    .install-banner-cta { font-size:11px; font-weight:500; color:var(--gold); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; cursor:pointer; flex-shrink:0; }
    .install-banner-dismiss { position:absolute; top:8px; right:10px; font-size:16px; color:var(--text-muted); cursor:pointer; line-height:1; background:none; border:none; }

    /* ─── NOTIF PERMISSION CARD ─── */
    .notif-card { margin:0 1.1rem 0.75rem; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:16px; }
    .notif-card-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .notif-card-body { font-size:12px; color:var(--text-secondary); margin-bottom:12px; line-height:1.6; }
    .notif-card-actions { display:flex; gap:8px; }
    .notif-btn-primary { flex:1; padding:10px; background:linear-gradient(135deg,var(--amber),#a87520); border:none; border-radius:10px; font-family:"DM Sans",sans-serif; font-size:12px; font-weight:500; color:var(--ink); cursor:pointer; }
    .notif-btn-ghost { flex:1; padding:10px; background:transparent; border:1px solid var(--card-border); border-radius:10px; font-family:"DM Sans",sans-serif; font-size:12px; color:var(--text-secondary); cursor:pointer; }

    /* ─── INSTALL HOW-TO MODAL ─── */
    .install-modal-overlay { position:fixed; inset:0; background:rgba(8,12,22,0.82); z-index:400; backdrop-filter:blur(8px); display:none; align-items:flex-end; justify-content:center; }
    .install-modal-overlay.open { display:flex; }
    .install-modal { background:linear-gradient(180deg,#14203a 0%,#0a1020 100%); border-top:1px solid rgba(232,201,122,0.18); border-radius:24px 24px 0 0; width:100%; max-width:390px; padding:24px 20px 40px; }
    .install-modal-title { font-family:"DM Sans",sans-serif; font-size:18px; font-weight:500; color:var(--text-primary); margin-bottom:4px; }
    .install-modal-sub { font-size:12px; color:var(--text-secondary); margin-bottom:18px; }
    .install-modal-steps { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
    .install-modal-step { display:flex; align-items:flex-start; gap:10px; }
    .install-step-num { width:22px; height:22px; border-radius:50%; background:rgba(201,146,42,0.15); border:1px solid rgba(201,146,42,0.3); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--gold); flex-shrink:0; margin-top:1px; }
    .install-step-text { font-size:13px; color:var(--text-secondary); line-height:1.5; }
    .install-step-text strong { color:var(--text-primary); font-weight:500; }
    .install-modal-btn { width:100%; padding:13px; background:linear-gradient(135deg,var(--amber),#a87520); border:none; border-radius:12px; font-family:"DM Sans",sans-serif; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; letter-spacing:0.05em; }

    /* ─── JOURNAL CARD ─── */
    .journal-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:1.4rem 1.3rem 1.1rem; margin:0 1.1rem 0.75rem; position:relative; }
    .journal-card::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.3),transparent); pointer-events:none; }
    .journal-card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:0.85rem; }
    .journal-prompt { font-family:"Cormorant Garamond",serif; font-weight:300; font-size:1.15rem; color:var(--text-primary); line-height:1.3; letter-spacing:0.01em; }
    .journal-context-line { font-size:0.68rem; color:var(--text-muted); line-height:1.55; margin-bottom:0.85rem; padding-left:0.7rem; border-left:1px solid rgba(232,201,122,0.18); font-style:italic; }
    .journal-textarea { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(232,201,122,0.12); border-radius:10px; padding:0.85rem 1rem; font-family:"DM Sans",sans-serif; font-size:0.88rem; color:var(--text-primary); line-height:1.75; resize:none; outline:none; min-height:130px; transition:border-color 0.2s,background 0.2s; caret-color:var(--gold); }
    .journal-textarea::placeholder { color:var(--text-muted); font-style:italic; }
    .journal-textarea:focus { border-color:rgba(232,201,122,0.28); background:rgba(255,255,255,0.06); }
    body.light .journal-textarea { background:rgba(0,0,0,0.03); border-color:rgba(184,146,42,0.15); color:var(--text-primary); }
    body.light .journal-textarea:focus { border-color:rgba(184,146,42,0.3); background:rgba(255,255,255,0.7); }
    .journal-footer-row { display:flex; align-items:center; justify-content:space-between; margin-top:0.75rem; }
    .journal-save-status { font-size:0.6rem; color:var(--text-muted); letter-spacing:0.08em; display:flex; align-items:center; gap:5px; }
    .journal-save-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.15); flex-shrink:0; transition:background 0.3s; }
    .journal-save-dot.saving { background:var(--amber); }
    .journal-save-dot.saved { background:#6aaa7a; }
    .journal-ghost-btn { background:none; border:none; font-family:"DM Sans",sans-serif; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); cursor:pointer; padding:0; transition:color 0.2s; }
    .journal-ghost-btn:hover { color:var(--gold); }
    .journal-saved-text { font-size:0.85rem; color:var(--text-secondary); line-height:1.7; font-style:italic; }

    /* ─── PLANETARY HOUR CARD ─── */
    .ph-live-dot { width:6px; height:6px; border-radius:50%; background:var(--amber); display:inline-block; margin-right:5px; animation:phPulse 2s ease-in-out infinite; vertical-align:middle; margin-top:-1px; }
    @keyframes phPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.7);} }
    .ph-planet-row { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.35rem; }
    .ph-planet-name { font-family:"DM Sans",sans-serif; font-size:1.2rem; font-weight:500; color:var(--text-primary); line-height:1.2; }
    .ph-planet-symbol { font-size:1.3rem; color:var(--gold); line-height:1; }
    .ph-time-badge { font-size:0.62rem; letter-spacing:0.1em; color:var(--muted); background:rgba(232,201,122,0.07); border:1px solid rgba(232,201,122,0.12); border-radius:20px; padding:2px 8px; white-space:nowrap; }
    .ph-progress-track { height:2px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; margin:0.55rem 0 0.5rem; }
    .ph-progress-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--amber),var(--gold)); transition:width 0.5s ease; }
    .ph-sequence { display:flex; gap:3px; margin-top:0.5rem; flex-wrap:wrap; }
    .ph-seq-chip { font-size:0.58rem; letter-spacing:0.06em; padding:2px 6px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(232,201,122,0.08); color:var(--muted); cursor:pointer; transition:background 0.15s,border-color 0.15s,color 0.15s; }
    .ph-seq-chip.active { background:rgba(201,146,58,0.15); border-color:rgba(232,201,122,0.25); color:var(--gold); font-weight:500; }
    .ph-seq-chip.selected { background:rgba(201,146,58,0.12); border-color:rgba(232,201,122,0.3); color:var(--cream); }
    .ph-hour-detail { margin-top:0.55rem; padding:0.6rem 0.75rem; background:rgba(201,146,58,0.07); border:1px solid rgba(232,201,122,0.14); border-radius:10px; display:none; }
    .ph-hour-detail.visible { display:block; }
    .ph-hour-detail-planet { font-size:0.78rem; font-weight:500; color:var(--text-primary); margin-bottom:2px; }
    .ph-hour-detail-time { font-size:0.62rem; color:var(--amber); letter-spacing:0.08em; margin-bottom:4px; }
    .ph-hour-detail-quality { font-size:0.75rem; color:var(--text-secondary); line-height:1.55; }
    .almanac-action-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; overflow:hidden; position:relative; }
    .almanac-action-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.3),transparent); }

    /* ─── ALMANAC JOURNAL SECTION ─── */
    .almanac-journal-label { font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); font-weight:500; opacity:0.85; padding:0.5rem 0 0.5rem; }

/* ─── TRANSIT MODAL ─── */
  #transit-modal-overlay { display:none; }
  #transit-modal-overlay.open { display:flex; }

/* ─── SHARE SHEET ─── */
  #share-sheet-overlay { z-index:360; }
  #share-sheet { z-index:370; max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 1.4rem 2.8rem; }
  #share-sheet::-webkit-scrollbar { width:3px; }
  #share-sheet::-webkit-scrollbar-thumb { background:rgba(232,201,122,0.2); border-radius:2px; }
  .share-format-row { display:flex; gap:6px; margin-bottom:1.2rem; }
  .share-fmt-btn { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(232,201,122,0.12); border-radius:10px; color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-size:0.62rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; padding:9px 4px; cursor:pointer; transition:all 0.2s; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .share-fmt-btn .fmt-icon { display:block; background:rgba(255,255,255,0.07); border:1px solid rgba(232,201,122,0.15); border-radius:3px; }
  .share-fmt-btn.active { background:rgba(201,146,58,0.1); border-color:rgba(232,201,122,0.35); color:var(--gold); }
  .share-fmt-btn.active .fmt-icon { background:rgba(201,146,58,0.18); border-color:rgba(232,201,122,0.4); }
  .share-type-row { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-bottom:1.2rem; padding-bottom:2px; }
  .share-type-row::-webkit-scrollbar { display:none; }
  .share-type-chip { flex-shrink:0; background:rgba(255,255,255,0.04); border:1px solid rgba(232,201,122,0.12); border-radius:20px; color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; padding:6px 13px; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
  .share-type-chip.active { background:rgba(201,146,58,0.1); border-color:rgba(232,201,122,0.35); color:var(--gold); }
  .share-preview-wrap { display:flex; justify-content:center; margin-bottom:1.2rem; }
  .share-preview-frame { position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(232,201,122,0.14); transition:all 0.3s ease; }
  .share-preview-frame[data-fmt="square"]  { width:280px; height:280px; }
  .share-preview-frame[data-fmt="stories"] { width:157px; height:280px; }
  .share-preview-frame[data-fmt="wide"]    { width:280px; height:157px; }
  .share-card-inner { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px; background: radial-gradient(ellipse 80% 60% at 75% 0%, rgba(201,146,58,0.22) 0%, transparent 65%), linear-gradient(165deg, #1a1a2e 0%, #0f1628 50%, #0d1020 100%); }
  .share-card-inner::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.45),transparent); pointer-events:none; }
  .sc-mark { font-family:'DM Sans',sans-serif; font-size:7px; letter-spacing:0.32em; text-transform:uppercase; color:rgba(232,201,122,0.5); position:relative; z-index:5; }
  .sc-body { position:relative; z-index:5; flex:1; display:flex; flex-direction:column; justify-content:center; padding:6px 0 4px; }
  .sc-eyebrow { font-family:'DM Sans',sans-serif; font-size:7px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--amber); opacity:0.85; margin-bottom:7px; }
  .sc-headline { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:20px; color:#e8dcc8; line-height:1.15; letter-spacing:0.02em; margin-bottom:7px; }
  .sc-rule { width:28px; height:1px; background:linear-gradient(90deg,rgba(232,201,122,0.45),transparent); margin-bottom:7px; }
  .sc-text { font-family:'DM Sans',sans-serif; font-weight:300; font-size:9px; line-height:1.7; color:rgba(168,152,128,0.9); letter-spacing:0.01em; }
  .sc-footer { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
  .sc-date { font-family:'DM Sans',sans-serif; font-size:7px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(122,112,96,0.7); }
  .sc-url { font-family:'Cormorant Garamond',serif; font-size:7px; color:rgba(232,201,122,0.3); letter-spacing:0.14em; }
  .share-preview-frame[data-fmt="stories"] .sc-headline { font-size:16px; }
  .share-preview-frame[data-fmt="stories"] .sc-text { font-size:8px; }
  .share-preview-frame[data-fmt="wide"] .share-card-inner { padding:12px 16px; }
  .share-preview-frame[data-fmt="wide"] .sc-wide-row { display:flex; flex-direction:row; align-items:center; gap:14px; flex:1; min-height:0; overflow:hidden; }
  .share-preview-frame[data-fmt="wide"] .sc-body { flex:1; min-width:0; padding:0; justify-content:center; }
  .share-preview-frame[data-fmt="wide"] .sc-headline { font-size:15px; margin-bottom:4px; }
  .share-preview-frame[data-fmt="wide"] .sc-text { font-size:7.5px; line-height:1.55; }
  .share-preview-frame[data-fmt="wide"] .sc-eyebrow { margin-bottom:4px; }
  .share-preview-frame[data-fmt="wide"] .sc-rule { margin-bottom:4px; }
  .share-preview-frame[data-fmt="wide"] .sc-tarot-art { position:relative; top:auto; right:auto; transform:none; flex-shrink:0; width:36px; height:58px; }
  .share-preview-frame[data-fmt="square"] .sc-body.has-tarot,
  .share-preview-frame[data-fmt="stories"] .sc-body.has-tarot { padding-right:58px; }
  .sc-tarot-art { position:absolute; right:14px; top:50%; transform:translateY(-52%); width:44px; height:72px; border:1px solid rgba(232,201,122,0.22); border-radius:4px; background:linear-gradient(145deg,rgba(201,146,58,0.15),rgba(13,12,20,0.9)); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:8; pointer-events:none; }
  .sc-tarot-art::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,201,122,0.5),transparent); }
  .share-preview-frame.brief-longform { height:auto !important; min-height:280px; }
  .sc-section-rule { width:100%; height:1px; background:linear-gradient(90deg,rgba(232,201,122,0.06),rgba(232,201,122,0.14),rgba(232,201,122,0.06)); margin:8px 0; position:relative; z-index:5; }
  .sc-section-label { font-family:'DM Sans',sans-serif; font-size:6px; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--amber); opacity:0.6; margin-bottom:5px; position:relative; z-index:5; }
  .sc-longform-para { font-family:'DM Sans',sans-serif; font-weight:300; font-size:9px; line-height:1.78; color:rgba(168,152,128,0.9); margin-bottom:8px; position:relative; z-index:5; }
  .sc-longform-quote { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:11px; font-weight:300; color:rgba(232,220,200,0.75); line-height:1.6; padding-left:9px; border-left:1px solid rgba(232,201,122,0.3); position:relative; z-index:5; margin:2px 0 6px; }
  #share-caption-panel { display:none; margin-bottom:1rem; }
  #share-caption-panel.visible { display:block; }
  .caption-panel-inner { background:rgba(255,255,255,0.03); border:1px solid rgba(232,201,122,0.09); border-radius:12px; padding:13px 15px; }
  .caption-panel-label { font-family:'DM Sans',sans-serif; font-size:7px; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--amber); opacity:0.7; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
  .caption-copy-btn { background:rgba(201,146,58,0.1); border:1px solid rgba(232,201,122,0.2); border-radius:8px; padding:3px 9px; font-family:'DM Sans',sans-serif; font-size:7px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); cursor:pointer; transition:all 0.2s; }
  .caption-copy-btn:hover { background:rgba(201,146,58,0.18); }
  .caption-text-preview { font-family:'DM Sans',sans-serif; font-weight:300; font-size:10px; line-height:1.72; color:var(--secondary); max-height:90px; overflow:hidden; position:relative; white-space:pre-wrap; }
  .caption-text-preview::after { content:''; position:absolute; bottom:0; left:0; right:0; height:28px; background:linear-gradient(0deg,rgba(18,25,46,0.98),transparent); pointer-events:none; }
  .share-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:0.25rem; }
  .share-action-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(232,201,122,0.15); color:var(--text-secondary); font-family:'DM Sans',sans-serif; font-size:0.62rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; padding:12px; border-radius:10px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:6px; }
  .share-action-btn:hover { background:rgba(201,146,58,0.1); border-color:rgba(232,201,122,0.3); color:var(--gold); }
  .share-action-btn.primary { grid-column:1/-1; background:linear-gradient(135deg,rgba(201,146,58,0.18),rgba(201,146,58,0.08)); border-color:rgba(232,201,122,0.3); color:var(--gold); font-size:0.65rem; padding:13px; }
  .share-action-btn.primary:hover { background:linear-gradient(135deg,rgba(201,146,58,0.28),rgba(201,146,58,0.14)); border-color:rgba(232,201,122,0.5); }
</style>