/* DriftLine Social release 1.4.1 */
:root {
  color-scheme: dark;

  /* Layout */
  --rail: clamp(190px, 16vw, 270px);
  --top: 68px;
  --content-max: 860px;

  /* Typography */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: var(--font);

  /* Active skin defaults: Aero Glass */
  --skin-bg: #02080f;
  --skin-bg-alt: #030d1a;
  --skin-panel: rgba(16, 42, 68, .38);
  --skin-panel-deep: rgba(2, 10, 20, .82);
  --skin-panel-surface: rgba(50, 84, 118, .40);
  --skin-primary: #0099ff;
  --skin-primary-bright: #33bbff;
  --skin-primary-dim: #004c80;
  --skin-secondary: #00d9ff;
  --skin-text-primary: #eaf5ff;
  --skin-text-secondary: #7aaec4;
  --skin-text-muted: #3d6b80;
  --skin-success: #00ff7f;
  --skin-warning: #ffaa00;
  --skin-error: #ff2040;
  --skin-panel-radius: 14px;
  --skin-card-radius: 14px;
  --skin-button-radius: 10px;
  --skin-blur: 34px;
  --skin-glow-size: 22px;
  --skin-shadow-size: 18px;
  --skin-panel-border: rgba(51, 187, 255, .28);
  --skin-panel-highlight: rgba(255, 255, 255, .09);
  --skin-chrome: rgba(0, 0, 0, .88);
  --skin-input: rgba(2, 10, 20, .90);
  --skin-page-image:
    radial-gradient(circle at 82% 8%, rgba(0, 153, 255, .17), transparent 31%),
    radial-gradient(circle at 15% 82%, rgba(0, 217, 255, .08), transparent 35%),
    linear-gradient(145deg, #02080f 0%, #030d1a 52%, #02080f 100%);
  --skin-panel-image:
    linear-gradient(145deg, rgba(50, 84, 118, .24), rgba(2, 10, 20, .54)),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 44%);

  /* Existing component aliases now point to the one active skin. */
  --bg: var(--skin-bg);
  --bg-deep: var(--skin-bg);
  --surface: var(--skin-panel);
  --surface-soft: var(--skin-panel-surface);
  --line: var(--skin-panel-border);
  --line-strong: color-mix(in srgb, var(--skin-primary) 42%, transparent);
  --text: var(--skin-text-primary);
  --muted: var(--skin-text-secondary);
  --quiet: var(--skin-text-muted);
  --skin: var(--skin-primary);
  --skin-2: var(--skin-secondary);
  --skin-glow: color-mix(in srgb, var(--skin-primary) 18%, transparent);
  --danger: var(--skin-error);
  --success: var(--skin-success);

  font-family: var(--font);
}

/* One active skin pack at a time. */

html[data-skin="performance_red"] {
  --skin-bg: #050202;
  --skin-bg-alt: #120404;
  --skin-panel: rgba(18, 6, 6, .74);
  --skin-panel-deep: rgba(5, 1, 1, .90);
  --skin-panel-surface: rgba(59, 10, 10, .46);
  --skin-primary: #ff2a2a;
  --skin-primary-bright: #ff5a5a;
  --skin-primary-dim: #6e0505;
  --skin-secondary: #e8e8e8;
  --skin-text-primary: #f6f6f6;
  --skin-text-secondary: #c7b9b9;
  --skin-text-muted: #786868;
  --skin-success: #00e676;
  --skin-warning: #ffb000;
  --skin-error: #ff2a2a;
  --skin-panel-radius: 6px;
  --skin-card-radius: 6px;
  --skin-button-radius: 5px;
  --skin-blur: 8px;
  --skin-glow-size: 14px;
  --skin-panel-border: rgba(255, 42, 42, .38);
  --skin-panel-highlight: rgba(255, 90, 90, .09);
  --skin-chrome: rgba(5, 2, 2, .94);
  --skin-input: rgba(5, 1, 1, .92);
  --skin-page-image:
    radial-gradient(circle at 88% 8%, rgba(255, 42, 42, .18), transparent 30%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 7px),
    linear-gradient(145deg, #050202, #120404 55%, #050202);
  --skin-panel-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px),
    linear-gradient(145deg, rgba(59, 10, 10, .34), rgba(5, 1, 1, .88));
}

html[data-skin="modern_oem"] {
  --skin-bg: #070a0e;
  --skin-bg-alt: #10151c;
  --skin-panel: rgba(16, 24, 34, .72);
  --skin-panel-deep: rgba(11, 16, 23, .88);
  --skin-panel-surface: rgba(48, 58, 69, .40);
  --skin-primary: #c8d0d8;
  --skin-primary-bright: #f1f5f8;
  --skin-primary-dim: #68727c;
  --skin-secondary: #aeb7c0;
  --skin-text-primary: #f1f6fa;
  --skin-text-secondary: #aeb8c2;
  --skin-text-muted: #68727d;
  --skin-success: #58d68d;
  --skin-warning: #ffc857;
  --skin-error: #ff5c5c;
  --skin-panel-radius: 12px;
  --skin-card-radius: 10px;
  --skin-button-radius: 8px;
  --skin-blur: 8px;
  --skin-glow-size: 4px;
  --skin-panel-border: rgba(200, 208, 216, .23);
  --skin-panel-highlight: rgba(241, 245, 248, .07);
  --skin-chrome: rgba(7, 10, 14, .95);
  --skin-input: rgba(11, 16, 23, .93);
  --skin-page-image:
    radial-gradient(circle at 76% 4%, rgba(200, 208, 216, .08), transparent 29%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #070a0e, #10151c 55%, #070a0e);
  --skin-panel-image:
    linear-gradient(180deg, rgba(241,245,248,.045), transparent 34%),
    linear-gradient(145deg, rgba(48,58,69,.27), rgba(11,16,23,.80));
}

html[data-skin="cyberpunk"] {
  --skin-bg: #02030a;
  --skin-bg-alt: #080018;
  --skin-panel: rgba(4, 10, 32, .62);
  --skin-panel-deep: rgba(3, 5, 20, .86);
  --skin-panel-surface: rgba(0, 229, 255, .20);
  --skin-primary: #00e5ff;
  --skin-primary-bright: #69f5ff;
  --skin-primary-dim: #006c78;
  --skin-secondary: #ff2dff;
  --skin-text-primary: #e9fcff;
  --skin-text-secondary: #9bdde8;
  --skin-text-muted: #477e88;
  --skin-success: #00ffc8;
  --skin-warning: #ffd000;
  --skin-error: #ff2d7a;
  --skin-panel-radius: 4px;
  --skin-card-radius: 4px;
  --skin-button-radius: 4px;
  --skin-blur: 22px;
  --skin-glow-size: 18px;
  --skin-panel-border: rgba(0, 229, 255, .42);
  --skin-panel-highlight: rgba(255, 45, 255, .16);
  --skin-chrome: rgba(2, 3, 10, .91);
  --skin-input: rgba(3, 5, 20, .91);
  --skin-page-image:
    radial-gradient(circle at 84% 12%, rgba(255, 45, 255, .18), transparent 31%),
    radial-gradient(circle at 12% 82%, rgba(0, 229, 255, .16), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(0,229,255,.04) 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,45,255,.03) 40px),
    linear-gradient(145deg, #02030a, #080018 58%, #02030a);
  --skin-panel-image:
    linear-gradient(135deg, rgba(0,229,255,.09), transparent 34%),
    linear-gradient(315deg, rgba(255,45,255,.07), transparent 35%),
    linear-gradient(145deg, rgba(4,10,32,.84), rgba(3,5,20,.77));
}

html[data-skin="mini_hud"] {
  --skin-bg: #071016;
  --skin-bg-alt: #101a20;
  --skin-panel: rgba(51, 68, 77, .46);
  --skin-panel-deep: rgba(7, 16, 22, .78);
  --skin-panel-surface: rgba(58, 74, 82, .24);
  --skin-primary: #eaf5f8;
  --skin-primary-bright: #ffffff;
  --skin-primary-dim: #7f969e;
  --skin-secondary: #8fd9ff;
  --skin-text-primary: #f4fafc;
  --skin-text-secondary: #b8c8ce;
  --skin-text-muted: #74868d;
  --skin-success: #36e28f;
  --skin-warning: #ffc857;
  --skin-error: #ff5a6d;
  --skin-panel-radius: 8px;
  --skin-card-radius: 8px;
  --skin-button-radius: 6px;
  --skin-blur: 4px;
  --skin-glow-size: 4px;
  --skin-panel-border: rgba(143, 217, 255, .20);
  --skin-panel-highlight: rgba(255,255,255,.05);
  --skin-chrome: rgba(7, 16, 22, .94);
  --skin-input: rgba(7, 16, 22, .91);
  --skin-page-image:
    linear-gradient(180deg, rgba(143,217,255,.07), transparent 26%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(143,217,255,.015) 5px),
    linear-gradient(145deg, #071016, #101a20 58%, #071016);
  --skin-panel-image:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%),
    linear-gradient(145deg, rgba(51,68,77,.31), rgba(7,16,22,.70));
}

html[data-skin="retro_analog"] {
  --skin-bg: #080604;
  --skin-bg-alt: #15100a;
  --skin-panel: rgba(22, 15, 7, .70);
  --skin-panel-deep: rgba(13, 9, 5, .88);
  --skin-panel-surface: rgba(200, 169, 106, .66);
  --skin-primary: #ff8a00;
  --skin-primary-bright: #ffc16a;
  --skin-primary-dim: #7a3e00;
  --skin-secondary: #c8a96a;
  --skin-text-primary: #fff2d2;
  --skin-text-secondary: #d9c7a3;
  --skin-text-muted: #806e4c;
  --skin-success: #75e06b;
  --skin-warning: #ffb000;
  --skin-error: #d71920;
  --skin-panel-radius: 10px;
  --skin-card-radius: 10px;
  --skin-button-radius: 8px;
  --skin-blur: 6px;
  --skin-glow-size: 8px;
  --skin-panel-border: rgba(255, 138, 0, .30);
  --skin-panel-highlight: rgba(234, 216, 165, .09);
  --skin-chrome: rgba(0, 0, 0, .94);
  --skin-input: rgba(13, 9, 5, .92);
  --skin-page-image:
    radial-gradient(circle at 78% 10%, rgba(255,138,0,.13), transparent 31%),
    repeating-linear-gradient(0deg, rgba(234,216,165,.014) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #080604, #15100a 57%, #080604);
  --skin-panel-image:
    repeating-linear-gradient(0deg, rgba(234,216,165,.014) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(200,169,106,.10), rgba(13,9,5,.84));
}

/* No skin changes the typeface. The app uses the same UI type system across skins. */
html[data-skin] {
  --display: var(--font);
}

*{box-sizing:border-box}html{background:var(--bg-deep)}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit}[hidden]{display:none!important}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.overline{margin:0 0 .45rem;color:var(--skin);font-size:.69rem;font-weight:900;letter-spacing:.19em}.supporting{color:var(--muted);line-height:1.6}.preview-label{display:inline-flex;align-items:center;width:max-content;padding:.38rem .6rem;border:1px solid color-mix(in srgb,var(--skin) 55%,transparent);color:var(--skin);font-size:.66rem;font-weight:900;letter-spacing:.12em}.preview-label.subtle{border-color:var(--line);color:var(--muted)}
.loading-screen{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:1rem;color:var(--muted)}.spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--skin);border-radius:50%;animation:spin .8s linear infinite}.spinner.small{width:23px;height:23px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}
.brand{display:flex;align-items:center;gap:.72rem;text-decoration:none;font-size:.92rem;font-weight:900;letter-spacing:.085em}.brand b{color:var(--skin)}.brand-bars{width:35px;height:35px;display:grid;align-content:center;gap:4px;padding:7px;border:1px solid var(--line)}.brand-bars i{display:block;height:3px;background:var(--skin)}.brand-bars i:nth-child(1){width:70%}.brand-bars i:nth-child(2){width:100%}.brand-bars i:nth-child(3){width:48%}.brand-light{position:relative;z-index:2}
.auth-layout{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr)}.auth-visual{position:relative;min-height:100vh;padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:radial-gradient(circle at 28% 28%, rgba(0,153,255,.22), transparent 34%),linear-gradient(145deg,#07111a,#050608 58%,#0a1c2b)}.auth-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,5,.2),rgba(3,4,5,.58)),linear-gradient(0deg,rgba(3,4,5,.5),transparent 70%)}.auth-copy{position:relative;z-index:2}.auth-copy h1{margin:0;font:800 clamp(3.5rem,7vw,7.5rem)/.88 var(--display);letter-spacing:-.07em}.auth-copy p:last-child{max-width:38rem;color:#c9d0d6;font-size:1.05rem;line-height:1.65}.auth-visual>.preview-label{position:relative;z-index:2}.auth-form-column{display:grid;place-items:center;padding:2rem;border-left:1px solid var(--line)}.auth-form{width:min(100%,450px);display:grid;gap:1rem}.auth-form h2{margin:0;font:750 clamp(2.3rem,4vw,4rem)/1 var(--display);letter-spacing:-.05em}.auth-form label,.form-stack label{display:grid;gap:.5rem}.auth-form label>span,.form-stack label>span{font-size:.84rem;font-weight:800}.auth-links{display:flex;justify-content:space-between;color:var(--muted);font-size:.85rem}
input,textarea,select{width:100%;min-height:48px;padding:.78rem .9rem;border:1px solid var(--line-strong);outline:none;background:#0e1217;color:var(--text)}textarea{resize:vertical;line-height:1.5}input:focus,textarea:focus,select:focus{border-color:var(--skin);box-shadow:0 0 0 3px var(--skin-glow)}small{color:var(--muted);line-height:1.45}.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1rem;border:1px solid transparent;background:transparent;color:var(--text);font-weight:850;text-decoration:none}.button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.button.primary{background:var(--skin);color:#08090a}.button.secondary{border-color:var(--line-strong);background:#12161b}.button.glass{border-color:rgba(255,255,255,.25);background:rgba(5,6,8,.52);backdrop-filter:blur(14px)}.button.small{min-height:38px;padding:.55rem .8rem}.button.wide{width:100%}.icon-button{width:42px;height:42px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted)}.icon-button:hover{color:var(--text)}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
.app{min-height:100vh}.topbar{position:fixed;z-index:80;top:0;left:0;right:0;height:var(--top);display:grid;grid-template-columns:var(--rail) minmax(280px,520px) 1fr;align-items:center;gap:1rem;padding:0 1rem;border-bottom:1px solid var(--line);background:rgba(8,10,13,.92);backdrop-filter:blur(18px)}.global-search{height:40px;display:flex;align-items:center;gap:.6rem;padding:0 .8rem;border:1px solid var(--line);background:#0d1115;color:var(--muted)}.global-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.global-search input{min-height:0;padding:0;border:0;background:transparent;box-shadow:none}.global-search kbd{white-space:nowrap;color:var(--quiet);font:inherit;font-size:.67rem}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:.35rem}.account-chip{height:42px;display:flex;align-items:center;gap:.6rem;padding:0 .65rem 0 .25rem;border:0;background:transparent;color:var(--muted);font-weight:750}.account-chip>span:first-child,.quick-composer>span:first-child,.composer-author>span:first-child{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--skin);background:var(--skin-glow);color:var(--text);font-weight:900}
.left-rail{position:fixed;z-index:60;top:var(--top);bottom:0;left:0;width:var(--rail);padding:1.1rem .75rem;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line);background:#090b0e}.main-nav{display:grid;gap:.2rem}.main-nav button{min-height:48px;display:flex;align-items:center;gap:.9rem;padding:0 .8rem;border:0;border-left:2px solid transparent;background:transparent;color:var(--muted);font-weight:780;text-align:left}.main-nav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.main-nav button:hover{color:var(--text)}.main-nav button.active{border-left-color:var(--skin);background:var(--skin-glow);color:var(--text)}.main-nav button.active svg{color:var(--skin)}.nav-separator{height:1px;margin:.75rem .8rem;background:var(--line)}.rail-footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5rem;padding:.7rem .8rem;color:var(--quiet);font-size:.73rem}.rail-footer a{grid-column:1/-1;margin-top:.35rem;color:var(--muted);text-decoration:none}.test-dot{width:7px;height:7px;border-radius:50%;background:var(--skin);box-shadow:0 0 12px var(--skin)}
.main-stage{min-height:100vh;margin-left:var(--rail);padding-top:var(--top)}.route{display:none}.route.active{display:block}.social-layout{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,720px) 310px;gap:3.4rem;padding:2.2rem 2rem 5rem}.feed-column{min-width:0}.feed-heading{display:flex;align-items:end;justify-content:space-between;padding:0 0 1.5rem;border-bottom:1px solid var(--line)}.feed-heading h1,.simple-heading h1{margin:0;font:760 clamp(2.2rem,5vw,4rem)/.95 var(--display);letter-spacing:-.055em}.quick-composer{width:100%;min-height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);text-align:left}.quick-composer svg{width:21px;height:21px;fill:none;stroke:var(--skin);stroke-width:1.8}.feed-stream{display:grid}.post{padding:1.35rem 0 1.5rem;border-bottom:1px solid var(--line)}.post-header{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:start}.post-avatar{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--skin);background:var(--skin-glow);font-weight:900}.post-author strong{display:block}.post-author span,.post-time{color:var(--muted);font-size:.82rem}.post-menu{border:0;background:transparent;color:var(--muted)}.post-menu svg{width:20px;height:20px;fill:currentColor}.post-copy{margin:.9rem 0 1rem;padding-left:54px;color:#dce1e5;line-height:1.62}.post-copy strong{color:var(--text)}.post-vehicle-link{display:inline-flex;margin-top:.65rem;color:var(--skin);font-size:.82rem;font-weight:800}.post-media{width:calc(100% - 54px);margin-left:54px;aspect-ratio:16/9;display:block;object-fit:cover;background:#080a0d}.post-caption{margin:.7rem 0 0 54px;color:var(--muted);font-size:.8rem}.post-actions{display:flex;align-items:center;justify-content:space-between;margin:.9rem 0 0 54px}.post-actions div{display:flex;gap:1.15rem}.post-actions button{display:flex;align-items:center;gap:.4rem;padding:.3rem 0;border:0;background:transparent;color:var(--muted);font-size:.82rem}.post-actions button:hover{color:var(--skin)}.post-actions svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}.post-actions .save-action{margin-left:auto}.right-rail{padding-top:4.5rem}.rail-section{padding:0 0 1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)}.rail-title{display:flex;align-items:center;justify-content:space-between}.rail-title h2{margin:0;font-size:1rem}.rail-title button,.community-note button,.notification button{border:0;background:transparent;color:var(--skin);font-weight:800;padding:0}.mini-garage{display:grid;margin-top:.7rem}.mini-vehicle{width:100%;border:0;background:transparent;color:inherit;text-align:left;display:grid;grid-template-columns:68px 1fr;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--line)}.mini-vehicle:last-child{border-bottom:0}.mini-vehicle img{width:68px;height:50px;object-fit:cover}.mini-vehicle strong{display:block}.mini-vehicle small{color:var(--muted)}.trend-list{list-style:none;padding:0;margin:.6rem 0 0}.trend-list li{display:grid;grid-template-columns:34px 1fr;gap:.5rem;padding:.75rem 0}.trend-list>li>span{color:var(--skin);font:700 1.1rem var(--display)}.trend-list strong,.trend-list small{display:block}.trend-list small{margin-top:.18rem;color:var(--muted)}.community-note h2{margin:.2rem 0 .65rem;font:700 1.45rem/1.05 var(--display)}.community-note p:not(.overline){color:var(--muted);line-height:1.55}
.editorial-heading,.simple-heading,.garage-heading,.composer-page{max-width:1180px;margin:0 auto;padding:clamp(2.2rem,6vw,5.5rem) clamp(1.2rem,4vw,3.5rem) 2rem}.editorial-heading h1,.garage-heading h1,.composer-page>header h1{margin:0;font:760 clamp(3.3rem,7vw,7.8rem)/.88 var(--display);letter-spacing:-.075em}.editorial-heading>p:last-child,.garage-heading>div>p:last-child,.composer-page>header>p:last-child{max-width:50rem;color:var(--muted);font-size:1rem;line-height:1.65}.editorial-heading.narrow{max-width:1050px}.category-row{max-width:1180px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem) 1.4rem;display:flex;gap:1.5rem;overflow:auto;border-bottom:1px solid var(--line)}.category-row button{padding:.5rem 0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:800;white-space:nowrap}.category-row button.active{border-color:var(--skin);color:var(--text)}.discovery-grid{max-width:1180px;margin:0 auto;padding:2rem clamp(1.2rem,4vw,3.5rem) 5rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.discovery-item{position:relative;grid-column:span 5;min-height:330px;padding:0;border:0;overflow:hidden;background:#080a0d;color:var(--text);text-align:left}.discovery-item.feature{grid-column:span 8;min-height:520px}.discovery-item.wide{grid-column:span 8}.discovery-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.discovery-item:hover img{transform:scale(1.025)}.discovery-item:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,3,4,.9),transparent 62%)}.discovery-item span{position:absolute;z-index:2;left:1.2rem;right:1.2rem;bottom:1.15rem}.discovery-item small,.discovery-item strong,.discovery-item em{display:block}.discovery-item small{color:var(--skin);font-weight:900;letter-spacing:.13em}.discovery-item strong{margin:.25rem 0;font:720 clamp(1.5rem,3vw,2.7rem)/1 var(--display)}.discovery-item em{color:#c5ccd2;font-style:normal}.discovery-copy{grid-column:span 4;display:grid;align-content:end;padding:1.2rem}.discovery-copy h2{margin:.2rem 0 .8rem;font:720 2.2rem/.98 var(--display)}.discovery-copy p:last-child{color:var(--muted);line-height:1.6}
.composer-page{max-width:940px}.composer-editor{margin-top:2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.5rem 0}.composer-author{display:flex;align-items:center;gap:.8rem}.composer-author strong{display:block}.composer-author select{min-height:0;width:auto;margin-top:.2rem;padding:0;border:0;background:transparent;color:var(--skin)}.composer-editor textarea{min-height:220px;margin:1.2rem 0;padding:1rem 0;border:0;background:transparent;font-size:1.3rem;box-shadow:none}.post-type-row{display:flex;gap:.75rem;flex-wrap:wrap}.post-type-row button{display:flex;align-items:center;gap:.45rem;padding:.55rem .75rem;border:1px solid var(--line);background:transparent;color:var(--muted)}.post-type-row svg{width:18px;height:18px;fill:none;stroke:var(--skin);stroke-width:1.7}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.3rem}.composer-footer span{color:var(--muted);font-size:.8rem}
.simple-heading{max-width:850px}.notification-list{max-width:850px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem) 5rem}.notification{display:grid;grid-template-columns:52px 1fr;gap:1rem;padding:1.25rem 0;border-top:1px solid var(--line)}.notification.unread{background:linear-gradient(90deg,var(--skin-glow),transparent);margin:0 -1rem;padding-left:1rem;padding-right:1rem}.notification-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);color:var(--skin)}.notification-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}.notification strong{font-size:1.05rem}.notification p{color:var(--muted);line-height:1.5}.notification small{color:var(--quiet)}
.profile-cover{position:relative;height:clamp(250px,35vw,470px);overflow:hidden}.profile-cover>img{width:100%;height:100%;object-fit:cover}.profile-cover>.button{position:absolute;right:clamp(1.2rem,4vw,3.5rem);bottom:1.2rem}.profile-header{position:relative;max-width:1080px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem) 1.5rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:end}.profile-avatar{width:150px;height:150px;margin-top:-70px;display:grid;place-items:center;border:5px solid var(--bg);background:#0b0e12;box-shadow:0 0 0 2px var(--skin),0 0 40px var(--skin-glow);font:800 3.5rem var(--display)}.profile-identity h1{margin:0;font:760 clamp(2.2rem,5vw,4.5rem)/.95 var(--display);letter-spacing:-.06em}.profile-identity>p{margin:.35rem 0;color:var(--muted);line-height:1.5}.profile-identity #profileHandle{color:var(--skin);font-weight:850}.profile-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.75rem;color:var(--quiet);font-size:.8rem}.profile-stats{max-width:1080px;margin:0 auto;display:flex;padding:0 clamp(1.2rem,4vw,3.5rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.profile-stats button{min-width:120px;padding:1rem 1rem 1rem 0;border:0;background:transparent;color:var(--text);text-align:left}.profile-stats strong,.profile-stats span{display:block}.profile-stats strong{font-size:1.25rem}.profile-stats span{color:var(--muted);font-size:.8rem}.content-tabs{max-width:1080px;margin:0 auto;display:flex;gap:2rem;padding:0 clamp(1.2rem,4vw,3.5rem);border-bottom:1px solid var(--line)}.content-tabs button{padding:1rem 0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:850}.content-tabs button.active{border-color:var(--skin);color:var(--text)}.profile-feed{max-width:720px;margin:0 auto;padding:0 1rem 5rem}
.garage-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem}.garage-showcase{max-width:1180px;margin:0 auto;padding:1rem clamp(1.2rem,4vw,3.5rem) 5rem}.garage-build{display:grid;grid-template-columns:minmax(320px,1.25fr) minmax(280px,.75fr);gap:2rem;padding:2rem 0;border-top:1px solid var(--line)}.garage-build-media{position:relative;min-height:380px;overflow:hidden;background:#080a0d}.garage-build-media img{width:100%;height:100%;object-fit:cover}.garage-build-media .garage-label{position:absolute;top:1rem;left:1rem}.garage-build-copy{display:flex;flex-direction:column;justify-content:center}.garage-build-copy h2{margin:.25rem 0;font:750 clamp(2.2rem,5vw,4.5rem)/.92 var(--display);letter-spacing:-.055em}.garage-build-copy>p{color:var(--muted);line-height:1.6}.garage-spec-line{display:flex;flex-wrap:wrap;gap:.5rem 1rem;color:#c9d0d6;font-size:.85rem}.garage-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}.garage-empty{max-width:900px;margin:3rem auto;padding:5rem 1rem;display:grid;justify-items:center;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted)}.garage-empty svg{width:50px;height:50px;fill:none;stroke:var(--skin);stroke-width:1.4}.garage-empty h2{color:var(--text)}.inline-loading{display:flex;justify-content:center;align-items:center;gap:.7rem;padding:2rem;color:var(--muted)}
.back-link{margin:2rem clamp(1.2rem,4vw,3.5rem) 0;padding:0;border:0;background:transparent;color:var(--muted)}.build-hero{position:relative;height:min(68vh,720px);min-height:480px;overflow:hidden}.build-hero>img{width:100%;height:100%;object-fit:cover}.build-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,6,8,.95),transparent 60%)}.build-hero-copy{position:absolute;z-index:2;left:clamp(1.2rem,5vw,5rem);right:clamp(1.2rem,5vw,5rem);bottom:2.5rem}.build-hero-copy h1{margin:.2rem 0;font:780 clamp(3.5rem,8vw,8.5rem)/.86 var(--display);letter-spacing:-.08em}.build-hero-copy p{margin:.5rem 0;color:#d2d7dc;font-size:1.05rem}.build-owner-line{display:flex;align-items:center;gap:.7rem;margin-top:1rem}.build-owner-line span{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--skin);background:var(--skin-glow);font-weight:900}.build-content{max-width:1080px;margin:0 auto;padding:3rem clamp(1.2rem,4vw,3.5rem) 6rem}.build-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;padding-bottom:3rem;border-bottom:1px solid var(--line)}.build-intro h2{margin:0;font:720 clamp(2.2rem,5vw,4.2rem)/.98 var(--display)}.build-intro p{color:var(--muted);line-height:1.7}.spec-list{margin:0}.spec-list div{display:grid;grid-template-columns:150px 1fr;padding:.8rem 0;border-bottom:1px solid var(--line)}.spec-list dt{color:var(--quiet)}.spec-list dd{margin:0}.timeline{padding-top:3rem}.timeline h2{font:720 2.6rem var(--display)}.timeline-entry{display:grid;grid-template-columns:130px 16px 1fr;gap:1rem;padding:0 0 2rem}.timeline-entry time{color:var(--quiet)}.timeline-dot{width:12px;height:12px;margin-top:.25rem;border:2px solid var(--skin);border-radius:50%;box-shadow:0 0 14px var(--skin-glow)}.timeline-entry h3{margin:0}.timeline-entry p{color:var(--muted);line-height:1.6}
.settings-list{max-width:1050px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem) 4rem}.settings-list section{display:grid;grid-template-columns:54px 1fr auto;gap:1.2rem;padding:1.6rem 0;border-top:1px solid var(--line)}.settings-list>section>span{color:var(--skin);font:700 1.1rem var(--display)}.settings-list h2{margin:0}.settings-list p{max-width:690px;color:var(--muted);line-height:1.6}.settings-list a{color:var(--skin)}.status{align-self:start;font-size:.75rem}.status.ready{color:var(--success)}.status.pending{color:var(--danger)}.text-danger{margin:0 clamp(1.2rem,4vw,3.5rem) 4rem;padding:0;border:0;background:transparent;color:var(--danger);font-weight:850}
.system-message{margin:1rem auto;padding:.9rem 1rem;max-width:980px;border-left:3px solid var(--skin);background:var(--skin-glow);line-height:1.5}.system-message.error{border-color:var(--danger);background:rgba(255,111,120,.09)}.system-message.success{border-color:var(--success);background:rgba(85,217,155,.09)}
.sheet-dialog{width:min(620px,calc(100% - 2rem));max-height:92vh;margin:auto;border:1px solid var(--line-strong);padding:0;background:#0b0e12;color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.6)}.sheet-dialog.wide-dialog{width:min(780px,calc(100% - 2rem))}.sheet-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.sheet-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);background:#0b0e12}.sheet-header h2{margin:0;font-size:1.5rem}.sheet-body{padding:1.4rem;overflow:auto}.form-stack{display:grid;gap:1rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.check-line{grid-template-columns:auto 1fr;align-items:start!important;gap:.7rem!important;color:var(--muted)}.check-line input{width:18px;min-height:18px;margin-top:.15rem;accent-color:var(--skin)}.sheet-actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:.5rem}.sheet-actions.split{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center}.sheet-actions .text-danger{margin:0}.mobile-nav{display:none}
@media(max-width:1050px){.social-layout{grid-template-columns:minmax(0,720px);justify-content:center}.right-rail{display:none}.discovery-item.feature,.discovery-item.wide{grid-column:span 7}.discovery-copy{grid-column:span 5}.discovery-item{grid-column:span 5}.garage-build{grid-template-columns:1fr}.garage-build-copy{padding-bottom:1rem}}
@media(max-width:820px){:root{--top:60px}.topbar{grid-template-columns:1fr auto;padding:0 .8rem}.topbar>.brand{font-size:.8rem}.global-search,.top-actions>.icon-button,.top-actions>.account-chip{display:none}.left-rail{display:none}.main-stage{margin-left:0;padding-bottom:70px}.social-layout{padding:1.25rem 0 3rem}.feed-heading{padding:0 1rem 1rem}.quick-composer{padding:0 1rem}.post{padding:1rem}.post-copy{padding-left:0}.post-media{width:calc(100% + 2rem);margin-left:-1rem}.post-caption,.post-actions{margin-left:0}.mobile-nav{position:fixed;z-index:90;left:0;right:0;bottom:0;height:66px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:rgba(8,10,13,.95);backdrop-filter:blur(18px)}.mobile-nav button{display:grid;place-content:center;justify-items:center;gap:.18rem;border:0;background:transparent;color:var(--muted);font-size:.65rem}.mobile-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.mobile-nav button.active{color:var(--skin)}.mobile-nav .mobile-create svg{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--skin);color:#060709;stroke-width:2}.editorial-heading h1,.garage-heading h1,.composer-page>header h1{font-size:clamp(3.1rem,13vw,5.5rem)}.discovery-grid{grid-template-columns:1fr;padding:1rem 1rem 4rem}.discovery-item,.discovery-item.feature,.discovery-item.wide,.discovery-copy{grid-column:1;min-height:340px}.discovery-copy{min-height:auto;padding:2rem 0}.profile-cover{height:290px}.profile-header{grid-template-columns:auto 1fr;align-items:center}.profile-avatar{width:105px;height:105px;margin-top:-45px;font-size:2.5rem}.profile-header>.button{grid-column:1/-1;width:100%}.profile-stats{overflow:auto}.profile-stats button{min-width:95px}.garage-heading{display:block}.garage-heading>.button{margin-top:1rem}.garage-build-media{min-height:270px}.build-hero{min-height:430px;height:62vh}.build-intro{grid-template-columns:1fr;gap:2rem}.settings-list section{grid-template-columns:40px 1fr}.settings-list .status{grid-column:2}.auth-layout{grid-template-columns:1fr}.auth-visual{min-height:52vh}.auth-form-column{min-height:48vh;border-left:0;border-top:1px solid var(--line)}.auth-copy h1{font-size:clamp(3.3rem,16vw,5.8rem)}}
@media(max-width:560px){.top-actions>.button span{display:none}.top-actions>.button{width:40px;padding:0}.brand-bars{width:31px;height:31px}.profile-header{display:block}.profile-avatar{margin-bottom:1rem}.profile-cover>.button{right:1rem}.profile-meta{gap:.55rem}.garage-build{padding:1rem 0}.garage-build-copy h2{font-size:2.8rem}.form-grid{grid-template-columns:1fr}.sheet-actions,.sheet-actions.split{display:flex;flex-wrap:wrap}.sheet-actions .button{flex:1}.sheet-actions .text-danger{width:100%;text-align:left}.spec-list div{grid-template-columns:110px 1fr}.timeline-entry{grid-template-columns:90px 12px 1fr}.auth-form-column{padding:1.3rem}}


/* ------------------------------------------------------------------------
   DriftLine Social v0.3.0 — profile media, garage studio, and build studio
   ------------------------------------------------------------------------ */

.profile-cover > img,
.garage-cover > img,
.build-hero > img,
.garage-build-media > img,
.profile-avatar > img {
  background: linear-gradient(135deg, #10161d, #080a0d);
}

.profile-avatar {
  overflow: hidden;
}

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

.profile-content-wide {
  max-width: 1080px;
}

.profile-build-list {
  display: grid;
  gap: 0;
}

.profile-build-row {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.profile-build-row img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #080a0d;
}

.profile-build-row h2 {
  margin: .25rem 0;
  font: 720 clamp(1.8rem, 4vw, 3rem)/.96 var(--display);
  letter-spacing: -.045em;
}

.profile-build-row p {
  color: var(--muted);
  line-height: 1.55;
}

.profile-media-grid,
.build-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 1.5rem 0 5rem;
}

.profile-media-grid button,
.build-gallery figure {
  position: relative;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: #080a0d;
  overflow: hidden;
}

.profile-media-grid img,
.build-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.profile-about {
  max-width: 760px;
  padding: 2rem 0 5rem;
}

.profile-about h2 {
  margin: 0 0 1rem;
  font: 720 clamp(2rem, 5vw, 4rem)/1 var(--display);
}

.profile-about p {
  color: var(--muted);
  line-height: 1.75;
  white-space: pre-wrap;
}

.garage-cover {
  position: relative;
  min-height: clamp(360px, 52vw, 650px);
  overflow: hidden;
}

.garage-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 6, 8, .96), rgba(5, 6, 8, .05) 72%);
}

.garage-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-cover-copy {
  position: absolute;
  z-index: 2;
  left: clamp(1.2rem, 5vw, 5rem);
  right: clamp(1.2rem, 5vw, 5rem);
  bottom: clamp(2rem, 6vw, 5rem);
  max-width: 800px;
}

.garage-cover-copy h1 {
  margin: .2rem 0;
  font: 780 clamp(3.4rem, 8vw, 8rem)/.86 var(--display);
  letter-spacing: -.075em;
}

.garage-cover-copy p {
  max-width: 650px;
  color: #d0d5da;
  line-height: 1.6;
}

.garage-cover > .button {
  position: absolute;
  z-index: 3;
  top: 1.25rem;
  right: clamp(1.2rem, 4vw, 3.5rem);
}

.garage-toolbar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem clamp(1.2rem, 4vw, 3.5rem) 0;
  display: flex;
  justify-content: flex-end;
}

.build-status {
  display: inline-flex;
  width: fit-content;
  margin-bottom: .5rem;
  padding: .38rem .6rem;
  border: 1px solid color-mix(in srgb, var(--skin) 50%, transparent);
  color: var(--skin);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.build-studio-actions {
  position: absolute;
  z-index: 4;
  top: 1.25rem;
  right: clamp(1.2rem, 4vw, 3.5rem);
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.build-section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
}

.build-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.build-section-heading h2 {
  margin: 0;
  font: 720 clamp(2.2rem, 5vw, 4rem)/.95 var(--display);
  letter-spacing: -.045em;
}

.build-section-heading p {
  margin: .5rem 0 0;
  color: var(--muted);
}

.modification-list {
  display: grid;
}

.modification-row {
  display: grid;
  grid-template-columns: minmax(110px, .25fr) minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}

.modification-row > span {
  color: var(--skin);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.modification-row h3 {
  margin: 0;
  font-size: 1.15rem;
}

.modification-row p {
  margin: .45rem 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.modification-row small {
  display: block;
  margin-top: .5rem;
  color: var(--quiet);
}

.gallery-item {
  position: relative;
}

.gallery-item figcaption {
  padding: .7rem 0 1rem;
  color: var(--muted);
  line-height: 1.45;
}

.gallery-item .gallery-delete {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(5,6,8,.82);
  color: #fff;
}

.gallery-delete svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.build-empty-line {
  padding: 2rem 0;
  color: var(--muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.upload-drop {
  min-height: 150px;
  display: grid !important;
  grid-template-columns: auto 1fr;
  place-content: center;
  align-items: center;
  gap: 1rem !important;
  padding: 1.5rem;
  border: 1px dashed var(--line-strong);
  background: rgba(255,255,255,.02);
  cursor: pointer;
}

.upload-drop:hover {
  border-color: var(--skin);
  background: var(--skin-soft);
}

.upload-drop svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: var(--skin);
  stroke-width: 1.4;
}

.upload-drop strong,
.upload-drop small {
  display: block;
}

.upload-drop small {
  margin-top: .25rem;
  color: var(--muted);
}

.upload-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.upload-preview {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  background: #050608;
}

.privacy-note {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border-left: 3px solid var(--skin);
  background: var(--skin-soft);
}

.privacy-note span {
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 820px) {
  .profile-build-row {
    grid-template-columns: 1fr;
  }

  .profile-media-grid,
  .build-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .garage-cover {
    min-height: 480px;
  }

  .garage-cover-copy h1 {
    font-size: clamp(3.2rem, 16vw, 6rem);
  }

  .build-studio-actions {
    left: 1rem;
    right: 1rem;
    justify-content: flex-end;
  }

  .modification-row {
    grid-template-columns: 1fr auto;
  }

  .modification-row > span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .profile-media-grid,
  .build-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .garage-cover > .button {
    top: 1rem;
    right: 1rem;
  }

  .build-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .modification-row {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------------------
   DriftLine Social v0.4.0 — real owner-only posts and safety controls
   ------------------------------------------------------------------------ */

.composer-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.composer-settings label,
.composer-body-label {
  display: grid;
  gap: .5rem;
}

.composer-settings label > span,
.composer-body-label > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.composer-body-label {
  position: relative;
}

.composer-body-label textarea {
  min-height: 220px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 1.3rem 0;
  background: transparent;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.65;
}

.composer-body-label > small {
  justify-self: end;
  color: var(--quiet);
}

.post-media-picker {
  position: relative;
  min-height: 112px;
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem !important;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.post-media-picker:hover strong {
  color: var(--skin);
}

.post-media-picker svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--skin);
  stroke-width: 1.5;
}

.post-media-picker strong,
.post-media-picker small {
  display: block;
}

.post-media-picker small {
  margin-top: .25rem;
  color: var(--muted);
}

.post-media-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.post-media-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 1rem 0;
}

.post-media-edit-item {
  position: relative;
  min-width: 0;
  background: #050608;
}

.post-media-edit-item img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
}

.post-media-edit-item button {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(5,6,8,.86);
  color: #fff;
}

.post-media-edit-item button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.composer-footer > span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.composer-footer > span svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--skin);
  stroke-width: 1.8;
}

.composer-footer > div {
  display: flex;
  gap: .65rem;
}

.feed-empty {
  min-height: 55vh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 4rem 1rem;
  border-top: 1px solid var(--line);
}

.feed-empty svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: var(--skin);
  stroke-width: 1.25;
}

.feed-empty h2 {
  margin: 1rem 0 .3rem;
  font: 730 clamp(2rem, 5vw, 4rem)/.95 var(--display);
  letter-spacing: -.045em;
}

.feed-empty p {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.65;
}

.post-owner-tools {
  margin-left: auto;
  display: flex;
  gap: .35rem;
}

.post-owner-tools button {
  min-height: 36px;
  padding: .45rem .65rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}

.post-owner-tools button:hover {
  color: var(--text);
  background: rgba(255,255,255,.05);
}

.post-owner-tools .delete-post {
  color: var(--danger);
}

.post-state-line {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .7rem 0 0;
}

.post-state {
  display: inline-flex;
  width: fit-content;
  padding: .3rem .48rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.post-state.hidden {
  border-color: color-mix(in srgb, var(--warning) 55%, transparent);
  color: var(--warning);
}

.post-state.pending_review {
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  color: var(--danger);
}

.post-copy p {
  white-space: normal;
}

.post-media-grid {
  display: grid;
  gap: 3px;
  margin-top: 1rem;
  overflow: hidden;
}

.post-media-grid.count-1 {
  grid-template-columns: 1fr;
}

.post-media-grid.count-2,
.post-media-grid.count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-media-grid.count-3,
.post-media-grid.count-5,
.post-media-grid.count-6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-media-grid.count-3 .post-media-frame:first-child,
.post-media-grid.count-5 .post-media-frame:first-child {
  grid-row: span 2;
}

.post-media-frame {
  min-width: 0;
  background: #050608;
}

.post-media-frame img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 680px;
  display: block;
  object-fit: cover;
}

.post-media-grid.count-1 .post-media-frame img {
  aspect-ratio: auto;
  min-height: 320px;
}

.post-actions button[disabled] {
  opacity: .46;
  cursor: not-allowed;
}

.profile-posts {
  max-width: 780px;
}

.profile-posts .post {
  border-top: 1px solid var(--line);
}

.build-posts {
  display: grid;
}

.build-posts .post {
  max-width: 820px;
  border-top: 1px solid var(--line);
}

.safety-center {
  max-width: 980px;
  margin: 1rem 0 4rem;
}

.safety-section {
  padding: 2.2rem 0;
  border-top: 1px solid var(--line);
}

.safety-section:last-child {
  border-bottom: 1px solid var(--line);
}

.safety-section-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: start;
}

.safety-section-heading > span {
  color: var(--skin);
  font: 800 1.15rem/1 var(--display);
}

.safety-section-heading h2 {
  margin: 0;
  font: 720 clamp(1.6rem, 3vw, 2.35rem)/1 var(--display);
  letter-spacing: -.035em;
}

.safety-section-heading p {
  max-width: 660px;
  margin: .6rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.safety-section-heading a {
  color: var(--skin);
}

.safety-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: end;
  margin: 1.3rem 0 0 60px;
  max-width: 660px;
}

.safety-inline-form label,
.report-form label {
  display: grid;
  gap: .45rem;
}

.safety-inline-form label > span,
.report-form label > span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.report-form {
  display: grid;
  gap: 1rem;
  margin: 1.3rem 0 0 60px;
  max-width: 780px;
}

.safety-record-list {
  margin: 1rem 0 0 60px;
  max-width: 780px;
}

.safety-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.safety-record:first-child {
  border-top: 0;
}

.safety-record strong {
  display: block;
}

.safety-record p,
.safety-record small {
  display: block;
  margin: .3rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.safety-record button {
  border: 0;
  background: transparent;
  color: var(--danger);
  font-weight: 800;
}

.safety-empty {
  padding: 1rem 0;
  color: var(--muted);
}

@media (max-width: 760px) {
  .composer-settings {
    grid-template-columns: 1fr;
  }

  .post-media-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-owner-tools {
    width: 100%;
    margin: .55rem 0 0;
    justify-content: flex-end;
  }

  .post-media-frame img {
    min-height: 160px;
  }

  .safety-section-heading {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .safety-section-heading .status {
    grid-column: 2;
    justify-self: start;
  }

  .safety-inline-form,
  .report-form,
  .safety-record-list {
    margin-left: 0;
  }

  .safety-inline-form {
    grid-template-columns: 1fr;
  }
}


/* DriftLine Social v0.5.0 — unified authentication and password visibility */
.auth-hub {
  width: min(100% - 2rem, 560px);
}
.auth-hub form[data-auth-panel] {
  display: grid;
  gap: 1rem;
}
.auth-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.35rem 0 1.1rem;
  border-bottom: 1px solid var(--line);
}
.auth-mode-tabs button {
  min-height: 46px;
  padding: .65rem .45rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}
.auth-mode-tabs button.active {
  border-bottom-color: var(--skin);
  color: var(--text);
}
.password-field {
  position: relative;
  display: block;
}
.password-field input {
  padding-right: 3.4rem;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: .35rem;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--skin);
}
.password-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.password-help {
  margin: -.2rem 0 .15rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}
.rail-footer button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
@media (max-width: 560px) {
  .auth-mode-tabs {
    grid-template-columns: 1fr;
    border: 1px solid var(--line);
  }
  .auth-mode-tabs button {
    border-bottom: 1px solid var(--line);
  }
  .auth-mode-tabs button:last-child { border-bottom: 0; }
  .auth-mode-tabs button.active {
    border-bottom-color: var(--line);
    background: var(--skin-soft);
  }
}

/* DriftLine Social product wordmarks */
.brand-logo{display:block;width:min(210px,100%);height:auto;object-fit:contain}.brand-light .brand-logo{width:min(360px,72vw);filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}.topbar>.brand{min-width:0}.topbar>.brand .brand-logo{width:190px;max-height:48px}@media(max-width:820px){.topbar>.brand .brand-logo{width:150px}}@media(max-width:560px){.topbar>.brand .brand-logo{width:132px}}


/* Shared DriftLine account notifications */
.notification-button,.nav-notification-button,.mobile-notification-button{position:relative}
.notification-badge{position:absolute;z-index:3;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border:2px solid #080a0d;border-radius:999px;background:#df3f4c;color:#fff;font-size:.62rem;font-weight:900;line-height:1}
.notification-button>.notification-badge{top:2px;right:1px}.rail-badge{top:50%;right:.55rem;transform:translateY(-50%)}.mobile-badge{top:4px;right:calc(50% - 22px)}
.notification-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;max-width:850px;margin:0 auto;padding-bottom:1.25rem}.notification-heading>div>p:last-child{margin:.55rem 0 0;color:var(--muted)}
.notification-message{max-width:850px;margin:0 auto 1rem}.notification-button-row{width:100%;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer}.notification-button-row:hover{background:rgba(255,255,255,.025)}
.notification-copy{min-width:0}.notification-title-line{display:flex;align-items:center;gap:.5rem}.unread-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--skin);box-shadow:0 0 12px var(--skin)}
.notification-avatar{width:46px;height:46px;object-fit:cover;border:1px solid var(--skin)}
.notification-empty{max-width:650px;margin:2rem auto 5rem;padding:3rem 1.5rem;border:1px solid var(--line);text-align:center}.notification-empty svg{width:36px;height:36px;fill:none;stroke:var(--skin);stroke-width:1.7}.notification-empty h2{margin:.8rem 0 .4rem}.notification-empty p{margin:0;color:var(--muted);line-height:1.55}
@media(max-width:820px){.mobile-nav{grid-template-columns:repeat(6,1fr)}.notification-heading{align-items:start;padding-left:1rem;padding-right:1rem}.notification-heading .button{min-height:38px;padding:.55rem .7rem}.notification-list{padding-left:1rem;padding-right:1rem}.notification-message{margin-left:1rem;margin-right:1rem}}



.notification.notification-action-row{display:block}
.notification-main{width:100%;display:grid;grid-template-columns:52px 1fr;gap:1rem;padding:1.25rem 0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.notification.unread .notification-main{padding-left:0;padding-right:0}
.notification-main:hover{background:rgba(255,255,255,.025)}
.notification-request-actions{display:flex;justify-content:flex-end;gap:.7rem;padding:0 0 1.1rem 62px}
.notification-response-button{min-height:38px;padding:.55rem 1rem}
.notification-response-button:disabled{opacity:.55;cursor:wait}
@media(max-width:560px){.notification-request-actions{padding-left:0}.notification-response-button{flex:1}}


:root {
  --auth-blue: #159cf2;
  --auth-blue-soft: #76c7f5;
  --auth-panel: #020910;
  --auth-field: #020a11;
}

.auth-layout {
  min-height: 100vh;
  grid-template-columns: minmax(380px, .92fr) minmax(520px, 1.08fr);
  background: #02070b;
  font-family: var(--font);
}

.auth-visual {
  position: relative;
  min-height: 100vh;
  padding: clamp(2.25rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(21, 156, 242, .15), transparent 30rem),
    linear-gradient(145deg, #071722 0%, #02080d 58%, #010509 100%);
}

.auth-visual::before,
.auth-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.auth-visual::before {
  width: 46rem;
  height: 46rem;
  right: -30rem;
  bottom: -26rem;
  border: 1px solid rgba(21, 156, 242, .22);
  border-radius: 50%;
  box-shadow:
    0 0 0 6rem rgba(21, 156, 242, .025),
    0 0 0 12rem rgba(21, 156, 242, .015);
}

.auth-visual::after {
  left: 0;
  right: 0;
  bottom: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21, 156, 242, .48), transparent);
  transform: rotate(-7deg);
}

.auth-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 5, 9, .06), rgba(0, 5, 9, .28));
}

.auth-brand-content {
  position: relative;
  z-index: 2;
  width: min(100%, 570px);
  margin: auto 0;
}

.auth-product-brand {
  display: block;
  width: min(100%, 520px);
  text-decoration: none;
}

.auth-product-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .4));
}

.auth-brand-divider {
  width: 64px;
  height: 3px;
  margin: 1.3rem 0 1.25rem;
  border-radius: 99px;
  background: var(--auth-blue);
  box-shadow: 0 0 18px rgba(21, 156, 242, .34);
}

.auth-brand-tagline {
  margin: 0;
  color: #f5f8fb;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1.35;
}

.auth-brand-description {
  max-width: 540px;
  margin: 1rem 0 0;
  color: #8fc2df;
  font-size: clamp(.95rem, 1.45vw, 1.08rem);
  line-height: 1.68;
}

.auth-brand-points {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .75rem;
  margin-top: 1.35rem;
}

.auth-brand-points span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .42rem .7rem;
  border: 1px solid rgba(21, 156, 242, .22);
  border-radius: 7px;
  background: rgba(0, 0, 0, .18);
  color: #a9cfe5;
  font-size: .77rem;
  font-weight: 750;
}

.auth-brand-points span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--auth-blue);
}

.auth-destination {
  position: absolute;
  z-index: 2;
  left: clamp(2.25rem, 5vw, 5rem);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  color: #6fa8c9;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .17em;
}

.auth-destination strong {
  color: var(--auth-blue);
}

.auth-form-column {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  border-left: 1px solid rgba(21, 156, 242, .15);
  background:
    radial-gradient(circle at 90% 10%, rgba(21, 156, 242, .07), transparent 24rem),
    #02080d;
}

.auth-form.auth-hub {
  width: min(100%, 620px);
  display: grid;
  gap: 0;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(21, 156, 242, .14);
  border-radius: 12px;
  background: rgba(1, 7, 12, .72);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

.auth-form .overline {
  margin: 0 0 .55rem;
  color: var(--auth-blue);
  font-family: var(--font);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.auth-form h2 {
  margin: 0;
  color: #f5f8fb;
  font: 850 clamp(2rem, 3.8vw, 3.3rem)/1.04 var(--font);
  letter-spacing: -.04em;
}

.auth-form .supporting {
  margin: .75rem 0 0;
  color: #82b8d7;
  font-family: var(--font);
  line-height: 1.55;
}

.auth-mode-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: 1.55rem 0 1.5rem;
  border: 0;
}

.auth-mode-tabs button {
  min-height: 48px;
  padding: .65rem .45rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(0, 0, 0, .2);
  color: #7eafca;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 850;
}

.auth-mode-tabs button.active {
  border-color: rgba(21, 156, 242, .18);
  background: rgba(21, 156, 242, .2);
  color: var(--auth-blue);
}

.auth-hub form[data-auth-panel] {
  gap: 1rem;
}

.auth-form label > span,
.auth-form .password-help,
.auth-form .button {
  font-family: var(--font);
}

.auth-form label > span {
  color: #eaf3f8;
  font-size: .82rem;
  font-weight: 800;
}

.auth-form input {
  min-height: 58px;
  padding: .9rem 1rem;
  border: 1px solid rgba(21, 156, 242, .42);
  border-radius: 8px;
  background: var(--auth-field);
  color: #f4f8fb;
  font-size: 1rem;
}

.auth-form input:focus {
  border-color: var(--auth-blue);
  box-shadow: 0 0 0 3px rgba(21, 156, 242, .14);
  background: #03101a;
}

.auth-form .password-toggle {
  right: .55rem;
  color: #79acc9;
}

.auth-form .password-toggle:hover,
.auth-form .password-toggle:focus-visible {
  color: var(--auth-blue);
}

.auth-form .button.primary {
  min-height: 56px;
  margin-top: .1rem;
  border-radius: 8px;
  background: var(--auth-blue);
  color: #00111b;
  font-size: .92rem;
  font-weight: 900;
}

.auth-form .button.primary:hover:not(:disabled) {
  background: #36aff5;
}

.auth-form .password-help {
  color: #78a8c3;
}

.auth-form .system-message {
  margin: 0 0 1rem;
}

@media (max-width: 940px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    min-height: 44vh;
    padding: 2.25rem;
  }

  .auth-brand-content {
    width: min(100%, 640px);
    margin: auto;
  }

  .auth-product-brand {
    width: min(100%, 470px);
  }

  .auth-destination {
    left: 2.25rem;
  }

  .auth-form-column {
    min-height: 56vh;
    padding: 2rem;
    border-top: 1px solid rgba(21, 156, 242, .15);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .auth-visual {
    min-height: 390px;
    padding: 1.5rem;
  }

  .auth-brand-divider {
    margin: 1rem 0;
  }

  .auth-brand-points {
    display: none;
  }

  .auth-destination {
    left: 1.5rem;
    bottom: 1.15rem;
  }

  .auth-form-column {
    padding: 1rem;
  }

  .auth-form.auth-hub {
    padding: 1.25rem;
  }

  .auth-mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 0;
  }

  .auth-mode-tabs button {
    min-height: 44px;
    padding: .55rem .25rem;
    border: 1px solid transparent;
    font-size: .69rem;
  }

  .auth-mode-tabs button:last-child {
    border-bottom: 1px solid transparent;
  }

  .auth-mode-tabs button.active {
    border-color: rgba(21, 156, 242, .18);
    background: rgba(21, 156, 242, .2);
  }
}
/* ==========================================================================
   ONE COMPONENT RENDERER — mirrors the Android DriftLine Social structure.
   ========================================================================== */

html {
  background: var(--skin-bg);
}

body {
  background-color: var(--skin-bg);
  background-image: var(--skin-page-image);
  background-attachment: fixed;
  color: var(--skin-text-primary);
  font-family: var(--font);
}

.topbar,
.left-rail,
.mobile-nav {
  border-color: color-mix(in srgb, var(--skin-primary) 14%, transparent);
  background: var(--skin-chrome);
  backdrop-filter: blur(var(--skin-blur));
}

.topbar {
  grid-template-columns: var(--rail) minmax(260px, 500px) 1fr;
}

.left-rail {
  padding: 12px 9px;
}

.main-nav {
  gap: 5px;
}

.main-nav button {
  min-height: 48px;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-left-width: 1px;
  border-radius: 10px;
  background: transparent;
  color: var(--skin-text-secondary);
  font-weight: 750;
}

.main-nav button.active {
  border-color: color-mix(in srgb, var(--skin-primary) 78%, transparent);
  background: color-mix(in srgb, var(--skin-primary) 15%, transparent);
  color: var(--skin-text-primary);
  box-shadow: none;
}

.main-nav button.active svg {
  color: var(--skin-primary);
}

.main-nav button[data-route="create"]:not(.active) {
  background: color-mix(in srgb, var(--skin-panel-surface) 72%, transparent);
}

.main-stage {
  background: transparent;
}

.app-parity-layout {
  display: block;
  width: min(100%, calc(var(--content-max) + 56px));
  max-width: none;
  margin: 0 auto;
  padding: 28px 28px 72px;
}

.app-parity-layout .feed-column {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.app-feed-heading {
  display: block;
  padding: 0 0 18px;
  border: 0;
}

.app-feed-heading h1,
.feed-heading h1,
.simple-heading h1 {
  margin: 0;
  color: var(--skin-text-primary);
  font-family: var(--font);
  font-size: clamp(2rem, 3vw, 3.15rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.overline {
  margin-bottom: 6px;
  color: var(--skin-primary);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .20em;
}

.app-composer {
  display: block;
  min-height: 0;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--skin-primary) 24%, transparent);
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--skin-panel-surface) 84%, transparent);
  background-image: var(--skin-panel-image);
  color: var(--skin-text-secondary);
  box-shadow: 0 14px var(--skin-shadow-size) rgba(0,0,0,.28);
  text-align: left;
  cursor: pointer;
}

.app-composer-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
}

.app-composer-main > span:first-child {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--skin-primary);
  border-radius: 50%;
  background: var(--skin-panel-deep);
  color: var(--skin-text-primary);
  font-weight: 900;
}

.app-composer-main > span:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-composer-prompt {
  font-size: 1rem;
}

.app-composer-create {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--skin-primary);
  color: var(--skin-bg);
}

.app-composer-create svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.app-composer-divider {
  height: 1px;
  margin: 12px 0 10px;
  background: color-mix(in srgb, var(--skin-primary) 12%, transparent);
}

.app-composer-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.app-composer-actions span {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  background: rgba(0,0,0,.28);
  color: var(--skin-text-secondary);
}

.app-composer-actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--skin-primary);
  stroke-width: 1.9;
}

.app-composer-actions b {
  font-size: .82rem;
}

.feed-stream {
  display: grid;
  gap: 14px;
}

.feed-empty,
.app-empty-feed,
.post,
.garage-build,
.notification,
.safety-section,
.settings-list section,
.composer-editor,
.profile-about,
.profile-build-row,
.sheet-dialog,
.auth-form {
  border: 1px solid color-mix(in srgb, var(--skin-primary) 18%, transparent);
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--skin-panel-deep) 82%, transparent);
  background-image: var(--skin-panel-image);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(var(--skin-blur));
}

.feed-empty,
.app-empty-feed {
  min-height: 0;
  margin: 0;
  padding: 18px;
  display: block;
  text-align: left;
}

.app-empty-feed > svg {
  display: none;
}

.app-empty-feed h2 {
  margin: 5px 0 0;
  color: var(--skin-text-primary);
  font-family: var(--font);
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.app-empty-feed p:not(.overline) {
  max-width: 760px;
  margin: 9px 0 16px;
  color: var(--skin-text-secondary);
  font-size: 1rem;
  line-height: 1.55;
}

.button {
  border-radius: var(--skin-button-radius);
}

.button.primary {
  border-color: transparent;
  background: var(--skin-primary);
  color: #050505;
  box-shadow: 0 0 var(--skin-glow-size) color-mix(in srgb, var(--skin-primary) 18%, transparent);
}

.button.secondary,
.button.glass {
  border-color: var(--skin-panel-border);
  background: var(--skin-panel);
  color: var(--skin-text-primary);
}

input,
textarea,
select,
.password-field,
.global-search,
.upload-drop {
  border-color: var(--skin-panel-border);
  border-radius: var(--skin-card-radius);
  background: var(--skin-input);
  color: var(--skin-text-primary);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--skin-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-primary) 18%, transparent);
}

/* App card proportions instead of the old editorial website treatment. */

.post {
  padding: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--skin-primary) 18%, transparent);
}

.post-copy {
  margin: 13px 0;
  padding-left: 0;
  color: var(--skin-text-primary);
  font-size: .95rem;
  line-height: 1.55;
}

.post-media,
.post-actions,
.post-caption {
  width: 100%;
  margin-left: 0;
}

.profile-header,
.profile-stats,
.content-tabs,
.rail-section {
  border-color: var(--skin-panel-border);
  border-radius: var(--skin-card-radius);
  background-color: var(--skin-panel);
  background-image: var(--skin-panel-image);
}

/* Skin-specific shape character, still within the single renderer. */

html[data-skin="performance_red"] .app-composer,
html[data-skin="performance_red"] .post,
html[data-skin="performance_red"] .feed-empty {
  border-top-width: 2px;
}

html[data-skin="cyberpunk"] .app-composer,
html[data-skin="cyberpunk"] .post,
html[data-skin="cyberpunk"] .feed-empty {
  border-left-color: color-mix(in srgb, var(--skin-primary) 68%, transparent);
  border-right-color: color-mix(in srgb, var(--skin-secondary) 48%, transparent);
}

html[data-skin="modern_oem"] .app-composer,
html[data-skin="modern_oem"] .post,
html[data-skin="mini_hud"] .app-composer,
html[data-skin="mini_hud"] .post {
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

/* Retro Analog now matches the app: same sans-serif UI, warm solid panels. */
html[data-skin="retro_analog"] .app-composer {
  background-color: color-mix(in srgb, var(--skin-secondary) 72%, var(--skin-panel-deep));
}

html[data-skin="retro_analog"] .app-composer-actions span {
  background: color-mix(in srgb, var(--skin-bg) 42%, transparent);
}

@media (max-width: 820px) {
  .app-parity-layout {
    padding: 18px 12px 88px;
  }

  .app-composer,
  .feed-empty,
  .app-empty-feed,
  .post {
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
  }

  .app-composer-actions b {
    font-size: .72rem;
  }
}


.app-empty-feed {
  padding: 28px 30px;
  text-align: center;
}

.app-empty-feed .overline,
.app-empty-feed h2,
.app-empty-feed p {
  text-align: center;
}

.app-empty-feed p:not(.overline) {
  margin-left: auto;
  margin-right: auto;
}

.app-empty-feed .button.primary[data-empty-create] {
  width: auto;
  min-width: 190px;
  min-height: 48px;
  margin: 4px auto 0;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--skin-button-radius);
  font-size: .92rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .28),
    0 0 var(--skin-glow-size)
      color-mix(in srgb, var(--skin-primary) 16%, transparent);
}

.app-empty-feed .button.primary[data-empty-create] svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  stroke: currentColor;
  stroke-width: 2;
}

.app-empty-feed .button.primary[data-empty-create]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.app-empty-feed .button.primary[data-empty-create]:active {
  transform: translateY(0);
}

@media (max-width: 620px) {
  .app-empty-feed {
    padding: 24px 18px;
  }

  .app-empty-feed .button.primary[data-empty-create] {
    min-width: 172px;
    min-height: 46px;
    padding: 0 20px;
  }
}



.build-image-empty {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .55rem;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  background:
    radial-gradient(circle at 50% 35%, var(--skin-glow), transparent 34%),
    linear-gradient(145deg, rgba(13, 27, 39, .96), rgba(5, 8, 12, .98));
}
.build-image-empty svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: var(--skin);
  stroke-width: 1.5;
}
.build-image-empty strong { color: var(--text); font-size: 1rem; }
.build-image-empty span { font-size: .82rem; }
.garage-image-empty { min-height: 380px; }
.build-hero-image-empty { min-height: 100%; }
.profile-build-image-empty { min-height: 0; aspect-ratio: 16 / 10; }
.profile-build-image-empty svg { width: 32px; height: 32px; }
.mini-vehicle-image-empty {
  width: 68px;
  height: 50px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(13, 27, 39, .96), rgba(5, 8, 12, .98));
}
.mini-vehicle-image-empty svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--skin);
  stroke-width: 1.5;
}
.build-hero.no-build-image:after {
  background: linear-gradient(0deg, rgba(5,6,8,.94), rgba(5,6,8,.12) 64%);
}
@media (max-width: 820px) {
  .garage-image-empty { min-height: 270px; }
}


.account-controls-section {
  display: grid;
  gap: 1.35rem;
}
.account-summary {
  margin-left: 60px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--skin-glow) 45%, rgba(8, 12, 17, .92));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .8rem;
}
.account-summary span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.account-summary strong {
  overflow-wrap: anywhere;
}
.account-control-grid {
  margin-left: 60px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.account-control-card {
  align-content: start;
  padding: 1.2rem;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(15, 24, 34, .9), rgba(7, 10, 14, .96));
}
.account-control-card h3 {
  margin: 0;
  font: 720 1.35rem/1.1 var(--display);
}
.account-control-card p:not(.overline) {
  margin: .45rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}
.account-control-card label {
  display: grid;
  gap: .45rem;
}
.account-control-card label > span:first-child,
.delete-account-form label > span:first-child {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.account-control-card .button {
  justify-self: start;
}
.danger-zone .safety-section-heading > span,
.danger-zone .status {
  color: var(--danger);
}
.danger-button {
  border-color: color-mix(in srgb, var(--danger) 72%, transparent);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}
.danger-button:hover:not(:disabled),
.danger-button:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 24%, transparent);
}
.danger-zone > .danger-button,
.delete-account-form {
  margin: 1.25rem 0 0 60px;
}
.delete-account-form {
  max-width: 700px;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, rgba(7, 10, 14, .96));
}
.account-delete-actions {
  justify-content: flex-start;
}
@media (max-width: 840px) {
  .account-control-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .account-summary,
  .account-control-grid,
  .danger-zone > .danger-button,
  .delete-account-form {
    margin-left: 0;
  }
  .account-control-card .button,
  .danger-zone > .danger-button {
    width: 100%;
  }
}


.post-actions {
  justify-content: flex-start;
  gap: 1.25rem;
}

.post-actions button {
  cursor: pointer;
}

.post-actions .like-post-action.active {
  color: var(--skin-primary, var(--skin));
}

.post-actions .like-post-action.active svg {
  fill: currentColor;
}

.comment-dialog {
  width: min(720px, calc(100vw - 2rem));
}

.comment-sheet-body {
  display: grid;
  gap: 1rem;
}

.comment-post-summary {
  padding: .9rem 1rem;
  border: 1px solid var(--skin-panel-border, var(--line));
  background: color-mix(in srgb, var(--skin-panel, #101820) 78%, transparent);
}

.comment-post-summary strong {
  display: block;
  margin-bottom: .35rem;
}

.comment-post-summary p {
  max-height: 7.5rem;
  margin: 0;
  overflow: auto;
  color: var(--skin-text-secondary, var(--muted));
  line-height: 1.5;
  white-space: pre-wrap;
}

.comment-list {
  max-height: min(48vh, 520px);
  display: grid;
  gap: .65rem;
  overflow: auto;
  padding-right: .25rem;
}

.comment-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: start;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--skin-primary, var(--skin)) 16%, transparent);
  background: color-mix(in srgb, var(--skin-panel-deep, #07111a) 84%, transparent);
}

.comment-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--skin-primary, var(--skin));
  border-radius: 50%;
  background-color: var(--skin-glow);
  background-position: center;
  background-size: cover;
  font-weight: 900;
}

.comment-copy {
  min-width: 0;
}

.comment-copy strong,
.comment-copy small {
  display: block;
}

.comment-copy small {
  margin-top: .1rem;
  color: var(--skin-text-secondary, var(--muted));
  font-size: .72rem;
}

.comment-copy p {
  margin: .55rem 0 0;
  color: var(--skin-text-primary, var(--text));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.comment-form {
  display: grid;
  gap: .85rem;
  padding-top: .9rem;
  border-top: 1px solid var(--skin-panel-border, var(--line));
}

.comment-form label > span,
.comment-form label > small {
  display: flex;
  justify-content: space-between;
}

.compact-empty {
  min-height: 150px;
  padding: 1.5rem;
}

@media (max-width: 640px) {
  .post-actions {
    gap: .8rem;
    overflow-x: auto;
  }

  .comment-dialog {
    width: calc(100vw - 1rem);
  }

  .comment-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: .7rem;
  }

  .comment-avatar {
    width: 34px;
    height: 34px;
  }
}

/* Closed-test member directory */
.member-directory{max-width:1120px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem) 5rem}
.member-directory-heading{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.member-directory-heading h2{margin:.15rem 0 0;font:720 clamp(2rem,4vw,3.5rem)/1 var(--display);letter-spacing:-.04em}
.member-search-form{display:flex;align-items:end;gap:.65rem;min-width:min(100%,440px)}
.member-search-form label{flex:1}.member-search-form input{min-height:44px}
.member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-top:1.25rem}
.member-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0;padding:1.1rem;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent)}
.member-card-main{display:flex;align-items:flex-start;gap:.9rem;min-width:0}
.member-avatar{width:58px;height:58px;flex:0 0 58px;border:1px solid var(--skin);border-radius:50%;object-fit:cover;background:var(--skin-glow)}
.member-avatar-fallback{display:grid;place-items:center;color:var(--text);font:850 1.35rem var(--display)}
.member-copy{min-width:0}.member-title-line{display:flex;align-items:center;gap:.45rem;min-width:0}.member-title-line strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-copy p{margin:.15rem 0;color:var(--skin);font-weight:800}.member-copy>span{display:-webkit-box;margin:.4rem 0;color:var(--muted);line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.member-copy small{color:var(--quiet)}
.member-badge{flex:0 0 auto;padding:.2rem .4rem;border:1px solid var(--line-strong);color:var(--muted);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.member-follow-button{flex:0 0 auto;min-width:104px}
.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}
@media(max-width:900px){.member-grid{grid-template-columns:1fr}.member-directory-heading{align-items:stretch;flex-direction:column}.member-search-form{width:100%;min-width:0}}
@media(max-width:560px){.member-card{align-items:stretch;flex-direction:column}.member-follow-button{width:100%}.member-search-form{align-items:stretch;flex-direction:column}.member-search-form .button{width:100%}}


.post-header {
  grid-template-columns: minmax(0, 1fr) auto;
}
.post-author-link {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.post-author-link:hover .post-author-copy strong,
.post-author-link:focus-visible .post-author-copy strong {
  color: var(--skin-primary, var(--skin));
}
.post-author-copy {
  min-width: 0;
}
.post-author-copy strong,
.post-author-copy span {
  display: block;
}
.post-author-copy span {
  color: var(--skin-text-secondary, var(--muted));
  font-size: .82rem;
}

.post-thread-route,
.member-profile-route {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 5rem;
}
.post-thread-heading {
  margin: .75rem 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.post-thread-heading p:last-child {
  max-width: 700px;
  color: var(--muted);
}
.post-thread-post > .post {
  padding-top: 0;
}
.comment-page {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.comment-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.comment-page-heading h2 {
  margin: .15rem 0 0;
  font: 750 clamp(1.7rem, 4vw, 2.7rem)/1 var(--display);
}
.comment-page-heading > strong {
  color: var(--muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.comment-page .comment-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.comment-page-form {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 1rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--skin-panel-deep, #07111a) 96%, transparent);
  box-shadow: 0 -18px 40px rgba(0,0,0,.34);
}
.comment-page-form .sheet-actions {
  justify-content: flex-end;
}

.member-card-main {
  cursor: pointer;
}
.member-card-main:focus-visible {
  outline: 2px solid var(--skin-primary, var(--skin));
  outline-offset: 4px;
}
.member-profile-header {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}
.member-profile-avatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 2px solid var(--skin-primary, var(--skin));
  border-radius: 50%;
  object-fit: cover;
  background: var(--skin-glow);
  font: 850 2.2rem var(--display);
}
.member-profile-copy {
  min-width: 0;
}
.member-profile-copy h1 {
  margin: .2rem 0 .1rem;
  font: 800 clamp(2.2rem, 6vw, 4.5rem)/.95 var(--display);
  letter-spacing: -.05em;
}
.member-profile-copy > strong {
  color: var(--skin-primary, var(--skin));
}
.member-profile-copy > p {
  max-width: 680px;
  margin: 1rem 0 .5rem;
  color: var(--muted);
  line-height: 1.6;
}
.member-profile-copy > small {
  color: var(--quiet);
}
.member-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 1.2rem;
}
.member-profile-stats span {
  display: grid;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.member-profile-stats strong {
  color: var(--text);
  font: 800 1.45rem var(--display);
}
.member-profile-action {
  align-self: center;
}
.member-post-heading {
  margin-top: 2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.member-post-heading h2 {
  margin: .15rem 0 0;
  font: 740 clamp(1.8rem, 4vw, 3rem)/1 var(--display);
}
.member-profile-feed {
  max-width: 760px;
}

@media (max-width: 720px) {
  .post-thread-route,
  .member-profile-route {
    padding-inline: .75rem;
  }
  .member-profile-header {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .member-profile-avatar {
    width: 82px;
    height: 82px;
  }
  .member-profile-action {
    grid-column: 1 / -1;
    width: 100%;
  }
  .member-profile-action .button {
    width: 100%;
  }
  .comment-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .comment-page-form {
    bottom: var(--mobile-nav-height, 66px);
  }
}


.shared-post-card {
  margin-top: 1rem;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--skin) 28%, transparent);
  background: rgba(0, 0, 0, .32);
  cursor: pointer;
}

.shared-post-card:focus-visible {
  outline: 2px solid var(--skin);
  outline-offset: 2px;
}

.shared-post-author {
  display: inline-grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.shared-post-author strong,
.shared-post-author small {
  display: block;
}

.shared-post-author small,
.shared-media-count,
.shared-post-unavailable {
  color: var(--muted);
}

.shared-post-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--skin);
  background: var(--skin-glow);
  background-size: cover;
  background-position: center;
  font-weight: 900;
}

.shared-post-card > p {
  margin: .75rem 0 0;
  line-height: 1.5;
}

.shared-post-card > img {
  width: 100%;
  max-height: 420px;
  margin-top: .75rem;
  display: block;
  object-fit: contain;
  background: #050608;
}

.shared-media-count {
  display: block;
  margin-top: .4rem;
  font-size: .75rem;
}

.comment-row.reply-comment {
  width: calc(100% - 2.25rem);
  margin-left: 2.25rem;
  border-left-color: color-mix(in srgb, var(--skin) 44%, transparent);
}

.comment-reply-context {
  display: block;
  margin-top: .35rem;
  color: var(--skin);
  font-size: .72rem;
  font-weight: 800;
}

.comment-actions {
  display: flex;
  gap: 1rem;
  margin-top: .6rem;
}

.comment-actions button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.comment-actions button:hover,
.comment-actions button.active {
  color: var(--skin);
}

.comment-actions svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.comment-actions .like-comment-action.active svg {
  fill: currentColor;
}

.comment-reply-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid color-mix(in srgb, var(--skin) 30%, transparent);
  background: color-mix(in srgb, var(--skin) 10%, transparent);
  color: var(--muted);
  font-size: .82rem;
}

.comment-reply-banner[hidden] {
  display: none;
}

.share-destination-list {
  display: grid;
  gap: .7rem;
}

.share-destination {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
  color: var(--text);
  text-align: left;
}

.share-destination:hover,
.share-destination.primary-destination {
  border-color: color-mix(in srgb, var(--skin) 55%, transparent);
  background: color-mix(in srgb, var(--skin) 10%, transparent);
}

.share-destination:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.share-destination svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: var(--skin);
  stroke-width: 1.8;
}

.share-destination strong,
.share-destination small {
  display: block;
}

.share-destination small {
  margin-top: .2rem;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 760px) {
  .post-media-grid.count-1 .post-media-frame {
    display: grid;
    place-items: center;
    background: #050608;
  }

  .post-media-grid.count-1 .post-media-frame img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 68vh;
    object-fit: contain;
  }

  .comment-row.reply-comment {
    width: calc(100% - 1.25rem);
    margin-left: 1.25rem;
  }

  .shared-post-card > img {
    max-height: 55vh;
  }
}

/* ==========================================================================
   DRIFTLINE OS ASSET SKINS — same backgrounds and panel art as Android.
   user_visual_preferences.selected_skin_key is the authoritative selector.
   ========================================================================== */

:root,
html[data-skin="aero_glass"] {
  --skin-page-asset: url("./assets/skins/aero_glass/aero_bg_07.webp");
  --skin-panel-primary-asset: url("./assets/skins/aero_glass/aero_panel_03.webp");
  --skin-panel-secondary-asset: url("./assets/skins/aero_glass/aero_panel_03.webp");
  --skin-panel-large-asset: url("./assets/skins/aero_glass/aero_panel_09.webp");
  --skin-panel-sidebar-asset: url("./assets/skins/aero_glass/aero_panel_05.webp");
  --skin-panel-compact-asset: url("./assets/skins/aero_glass/aero_panel_05.webp");
  --skin-panel-dialog-asset: url("./assets/skins/aero_glass/aero_panel_09.webp");
}

html[data-skin="performance_red"] {
  --skin-page-asset: url("./assets/skins/performance_red/perfred_bg_07.webp");
  --skin-panel-primary-asset: url("./assets/skins/performance_red/perfred_panel_03.webp");
  --skin-panel-secondary-asset: url("./assets/skins/performance_red/perfred_panel_04.webp");
  --skin-panel-large-asset: url("./assets/skins/performance_red/perfred_panel_03.webp");
  --skin-panel-sidebar-asset: url("./assets/skins/performance_red/perfred_panel_06.webp");
  --skin-panel-compact-asset: url("./assets/skins/performance_red/perfred_panel_05.webp");
  --skin-panel-dialog-asset: url("./assets/skins/performance_red/perfred_panel_02.webp");
}

html[data-skin="modern_oem"] {
  --skin-page-asset: url("./assets/skins/modern_oem/modoem_bg_07.webp");
  --skin-panel-primary-asset: url("./assets/skins/modern_oem/modoem_panel_03.webp");
  --skin-panel-secondary-asset: url("./assets/skins/modern_oem/modoem_panel_04.webp");
  --skin-panel-large-asset: url("./assets/skins/modern_oem/modoem_panel_03.webp");
  --skin-panel-sidebar-asset: url("./assets/skins/modern_oem/modoem_panel_06.webp");
  --skin-panel-compact-asset: url("./assets/skins/modern_oem/modoem_panel_05.webp");
  --skin-panel-dialog-asset: url("./assets/skins/modern_oem/modoem_panel_02.webp");
}

html[data-skin="cyberpunk"] {
  --skin-page-asset: url("./assets/skins/cyberpunk/cypunk_bg_07.webp");
  --skin-panel-primary-asset: url("./assets/skins/cyberpunk/cypunk_panel_03.webp");
  --skin-panel-secondary-asset: url("./assets/skins/cyberpunk/cypunk_panel_04.webp");
  --skin-panel-large-asset: url("./assets/skins/cyberpunk/cypunk_panel_03.webp");
  --skin-panel-sidebar-asset: url("./assets/skins/cyberpunk/cypunk_panel_06.webp");
  --skin-panel-compact-asset: url("./assets/skins/cyberpunk/cypunk_panel_05.webp");
  --skin-panel-dialog-asset: url("./assets/skins/cyberpunk/cypunk_panel_02.webp");
}

html[data-skin="mini_hud"] {
  --skin-page-asset: url("./assets/skins/mini_hud/minhud_bg_07.webp");
  --skin-panel-primary-asset: url("./assets/skins/mini_hud/minhud_panel_03.webp");
  --skin-panel-secondary-asset: url("./assets/skins/mini_hud/minhud_panel_04.webp");
  --skin-panel-large-asset: url("./assets/skins/mini_hud/minhud_panel_03.webp");
  --skin-panel-sidebar-asset: url("./assets/skins/mini_hud/minhud_panel_06.webp");
  --skin-panel-compact-asset: url("./assets/skins/mini_hud/minhud_panel_05.webp");
  --skin-panel-dialog-asset: url("./assets/skins/mini_hud/minhud_panel_02.webp");
}

html[data-skin="retro_analog"] {
  --skin-page-asset: url("./assets/skins/retro_analog/retlog_bg_07.webp");
  --skin-panel-primary-asset: url("./assets/skins/retro_analog/retlog_panel_03.webp");
  --skin-panel-secondary-asset: url("./assets/skins/retro_analog/retlog_panel_04.webp");
  --skin-panel-large-asset: url("./assets/skins/retro_analog/retlog_panel_03.webp");
  --skin-panel-sidebar-asset: url("./assets/skins/retro_analog/retlog_panel_06.webp");
  --skin-panel-compact-asset: url("./assets/skins/retro_analog/retlog_panel_05.webp");
  --skin-panel-dialog-asset: url("./assets/skins/retro_analog/retlog_panel_02.webp");
}

body {
  background-image:
    linear-gradient(rgba(0, 0, 0, .30), rgba(0, 0, 0, .44)),
    var(--skin-page-asset);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

.topbar {
  background-color: color-mix(in srgb, var(--skin-chrome) 62%, transparent);
  background-image: var(--skin-panel-compact-asset);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.left-rail {
  background-color: color-mix(in srgb, var(--skin-chrome) 54%, transparent);
  background-image: var(--skin-panel-sidebar-asset);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.mobile-nav {
  background-color: color-mix(in srgb, var(--skin-chrome) 66%, transparent);
  background-image: var(--skin-panel-compact-asset);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.app-composer,
.feed-empty,
.app-empty-feed,
.post,
.garage-build,
.notification,
.safety-section,
.settings-list section,
.composer-editor,
.profile-about,
.profile-build-row {
  background-color: color-mix(in srgb, var(--skin-panel-deep) 72%, transparent);
  background-image: var(--skin-panel-primary-asset);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-header,
.profile-stats,
.content-tabs,
.rail-section {
  background-color: color-mix(in srgb, var(--skin-panel) 70%, transparent);
  background-image: var(--skin-panel-secondary-asset);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.sheet-dialog,
.auth-form {
  background-color: color-mix(in srgb, var(--skin-panel-deep) 78%, transparent);
  background-image: var(--skin-panel-dialog-asset);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-visual,
.loading-screen {
  background-image:
    linear-gradient(rgba(0, 0, 0, .26), rgba(0, 0, 0, .52)),
    var(--skin-page-asset);
  background-size: cover, cover;
  background-position: center, center;
}

@media (min-width: 901px) {
  .main-stage::before {
    content: "";
    position: fixed;
    inset: var(--top) 0 0 var(--rail);
    z-index: -1;
    pointer-events: none;
    background-image: var(--skin-panel-large-asset);
    background-size: calc(100% - 32px) calc(100% - 32px);
    background-position: center;
    background-repeat: no-repeat;
    opacity: .28;
  }
}





.topbar {
  background-image: none;
  background-color: color-mix(in srgb, var(--skin-chrome) 88%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

@media (min-width: 821px) {
  .left-rail {
    top: calc(var(--top) + 12px);
    bottom: auto;
    height: auto;
    min-height: 0;
    max-height: calc(100vh - var(--top) - 24px);
    justify-content: flex-start;
    gap: .75rem;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--skin-primary) 22%, transparent);
    border-radius: var(--skin-panel-radius);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  }

  .left-rail .rail-footer {
    margin-top: 0;
    border-top: 1px solid color-mix(in srgb, var(--skin-primary) 18%, transparent);
  }

  .main-stage::before {
    content: none;
    display: none;
    background-image: none;
  }
}




@media (min-width: 821px) {
  .app-parity-layout {
    width: min(100%, 1560px);
    max-width: none;
    margin: 0 auto;
    padding: clamp(24px, 2.2vw, 40px) clamp(24px, 3vw, 56px) 84px;
  }

  .app-parity-layout .feed-column,
  .app-feed-heading,
  .app-composer,
  .feed-stream {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .feed-stream {
    gap: clamp(18px, 1.5vw, 28px);
  }

  .app-composer {
    padding: clamp(18px, 1.7vw, 28px) clamp(22px, 2.2vw, 38px);
  }

  .app-composer-main {
    grid-template-columns: 54px minmax(0, 1fr) 48px;
    gap: 16px;
  }

  .app-composer-main > span:first-child {
    width: 54px;
    height: 54px;
  }

  .app-composer-prompt {
    font-size: clamp(1rem, 1.15vw, 1.3rem);
  }

  .app-composer-create {
    width: 48px;
    height: 48px;
  }

  .app-composer-actions span {
    min-height: 52px;
  }

  .app-composer-actions b {
    font-size: clamp(.82rem, .9vw, 1rem);
  }

  .post {
    padding: clamp(30px, 2.4vw, 46px) clamp(32px, 2.8vw, 56px);
  }

  .post-header {
    align-items: center;
  }

  .post-author-link {
    align-items: center;
    gap: 16px;
  }

  .post-avatar {
    width: 64px;
    height: 64px;
    border-width: 2px;
    font-size: 1.3rem;
  }

  .post-author-copy strong {
    font-size: clamp(1.15rem, 1.35vw, 1.55rem);
    line-height: 1.12;
  }

  .post-author-copy span {
    margin-top: 3px;
    font-size: clamp(.84rem, .85vw, 1rem);
  }

  .post-state-line {
    gap: 10px;
    padding-top: 20px;
  }

  .post-state {
    padding: .42rem .72rem;
    font-size: clamp(.7rem, .68vw, .82rem);
  }

  .post-copy {
    margin: clamp(22px, 1.8vw, 30px) 0;
    font-size: clamp(1.1rem, 1.35vw, 1.55rem);
    line-height: 1.48;
  }

  .post-media-grid {
    margin-top: 18px;
    border-radius: 18px;
  }

  .post-media-grid.count-1 .post-media-frame {
    display: grid;
    place-items: center;
    background: #050608;
  }

  .post-media-grid.count-1 .post-media-frame img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: min(80vh, 1100px);
    object-fit: contain;
  }

  .post-actions {
    gap: clamp(24px, 3vw, 48px);
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--skin-primary) 18%, transparent);
  }

  .post-actions button {
    gap: 8px;
    font-size: clamp(.88rem, .85vw, 1rem);
  }

  .post-actions svg {
    width: 27px;
    height: 27px;
  }

  .profile-posts,
  .build-posts .post {
    max-width: none;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .post {
    padding: 26px 28px;
  }

  .post-avatar {
    width: 56px;
    height: 56px;
  }
}



@media (min-width: 821px) {
  :root {
    --top: 96px;
    --rail: clamp(250px, 15.5vw, 296px);
  }

  .topbar {
    grid-template-columns: var(--rail) minmax(360px, 580px) 1fr;
    gap: 1.25rem;
    padding: 0 1.4rem;
  }

  .topbar > .brand .brand-logo {
    width: 232px;
    max-height: 70px;
  }

  .global-search {
    height: 50px;
    padding: 0 1rem;
    font-size: 1rem;
  }

  .top-actions {
    gap: .65rem;
  }

  .top-actions .icon-button,
  .top-actions .button,
  .account-chip {
    min-height: 48px;
  }

  .left-rail {
    padding: 1.25rem .9rem;
  }

  .main-nav {
    gap: .35rem;
  }

  .main-nav button {
    min-height: 58px;
    gap: 1rem;
    padding: 0 1rem;
    font-size: 1rem;
  }

  .main-nav button svg {
    width: 24px;
    height: 24px;
  }

  .app-parity-layout {
    width: min(100%, 1720px);
    padding: 32px clamp(30px, 3vw, 58px) 96px;
  }

  .app-feed-heading {
    margin-bottom: 30px;
  }

  .app-feed-heading .overline {
    font-size: 1rem;
    letter-spacing: .22em;
  }

  .app-feed-heading h1,
  .feed-heading h1 {
    font-size: clamp(3rem, 3.25vw, 4.1rem);
    line-height: .98;
  }

  /* Android NativeComposerPrompt is a Surface, not a panel PNG. */
  .app-composer,
  html[data-skin="performance_red"] .app-composer,
  html[data-skin="aero_glass"] .app-composer,
  html[data-skin="modern_oem"] .app-composer,
  html[data-skin="cyberpunk"] .app-composer,
  html[data-skin="mini_hud"] .app-composer,
  html[data-skin="retro_analog"] .app-composer {
    min-height: 0;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--skin-primary) 24%, transparent);
    border-top-width: 1px;
    border-radius: 28px;
    background-color: color-mix(in srgb, var(--skin-panel-surface) 84%, transparent);
    background-image: none;
    box-shadow: none;
  }

  .app-composer-main {
    grid-template-columns: 84px minmax(0, 1fr) 72px;
    gap: 20px;
  }

  .app-composer-main > span:first-child {
    width: 84px;
    height: 84px;
    border-width: 3px;
    font-size: 1.6rem;
  }

  .app-composer-prompt {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .app-composer-create {
    width: 72px;
    height: 72px;
  }

  .app-composer-create svg {
    width: 34px;
    height: 34px;
  }

  .app-composer-divider {
    margin: 24px 0 20px;
  }

  .app-composer-actions {
    gap: 16px;
  }

  .app-composer-actions span {
    min-height: 72px;
    gap: 12px;
    border-radius: 18px;
  }

  .app-composer-actions svg {
    width: 34px;
    height: 34px;
  }

  .app-composer-actions b {
    font-size: 1.1rem;
  }

  .feed-stream {
    gap: 28px;
    margin-top: 32px;
  }

  .post {
    padding: 42px 48px;
  }

  .post-author-link {
    gap: 18px;
  }

  .post-avatar {
    width: 84px;
    height: 84px;
    border-width: 3px;
    font-size: 1.6rem;
  }

  .post-author-copy strong {
    font-size: 1.65rem;
  }

  .post-author-copy span {
    font-size: 1.05rem;
  }

  .post-state-line {
    gap: 12px;
    padding-top: 24px;
  }

  .post-state {
    padding: .55rem .85rem;
    font-size: .9rem;
  }

  .post-copy {
    margin: 28px 0;
    font-size: 1.45rem;
    line-height: 1.45;
  }

  .post-actions {
    margin-top: 28px;
    padding-top: 24px;
  }

  .post-actions button {
    gap: 10px;
    font-size: 1rem;
  }

  .post-actions svg {
    width: 34px;
    height: 34px;
  }

  /* Match NativeSharedPostCard instead of leaving it at compact web scale. */
  .shared-post-card {
    margin-top: 22px;
    padding: 24px;
    border-radius: 24px;
  }

  .shared-post-author {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 16px;
  }

  .shared-post-avatar {
    width: 68px;
    height: 68px;
    border-width: 2px;
    font-size: 1.35rem;
  }

  .shared-post-author strong {
    font-size: 1.35rem;
  }

  .shared-post-author small {
    margin-top: 3px;
    font-size: .95rem;
  }

  .shared-post-card > p {
    margin-top: 18px;
    font-size: 1.25rem;
    line-height: 1.45;
  }

  .shared-post-card > img {
    max-height: 640px;
    margin-top: 18px;
    border-radius: 18px;
  }

  .shared-media-count {
    margin-top: 10px;
    font-size: .9rem;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  :root {
    --top: 84px;
    --rail: 232px;
  }

  .topbar > .brand .brand-logo {
    width: 190px;
    max-height: 58px;
  }

  .app-composer {
    padding: 22px;
    border-radius: 22px;
  }

  .app-composer-main {
    grid-template-columns: 66px minmax(0, 1fr) 58px;
  }

  .app-composer-main > span:first-child {
    width: 66px;
    height: 66px;
  }

  .app-composer-create {
    width: 58px;
    height: 58px;
  }

  .app-composer-prompt {
    font-size: 1.25rem;
  }

  .post {
    padding: 34px 36px;
  }

  .post-avatar {
    width: 70px;
    height: 70px;
  }
}




@media (min-width: 821px) {
  .post {
    border: 0;
    background-color: transparent;
    background-image:
      var(--skin-panel-primary-asset),
      linear-gradient(
        color-mix(in srgb, var(--skin-panel-deep) 88%, transparent),
        color-mix(in srgb, var(--skin-panel-deep) 88%, transparent)
      );
    background-size:
      100% 100%,
      calc(100% - 56px) calc(100% - 52px);
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    backdrop-filter: none;
  }

  /* Cyberpunk has the widest transparent frame around its panel artwork. */
  html[data-skin="cyberpunk"] .post {
    background-size:
      100% 100%,
      calc(100% - 66px) calc(100% - 60px);
  }

  /* Performance Red also has a substantial illuminated outer frame. */
  html[data-skin="performance_red"] .post {
    background-size:
      100% 100%,
      calc(100% - 62px) calc(100% - 58px);
  }

  /* These panels have slightly slimmer transparent borders. */
  html[data-skin="aero_glass"] .post,
  html[data-skin="modern_oem"] .post,
  html[data-skin="mini_hud"] .post,
  html[data-skin="retro_analog"] .post {
    background-size:
      100% 100%,
      calc(100% - 52px) calc(100% - 48px);
  }
}



/* Avatar geometry is shared across desktop and mobile. */
.post-avatar,
.shared-post-avatar,
.notification-avatar,
.account-chip > span:first-child,
.quick-composer > span:first-child,
.composer-author > span:first-child {
  border-radius: 50%;
  overflow: hidden;
  background-clip: padding-box;
  flex: 0 0 auto;
}

/* The sidebar artwork is the outer shell; its HTML surface sits inside it. */
.left-rail {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  background-image:
    var(--skin-panel-sidebar-asset),
    linear-gradient(
      color-mix(in srgb, var(--skin-panel-deep) 92%, transparent),
      color-mix(in srgb, var(--skin-panel-deep) 92%, transparent)
    );
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, calc(100% - 34px) calc(100% - 38px);
}

html[data-skin="cyberpunk"] .left-rail {
  background-size: 100% 100%, calc(100% - 42px) calc(100% - 46px);
}

html[data-skin="performance_red"] .left-rail {
  background-size: 100% 100%, calc(100% - 38px) calc(100% - 42px);
}

.main-nav {
  padding: 12px 12px 4px;
}

.main-nav button {
  width: calc(100% - 12px);
  margin: 0 6px;
  padding-inline: 18px;
  border-left: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  box-sizing: border-box;
}

.main-nav button.active {
  border-color: color-mix(in srgb, var(--skin-primary) 72%, transparent);
}

.nav-separator {
  width: auto;
  margin-inline: 24px;
}

.left-rail .rail-footer {
  margin: 0 18px 12px;
  padding-inline: 8px;
}

@media (min-width: 821px) {
  /* Per-skin safe-area variables reserve the decorative frame. */
  :root,
  html[data-skin="aero_glass"],
  html[data-skin="modern_oem"],
  html[data-skin="mini_hud"],
  html[data-skin="retro_analog"] {
    --post-safe-top: 54px;
    --post-safe-right: 56px;
    --post-safe-bottom: 64px;
    --post-safe-left: 56px;
  }

  html[data-skin="cyberpunk"] {
    --post-safe-top: 62px;
    --post-safe-right: 68px;
    --post-safe-bottom: 76px;
    --post-safe-left: 68px;
  }

  html[data-skin="performance_red"] {
    --post-safe-top: 66px;
    --post-safe-right: 64px;
    --post-safe-bottom: 74px;
    --post-safe-left: 64px;
  }

  .post {
    box-sizing: border-box;
    padding:
      var(--post-safe-top)
      var(--post-safe-right)
      var(--post-safe-bottom)
      var(--post-safe-left);
  }

  .post-header,
  .post-state-line,
  .post-copy,
  .post-media-grid,
  .post-caption,
  .post-actions,
  .shared-post-card {
    position: relative;
    z-index: 1;
  }

  .post-header {
    min-height: 84px;
  }

  .post-avatar {
    width: 84px;
    height: 84px;
  }

  .post-actions {
    margin-top: 30px;
    padding: 22px 8px 0;
  }

  .post-actions button:first-child {
    margin-left: 0;
  }

  .post-actions .save-action {
    margin-right: 0;
  }

  /* Give the sidebar controls a frame-safe content zone. */
  .left-rail {
    padding: 20px 10px 18px;
  }

  .main-nav button {
    min-height: 56px;
  }
}

@media (max-width: 820px) {
  .post {
    padding: 38px 24px 48px;
  }

  html[data-skin="cyberpunk"] .post,
  html[data-skin="performance_red"] .post {
    padding: 44px 28px 56px;
  }

  .post-avatar {
    width: 58px;
    height: 58px;
  }

  .post-actions {
    margin-top: 22px;
    padding: 18px 4px 0;
  }
}




:root,
html[data-skin="aero_glass"] {
  --skin-post-panel-asset: url("./assets/skins/aero_glass/aero_panel_06.webp");
  --post-safe-top: 48px;
  --post-safe-right: 52px;
  --post-safe-bottom: 58px;
  --post-safe-left: 52px;
  --rail-safe-top: 22px;
  --rail-safe-right: 18px;
  --rail-safe-bottom: 24px;
  --rail-safe-left: 18px;
}

html[data-skin="performance_red"] {
  --skin-post-panel-asset: url("./assets/skins/performance_red/perfred_panel_03.webp");
  --post-safe-top: 66px;
  --post-safe-right: 64px;
  --post-safe-bottom: 74px;
  --post-safe-left: 64px;
  --rail-safe-top: 26px;
  --rail-safe-right: 22px;
  --rail-safe-bottom: 28px;
  --rail-safe-left: 22px;
}

html[data-skin="modern_oem"] {
  --skin-post-panel-asset: url("./assets/skins/modern_oem/modoem_panel_01.webp");
  --post-safe-top: 44px;
  --post-safe-right: 48px;
  --post-safe-bottom: 52px;
  --post-safe-left: 48px;
  --rail-safe-top: 24px;
  --rail-safe-right: 20px;
  --rail-safe-bottom: 26px;
  --rail-safe-left: 20px;
}

html[data-skin="cyberpunk"] {
  --skin-post-panel-asset: url("./assets/skins/cyberpunk/cypunk_panel_01.webp");
  --post-safe-top: 58px;
  --post-safe-right: 64px;
  --post-safe-bottom: 68px;
  --post-safe-left: 64px;
  --rail-safe-top: 28px;
  --rail-safe-right: 22px;
  --rail-safe-bottom: 30px;
  --rail-safe-left: 22px;
}

html[data-skin="mini_hud"] {
  --skin-post-panel-asset: url("./assets/skins/mini_hud/minhud_panel_01.webp");
  --post-safe-top: 46px;
  --post-safe-right: 50px;
  --post-safe-bottom: 56px;
  --post-safe-left: 50px;
  --rail-safe-top: 24px;
  --rail-safe-right: 18px;
  --rail-safe-bottom: 26px;
  --rail-safe-left: 18px;
}

html[data-skin="retro_analog"] {
  --skin-post-panel-asset: url("./assets/skins/retro_analog/retlog_panel_01.webp");
  --post-safe-top: 48px;
  --post-safe-right: 52px;
  --post-safe-bottom: 58px;
  --post-safe-left: 52px;
  --rail-safe-top: 24px;
  --rail-safe-right: 20px;
  --rail-safe-bottom: 26px;
  --rail-safe-left: 20px;
}

/* Posts use the exact same panel slots as Android and no second card layer. */
.post,
html[data-skin] .post {
  border: 0 !important;
  border-bottom: 0 !important;
  background-color: transparent !important;
  background-image: var(--skin-post-panel-asset) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.post::before,
.post::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* The side rail also uses only its actual skin artwork. */
.left-rail,
html[data-skin] .left-rail {
  border: 0 !important;
  background-color: transparent !important;
  background-image: var(--skin-panel-sidebar-asset) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  padding:
    var(--rail-safe-top)
    var(--rail-safe-right)
    var(--rail-safe-bottom)
    var(--rail-safe-left) !important;
}

.left-rail::before,
.left-rail::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.main-nav {
  padding: 0 !important;
}

.main-nav button {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 18px !important;
}

.nav-separator {
  margin-inline: 14px !important;
}

.left-rail .rail-footer {
  margin: 0 10px !important;
}

/* Remove the hidden generic card underneath every other artwork-backed shell. */
.feed-empty,
.app-empty-feed,
.garage-build,
.notification,
.safety-section,
.settings-list section,
.composer-editor,
.profile-about,
.profile-build-row {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: var(--skin-panel-primary-asset) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.profile-header,
.profile-stats,
.content-tabs,
.rail-section {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: var(--skin-panel-secondary-asset) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.sheet-dialog,
.auth-form {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: var(--skin-panel-dialog-asset) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mobile-nav {
  background-color: transparent !important;
  background-image: var(--skin-panel-compact-asset) !important;
  box-shadow: none !important;
}

@media (min-width: 821px) {
  .post {
    padding:
      var(--post-safe-top)
      var(--post-safe-right)
      var(--post-safe-bottom)
      var(--post-safe-left) !important;
  }
}

@media (max-width: 820px) {
  :root,
  html[data-skin="aero_glass"],
  html[data-skin="modern_oem"],
  html[data-skin="mini_hud"],
  html[data-skin="retro_analog"] {
    --post-safe-top: 36px;
    --post-safe-right: 24px;
    --post-safe-bottom: 44px;
    --post-safe-left: 24px;
  }

  html[data-skin="performance_red"],
  html[data-skin="cyberpunk"] {
    --post-safe-top: 42px;
    --post-safe-right: 28px;
    --post-safe-bottom: 50px;
    --post-safe-left: 28px;
  }

  .post {
    padding:
      var(--post-safe-top)
      var(--post-safe-right)
      var(--post-safe-bottom)
      var(--post-safe-left) !important;
  }
}




:root {
  --web-panel-frame-x: 56px;
  --web-panel-frame-y: 44px;
  --web-panel-slice-x: 16%;
  --web-panel-slice-y: 22%;
}

/* Assign the correct artwork to every major Social shell. */
.post { --web-panel-asset: var(--skin-post-panel-asset); }
.left-rail { --web-panel-asset: var(--skin-panel-sidebar-asset); }

.feed-empty,
.app-empty-feed,
.garage-build,
.notification,
.safety-section,
.settings-list section,
.composer-editor,
.profile-about,
.profile-build-row {
  --web-panel-asset: var(--skin-panel-primary-asset);
}

.profile-header,
.profile-stats,
.content-tabs,
.rail-section {
  --web-panel-asset: var(--skin-panel-secondary-asset);
}

.sheet-dialog,
.auth-form {
  --web-panel-asset: var(--skin-panel-dialog-asset);
}

.mobile-nav {
  --web-panel-asset: var(--skin-panel-compact-asset);
}

/*
 * The element carries layout and content only. Its ::before pseudo-element
 * draws the scalable frame. Corners remain fixed while only the centre and
 * straight edge segments stretch.
 */
:where(
  .post,
  .left-rail,
  .feed-empty,
  .app-empty-feed,
  .garage-build,
  .notification,
  .safety-section,
  .settings-list section,
  .composer-editor,
  .profile-about,
  .profile-build-row,
  .profile-header,
  .profile-stats,
  .content-tabs,
  .rail-section,
  .sheet-dialog,
  .auth-form,
  .mobile-nav
) {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:where(
  .post,
  .left-rail,
  .feed-empty,
  .app-empty-feed,
  .garage-build,
  .notification,
  .safety-section,
  .settings-list section,
  .composer-editor,
  .profile-about,
  .profile-build-row,
  .profile-header,
  .profile-stats,
  .content-tabs,
  .rail-section,
  .sheet-dialog,
  .auth-form,
  .mobile-nav
)::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
  border-style: solid;
  border-color: transparent;
  border-width: var(--web-panel-frame-y) var(--web-panel-frame-x);
  border-image-source: var(--web-panel-asset);
  border-image-slice:
    var(--web-panel-slice-y)
    var(--web-panel-slice-x)
    var(--web-panel-slice-y)
    var(--web-panel-slice-x)
    fill;
  border-image-width: var(--web-panel-frame-y) var(--web-panel-frame-x);
  border-image-outset: 0;
  border-image-repeat: stretch;
  background: none !important;
}

/* Keep all actual controls/content above the frame renderer. */
:where(
  .post,
  .left-rail,
  .feed-empty,
  .app-empty-feed,
  .garage-build,
  .notification,
  .safety-section,
  .settings-list section,
  .composer-editor,
  .profile-about,
  .profile-build-row,
  .profile-header,
  .profile-stats,
  .content-tabs,
  .rail-section,
  .sheet-dialog,
  .auth-form,
  .mobile-nav
) > * {
  position: relative;
  z-index: 1;
}

/*
 * Performance Red is the one built-in Android skin that intentionally renders
 * its native panel PNG with FillBounds. Preserve that behaviour for exact app
 * parity instead of applying the nine-slice renderer to that skin alone.
 */
html[data-skin="performance_red"] :where(
  .post,
  .left-rail,
  .feed-empty,
  .app-empty-feed,
  .garage-build,
  .notification,
  .safety-section,
  .settings-list section,
  .composer-editor,
  .profile-about,
  .profile-build-row,
  .profile-header,
  .profile-stats,
  .content-tabs,
  .rail-section,
  .sheet-dialog,
  .auth-form,
  .mobile-nav
)::before {
  border: 0;
  border-image: none;
  background-image: var(--web-panel-asset) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

@media (max-width: 820px) {
  :root {
    --web-panel-frame-x: 38px;
    --web-panel-frame-y: 30px;
  }
}



/* Shared content geometry for all six built-in skins. */
:root {
  --dl-content-max: 1280px;
  --dl-route-pad-x: clamp(22px, 3.2vw, 52px);
  --dl-route-pad-y: clamp(26px, 3vw, 44px);
  --dl-frame-x: 48px;
  --dl-frame-y: 38px;
  --dl-slice-x: 8%;
  --dl-slice-y: 12%;
  --dl-card-safe-x: 48px;
  --dl-card-safe-top: 42px;
  --dl-card-safe-bottom: 48px;
  --dl-rail-frame-x: 34px;
  --dl-rail-frame-y: 40px;
  --dl-rail-slice-x: 17%;
  --dl-rail-slice-y: 8%;
}

html[data-skin="aero_glass"] {
  --dl-frame-x: 48px;
  --dl-frame-y: 38px;
  --dl-slice-x: 8%;
  --dl-slice-y: 12%;
}

html[data-skin="performance_red"] {
  --dl-frame-x: 54px;
  --dl-frame-y: 44px;
  --dl-slice-x: 7%;
  --dl-slice-y: 10%;
  --dl-card-safe-x: 56px;
  --dl-card-safe-top: 50px;
  --dl-card-safe-bottom: 56px;
}

html[data-skin="modern_oem"] {
  --dl-frame-x: 46px;
  --dl-frame-y: 36px;
  --dl-slice-x: 7%;
  --dl-slice-y: 18%;
}

html[data-skin="cyberpunk"] {
  --dl-frame-x: 56px;
  --dl-frame-y: 44px;
  --dl-slice-x: 13%;
  --dl-slice-y: 13%;
  --dl-card-safe-x: 58px;
  --dl-card-safe-top: 50px;
  --dl-card-safe-bottom: 56px;
}

html[data-skin="mini_hud"] {
  --dl-frame-x: 48px;
  --dl-frame-y: 38px;
  --dl-slice-x: 8%;
  --dl-slice-y: 13%;
}

html[data-skin="retro_analog"] {
  --dl-frame-x: 48px;
  --dl-frame-y: 38px;
  --dl-slice-x: 9%;
  --dl-slice-y: 14%;
}

/* --------------------------------------------------------------------------
   One visible artwork layer only.
   -------------------------------------------------------------------------- */

/* Every major content card uses the same canonical Social panel for its skin. */
.post,
.composer-editor,
.notification,
.profile-header,
.member-profile-header,
.garage-build,
.safety-section,
.sheet-dialog,
.auth-form {
  --dl-panel-asset: var(--skin-post-panel-asset);
}

.left-rail {
  --dl-panel-asset: var(--skin-panel-sidebar-asset);
}

.mobile-nav {
  --dl-panel-asset: var(--skin-panel-compact-asset);
}

:is(
  .post,
  .composer-editor,
  .notification,
  .profile-header,
  .member-profile-header,
  .garage-build,
  .safety-section,
  .sheet-dialog,
  .auth-form,
  .left-rail,
  .mobile-nav
) {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:is(
  .post,
  .composer-editor,
  .notification,
  .profile-header,
  .member-profile-header,
  .garage-build,
  .safety-section,
  .sheet-dialog,
  .auth-form
)::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: var(--dl-frame-y) var(--dl-frame-x) !important;
  border-image-source: var(--dl-panel-asset) !important;
  border-image-slice: var(--dl-slice-y) var(--dl-slice-x) fill !important;
  border-image-width: var(--dl-frame-y) var(--dl-frame-x) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
  background-image: none !important;
}

/* Override the old Performance Red FillBounds exception. All skins preserve corners. */
html[data-skin="performance_red"] :is(
  .post,
  .composer-editor,
  .notification,
  .profile-header,
  .member-profile-header,
  .garage-build,
  .safety-section,
  .sheet-dialog,
  .auth-form
)::before {
  border-style: solid !important;
  border-width: var(--dl-frame-y) var(--dl-frame-x) !important;
  border-image-source: var(--dl-panel-asset) !important;
  border-image-slice: var(--dl-slice-y) var(--dl-slice-x) fill !important;
  border-image-width: var(--dl-frame-y) var(--dl-frame-x) !important;
  background: none !important;
  background-image: none !important;
}

.left-rail::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: var(--dl-rail-frame-y) var(--dl-rail-frame-x) !important;
  border-image-source: var(--dl-panel-asset) !important;
  border-image-slice: var(--dl-rail-slice-y) var(--dl-rail-slice-x) fill !important;
  border-image-width: var(--dl-rail-frame-y) var(--dl-rail-frame-x) !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

.mobile-nav::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 24px 34px !important;
  border-image-source: var(--dl-panel-asset) !important;
  border-image-slice: 28% 9% fill !important;
  border-image-width: 24px 34px !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

:is(
  .post,
  .composer-editor,
  .notification,
  .profile-header,
  .member-profile-header,
  .garage-build,
  .safety-section,
  .sheet-dialog,
  .auth-form,
  .left-rail,
  .mobile-nav
) > * {
  position: relative;
  z-index: 1;
}

/* These are content inside a page/card, not additional skin panels. */
:is(
  .feed-empty,
  .app-empty-feed,
  .profile-stats,
  .content-tabs,
  .profile-about,
  .profile-build-row,
  .rail-section,
  .settings-list section,
  .account-control-card,
  .shared-post-card,
  .member-card,
  .notification-empty,
  .garage-empty
) {
  border: 1px solid color-mix(in srgb, var(--skin-primary) 28%, transparent) !important;
  border-radius: var(--skin-card-radius) !important;
  background: color-mix(in srgb, var(--skin-panel-deep) 72%, transparent) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:is(
  .feed-empty,
  .app-empty-feed,
  .profile-stats,
  .content-tabs,
  .profile-about,
  .profile-build-row,
  .rail-section,
  .settings-list section,
  .account-control-card,
  .shared-post-card,
  .member-card,
  .notification-empty,
  .garage-empty
)::before,
:is(
  .feed-empty,
  .app-empty-feed,
  .profile-stats,
  .content-tabs,
  .profile-about,
  .profile-build-row,
  .rail-section,
  .settings-list section,
  .account-control-card,
  .shared-post-card,
  .member-card,
  .notification-empty,
  .garage-empty
)::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}

/* No duplicate box behind the sidebar artwork. */
.left-rail {
  padding: 34px 24px 30px !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.left-rail .main-nav,
.left-rail .rail-footer {
  width: 100%;
  max-width: 100%;
}

.main-nav button {
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
}

.main-nav button.active {
  border-color: color-mix(in srgb, var(--skin-primary) 78%, transparent) !important;
  background: color-mix(in srgb, var(--skin-primary) 22%, transparent) !important;
}

.nav-separator {
  margin-inline: 10px !important;
}

.left-rail .rail-footer {
  margin: 0 !important;
  padding-inline: 12px !important;
}

/* --------------------------------------------------------------------------
   Shared route layout. Skin selection no longer changes page geometry.
   -------------------------------------------------------------------------- */

.route[data-page="home"] .app-parity-layout,
.route[data-page="explore"] .editorial-heading,
.route[data-page="explore"] .member-directory,
.route[data-page="create"] .composer-page,
.route[data-page="notifications"] .notification-heading,
.route[data-page="notifications"] .notification-list,
.route[data-page="profile"] > :is(.profile-cover, .profile-header, .profile-stats, .content-tabs, .profile-feed, .system-message, .inline-loading),
.route[data-page="garage"] > :is(.garage-cover, .garage-toolbar, .garage-showcase, .garage-empty, .system-message, .inline-loading),
.route[data-page="safety"] > :is(.editorial-heading, .safety-center, .system-message, .inline-loading) {
  width: min(calc(100% - (var(--dl-route-pad-x) * 2)), var(--dl-content-max));
  max-width: var(--dl-content-max);
  margin-left: auto;
  margin-right: auto;
}

.route[data-page="explore"] .editorial-heading,
.route[data-page="create"] .composer-page > header,
.route[data-page="notifications"] .notification-heading,
.route[data-page="safety"] .editorial-heading {
  padding: var(--dl-route-pad-y) 0 24px !important;
  border: 0 !important;
  align-items: end;
}

.route[data-page="explore"] .editorial-heading h1,
.route[data-page="create"] .composer-page > header h1,
.route[data-page="notifications"] .notification-heading h1,
.route[data-page="safety"] .editorial-heading h1,
.route[data-page="garage"] .garage-cover-copy h1 {
  margin: 0 !important;
  font-size: clamp(2.5rem, 4.8vw, 4.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

.route[data-page="explore"] .editorial-heading > p:last-child,
.route[data-page="create"] .composer-page > header > p:last-child,
.route[data-page="safety"] .editorial-heading > p:last-child {
  max-width: 760px;
  margin-top: 12px;
}

/* Home */
.app-parity-layout {
  padding-top: var(--dl-route-pad-y) !important;
}

.app-feed-heading {
  padding-bottom: 22px !important;
}

.app-composer {
  margin-top: 22px !important;
}

.feed-stream {
  gap: 24px !important;
}

.post {
  padding: var(--dl-card-safe-top) var(--dl-card-safe-x) var(--dl-card-safe-bottom) !important;
}

.post-avatar,
.notification-avatar,
.member-avatar,
.member-profile-avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
  object-fit: cover;
}

.post-media-grid,
.post-media-frame,
.garage-build-media {
  border-radius: 14px;
  overflow: hidden;
}

.shared-post-card {
  margin-top: 18px !important;
  padding: 20px !important;
}

.post-actions {
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid color-mix(in srgb, var(--skin-primary) 20%, transparent) !important;
}

/* Explore */
.member-directory {
  padding: 0 0 84px !important;
}

.member-directory-heading {
  padding: 24px 0 18px !important;
}

.member-grid {
  gap: 16px !important;
}

.member-card {
  padding: 20px !important;
}

/* Create */
.composer-page {
  padding: 0 0 84px !important;
}

.composer-editor {
  margin-top: 8px !important;
  padding: var(--dl-card-safe-top) var(--dl-card-safe-x) var(--dl-card-safe-bottom) !important;
}

.composer-settings,
.composer-body-label,
.post-media-picker,
.composer-footer {
  position: relative;
  z-index: 2;
}

.composer-settings {
  gap: 16px !important;
}

.composer-body-label textarea {
  min-height: 260px !important;
}

/* Notifications */
.notification-list {
  display: grid;
  gap: 16px;
  padding-bottom: 84px;
}

.notification {
  padding: 28px 38px !important;
}

.notification-main {
  padding: 0 !important;
  background: transparent !important;
}

.notification-request-actions {
  padding: 18px 0 0 62px !important;
}

/* Profile: one profile panel, then plain stats/tabs, then panelled posts. */
.profile-cover {
  height: clamp(230px, 27vw, 360px) !important;
  margin-top: var(--dl-route-pad-y) !important;
  border-radius: 14px;
}

.profile-header {
  margin-top: 18px !important;
  padding: 38px 48px !important;
}

.profile-stats,
.content-tabs {
  margin-top: 14px !important;
}

.profile-stats {
  padding: 10px 14px !important;
}

.content-tabs {
  padding: 8px 14px !important;
}

.profile-feed {
  padding-bottom: 84px !important;
}

.profile-feed .post {
  margin-top: 24px !important;
}

/* Garage */
.garage-cover {
  min-height: clamp(260px, 30vw, 390px) !important;
  margin-top: var(--dl-route-pad-y) !important;
  border-radius: 14px;
}

.garage-cover-copy {
  left: clamp(24px, 4vw, 52px) !important;
  right: clamp(24px, 4vw, 52px) !important;
  bottom: clamp(24px, 4vw, 46px) !important;
}

.garage-toolbar {
  padding: 20px 0 16px !important;
}

.garage-showcase {
  padding-bottom: 84px !important;
}

.garage-build {
  padding: var(--dl-card-safe-top) var(--dl-card-safe-x) var(--dl-card-safe-bottom) !important;
  gap: 24px !important;
}

.garage-build-media {
  background: rgba(2, 8, 14, .82) !important;
}

/* Settings & Safety */
.safety-center {
  display: grid;
  gap: 20px;
  padding: 0 0 40px !important;
}

.safety-section {
  padding: 36px 48px 42px !important;
}

.safety-section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: start !important;
}

.safety-section-heading > span {
  display: none !important;
}

.safety-section-heading h2 {
  margin: 0 0 8px !important;
}

.safety-section-heading .status,
.safety-section-heading > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end;
}

.safety-inline-form,
.report-form,
.account-control-grid,
.safety-record-list {
  margin-top: 22px !important;
}

.account-control-grid {
  gap: 16px !important;
}

.account-control-card,
.safety-record {
  padding: 18px !important;
}

.route[data-page="safety"] > #signOutButton {
  display: block;
  width: min(calc(100% - (var(--dl-route-pad-x) * 2)), var(--dl-content-max));
  margin: 0 auto 84px !important;
  text-align: left;
}

/* Dialogs */
.sheet-dialog {
  padding: 28px !important;
}

.sheet-header {
  background: transparent !important;
}

/* Ensure all nested utility surfaces remain plain in every skin. */
:is(
  .shared-post-card,
  .member-card,
  .account-control-card,
  .safety-record,
  .notification-main,
  .profile-stats,
  .content-tabs,
  .post-media-frame,
  .garage-build-media,
  .composer-settings select,
  .composer-body-label textarea,
  .safety-inline-form input,
  .report-form input,
  .report-form textarea,
  .report-form select
) {
  background-image: none !important;
}

@media (max-width: 820px) {
  :root {
    --dl-route-pad-x: 16px;
    --dl-route-pad-y: 20px;
    --dl-frame-x: 34px;
    --dl-frame-y: 28px;
    --dl-card-safe-x: 24px;
    --dl-card-safe-top: 34px;
    --dl-card-safe-bottom: 40px;
  }

  .post,
  .composer-editor,
  .profile-header,
  .member-profile-header,
  .garage-build,
  .safety-section {
    padding: var(--dl-card-safe-top) var(--dl-card-safe-x) var(--dl-card-safe-bottom) !important;
  }

  .notification {
    padding: 24px !important;
  }

  .editorial-heading h1,
  .composer-page > header h1,
  .notification-heading h1,
  .garage-cover-copy h1 {
    font-size: clamp(2.35rem, 12vw, 3.6rem) !important;
  }

  .profile-cover,
  .garage-cover {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0;
  }

  .safety-section-heading {
    grid-template-columns: 1fr !important;
  }

  .safety-section-heading .status,
  .safety-section-heading > strong {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start;
  }
}



@media (min-width: 821px) {
  /* Keep the navigation completely outside document flow on every route. */
  .left-rail,
  html[data-skin] .left-rail {
    position: fixed !important;
    z-index: 60 !important;
    top: calc(var(--top) + 16px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--rail) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--top) - 32px) !important;
    align-self: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* The main content now begins directly below the fixed top bar. */
  .main-stage {
    margin-left: var(--rail) !important;
    padding-top: var(--top) !important;
  }

  .main-stage > .route.active {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Aero's post artwork is already the visible surface. Nested post content
   must not add another dark rounded card inside it. Other skins retain their
   existing nested treatment because it is not visually duplicating a panel. */
html[data-skin="aero_glass"] .post :is(
  .shared-post-card,
  .post-media-grid,
  .post-media-frame
) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-skin="aero_glass"] .post .shared-post-card {
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--skin-primary) 24%, transparent) !important;
  border-radius: 0 !important;
}

html[data-skin="aero_glass"] .post .shared-post-card::before,
html[data-skin="aero_glass"] .post .shared-post-card::after,
html[data-skin="aero_glass"] .post .post-media-grid::before,
html[data-skin="aero_glass"] .post .post-media-grid::after,
html[data-skin="aero_glass"] .post .post-media-frame::before,
html[data-skin="aero_glass"] .post .post-media-frame::after {
  content: none !important;
  display: none !important;
}

html[data-skin="aero_glass"] .post .post-media-grid,
html[data-skin="aero_glass"] .post .post-media-frame {
  border: 0 !important;
}

html[data-skin="aero_glass"] .post .post-media-grid.count-1 .post-media-frame {
  background: transparent !important;
}




html[data-skin="aero_glass"] {
  --dl-frame-x: 56px;
  --dl-frame-y: 44px;
  --dl-slice-x: 16%;
  --dl-slice-y: 22%;
  --dl-card-safe-x: 56px;
  --dl-card-safe-top: 48px;
  --dl-card-safe-bottom: 52px;
}

/* Keep Aero post artwork to one exact nine-slice layer. */
html[data-skin="aero_glass"] .post {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-skin="aero_glass"] .post::before {
  inset: 0 !important;
  border-width: 44px 56px !important;
  border-image-source: var(--skin-post-panel-asset) !important;
  border-image-slice: 22% 16% fill !important;
  border-image-width: 44px 56px !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* No generic card layer may be reintroduced inside an Aero post. */
html[data-skin="aero_glass"] .post > :is(
  .post-content,
  .post-main,
  .post-body,
  .post-inner
) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 820px) {
  html[data-skin="aero_glass"] {
    --dl-frame-x: 38px;
    --dl-frame-y: 30px;
    --dl-card-safe-x: 28px;
    --dl-card-safe-top: 36px;
    --dl-card-safe-bottom: 42px;
  }

  html[data-skin="aero_glass"] .post::before {
    border-width: 30px 38px !important;
    border-image-width: 30px 38px !important;
  }
}

/* Fix 25: product legal documents and acceptance */
.auth-legal-links,
.app-legal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

.auth-legal-links {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 0.76rem;
}

.auth-legal-links a,
.app-legal-footer a,
.profile-policy-note a,
.legal-check a {
  color: var(--accent);
  text-decoration: none;
}

.auth-legal-links a:hover,
.app-legal-footer a:hover,
.profile-policy-note a:hover,
.legal-check a:hover {
  text-decoration: underline;
}

.legal-check {
  align-items: flex-start;
  line-height: 1.45;
}

.legal-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.legal-resource-card,
.policy-required-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: rgba(1, 8, 15, 0.58);
  color: var(--text);
  text-decoration: none;
}

.legal-resource-card:hover,
.policy-required-card:hover {
  border-color: var(--accent);
}

.legal-resource-card span,
.policy-required-card span,
.profile-policy-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.policy-dialog {
  width: min(760px, calc(100vw - 2rem));
}

.policy-dialog::backdrop {
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(8px);
}

.policy-required-list {
  display: grid;
  gap: 0.65rem;
}

.app-legal-footer {
  max-width: 1280px;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem 6rem;
  color: var(--muted);
  font-size: 0.75rem;
}

@media (max-width: 760px) {
  .legal-resource-grid {
    grid-template-columns: 1fr;
  }

  .app-legal-footer {
    padding-bottom: 7rem;
  }
}


/* Release bootstrap failure state */
.loading-screen.failed {
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.loading-screen.failed strong {
  color: var(--skin-text-primary);
  font-size: clamp(1.25rem, 3vw, 2rem);
}
.loading-screen.failed p {
  width: min(36rem, 100%);
  margin: 0;
  color: var(--skin-text-secondary);
}

/* Phase 1 security foundation: Cloudflare Turnstile verification */
.human-verification-card {
  display: grid;
  gap: 0.65rem;
  margin: 0.9rem 0;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: rgba(1, 8, 15, 0.76);
}

.human-verification-card > div:first-child {
  display: grid;
  gap: 0.2rem;
}

.human-verification-card strong {
  color: var(--text);
  font-size: 0.85rem;
}

.human-verification-card span,
.human-verification-card small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.human-verification-card small[data-state="success"] {
  color: #86efac;
}

.human-verification-card small[data-state="error"] {
  color: #fca5a5;
}

.turnstile-widget {
  width: 100%;
  min-height: 65px;
  overflow: hidden;
}

.account-verification-card {
  max-width: 680px;
}

/* ECUniverse 1.4.2 hardening controls */
.member-profile-action {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 132px;
}
.comment-actions {
  flex-wrap: wrap;
}
.feed-load-more {
  display: flex;
  justify-content: center;
  padding: 1rem 0 2rem;
}
@media (max-width: 720px) {
  .member-profile-action {
    min-width: 0;
  }
}
.legacy-video-placeholder {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .35rem;
  padding: 1rem;
  background: #05070a;
  color: var(--muted);
  text-align: center;
}
.legacy-video-placeholder strong {
  color: var(--skin-primary, var(--skin));
  letter-spacing: .16em;
}