:root{--bg:#0f0f11;--surface:#161619;--surface2:#202024;--border:#303036;--text:#f4f4f6;--muted:#a7a7b0;--accent:#ffffff;--accentText:#111114;--header-bg:#09090b;--header-border:#2a2a2f;--header-control:#202024;--header-control-border:#777780;--header-text:#f4f4f6;--danger:#ff6b6b;--max:1540px;--radius:22px}
html[data-theme=midnight]{--bg:#0f0f11;--surface:#161619;--surface2:#202024;--border:#303036;--text:#f4f4f6;--muted:#a7a7b0;--accent:#ffffff;--accentText:#111114;--header-bg:#09090b;--header-border:#2a2a2f;--header-control:#202024;--header-control-border:#777780;--header-text:#f4f4f6}
html[data-theme=light]{--bg:#f5f5f3;--surface:#fff;--surface2:#ececea;--border:#d8d8d4;--text:#171719;--muted:#68686f;--accent:#171719;--accentText:#fff;--header-bg:#09090b;--header-border:#2a2a2f;--header-control:#202024;--header-control-border:#777780;--header-text:#f4f4f6}
html[data-theme=blue]{--bg:#07111e;--surface:#0d1b2d;--surface2:#14263d;--border:#233a56;--text:#edf5ff;--muted:#9db0c6;--accent:#cce4ff;--accentText:#07111e;--header-bg:#0b2341;--header-border:#1d4674;--header-control:#12345a;--header-control-border:#4f79a9;--header-text:#f5f9ff}
html[data-theme=ocean]{--bg:#06151b;--surface:#0b222c;--surface2:#11333f;--border:#205464;--text:#eefcff;--muted:#9bc5cf;--accent:#c9f6ff;--accentText:#06222c;--header-bg:#07566c;--header-border:#0d718b;--header-control:#0b667d;--header-control-border:#63b6c8;--header-text:#ffffff}
html[data-theme=burgundy]{--bg:#170b10;--surface:#251118;--surface2:#351821;--border:#4d2732;--text:#fff3f6;--muted:#c5a4ae;--accent:#ffd7e2;--accentText:#250b13;--header-bg:#4a1424;--header-border:#6b263a;--header-control:#5b1a2d;--header-control-border:#9a5368;--header-text:#fff7f9}
html[data-theme=forest]{--bg:#08120d;--surface:#102019;--surface2:#173025;--border:#294a38;--text:#effaf2;--muted:#a6c0ad;--accent:#d8f5df;--accentText:#0b1a10;--header-bg:#123a28;--header-border:#265a42;--header-control:#194b35;--header-control-border:#5d8f73;--header-text:#f8fff9}
html[data-theme=purple]{--bg:#120c1c;--surface:#1c132a;--surface2:#2a1c3d;--border:#493261;--text:#fbf7ff;--muted:#c0afd0;--accent:#eadbff;--accentText:#1a0c2b;--header-bg:#3a1f5d;--header-border:#58357d;--header-control:#4a2a70;--header-control-border:#8d6cab;--header-text:#ffffff}
html[data-theme=teal]{--bg:#071614;--surface:#0e2420;--surface2:#15342e;--border:#28564d;--text:#effcf8;--muted:#a5c8bf;--accent:#d2f6ed;--accentText:#071713;--header-bg:#0d4b43;--header-border:#24675d;--header-control:#145b52;--header-control-border:#65a89d;--header-text:#ffffff}
html[data-theme=slate]{--bg:#101318;--surface:#181d24;--surface2:#232a34;--border:#38414e;--text:#f4f7fb;--muted:#aab3bf;--accent:#e5edf7;--accentText:#11161d;--header-bg:#273241;--header-border:#3d4b5d;--header-control:#303d4d;--header-control-border:#718095;--header-text:#ffffff}
html[data-theme=cobalt]{--bg:#071225;--surface:#0d1d38;--surface2:#142a4d;--border:#274a78;--text:#f2f7ff;--muted:#a7bad5;--accent:#d9e8ff;--accentText:#071225;--header-bg:#123f7a;--header-border:#2c5f9e;--header-control:#194d8d;--header-control-border:#7aa4d4;--header-text:#ffffff}
html[data-theme=sunset]{--bg:#1b0f0b;--surface:#2a1711;--surface2:#3b2118;--border:#67402f;--text:#fff7f1;--muted:#d5b7a7;--accent:#ffe2cf;--accentText:#2a120a;--header-bg:#8a3f22;--header-border:#ad5d38;--header-control:#9d4c2a;--header-control-border:#d59a7a;--header-text:#ffffff}
html[data-theme=plum]{--bg:#180d18;--surface:#271427;--surface2:#381d38;--border:#5a345a;--text:#fff5ff;--muted:#ceb1ce;--accent:#f7d9f7;--accentText:#251025;--header-bg:#633060;--header-border:#83477f;--header-control:#743b70;--header-control-border:#b07aac;--header-text:#ffffff}
html[data-theme=rose]{--bg:#1a0f13;--surface:#29171e;--surface2:#3a202a;--border:#65404d;--text:#fff6f8;--muted:#d2b4bd;--accent:#ffe0e8;--accentText:#2a1119;--header-bg:#7a3049;--header-border:#9a4a64;--header-control:#8b3b55;--header-control-border:#c77f96;--header-text:#ffffff}
@media(prefers-color-scheme:light){html[data-theme=system]{--bg:#f5f5f3;--surface:#fff;--surface2:#ececea;--border:#d8d8d4;--text:#171719;--muted:#68686f;--accent:#171719;--accentText:#fff;--header-bg:#09090b;--header-border:#2a2a2f;--header-control:#202024;--header-control-border:#777780;--header-text:#f4f4f6}}
@media(prefers-color-scheme:dark){html[data-theme=system]{--bg:#0f0f11;--surface:#161619;--surface2:#202024;--border:#303036;--text:#f4f4f6;--muted:#a7a7b0;--accent:#ffffff;--accentText:#111114;--header-bg:#09090b;--header-border:#2a2a2f;--header-control:#202024;--header-control-border:#777780;--header-text:#f4f4f6}}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}.topbar{height:160px;position:sticky;top:0;z-index:50;background:var(--header-bg);color:var(--header-text);backdrop-filter:blur(16px);border-bottom:1px solid var(--header-border);display:grid;grid-template-columns:460px minmax(260px,420px) 1fr;align-items:center;gap:30px;padding:0 34px}.brand{display:flex;align-items:center;height:100%}.brand img{display:block;width:auto;height:116px;max-width:374px;object-fit:contain}.search input{width:100%;border:1px solid transparent;background:var(--header-control);color:var(--header-text);padding:13px 16px;border-radius:15px;outline:none}.search input::placeholder{color:color-mix(in srgb,var(--header-text) 65%,transparent)}.search input:focus{border-color:var(--header-control-border)}.topnav{display:flex;justify-content:flex-end;gap:22px;align-items:center;font-size:.94rem;color:var(--header-text)}.topbar .button{background:var(--header-text);color:#111114}.topbar a{color:var(--header-text)}.accent{font-weight:700}.button,.secondary,.danger,button{border:0;cursor:pointer}.button{display:inline-flex;justify-content:center;align-items:center;background:var(--accent);color:var(--accentText);padding:11px 17px;border-radius:13px;font-weight:700}.button.small{padding:9px 14px}.button.full,.secondary.full{width:100%}.secondary{padding:11px 17px;border-radius:13px;background:var(--surface2);color:var(--text)}.danger{background:transparent;color:var(--danger);padding:10px 0}.messages{position:fixed;z-index:90;top:170px;right:24px;max-width:420px}.message{padding:13px 17px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;box-shadow:0 15px 50px #0005;margin-bottom:8px}.layout{max-width:var(--max);margin:30px auto 80px;padding:0 28px;display:grid;grid-template-columns:250px minmax(0,760px) 330px;gap:30px;justify-content:center}.sidebar,.rail{position:sticky;top:190px;align-self:start}.sidebar{display:flex;flex-direction:column;gap:4px}.sidebar h3{margin:10px 12px 12px}.sidebar a{padding:12px 14px;border-radius:13px;color:var(--muted)}.sidebar a.active,.sidebar a:hover{background:var(--surface2);color:var(--text);text-decoration:none}.sidebar select{margin:0 12px;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:11px;border-radius:12px}.feed-heading{margin:6px 0 22px}.feed-heading h1{font-size:2rem;margin:0}.feed-heading p{color:var(--muted);margin:7px 0}.post-card,.panel,.comments,.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.post-card{overflow:hidden;margin-bottom:24px}.post-meta{padding:22px 24px 0}.post-title{font-size:1.33rem;font-weight:800}.meta{color:var(--muted);font-size:.82rem;margin-top:6px}.post-body{padding:22px 24px;white-space:normal;line-height:1.72;font-size:1.04rem}.scripture{margin:0 24px 20px;border-left:3px solid var(--muted);padding:7px 12px;color:var(--muted);font-style:italic}.post-image{display:block;width:100%;max-height:850px;object-fit:cover;background:#000}.video-shell{position:relative;width:100%;aspect-ratio:4/5;max-height:min(78vh,950px);background:#000;display:flex;justify-content:center;align-items:center;overflow:hidden}.autoplay-video{width:100%;height:100%;object-fit:contain;background:#000}.sound-toggle{position:absolute;right:14px;bottom:14px;border-radius:999px;padding:8px 11px;background:#000a;color:white;font-size:.78rem}.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:90%;overflow-x:auto;scroll-snap-type:x mandatory;gap:4px;background:#000}.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:center}.post-actions{display:flex;align-items:center;gap:22px;padding:14px 20px;border-top:1px solid var(--border);font-size:.9rem}.post-actions button{background:transparent;color:var(--text);padding:5px}.heart-button{font-size:1.05rem}.heart-button.hearted{font-weight:800}.rail{display:flex;flex-direction:column;gap:20px}.panel{padding:22px}.panel h2,.panel h3{margin-top:0}.panel p{line-height:1.55}.muted{color:var(--muted)}.full{width:100%}.single-column{max-width:760px;margin:34px auto 80px;padding:0 20px}.comments{padding:24px}.comment-form textarea{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:13px;padding:12px}.comment{padding:18px 0;border-top:1px solid var(--border)}.reply{margin:16px 0 0 24px;padding:13px;border-left:2px solid var(--border)}.link-button{background:none;color:var(--muted);padding:0}.auth-card{width:100%;max-width:none;margin:0;padding:56px max(24px,calc((100vw - 520px)/2));background:transparent;border:0;border-radius:0;min-height:calc(100vh - 160px)}.auth-card form{width:100%;max-width:480px;margin:0 auto}.auth-card form,.form-card{display:flex;flex-direction:column;gap:15px}.auth-card label{display:flex;flex-direction:column;gap:7px}.auth-card input,.form-card input,.form-card textarea,.form-card select{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:11px}.auth-card ul,.form-card ul{color:var(--muted);font-size:.86rem}.qr{display:block;width:220px;height:220px;margin:20px auto;background:white;padding:8px}.or{text-align:center;color:var(--muted);margin:16px}.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.codes code{padding:9px;background:var(--surface2);border-radius:8px}.form-page,.studio{max-width:1160px;margin:40px auto 80px;padding:0 24px}.form-card{padding:24px}.form-card p{margin:0}.form-card label{display:block;font-weight:650;margin-bottom:7px}.helptext{display:block;color:var(--muted);font-size:.82rem;margin-top:5px}.form-actions{display:flex;align-items:center;gap:18px;margin-top:10px}.studio-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border);white-space:nowrap}th{color:var(--muted);font-size:.8rem;text-transform:uppercase}.moderation{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid var(--border)}.moderation form{display:flex;gap:8px;align-items:center}.moderation button{padding:8px 10px;border-radius:9px;background:var(--surface2);color:var(--text)}.empty{padding:35px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);text-align:center}footer{max-width:var(--max);margin:60px auto 0;padding:28px;display:flex;gap:22px;color:var(--muted);border-top:1px solid var(--border);font-size:.82rem}
@media(max-width:1180px){.layout{grid-template-columns:180px minmax(0,760px)}.rail{display:none}.topbar{height:145px;grid-template-columns:390px 1fr auto}.brand img{height:105px;max-width:340px}.sidebar,.rail{top:175px}.messages{top:155px}.topnav a:not(.button):not(.accent){display:none}}
@media(max-width:760px){.topbar{height:124px;padding:0 14px;grid-template-columns:minmax(220px,1fr) auto;gap:10px}.brand img{height:88px;max-width:238px}.search{display:none}.topnav{gap:10px}.topnav a{display:none!important}.topnav .accent,.topnav .button{display:inline-flex!important}.layout{display:block;margin:14px auto 75px;padding:0 10px}.sidebar{position:static;display:flex;flex-direction:row;overflow-x:auto;gap:7px;padding:3px 2px 15px}.sidebar h3,.sidebar select{display:none}.sidebar a{white-space:nowrap;border:1px solid var(--border);padding:8px 12px}.feed-heading{padding:0 6px}.post-card{border-radius:18px;margin-bottom:14px}.post-meta{padding:18px 16px 0}.post-body{padding:18px 16px;line-height:1.65}.scripture{margin:0 16px 18px}.video-shell{aspect-ratio:4/5;max-height:none}.post-actions{gap:14px;justify-content:space-between;padding:12px 13px}.single-column{margin:14px auto 70px;padding:0 10px}.comments{border-radius:18px}.auth-card{margin:0;padding:28px 16px;min-height:calc(100vh - 124px)}.form-page,.studio{margin:24px auto 70px;padding:0 12px}.studio-head{align-items:flex-start}.moderation{display:block}.moderation form{flex-wrap:wrap}.messages{top:134px;left:12px;right:12px}.codes{grid-template-columns:1fr}footer{padding:22px 16px;flex-wrap:wrap}}
.comment-tools{display:flex;gap:12px;align-items:center;font-size:.82rem}.reply-box{margin-top:12px;color:var(--muted)}.reply-box form{margin-top:10px}.reply-box textarea{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:11px;padding:10px}
html[data-text-size=large]{font-size:18px}html[data-text-size=xlarge]{font-size:20px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.sidebar #text-size-picker{margin-top:8px}

/* V7 interaction, rails, mobile appearance and editor */
.mobile-appearance{display:none}.side-section{display:flex;flex-direction:column;gap:4px}.appearance-section{order:0}.discover-section{margin-top:340px}.sidebar,.rail{position:relative;top:auto;align-self:start;min-height:1320px}.rail{gap:0}.rail-popular{margin-top:330px}.rail-notifications{margin-top:330px}.heart-button{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;line-height:1}.heart-icon{display:inline-flex;width:28px;height:28px;transform-origin:center}.heart-icon svg{width:28px;height:28px;overflow:visible}.heart-icon path{fill:transparent;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:fill .18s ease,stroke .18s ease}.heart-button.hearted .heart-icon path{fill:#ff3040;stroke:#ff3040}.heart-button.hearted{color:var(--text)}.heart-button.heart-pump .heart-icon{animation:ep-heart-pump .5s cubic-bezier(.2,.8,.2,1)}@keyframes ep-heart-pump{0%{transform:scale(1)}35%{transform:scale(1.38)}58%{transform:scale(.92)}78%{transform:scale(1.12)}100%{transform:scale(1)}}
.rich-post-body p:first-child{margin-top:0}.rich-post-body p:last-child{margin-bottom:0}.rich-post-body h2,.rich-post-body h3{line-height:1.25}.rich-post-body blockquote{margin:1.2em 0;padding:.2em 1em;border-left:3px solid var(--muted);color:var(--muted)}.rich-post-body a{text-decoration:underline}.editor-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:20px}.editor-heading h1{margin:.15rem 0 0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--muted);font-weight:800}.editor-form{display:block}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.editor-main{min-width:0}.editor-settings{align-self:start;position:sticky;top:184px}.rich-editor-field{margin:18px 0}.editor-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--surface2);border:1px solid var(--border);border-bottom:0;border-radius:13px 13px 0 0}.editor-toolbar button{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:7px 10px;border-radius:8px}.rich-editor{min-height:360px;padding:18px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:0 0 13px 13px;line-height:1.7;outline:none}.rich-editor:focus{border-color:var(--header-control-border)}.hidden-body-field{display:none}.media-editor{margin-top:28px;padding-top:10px;border-top:1px solid var(--border)}.gallery-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:10px;margin:10px 0 18px}.gallery-preview-item{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}.gallery-preview-item img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.gallery-preview-item span{display:block;padding:7px;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.editor-settings p{margin:0 0 16px}.editor-settings input[type=checkbox]{width:auto;margin-right:7px}
@media(max-width:1180px){.sidebar{min-height:1100px}.discover-section{margin-top:260px}.rail{display:none}.editor-grid{grid-template-columns:minmax(0,1fr) 290px}}
@media(max-width:760px){.mobile-appearance{display:flex;align-items:center;gap:10px;padding:10px 12px 4px;max-width:760px;margin:0 auto}.mobile-appearance label{font-size:.8rem;font-weight:800;color:var(--muted)}.mobile-appearance select{flex:1;min-width:0;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:9px 10px;border-radius:11px}.sidebar{min-height:0}.appearance-section{display:none}.discover-section{margin-top:0;display:flex;flex-direction:row;gap:7px}.discover-section h3{display:none}.editor-heading{align-items:flex-start;flex-direction:column}.editor-grid{display:block}.editor-settings{position:static;margin-top:22px}.rich-editor{min-height:300px}.editor-toolbar{position:sticky;top:124px;z-index:12}.post-actions{justify-content:flex-start}.post-actions .share-button{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.heart-button.heart-pump .heart-icon{animation:none}}


/* V8 split authentication pages */
.auth-split{min-height:calc(100vh - 160px);display:grid;grid-template-columns:minmax(420px,1fr) 1px minmax(480px,1.08fr);background:var(--bg)}
.auth-form-pane{display:flex;align-items:center;justify-content:center;padding:58px 56px}
.auth-form-inner{width:100%;max-width:470px}
.auth-form-inner h1{font-size:clamp(2rem,3vw,3rem);margin:0 0 10px}
.auth-intro{color:var(--muted);line-height:1.65;margin:0 0 28px}
.auth-form-inner form{display:flex;flex-direction:column;gap:15px}
.auth-form-inner label{display:flex;flex-direction:column;gap:7px;font-weight:650}
.auth-form-inner input{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px}
.auth-form-inner ul{color:var(--muted);font-size:.86rem}
.auth-divider{background:linear-gradient(180deg,transparent 3%,var(--border) 16%,var(--border) 84%,transparent 97%)}
.auth-visual{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:100%;padding:64px;background:#090b12;isolation:isolate}
.auth-visual::before,.auth-visual::after{content:"";position:absolute;inset:auto;z-index:-2;border-radius:999px;filter:blur(2px)}
.auth-visual::before{width:min(52vw,760px);height:min(52vw,760px);right:-18%;top:-22%;background:radial-gradient(circle at 36% 34%,color-mix(in srgb,var(--accent) 88%,white 12%) 0 4%,color-mix(in srgb,var(--accent) 66%,transparent) 15%,transparent 62%)}
.auth-visual::after{width:min(48vw,690px);height:min(48vw,690px);left:-24%;bottom:-34%;background:radial-gradient(circle at 58% 42%,color-mix(in srgb,var(--header-bg) 72%,white 28%) 0 3%,color-mix(in srgb,var(--header-bg) 70%,transparent) 17%,transparent 64%)}
.auth-visual-glow{position:absolute;inset:0;z-index:-3;background:linear-gradient(145deg,#06070a 0%,color-mix(in srgb,var(--header-bg) 75%,#08090d) 56%,#050608 100%)}
.auth-visual-glow::before{content:"";position:absolute;width:72%;height:58%;left:17%;top:15%;border:1px solid color-mix(in srgb,var(--header-text) 22%,transparent);border-radius:48% 52% 55% 45% / 42% 38% 62% 58%;transform:rotate(-14deg);box-shadow:0 0 90px color-mix(in srgb,var(--accent) 22%,transparent)}
.auth-visual-glow::after{content:"EP";position:absolute;right:7%;top:2%;font-size:clamp(11rem,24vw,27rem);font-weight:900;line-height:1;letter-spacing:-.09em;color:color-mix(in srgb,var(--header-text) 4%,transparent);user-select:none}
.auth-visual-copy{max-width:660px;padding:26px 0;color:#fff;text-shadow:0 3px 24px #0009}
.auth-kicker{display:inline-block;font-size:.76rem;letter-spacing:.24em;font-weight:800;margin-bottom:18px;color:#ffffffb8}
.auth-visual h2{font-size:clamp(2.7rem,5vw,5.5rem);line-height:.98;letter-spacing:-.055em;margin:0 0 20px;max-width:650px}
.auth-visual h2 span{font-weight:300;opacity:.6}
.auth-visual p{font-size:clamp(1rem,1.4vw,1.28rem);line-height:1.55;max-width:540px;color:#ffffffe0;margin:0}
.auth-visual-join::before{right:-10%;top:-17%}.auth-visual-login::after{left:-18%;bottom:-28%}

@media(max-width:900px){.auth-split{min-height:calc(100vh - 124px);display:block}.auth-form-pane{padding:34px 18px 42px}.auth-divider{display:none}.auth-visual{display:none}}

/* V9 layout refinements */
@media(min-width:761px){
  .sidebar,.rail{min-height:0;position:sticky;top:190px}
  .discover-section{margin-top:18px}
  .rail{gap:20px}
  .rail-popular,.rail-notifications{margin-top:0}
  .video-shell{aspect-ratio:4/5;max-height:none}
  .autoplay-video{object-fit:contain}
}

.multi-image-uploader{padding:18px;border:1px dashed var(--border);border-radius:14px;background:var(--surface2);margin-bottom:18px}
.multi-image-uploader>label{font-size:1rem;font-weight:800;margin-bottom:10px}
.multi-image-uploader input[type=file]{display:block;width:100%;padding:13px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text)}
.gallery-preview-footer{display:flex;align-items:center;gap:7px;padding:7px}
.gallery-preview-footer span{flex:1;padding:0;min-width:0}
.gallery-preview-remove{padding:6px 8px;border-radius:8px;background:var(--surface);color:var(--text);border:1px solid var(--border);font-size:.72rem}
.existing-gallery-editor{margin:14px 0 20px}
.existing-gallery-editor h3{font-size:.95rem;margin:0 0 10px}
.existing-gallery-item{cursor:pointer}
.existing-gallery-item span{white-space:normal}

@media(min-width:901px){
  .auth-visual{align-items:center;justify-content:center;text-align:center;padding:64px}
  .auth-visual-copy{margin:auto;display:flex;flex-direction:column;align-items:center}
  .auth-visual h2,.auth-visual p{margin-left:auto;margin-right:auto}
}

/* V9 video sizing fix - no side bars */
.post-video,
.post-card video,
.feed-video {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
    display: block;
    background: transparent !important;
}

.post-media:has(video),
.video-wrap:has(video) {
    aspect-ratio: auto !important;
    height: auto !important;
    background: transparent !important;
}

/* Restore true video proportions */
.video-shell {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    background: transparent !important;
    display: block !important;
    overflow: visible !important;
}

.autoplay-video {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    display: block !important;
}

/* Video zoom-out fix — show the complete original frame */
.video-shell {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: #000 !important;
}

.video-shell video,
.autoplay-video,
.post-card video {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    scale: none !important;
}

/* Desktop video — smaller, centred, full frame */
@media (min-width: 900px) {
    .video-shell {
        width: 72% !important;
        max-width: 520px !important;
        height: auto !important;
        aspect-ratio: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .video-shell video,
    .autoplay-video {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        display: block !important;
    }
}

/* Mobile — use available screen width */
@media (max-width: 899px) {
    .video-shell {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }

    .video-shell video,
    .autoplay-video {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* Desktop video layout — smaller post/media area, no white space around video */
@media (min-width: 900px) {

    .post-card:has(.video-shell) .post-media,
    .post-card:has(.autoplay-video) .post-media,
    .video-shell {
        width: 78% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        background: transparent !important;
        aspect-ratio: auto !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .video-shell video,
    .autoplay-video,
    .post-card video {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        background: #000 !important;
    }
}

/* Desktop video posts: make the whole post narrower, not just the video */
@media (min-width: 900px) {

    .post-card:has(video) {
        width: 78% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .post-card:has(video) .post-media,
    .post-card:has(video) .video-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .post-card:has(video) video,
    .video-shell video,
    .autoplay-video {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Align Latest heading with desktop video post width */
@media (min-width: 900px) {
    .feed-header,
    .page-heading,
    .feed-title {
        width: 78% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Align Latest / Poetry / Reflections / Images / Video with video posts */
@media (min-width: 900px) {

    .feed-tabs,
    .feed-filters,
    .discover-tabs,
    .content-tabs,
    .post-filters {
        width: 78% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Align feed heading with narrowed desktop video post */
@media (min-width: 900px) {
    .feed-heading {
        width: 78% !important;
        max-width: 560px !important;
        margin: 6px auto 22px !important;
        padding: 0 !important;
    }
}

/* Make every feed post align to the same centred desktop width */
@media (min-width: 900px) {

    .post-card {
        width: 78% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .feed-heading {
        width: 78% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Prevent post text from overflowing the card */
.post-card,
.post-card .post-body,
.post-card .post-content,
.post-card p,
.post-card div {
    max-width: 100%;
}

.post-card .post-body,
.post-card .post-content,
.post-card p {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* Compact social share menu */
.share-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.share-popover {
    position: absolute;
    z-index: 100;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 7px;
    border-radius: 12px;
    background: var(--panel, #16111f);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.share-popover[hidden] {
    display: none !important;
}

.share-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.share-instagram {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    color: #fff;
}

.share-facebook {
    background: #1877f2;
    color: #fff;
}

.share-x {
    background: #000;
    color: #fff;
}

.share-copy {
    background: rgba(127,127,127,.18);
    color: inherit;
}

@media (max-width: 899px) {
    .share-popover {
        gap: 5px;
        padding: 6px;
    }

    .share-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 15px;
    }
}

/* Refined coloured social share icons */
.share-popover {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.share-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    padding: 5px;
    border: 0;
}

.share-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.share-instagram {
    background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045) !important;
    color: #fff !important;
}

.share-facebook {
    background: #1877f2 !important;
    color: #fff !important;
}

.share-x {
    background: #111 !important;
    color: #fff !important;
}

.share-copy {
    background: #ececec !important;
    color: #333 !important;
}

/* Remove Instagram white surround */
.share-popover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
}

.share-icon {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.share-instagram {
    background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Multiple post images - vertical stack */
.post-card .gallery {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    gap: 0 !important;
    overflow: visible !important;
    background: transparent;
    scroll-snap-type: none !important;
}

.post-card .gallery img {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0;
    scroll-snap-align: none !important;
}

/* Post detail: post left, comments right */
@media (min-width: 900px) {
    .single-column {
        max-width: 1200px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 380px !important;
        gap: 28px !important;
        align-items: start !important;
    }

    .single-column > .post-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .single-column > .comments {
        width: 100% !important;
        margin: 0 !important;
        position: sticky;
        top: 185px;
    }
}

@media (max-width: 899px) {
    .single-column {
        display: block !important;
    }

    .single-column > .comments {
        margin-top: 18px !important;
        position: static !important;
    }
}

/* Larger comments area on post page */
@media (min-width: 900px) {
    .single-column {
        max-width: 1450px !important;
        grid-template-columns: minmax(0, 3fr) minmax(450px, 2fr) !important;
        gap: 32px !important;
    }

    .single-column > .comments {
        padding: 30px !important;
    }

    .single-column .comment-form textarea {
        width: 100% !important;
        min-height: 300px !important;
        resize: vertical;
        font-size: 1rem;
        line-height: 1.6;
    }

    .single-column .comment-form .button {
        width: 100%;
        margin-top: 12px;
    }
}

/* Large full-height comments panel beside post */
@media (min-width: 900px) {
    .single-column {
        max-width: 1500px !important;
        width: calc(100% - 40px) !important;
        grid-template-columns: minmax(0, 55%) minmax(0, 45%) !important;
        gap: 30px !important;
        align-items: start !important;
    }

    .single-column > .comments {
        width: 100% !important;
        min-height: calc(100vh - 210px) !important;
        padding: 32px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .single-column .comment-form {
        width: 100% !important;
    }

    .single-column .comment-form textarea {
        display: block !important;
        width: 100% !important;
        min-height: 450px !important;
        resize: vertical !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .single-column .comment-form .button {
        width: 100% !important;
        margin-top: 14px !important;
    }

    .single-column .comment-list {
        width: 100% !important;
        margin-top: 25px !important;
    }
}

/* Mobile media viewport fit — show complete image/video frame */
@media (max-width: 899px) {

    .post-card .post-image {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .post-card .video-shell {
        width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
        aspect-ratio: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .post-card .video-shell video,
    .post-card .autoplay-video {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }
}

/* Mobile Instagram-style media sizing */
@media (max-width: 899px) {

    .post-card .post-image {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 68vh !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        background: transparent !important;
    }

    .post-card .video-shell {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .post-card .video-shell video,
    .post-card .autoplay-video {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 68vh !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        background: transparent !important;
    }
}

/* Mobile media — Instagram-style full-width natural aspect ratio */
@media (max-width: 899px) {

    .post-card .post-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .post-card .video-shell {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    .post-card .video-shell video,
    .post-card .autoplay-video {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
}

/* FINAL: Instagram-style mobile feed media */
@media (max-width: 899px) {

    /* Images in the main feed */
    .layout .post-card .post-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Video frame in the main feed */
    .layout .post-card .video-shell {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    /* Video itself */
    .layout .post-card .video-shell video,
    .layout .post-card .autoplay-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 4 / 5 !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Gallery images */
    .layout .post-card .gallery img {
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Individual post page: show original media proportions */
    .single-column .post-card .post-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }

    .single-column .post-card .video-shell {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
    }

    .single-column .post-card .video-shell video,
    .single-column .post-card .autoplay-video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }
}

/* FINAL: Instagram-style desktop feed media */
@media (min-width: 900px) {

    /* Keep feed posts compact and centred */
    .layout .post-card {
        width: 78% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Feed images */
    .layout .post-card .post-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
    }

    /* Feed video frame */
    .layout .post-card .video-shell {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    /* Feed video */
    .layout .post-card .video-shell video,
    .layout .post-card .autoplay-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 4 / 5 !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Gallery images */
    .layout .post-card .gallery img {
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Individual post page: preserve original media proportions */
    .single-column .post-card {
        width: 100% !important;
        max-width: 760px !important;
    }

    .single-column .post-card .post-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }

    .single-column .post-card .video-shell {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .single-column .post-card .video-shell video,
    .single-column .post-card .autoplay-video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }
}

/* FINAL: desktop zoomed-out layout with anchored side rails */
@media (min-width: 1181px) {

    /* Approximate browser zoom-out appearance */
    html {
        font-size: 14px;
    }

    /* Smaller desktop header */
    .topbar {
        height: 128px !important;
        grid-template-columns: 368px minmax(240px, 340px) 1fr !important;
        gap: 24px !important;
        padding: 0 36px !important;
    }

    .brand img {
        height: 93px !important;
        max-width: 300px !important;
    }

    .topnav {
        gap: 18px !important;
        font-size: .9rem !important;
    }

    .search input {
        padding: 10px 13px !important;
        border-radius: 12px !important;
    }

    /*
       Full-width three-column desktop layout.

       LEFT RAIL        CENTRE FEED        RIGHT RAIL
       stays left         centred          stays right
    */
    .layout {
        width: 100% !important;
        max-width: none !important;
        margin: 24px auto 70px !important;
        padding: 0 36px !important;

        display: grid !important;
        grid-template-columns:
            minmax(200px, 1fr)
            minmax(0, 608px)
            minmax(240px, 1fr) !important;

        column-gap: 28px !important;
        justify-content: stretch !important;
    }

    /* Discover / Appearance */
    .layout > .sidebar {
        width: 200px !important;
        max-width: 200px !important;
        justify-self: start !important;

        position: sticky !important;
        top: 152px !important;
        align-self: start !important;
    }

    /* Welcome / Popular / Email / signed-in panels */
    .layout > .rail {
        width: 264px !important;
        max-width: 264px !important;
        justify-self: end !important;

        position: sticky !important;
        top: 152px !important;
        align-self: start !important;
    }

    /* Keep the feed genuinely centred */
    .feed-heading {
        width: 100% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .layout .post-card {
        width: 100% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
    }

    /* Slightly more compact post UI */
    .post-meta {
        padding: 18px 20px 0 !important;
    }

    .post-body {
        padding: 18px 20px !important;
    }

    .post-actions {
        padding: 11px 16px !important;
    }

    .panel {
        padding: 18px !important;
    }

    /* Notifications follow smaller header */
    .messages {
        top: 138px !important;
    }
}

/* Desktop only — equivalent to one browser zoom-out step */
@media (min-width: 1181px) {
    body {
        zoom: 0.9;
        width: 111.111%;
    }
}

/* FINAL: wider balanced desktop side panels */
@media (min-width: 1181px) {

    /*
       Wide desktop layout:
       larger left panel | existing feed | larger right panel
    */
    .layout {
        width: 100% !important;
        max-width: none !important;
        padding-left: 44px !important;
        padding-right: 44px !important;

        grid-template-columns:
            300px
            minmax(0, 520px)
            300px !important;

        column-gap: clamp(40px, 6vw, 120px) !important;
        justify-content: space-between !important;
        align-items: start !important;
    }

    /* Appearance / Discover */
    .layout > .sidebar {
        width: 300px !important;
        max-width: 300px !important;
        justify-self: start !important;
    }

    /* Welcome / Popular / Email notifications */
    .layout > .rail {
        display: flex !important;
        width: 300px !important;
        max-width: 300px !important;
        justify-self: end !important;
        box-sizing: border-box !important;
    }

    /* Give the right-hand cards proper usable width */
    .layout > .rail .panel {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Keep centre feed at the size already approved */
    .layout > main,
    .layout > .feed {
        width: 100% !important;
        max-width: 520px !important;
        justify-self: center !important;
        min-width: 0 !important;
    }

    .feed-heading {
        width: 100% !important;
        max-width: 480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .layout .post-card {
        width: 100% !important;
        max-width: 480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* FINAL desktop sizing: 90% scale with fully visible larger side panels */
@media (min-width: 1181px) {

    body {
        zoom: 0.9 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .layout {
        width: calc(100vw / 0.9) !important;
        max-width: none !important;
        margin: 24px 0 70px !important;
        padding: 0 48px !important;

        display: grid !important;
        grid-template-columns:
            300px
            minmax(480px, 520px)
            300px !important;

        column-gap: clamp(45px, 6vw, 110px) !important;
        justify-content: space-between !important;
        align-items: start !important;
    }

    /* Left Appearance / Discover */
    .layout > .sidebar {
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
        justify-self: start !important;
    }

    /* Right Welcome / Popular / Email */
    .layout > .rail {
        display: flex !important;
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
        justify-self: end !important;
    }

    .layout > .rail .panel {
        width: 100% !important;
        max-width: none !important;
    }

    /* Keep centre post/media at the size you now like */
    .layout main,
    .layout .feed {
        width: 520px !important;
        max-width: 520px !important;
        min-width: 0 !important;
        justify-self: center !important;
    }

    .feed-heading,
    .layout .post-card {
        width: 480px !important;
        max-width: 480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* FINAL: larger desktop side panels */
@media (min-width: 1181px) {

    .layout {
        width: 100% !important;
        max-width: none !important;
        padding-left: 40px !important;
        padding-right: 40px !important;

        display: grid !important;
        grid-template-columns:
            minmax(320px, 1fr)
            520px
            minmax(320px, 1fr) !important;

        column-gap: 44px !important;
        justify-content: stretch !important;
        align-items: start !important;
    }

    /* Left: Appearance / Discover */
    .layout > .sidebar {
        width: 340px !important;
        max-width: 340px !important;
        justify-self: start !important;
    }

    /* Right: Welcome / Popular / Email */
    .layout > .rail {
        width: 340px !important;
        max-width: 340px !important;
        justify-self: end !important;
    }

    .layout > .rail .panel {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Keep centre feed the size you like */
    .layout > main,
    .layout > .feed {
        width: 520px !important;
        max-width: 520px !important;
        justify-self: center !important;
    }

    .feed-heading,
    .layout .post-card {
        width: 480px !important;
        max-width: 480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* FINAL: desktop side panels close to feed, white bordered cards */
@media (min-width: 1181px) {

    /* Remove the earlier wide-spread desktop positioning */
    .layout {
        width: 100% !important;
        max-width: 1320px !important;
        margin: 24px auto 70px !important;
        padding: 0 28px !important;

        display: grid !important;
        grid-template-columns:
            340px
            500px
            340px !important;

        column-gap: 30px !important;
        justify-content: center !important;
        align-items: start !important;
    }

    /* LEFT CARD: Appearance + Discover */
    .layout > .sidebar {
        width: 340px !important;
        max-width: 340px !important;
        justify-self: end !important;

        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 18px !important;
        padding: 22px !important;
        box-sizing: border-box !important;

        position: sticky !important;
        top: 152px !important;
    }

    /* CENTRE FEED */
    .layout > main,
    .layout > .feed {
        width: 500px !important;
        max-width: 500px !important;
        justify-self: center !important;
        min-width: 0 !important;
    }

    .feed-heading,
    .layout .post-card {
        width: 100% !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* RIGHT RAIL */
    .layout > .rail {
        width: 340px !important;
        max-width: 340px !important;
        justify-self: start !important;

        position: sticky !important;
        top: 152px !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Each right-side section becomes a white bordered card */
    .layout > .rail .panel {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;

        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 18px !important;
        padding: 22px !important;
        margin: 0 !important;
    }
}

/* FINAL: use desktop width without changing centre feed */
@media (min-width: 1181px) {

    .layout {
        width: 100% !important;
        max-width: 1500px !important;
        margin: 24px auto 70px !important;
        padding: 0 28px !important;

        display: grid !important;

        /* Side panels expand into unused desktop space */
        grid-template-columns:
            minmax(300px, 1fr)
            500px
            minmax(300px, 1fr) !important;

        column-gap: 30px !important;
        justify-content: stretch !important;
        align-items: start !important;
    }

    /* Left Appearance / Discover card */
    .layout > .sidebar {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;

        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,.12) !important;
        border-radius: 18px !important;
        padding: 22px !important;
        box-sizing: border-box !important;
    }

    /* Keep centre feed exactly compact */
    .layout > main,
    .layout > .feed {
        width: 500px !important;
        max-width: 500px !important;
        min-width: 0 !important;
        justify-self: center !important;
    }

    .feed-heading,
    .layout .post-card {
        width: 100% !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Right column now fills its available space too */
    .layout > .rail {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .layout > .rail .panel {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;

        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,.12) !important;
        border-radius: 18px !important;
        padding: 22px !important;
    }
}

/* FINAL: align desktop side panels closer to header/logo edges */
@media (min-width: 1181px) {

    .layout {
        width: 100% !important;
        max-width: none !important;
        margin: 24px auto 70px !important;

        /* Match the overall content closer to header/logo edges */
        padding-left: 38px !important;
        padding-right: 38px !important;

        display: grid !important;
        grid-template-columns:
            minmax(360px, 1fr)
            500px
            minmax(360px, 1fr) !important;

        column-gap: 30px !important;
        justify-content: stretch !important;
        align-items: start !important;
    }

    /* Left panel reaches much closer to logo edge */
    .layout > .sidebar {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    /* Keep posts at current size */
    .layout > main,
    .layout > .feed {
        width: 500px !important;
        max-width: 500px !important;
        justify-self: center !important;
    }

    .feed-heading,
    .layout .post-card {
        width: 100% !important;
        max-width: 500px !important;
    }

    /* Right panel mirrors the left */
    .layout > .rail {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    .layout > .rail .panel {
        width: 100% !important;
        max-width: none !important;
    }
}

/* FINAL: desktop side panels follow selected theme */
@media (min-width: 1181px) {

    /* Appearance / Discover */
    .layout > .sidebar {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--border) !important;
    }

    /* Welcome / Popular / Email notifications */
    .layout > .rail .panel {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--border) !important;
    }

    /* Make headings/text inherit the selected theme */
    .layout > .sidebar h1,
    .layout > .sidebar h2,
    .layout > .sidebar h3,
    .layout > .rail h1,
    .layout > .rail h2,
    .layout > .rail h3 {
        color: var(--text) !important;
    }
}

/* FINAL: desktop EP logo 20% larger */
@media (min-width: 1181px) {
    .brand img {
        height: 112px !important;
        max-width: 360px !important;
    }
}

/* Heart flutter animation - desktop and mobile */
.heart-button,
.heart-btn,
.like-button {
    position: relative !important;
    overflow: visible !important;
}

.heart-flutter-particle {
    position: absolute;
    left: 50%;
    top: 45%;
    z-index: 100;
    pointer-events: none;

    font-size: 18px;
    line-height: 1;
    color: #e53935;

    opacity: 0;
    transform:
        translate(-50%, -50%)
        translate(var(--heart-x, 0px), 0)
        scale(.65)
        rotate(0deg);

    animation: ep-heart-flutter
        var(--heart-duration, 1100ms)
        cubic-bezier(.15,.65,.25,1)
        forwards;

    animation-delay: var(--heart-delay, 0ms);
}

@keyframes ep-heart-flutter {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(0, 0)
            scale(.45)
            rotate(0deg);
    }

    12% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translate(calc(var(--heart-x, 0px) * .15), -8px)
            scale(1.05)
            rotate(calc(var(--heart-rotate, 0deg) * .2));
    }

    45% {
        opacity: .95;
        transform:
            translate(-50%, -50%)
            translate(calc(var(--heart-x, 0px) * .55), -42px)
            scale(.95)
            rotate(calc(var(--heart-rotate, 0deg) * .6));
    }

    75% {
        opacity: .6;
        transform:
            translate(-50%, -50%)
            translate(calc(var(--heart-x, 0px) * .85), -82px)
            scale(.8)
            rotate(var(--heart-rotate, 0deg));
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(var(--heart-x, 0px), -120px)
            scale(.5)
            rotate(var(--heart-rotate, 0deg));
    }
}

/* Slight pulse of the actual heart when tapped */
.heart-flutter-active {
    animation: ep-heart-button-pulse 380ms ease-out;
}

@keyframes ep-heart-button-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.28); }
    65%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .heart-flutter-particle {
        animation-duration: 1ms !important;
    }

    .heart-flutter-active {
        animation: none !important;
    }
}

/* FINAL: hearts grow larger as they flutter upward */
@keyframes ep-heart-flutter {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(0, 0)
            scale(.45)
            rotate(0deg);
    }

    12% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translate(calc(var(--heart-x, 0px) * .12), -10px)
            scale(.70)
            rotate(calc(var(--heart-rotate, 0deg) * .2));
    }

    35% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translate(calc(var(--heart-x, 0px) * .38), -42px)
            scale(1)
            rotate(calc(var(--heart-rotate, 0deg) * .45));
    }

    60% {
        opacity: .9;
        transform:
            translate(-50%, -50%)
            translate(calc(var(--heart-x, 0px) * .68), -82px)
            scale(1.35)
            rotate(calc(var(--heart-rotate, 0deg) * .7));
    }

    82% {
        opacity: .65;
        transform:
            translate(-50%, -50%)
            translate(calc(var(--heart-x, 0px) * .88), -115px)
            scale(1.65)
            rotate(calc(var(--heart-rotate, 0deg) * .9));
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(var(--heart-x, 0px), -145px)
            scale(1.9)
            rotate(var(--heart-rotate, 0deg));
    }
}

/* FINAL: larger growing hearts on phones */
@media (max-width: 760px) {

    .heart-flutter-particle {
        font-size: 24px !important;
        animation-name: ep-heart-flutter-mobile !important;
    }

    @keyframes ep-heart-flutter-mobile {

        0% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                translate(0, 0)
                scale(.45)
                rotate(0deg);
        }

        12% {
            opacity: 1;
            transform:
                translate(-50%, -50%)
                translate(calc(var(--heart-x, 0px) * .12), -10px)
                scale(.8)
                rotate(calc(var(--heart-rotate, 0deg) * .2));
        }

        35% {
            opacity: 1;
            transform:
                translate(-50%, -50%)
                translate(calc(var(--heart-x, 0px) * .38), -42px)
                scale(1.25)
                rotate(calc(var(--heart-rotate, 0deg) * .45));
        }

        60% {
            opacity: .9;
            transform:
                translate(-50%, -50%)
                translate(calc(var(--heart-x, 0px) * .68), -82px)
                scale(1.7)
                rotate(calc(var(--heart-rotate, 0deg) * .7));
        }

        82% {
            opacity: .65;
            transform:
                translate(-50%, -50%)
                translate(calc(var(--heart-x, 0px) * .88), -115px)
                scale(2.1)
                rotate(calc(var(--heart-rotate, 0deg) * .9));
        }

        100% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                translate(var(--heart-x, 0px), -150px)
                scale(2.5)
                rotate(var(--heart-rotate, 0deg));
        }
    }
}

/* FINAL: floating hearts use same rounded SVG shape as heart button */
.heart-flutter-particle {
    width: 22px !important;
    height: 22px !important;
    font-size: 0 !important;
}

.heart-flutter-particle svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

.heart-flutter-particle svg path {
    fill: currentColor !important;
}

/* Larger base size on mobile */
@media (max-width: 760px) {
    .heart-flutter-particle {
        width: 28px !important;
        height: 28px !important;
    }
}

/* FINAL: larger desktop MFA panel and header controls */
@media (min-width: 1181px) {

    /* Larger 2FA verification panel */
    .auth-card-mfa {
        width: calc(100% - 80px) !important;
        max-width: 900px !important;
        min-height: auto !important;

        margin: 42px auto 80px !important;
        padding: 50px 64px !important;

        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 22px !important;

        box-shadow: 0 16px 45px rgba(0,0,0,.08) !important;
    }

    .auth-card-mfa h1 {
        font-size: 2rem !important;
        margin-top: 0 !important;
        margin-bottom: 28px !important;
    }

    .auth-card-mfa form {
        width: 100% !important;
        max-width: none !important;
    }

    .auth-card-mfa input {
        font-size: 1.15rem !important;
        padding: 15px 17px !important;
    }

    .auth-card-mfa .button,
    .auth-card-mfa .secondary {
        min-height: 50px !important;
        font-size: 1rem !important;
    }


    /* Wider Search poems field */
    .topbar {
        grid-template-columns:
            420px
            minmax(390px, 470px)
            1fr !important;
    }

    .topbar .search {
        width: 100% !important;
        max-width: 470px !important;
    }

    .topbar .search input {
        width: 100% !important;
        min-height: 48px !important;
        padding: 13px 18px !important;
        font-size: 1rem !important;
        border-radius: 15px !important;
    }


    /* Larger Home / Saved / Account / Admin / Sign out navigation */
    .topnav {
        font-size: 1.06rem !important;
        gap: 25px !important;
    }

    .topnav > a:not(.button) {
        font-size: 1.06rem !important;
        font-weight: 600 !important;
        padding: 9px 3px !important;
    }

    .topnav .button {
        font-size: 1rem !important;
    }
}

/* Keep MFA page comfortable on phones */
@media (max-width: 760px) {

    .auth-card-mfa {
        width: calc(100% - 20px) !important;
        max-width: none !important;

        margin: 15px auto 55px !important;
        padding: 28px 20px !important;

        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 18px !important;
    }

    .auth-card-mfa form {
        width: 100% !important;
        max-width: none !important;
    }

    .auth-card-mfa input {
        min-height: 48px !important;
        font-size: 1.05rem !important;
    }
}

/* FINAL: MFA split-screen layout */
@media (min-width: 901px) {

    .auth-split-mfa {
        grid-template-columns:
            minmax(480px, 1.08fr)
            1px
            minmax(420px, 1fr) !important;
    }

    .auth-split-mfa .auth-form-pane {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 60px !important;
    }

    .auth-split-mfa .auth-mfa-inner {
        width: 100% !important;
        max-width: 570px !important;
        margin: 0 auto !important;
    }

    .auth-split-mfa .auth-mfa-inner h1 {
        margin: 0 0 12px !important;
        font-size: 2.25rem !important;
        line-height: 1.1 !important;
        letter-spacing: -.035em !important;
    }

    .auth-split-mfa .auth-intro {
        margin: 0 0 30px !important;
        color: var(--muted) !important;
        font-size: 1.05rem !important;
        line-height: 1.55 !important;
    }

    .auth-split-mfa .auth-mfa-inner form {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .auth-split-mfa .auth-mfa-inner label {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .auth-split-mfa .auth-mfa-inner input {
        width: 100% !important;
        min-height: 52px !important;
        padding: 13px 16px !important;
        border-radius: 13px !important;
        border: 1px solid var(--border) !important;
        background: var(--surface2) !important;
        color: var(--text) !important;
        font-size: 1.08rem !important;
    }

    .auth-split-mfa .auth-mfa-inner .button,
    .auth-split-mfa .auth-mfa-inner .secondary {
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    .auth-split-mfa .or {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        margin: 24px 0 !important;
    }

    .auth-split-mfa .or::before,
    .auth-split-mfa .or::after {
        content: "" !important;
        height: 1px !important;
        flex: 1 !important;
        background: var(--border) !important;
    }
}


/* Mobile MFA remains clean and full-width */
@media (max-width: 900px) {

    .auth-split-mfa .auth-form-pane {
        padding: 36px 20px 60px !important;
    }

    .auth-split-mfa .auth-mfa-inner {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    .auth-split-mfa .auth-mfa-inner h1 {
        font-size: 1.8rem !important;
        margin: 0 0 10px !important;
    }

    .auth-split-mfa .auth-intro {
        margin: 0 0 26px !important;
        color: var(--muted) !important;
        line-height: 1.5 !important;
    }

    .auth-split-mfa .auth-mfa-inner form {
        width: 100% !important;
        max-width: none !important;
    }

    .auth-split-mfa .auth-mfa-inner input {
        width: 100% !important;
        min-height: 50px !important;
    }
}

/* FINAL: MFA split screen with image */
@media (min-width: 901px) {

    .auth-split-mfa {
        min-height: calc(100vh - 160px) !important;
        display: grid !important;
        grid-template-columns: 1.05fr 1px 1fr !important;
    }

    .auth-visual-mfa {
        position: relative !important;
        display: flex !important;
        align-items: flex-end !important;
        min-height: 100% !important;

        padding: 64px !important;

        background:
            linear-gradient(
                180deg,
                rgba(5,8,16,.08) 20%,
                rgba(5,8,16,.72) 100%
            ),
            url("/static/assets/mfa-welcome.jpg") center center / cover no-repeat !important;
    }

    .auth-visual-mfa::before,
    .auth-visual-mfa::after {
        display: none !important;
    }

    .auth-visual-mfa .auth-visual-copy {
        position: relative !important;
        z-index: 2 !important;
        max-width: 620px !important;
        color: #fff !important;
    }

    .auth-form-pane-mfa {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 60px !important;
    }

    .auth-mfa-inner {
        width: 100% !important;
        max-width: 560px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        text-align: left !important;
    }

    .auth-mfa-inner h1 {
        width: 100% !important;
        margin: 0 0 12px !important;

        font-size: 2.25rem !important;
        line-height: 1.1 !important;
        text-align: left !important;
    }

    .auth-mfa-inner .auth-intro {
        margin: 0 0 30px !important;
        text-align: left !important;
    }

    .auth-mfa-inner form {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .auth-mfa-inner label {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .auth-mfa-inner input {
        width: 100% !important;
        min-height: 52px !important;

        padding: 13px 16px !important;

        border-radius: 13px !important;
        border: 1px solid var(--border) !important;

        background: var(--surface2) !important;
        color: var(--text) !important;
    }

    .auth-mfa-inner .button,
    .auth-mfa-inner .secondary {
        width: 100% !important;
        min-height: 52px !important;
    }
}


/* Mobile: image hidden, form full width */
@media (max-width: 900px) {

    .auth-visual-mfa {
        display: none !important;
    }

    .auth-form-pane-mfa {
        padding: 36px 20px 60px !important;
    }

    .auth-mfa-inner {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }
}


/* FINAL MFA layout - reuse exact login artwork */
@media (min-width: 901px) {

    .auth-split-mfa {
        min-height: calc(100vh - 160px) !important;

        display: grid !important;

        grid-template-columns:
            minmax(480px, 1.08fr)
            1px
            minmax(420px, 1fr) !important;
    }

    .auth-split-mfa .auth-visual {
        grid-column: 1 !important;
        display: flex !important;
        min-height: 100% !important;
    }

    .auth-split-mfa .auth-divider {
        grid-column: 2 !important;
    }

    .auth-split-mfa .auth-form-pane-mfa {
        grid-column: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 60px !important;
    }

    .auth-split-mfa .auth-mfa-inner {
        width: 100% !important;
        max-width: 560px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        text-align: left !important;
    }

    .auth-split-mfa .auth-mfa-inner h1 {
        margin: 0 0 12px !important;
        padding: 0 !important;

        font-size: 2.25rem !important;
        line-height: 1.1 !important;

        text-align: left !important;
    }

    .auth-split-mfa .auth-intro {
        margin: 0 0 30px !important;
        padding: 0 !important;

        color: var(--muted) !important;

        text-align: left !important;
    }

    .auth-split-mfa .auth-mfa-inner form {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .auth-split-mfa .auth-mfa-inner label {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .auth-split-mfa .auth-mfa-inner input {
        width: 100% !important;
        min-height: 52px !important;

        padding: 13px 16px !important;

        border: 1px solid var(--border) !important;
        border-radius: 13px !important;

        background: var(--surface2) !important;
        color: var(--text) !important;

        font-size: 1.08rem !important;
    }

    .auth-split-mfa .auth-mfa-inner .button,
    .auth-split-mfa .auth-mfa-inner .secondary {
        width: 100% !important;
        min-height: 52px !important;
    }

    .auth-split-mfa .or {
        margin: 24px 0 !important;
    }
}


/* Mobile - same behaviour as login */
@media (max-width: 900px) {

    .auth-split-mfa {
        display: block !important;
    }

    .auth-split-mfa .auth-visual {
        display: none !important;
    }

    .auth-split-mfa .auth-divider {
        display: none !important;
    }

    .auth-split-mfa .auth-form-pane-mfa {
        padding: 34px 18px 50px !important;
    }

    .auth-split-mfa .auth-mfa-inner {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

}

/* FINAL: make sign-in and MFA split panels fill full page height */
@media (min-width: 901px) {

    .auth-split {
        min-height: calc(100vh - 160px) !important;
        align-items: stretch !important;
    }

    .auth-form-pane,
    .auth-visual,
    .auth-divider {
        min-height: calc(100vh - 160px) !important;
        height: 100% !important;
    }

    .auth-visual {
        align-self: stretch !important;
    }

}

/* FINAL: remove gap beneath Sign in / MFA split screens */
@media (min-width: 901px) {

    main:has(> .auth-split) + footer {
        margin-top: 0 !important;
    }

}

/* FINAL AUTH HEIGHT FIX
   Desktop site is zoomed to 90%, so auth pages need 111.111vh
   to visually fill the viewport. */
@media (min-width: 1181px) {

    body:has(.auth-visual-login) .auth-split {
        min-height: calc(111.111vh - 160px) !important;
    }

    body:has(.auth-visual-login) .auth-form-pane,
    body:has(.auth-visual-login) .auth-visual,
    body:has(.auth-visual-login) .auth-divider {
        min-height: calc(111.111vh - 160px) !important;
    }

    body:has(.auth-visual-login) main + footer {
        margin-top: 0 !important;
    }

}

/* FINAL: footer follows selected theme */
footer {
    max-width: none !important;
    width: 100% !important;
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    border-top: 1px solid var(--header-border) !important;
}

footer a {
    color: var(--header-text) !important;
}

/* Light / White theme keeps footer black */
html[data-theme="light"] footer,
html[data-theme="system"] footer {
    background: #09090b !important;
    color: #f4f4f6 !important;
    border-top-color: #2a2a2f !important;
}

html[data-theme="light"] footer a,
html[data-theme="system"] footer a {
    color: #f4f4f6 !important;
}

/* Baby Blue theme */
html[data-theme="babyblue"] {
    --bg: #eaf7ff;
    --surface: #ffffff;
    --surface2: #d9f0ff;
    --border: #b8ddf5;
    --text: #153247;
    --muted: #617f92;

    --accent: #74c7f2;
    --accentText: #0b2a3d;

    --header-bg: #79c8ee;
    --header-border: #5db3dd;
    --header-control: #a7daf3;
    --header-control-border: #d9f1fc;
    --header-text: #102f43;
}

/* Baby Blue: Join button white border */
html[data-theme="babyblue"] .topbar .button {
    border: 1px solid #ffffff !important;
}


/* Baby Blue header controls - match other themes */
html[data-theme="babyblue"] {
    --header-text: #ffffff;
}


/* FINAL Baby Blue header - cleaner sky blue */
html[data-theme="babyblue"] {
    --header-bg: #49aef2;
    --header-border: #3599dc;
    --header-control: #8fd0f5;
    --header-control-border: #cbeaff;
    --header-text: #ffffff;
}


/* Baby Blue Black
   Baby Blue body with black header/footer */
html[data-theme="babyblueblack"] {
    --bg: #eaf7ff;
    --surface: #ffffff;
    --surface2: #d9f0ff;
    --border: #b8ddf5;
    --text: #153247;
    --muted: #617f92;

    --accent: #74c7f2;
    --accentText: #0b2a3d;

    --header-bg: #09090b;
    --header-border: #2a2a2f;
    --header-control: #202024;
    --header-control-border: #777780;
    --header-text: #ffffff;
}


/* Mobile header: show Sign in, hide Join */
@media (max-width: 899px) {
    .topnav a[href*="signup"],
    .topnav a[href*="join"] {
        display: none !important;
    }

    .topnav a[href*="login"] {
        display: inline-flex !important;
    }
}


/* Mobile Sign in button - white border */
@media (max-width: 899px) {
    .topnav a[href*="login"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #ffffff !important;
        border-radius: 8px !important;
        padding: 8px 14px !important;
        color: #ffffff !important;
        background: transparent !important;
    }
}


/* FINAL desktop zoom - one additional step out */
@media (min-width: 1181px) {
    body {
        zoom: 0.8 !important;
    }
}


/* Auth pages: compensate for 80% desktop body zoom */
@media (min-width: 1181px) {
    body:has(.auth-visual-login) .auth-split {
        min-height: calc(125vh - 160px) !important;
    }

    body:has(.auth-visual-login) .auth-form-pane,
    body:has(.auth-visual-login) .auth-visual,
    body:has(.auth-visual-login) .auth-divider {
        min-height: calc(125vh - 160px) !important;
    }

    body:has(.auth-visual-login) main + footer {
        margin-top: 0 !important;
    }
}


/* Desktop footer-gap fix for Saved + EP Admin Center only */
@media (min-width: 1181px) {

    body:has(.saved-page) main,
    body:has(.admin-center) main {
        min-height: calc(125vh - 220px) !important;
    }

    body:has(.saved-page) main + footer,
    body:has(.admin-center) main + footer {
        margin-top: 0 !important;
    }
}


/* FINAL: Saved + EP Admin Center footer fix at 80% desktop zoom */
@media (min-width: 1181px) {
    body.ep-footer-fill-page main {
        min-height: calc(125vh - 220px) !important;
    }

    body.ep-footer-fill-page main + footer {
        margin-top: 0 !important;
    }
}

/* FINAL: keep footer at true bottom on short desktop pages at 80% zoom */
@media (min-width: 1181px) {

    body.ep-footer-fill-page {
        min-height: 125vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.ep-footer-fill-page main {
        min-height: 0 !important;
        flex: 1 0 auto !important;
    }

    body.ep-footer-fill-page footer {
        margin-top: auto !important;
        flex-shrink: 0 !important;
    }
}


/* Mobile only: Discover > Text footer at bottom */
@media (max-width: 899px) {
    body.ep-mobile-text-page {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.ep-mobile-text-page main {
        flex: 1 0 auto !important;
        min-height: 0 !important;
    }

    body.ep-mobile-text-page footer {
        margin-top: auto !important;
        flex-shrink: 0 !important;
    }
}