:root{--bg:#080b14;--bg2:#11172a;--panel:rgba(18,25,45,.72);--panel2:rgba(26,35,61,.92);--text:#f5f8ff;--muted:#9ba8c7;--line:rgba(255,255,255,.09);--blue:#2f9cff;--cyan:#5ee7ff;--violet:#9c6cff;--green:#51e0a1;--shadow:0 24px 80px rgba(0,0,0,.38);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 15% 0%,rgba(47,156,255,.18),transparent 34%),radial-gradient(circle at 88% 10%,rgba(156,108,255,.16),transparent 28%),linear-gradient(145deg,var(--bg),var(--bg2));min-height:100vh;line-height:1.55}body.light{--bg:#eef3ff;--bg2:#f8faff;--panel:rgba(255,255,255,.74);--panel2:#fff;--text:#11172a;--muted:#5b6681;--line:rgba(20,35,70,.12);--shadow:0 24px 70px rgba(41,56,95,.15)}a{color:inherit;text-decoration:none}button,input{font:inherit}.container{width:min(1180px,calc(100% - 36px));margin:auto}.header{position:sticky;top:0;z-index:100;padding:14px 0}.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(8,11,20,.7);backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.18)}body.light .nav{background:rgba(255,255,255,.78)}.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em}.brand-mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 0 28px rgba(47,156,255,.4)}.nav-links{display:flex;align-items:center;gap:4px}.nav-links a{padding:10px 12px;color:var(--muted);border-radius:11px;font-size:.93rem}.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,.07)}.nav-actions{display:flex;gap:8px}.icon-btn,.menu-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer}.menu-btn{display:none}.hero{padding:82px 0 52px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}.eyebrow,.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(94,231,255,.25);border-radius:999px;background:rgba(47,156,255,.1);color:var(--cyan);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.hero h1{font-size:clamp(3rem,7vw,6.6rem);line-height:.93;letter-spacing:-.065em;margin:20px 0}.gradient-text{background:linear-gradient(90deg,#fff,var(--cyan),#bc9dff);-webkit-background-clip:text;color:transparent}body.light .gradient-text{background:linear-gradient(90deg,#162342,#147bd1,#7246ca);-webkit-background-clip:text;color:transparent}.hero p,.lead{font-size:1.08rem;color:var(--muted);max-width:680px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:13px;border:1px solid var(--line);background:var(--panel);font-weight:750;cursor:pointer}.btn.primary{border:0;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 14px 35px rgba(47,156,255,.25)}.btn:hover{transform:translateY(-2px)}.hero-console{border:1px solid var(--line);border-radius:26px;background:linear-gradient(160deg,rgba(32,43,75,.9),rgba(12,17,31,.92));padding:20px;box-shadow:var(--shadow);transform:perspective(900px) rotateY(-4deg) rotateX(2deg)}body.light .hero-console{background:linear-gradient(160deg,#fff,#edf3ff)}.console-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}.status{display:flex;align-items:center;gap:8px;color:var(--green);font-size:.88rem}.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}.mod-preview{height:250px;margin:18px 0;border-radius:18px;display:flex;align-items:end;padding:22px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7)),radial-gradient(circle at 70% 25%,rgba(94,231,255,.45),transparent 22%),linear-gradient(135deg,#24385f,#101522);overflow:hidden;position:relative}.machine{font-size:5rem;position:absolute;right:30px;top:45px;filter:drop-shadow(0 20px 20px rgba(0,0,0,.5))}.mini-grid,.grid{display:grid;gap:16px}.mini-grid{grid-template-columns:repeat(3,1fr)}.metric{padding:14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line)}.metric strong{display:block;font-size:1.25rem}.metric span{font-size:.76rem;color:var(--muted)}section{padding:52px 0}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:24px}.section-head h2,.page-title{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.045em;margin:0}.section-head p{color:var(--muted);max-width:570px}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);backdrop-filter:blur(16px);padding:22px;box-shadow:0 16px 50px rgba(0,0,0,.12);transition:.25s}.card:hover{transform:translateY(-4px);border-color:rgba(94,231,255,.25)}.card-icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:1.45rem;background:linear-gradient(135deg,rgba(47,156,255,.2),rgba(156,108,255,.2));border:1px solid var(--line)}.card h3{margin:18px 0 7px}.card p{color:var(--muted);margin:0}.project-card{padding:0;overflow:hidden}.project-cover{height:190px;padding:18px;display:flex;align-items:flex-end;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65)),linear-gradient(135deg,#274b70,#372554)}.project-body{padding:20px}.meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.tag{font-size:.75rem;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.07);color:var(--muted)}.progress{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:inherit}.app-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;padding:30px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(47,156,255,.12),rgba(156,108,255,.1))}.flow{display:grid;gap:10px}.flow-row{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}.flow-num{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--blue);font-weight:800}.page-hero{padding:70px 0 30px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.filter{border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:9px 13px;border-radius:10px;cursor:pointer}.filter.active{color:#fff;background:var(--blue);border-color:transparent}.pricing{grid-template-columns:repeat(3,1fr);align-items:stretch}.price-card{position:relative}.price-card.featured{border-color:rgba(94,231,255,.45);transform:scale(1.02)}.price{font-size:2.6rem;font-weight:850;letter-spacing:-.05em;margin:18px 0}.features-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}.features-list li{color:var(--muted)}.features-list li:before{content:'✓';color:var(--green);margin-right:9px}.team-card{display:flex;gap:15px;align-items:center}.avatar{width:58px;height:58px;border-radius:18px;object-fit:cover;background:linear-gradient(135deg,var(--blue),var(--violet))}.notice{padding:15px 17px;border-radius:14px;border:1px solid rgba(94,231,255,.25);background:rgba(47,156,255,.08);color:var(--muted)}.footer{margin-top:70px;padding:42px 0;border-top:1px solid var(--line);color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}.footer h4{color:var(--text);margin-top:0}.footer a{display:block;margin:8px 0}.api-code{font-family:ui-monospace,monospace;font-size:.82rem;padding:16px;border-radius:14px;background:#050811;color:#9deeff;overflow:auto}.empty-search{display:none;padding:25px;text-align:center;color:var(--muted)}
@media(max-width:900px){.nav-links{display:none;position:absolute;top:76px;left:18px;right:18px;flex-direction:column;align-items:stretch;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}.nav-links.open{display:flex}.menu-btn{display:block}.hero,.app-panel{grid-template-columns:1fr}.hero{padding-top:55px}.hero-console{transform:none}.grid.three,.pricing{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.container{width:min(100% - 22px,1180px)}.grid.three,.grid.two,.pricing,.footer-grid{grid-template-columns:1fr}.hero h1{font-size:3.5rem}.section-head{align-items:start;flex-direction:column}.price-card.featured{transform:none}.mini-grid{grid-template-columns:1fr}.nav-actions .btn{display:none}}

/* Account experience */
.auth-shell{min-height:calc(100vh - 100px);display:grid;place-items:center;padding:64px 0}.auth-layout{width:min(1050px,calc(100% - 32px));display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}.auth-showcase{padding:48px;background:radial-gradient(circle at 15% 10%,rgba(94,231,255,.23),transparent 32%),linear-gradient(145deg,rgba(47,156,255,.18),rgba(156,108,255,.14));display:flex;flex-direction:column;justify-content:space-between;min-height:620px}.auth-card{padding:48px}.auth-card h1{font-size:2.6rem;letter-spacing:-.05em;margin:14px 0 8px}.field{display:grid;gap:7px;margin:17px 0}.field label{font-size:.84rem;font-weight:750;color:var(--muted)}.field input,.field select{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.045);color:var(--text);outline:none}.field input:focus{border-color:rgba(94,231,255,.55);box-shadow:0 0 0 4px rgba(47,156,255,.09)}.auth-note{font-size:.82rem;color:var(--muted);margin-top:16px}.account-nav-btn{position:relative;padding:8px 12px}.account-dot{position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.account-shell{display:grid;grid-template-columns:245px minmax(0,1fr);gap:22px;padding:34px 0 72px}.account-sidebar{position:sticky;top:94px;height:max-content;padding:14px}.profile-mini{padding:14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);margin-bottom:10px}.profile-mini .avatar{width:46px;height:46px}.side-links{display:grid;gap:5px}.side-links button{border:0;text-align:left;color:var(--muted);background:transparent;padding:12px 13px;border-radius:12px;cursor:pointer}.side-links button:hover,.side-links button.active{background:rgba(47,156,255,.12);color:var(--text)}.side-links button.danger{color:#ff8f9c;margin-top:12px}.account-main{min-width:0}.account-view{display:none}.account-view.active{display:block}.dashboard-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:24px}.dashboard-head h1{margin:0;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.06em}.sync-pill{display:inline-flex;gap:9px;align-items:center;padding:9px 12px;border:1px solid rgba(81,224,161,.25);border-radius:999px;background:rgba(81,224,161,.08);color:var(--green);font-size:.8rem}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-card{padding:19px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.stat-card span{color:var(--muted);font-size:.78rem}.stat-card strong{display:block;font-size:1.8rem;margin-top:4px}.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}.list-card{padding:0;overflow:hidden}.list-head{display:flex;justify-content:space-between;align-items:center;padding:19px 20px;border-bottom:1px solid var(--line)}.item-row{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}.item-row:last-child{border-bottom:0}.item-icon{width:45px;height:45px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(47,156,255,.2),rgba(156,108,255,.2));font-size:1.25rem}.item-copy{min-width:0;flex:1}.item-copy strong{display:block}.item-copy small{color:var(--muted)}.item-action{font-size:.78rem;padding:7px 10px;border-radius:9px;background:rgba(47,156,255,.12);color:var(--cyan)}.profile-banner{height:170px;border-radius:22px 22px 0 0;background:radial-gradient(circle at 70% 30%,rgba(94,231,255,.4),transparent 20%),linear-gradient(135deg,#173b61,#37255d);position:relative}.profile-large{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--violet));border:6px solid var(--bg2);position:absolute;left:28px;bottom:-42px}.profile-content{padding:58px 28px 28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.license-key{font-family:ui-monospace,monospace;letter-spacing:.08em;font-size:.82rem;color:var(--cyan)}.device-state{color:var(--green);font-size:.8rem}.demo-ribbon{position:fixed;right:18px;bottom:18px;z-index:99;padding:9px 12px;border-radius:11px;background:#141b2e;border:1px solid var(--line);color:#c8d1e8;font-size:.75rem;box-shadow:var(--shadow)}body.light .demo-ribbon{background:#fff}.toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 17px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);box-shadow:var(--shadow);transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:950px){.auth-layout{grid-template-columns:1fr}.auth-showcase{min-height:360px}.account-shell{grid-template-columns:1fr}.account-sidebar{position:static}.side-links{grid-template-columns:repeat(4,1fr)}.side-links button{text-align:center}.dashboard-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.auth-showcase,.auth-card{padding:28px}.side-links{grid-template-columns:1fr 1fr}.stat-grid,.form-grid{grid-template-columns:1fr}.dashboard-head{align-items:flex-start;flex-direction:column}.item-row{align-items:flex-start}.item-action{margin-left:auto}}

/* Firebase account integration */
.auth-status{margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:.9rem}.auth-status.error{border-color:rgba(255,80,95,.5);color:#ff8994}.auth-status.success{border-color:rgba(70,220,150,.45);color:#77e4ad}.auth-status.warning,.config-warning{border-color:rgba(255,190,70,.45);color:#ffd27c}.config-warning{margin:18px 0 0;padding:14px;border:1px solid;border-radius:14px}.config-warning p{margin:5px 0 0;color:var(--muted)}.config-warning code{color:inherit}.account-loader,.account-fatal{position:fixed;inset:0;z-index:1000;background:rgba(5,7,14,.88);backdrop-filter:blur(18px);display:grid;place-items:center;text-align:center;padding:28px}.account-fatal{align-content:center;gap:14px}.account-fatal strong{font-size:1.5rem}.account-fatal p{max-width:560px;color:var(--muted)}.account-ready .account-loader{display:none}.empty-state{padding:24px;color:var(--muted);text-align:center;border:1px dashed var(--border);border-radius:16px}.toast.error{border-color:rgba(255,80,95,.5)}button:disabled{opacity:.55;cursor:not-allowed}

/* Global account state + mod storefront */
.account-nav-btn{white-space:nowrap}.account-nav-btn .account-dot{display:inline-block;position:static;margin-right:1px;vertical-align:middle}.mod-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.mod-search{min-width:260px;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);outline:none}.mod-cover-link{position:relative;min-height:210px}.mod-cover-icon{position:absolute;right:24px;top:28px;font-size:4.4rem;filter:drop-shadow(0 18px 18px rgba(0,0,0,.38))}.mod-card-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;color:var(--muted);font-size:.88rem}.badge.available{color:var(--green);border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.08)}.mod-detail-hero{padding:58px 0 28px}.mod-detail-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:42px;align-items:center}.mod-main-image{min-height:460px;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 65% 20%,rgba(94,231,255,.3),transparent 26%),linear-gradient(145deg,#213a62,#151425);display:grid;place-items:center;position:relative;overflow:hidden}.mod-main-image span{font-size:10rem;filter:drop-shadow(0 28px 25px rgba(0,0,0,.5))}.mod-main-image small{position:absolute;left:22px;bottom:18px;color:var(--muted)}.mod-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}.mod-thumbs button{height:78px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:2rem;cursor:pointer}.mod-detail-copy h1{font-size:clamp(2.7rem,5vw,5rem);line-height:.96;letter-spacing:-.06em;margin:18px 0}.mod-access-card{margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);display:flex;justify-content:space-between;align-items:center;gap:16px}.mod-access-card small,.mod-access-card strong{display:block}.mod-access-card strong{font-size:1.25rem}.mod-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.feature-checks{list-style:none;padding:0;display:grid;gap:12px}.feature-checks li:before{content:'✓';color:var(--green);margin-right:10px}.spec-list{display:grid;gap:2px}.spec-list div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}.spec-list span{color:var(--muted)}.checkout-shell{padding:70px 0}.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:40px}.checkout-product{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:16px;margin-top:30px;padding:18px;border:1px solid var(--line);border-radius:18px}.checkout-product>span{font-size:3rem}.checkout-product small{display:block;color:var(--muted)}.checkout-summary{padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);height:max-content}.checkout-summary>div:first-child{display:flex;justify-content:space-between;font-size:1.25rem;margin-bottom:20px}.checkout-summary .btn{width:100%}.skeleton-card{padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
@media(max-width:900px){.mod-detail-grid,.mod-info-grid,.checkout-grid{grid-template-columns:1fr}.mod-main-image{min-height:340px}.mod-main-image span{font-size:7rem}.checkout-summary{width:100%}}
@media(max-width:620px){.mod-access-card,.mod-card-footer{align-items:stretch;flex-direction:column}.mod-access-card .btn,.mod-card-footer .btn{width:100%}.mod-thumbs{grid-template-columns:repeat(2,1fr)}.mod-search{width:100%;min-width:0}.nav-actions .account-nav-btn{display:inline-flex;font-size:0;padding:0;width:42px}.nav-actions .account-nav-btn:after{content:'👤';font-size:1rem}.nav-actions .account-nav-btn .account-dot{display:none}}


/* Immagini personalizzate delle mod */
.mod-cover-link{background-image:var(--mod-cover-image),linear-gradient(145deg,#244a76,#24152f)!important;background-size:cover!important;background-position:center!important;isolation:isolate;overflow:hidden}
.mod-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,29,.08) 0%,rgba(7,13,29,.28) 42%,rgba(7,13,29,.94) 100%);z-index:-1}
.mod-cover-link h2{position:absolute;left:20px;right:20px;bottom:20px;margin:0;text-shadow:0 2px 16px rgba(0,0,0,.75)}
.mod-cover-icon-image,.mod-cover-icon-fallback{position:absolute;right:22px;top:22px;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 15px 16px rgba(0,0,0,.48));z-index:1}
.mod-cover-icon-fallback{font-size:4rem;line-height:76px;text-align:center}
.mod-main-image img{width:100%;height:460px;object-fit:cover;display:block}
.mod-thumbs button{padding:0;overflow:hidden}
.mod-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}

/* Libreria personale e immagini di sicurezza */
.image-placeholder{font-size:8rem;display:grid;place-items:center;min-height:320px;width:100%;background:radial-gradient(circle at 65% 20%,rgba(94,231,255,.3),transparent 26%),linear-gradient(145deg,#213a62,#151425)}
.garage-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.garage-actions .btn{flex:1;text-align:center}.garage-mod-card .project-body{display:flex;flex-direction:column}.garage-mod-card .garage-actions{margin-top:auto;padding-top:12px}
@media(max-width:620px){.garage-actions{flex-direction:column}.garage-actions .btn{width:100%}}


/* ModShield app download & pairing */
.muted-line{margin-top:14px;color:var(--muted);font-size:.92rem}.app-download-card .card-icon{font-size:2rem}.app-specs{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.app-specs span{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);font-size:.86rem}.notice{padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}.connection-status{padding:14px 16px;border:1px solid var(--line);border-radius:14px;margin:16px 0;background:var(--surface-2)}.connection-status[data-state="pending"]{border-color:#d8a638}.connection-status[data-state="success"]{border-color:#35b97f}.connection-status[data-state="error"]{border-color:#d85c62}.device-card{display:flex;flex-direction:column;gap:5px;padding:18px;border:1px solid var(--line);border-radius:16px;margin-bottom:18px}.device-card small{color:var(--muted)}.btn.disabled,.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.field-label{display:block;font-weight:700;margin:22px 0 8px}.input{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit}.exe-picker input{position:absolute;opacity:0;pointer-events:none}.exe-picker{display:inline-block;margin-top:18px;cursor:pointer}

.device-request-card{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--card) 92%,transparent)}
.device-request-card.request-pending{border-color:#d9a441}.device-request-card.request-approved{border-color:#49b675}.device-request-card.request-rejected{border-color:#d15c5c}
.request-status-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:10px 0 14px}.request-status-head span{font-size:.84rem;opacity:.7}
.request-device-route{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}.request-device-route span{padding:12px;border-radius:12px;background:var(--surface);font-weight:700;text-align:center;word-break:break-word}
.admin-table{display:grid;gap:14px}.admin-request{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.admin-request-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;margin:14px 0}.admin-request-grid div{padding:12px;border-radius:12px;background:var(--surface)}
@media(max-width:760px){.admin-request-grid{grid-template-columns:1fr}.request-device-route{grid-template-columns:1fr}.request-device-route b{text-align:center;transform:rotate(90deg)}}

.device-request-card.request-cancelled{opacity:.78;}

/* Cookie consent */
.cookie-banner{position:fixed;left:50%;bottom:22px;transform:translate(-50%,22px);width:min(920px,calc(100% - 28px));z-index:99999;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 20px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(14,16,22,.94);box-shadow:0 24px 80px rgba(0,0,0,.45);backdrop-filter:blur(22px);opacity:0;transition:.25s ease}.cookie-banner.show{opacity:1;transform:translate(-50%,0)}.cookie-copy{max-width:650px}.cookie-copy strong{display:block;font-size:1rem;margin-bottom:5px}.cookie-copy p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}.cookie-actions{display:flex;gap:10px;flex-shrink:0}.light .cookie-banner{background:rgba(248,249,252,.96);border-color:rgba(0,0,0,.09);box-shadow:0 24px 70px rgba(31,37,51,.18)}@media(max-width:700px){.cookie-banner{align-items:stretch;flex-direction:column}.cookie-actions{width:100%}.cookie-actions .btn{flex:1;text-align:center}}
\n/* Public users directory */\n.users-hero{padding:90px 0 42px;background:radial-gradient(circle at 78% 15%,rgba(94,231,255,.11),transparent 26%)}.users-hero .page-title{max-width:820px;margin:18px 0}.users-toolbar{margin-top:38px;display:flex;align-items:center;justify-content:space-between;gap:18px}.users-search-wrap{flex:1;max-width:620px;display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04)}.users-search{width:100%;padding:15px 0;border:0;outline:0;background:transparent;color:var(--text);font:inherit}.users-count{display:flex;align-items:baseline;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:14px}.users-count strong{font-size:1.35rem}.users-count span{color:var(--muted);font-size:.85rem}.users-section{padding-bottom:90px}.users-loading{padding:40px 0;color:var(--muted)}.users-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.user-card{color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel);transition:.22s ease;box-shadow:0 18px 55px rgba(0,0,0,.12)}.user-card:hover{transform:translateY(-5px);border-color:rgba(94,231,255,.28);box-shadow:0 26px 70px rgba(0,0,0,.25)}.user-card-cover{height:128px;position:relative;background:radial-gradient(circle at 75% 20%,rgba(94,231,255,.26),transparent 28%),linear-gradient(135deg,#18385f,#271b48);overflow:visible}.user-card-orbit{position:absolute;right:-28px;top:-45px;width:150px;height:150px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.user-card-avatar{position:absolute;left:20px;bottom:-31px;width:70px;height:70px;border:5px solid var(--bg2);border-radius:19px;display:grid;place-items:center;font-weight:900;font-size:1.55rem;background:linear-gradient(135deg,var(--blue),var(--violet))}.user-card-body{padding:44px 20px 20px}.user-card-name{display:flex;align-items:center;gap:7px;font-size:1.08rem}.mini-verified,.profile-verified{display:inline-grid;place-items:center;border-radius:50%;background:var(--blue);color:white;font-weight:900}.mini-verified{width:18px;height:18px;font-size:.7rem}.user-card-handle{display:block;margin-top:3px;color:var(--cyan);font-size:.86rem}.user-card-body p{color:var(--muted);font-size:.9rem;line-height:1.55;min-height:42px}.user-card-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:17px;font-size:.76rem;color:var(--muted)}.user-badge{display:inline-block;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--text);background:rgba(255,255,255,.035)}\n/* Public profile */\n.public-profile-loading{min-height:70vh;display:grid;place-items:center;align-content:center;gap:14px;color:var(--muted)}.profile-spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.public-cover{height:265px;position:relative;background:radial-gradient(circle at 65% 15%,rgba(94,231,255,.25),transparent 24%),radial-gradient(circle at 25% 5%,rgba(156,108,255,.3),transparent 30%),linear-gradient(145deg,#101a35,#151023);overflow:hidden}.public-cover:after{content:'';position:absolute;inset:auto -10% -120px;width:120%;height:200px;background:var(--bg);transform:rotate(-3deg)}.public-cover-inner{position:relative;z-index:2;padding-top:34px}.back-users{color:#d7e9ff;text-decoration:none;font-size:.9rem}.public-profile-shell{position:relative;z-index:3;margin-top:-76px;padding-bottom:90px}.public-profile-head{display:flex;align-items:flex-end;gap:22px}.public-avatar{width:138px;height:138px;border-radius:30px;border:7px solid var(--bg);display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet));font-size:3.4rem;font-weight:900;box-shadow:var(--shadow)}.public-identity{padding-bottom:10px;flex:1}.public-name-line{display:flex;align-items:center;gap:12px}.public-name-line h1{font-size:clamp(2rem,4vw,3.7rem);line-height:1;margin:0;letter-spacing:-.045em}.profile-verified{width:25px;height:25px}.public-handle{margin:8px 0;color:var(--cyan)}.public-badges{display:flex;gap:8px;flex-wrap:wrap}.public-profile-actions{padding-bottom:16px}.public-tabs{display:flex;gap:8px;margin:34px 0 22px;border-bottom:1px solid var(--line)}.public-tabs button{padding:13px 17px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}.public-tabs button.active{color:var(--text);border-bottom-color:var(--cyan)}.public-tab-view{display:none}.public-tab-view.active{display:block}.public-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:20px}.public-layout>div,.public-side{display:grid;gap:20px;align-content:start}.public-bio-card h2{font-size:2rem;margin:12px 0}.public-stat{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}.public-stat span{color:var(--muted)}.public-id{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800;letter-spacing:.05em}.public-side small{color:var(--muted);line-height:1.5}.public-garage-preview{display:grid;gap:8px;margin-top:15px}.public-mod-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none;background:rgba(255,255,255,.025)}.public-mod-row:hover{border-color:rgba(94,231,255,.25)}.public-mod-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(94,231,255,.08);color:var(--cyan)}.public-mod-row small{display:block;color:var(--muted);margin-top:2px}.public-mod-card{display:flex;flex-direction:column}.public-mod-card .btn{margin-top:auto}.profile-not-found{margin:90px auto;max-width:700px}.handle-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);overflow:hidden}.handle-input span{padding-left:14px;color:var(--cyan);font-weight:800}.handle-input input{border:0!important;background:transparent!important;padding-left:4px!important}.profile-toggle{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px}.account-public-link{display:block;padding:12px 14px;border-radius:12px;color:var(--text);text-decoration:none}.account-public-link:hover{background:rgba(255,255,255,.05)}textarea{width:100%;resize:vertical;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);color:var(--text);font:inherit}\n@media(max-width:950px){.users-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-layout{grid-template-columns:1fr}.public-profile-head{align-items:flex-start;flex-wrap:wrap}.public-profile-actions{width:100%}}@media(max-width:620px){.users-toolbar{align-items:stretch;flex-direction:column}.users-grid{grid-template-columns:1fr}.public-cover{height:220px}.public-profile-shell{margin-top:-54px}.public-avatar{width:105px;height:105px;border-radius:24px;font-size:2.5rem}.public-profile-head{gap:14px}.public-identity{padding-top:58px}.public-name-line h1{font-size:2rem}.public-profile-actions .btn{width:100%}}\n
/* Account profile editor — mirrors public profile */
.account-profile-editor{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.account-public-cover{height:230px;position:relative;background:radial-gradient(circle at 72% 18%,rgba(94,231,255,.28),transparent 25%),radial-gradient(circle at 30% -5%,rgba(156,108,255,.32),transparent 34%),linear-gradient(145deg,#15355d,#281a4c);overflow:hidden}.account-public-cover:after{content:'';position:absolute;inset:auto -10% -120px;width:120%;height:180px;background:var(--panel);transform:rotate(-3deg)}.account-cover-glow{position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:8%;top:-80px;box-shadow:0 0 80px rgba(94,231,255,.12)}
.account-public-shell{position:relative;z-index:2;margin-top:-68px;padding:0 28px 30px}.account-public-head{display:flex;align-items:flex-end;gap:20px}.account-public-avatar{width:132px;height:132px;border:7px solid var(--panel);border-radius:30px;background:linear-gradient(135deg,var(--blue),var(--violet));display:grid;place-items:center;font-size:3.2rem;font-weight:900;box-shadow:var(--shadow)}.account-public-identity{flex:1;padding-bottom:8px}.account-name-row{display:flex;align-items:center;gap:10px}.account-name-row h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1;margin:0;letter-spacing:-.045em}.account-profile-actions{padding-bottom:12px}.account-profile-tabs{display:flex;gap:8px;margin:32px 0 22px;border-bottom:1px solid var(--line);overflow:auto}.account-profile-tabs button{white-space:nowrap;padding:13px 17px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:750;cursor:pointer}.account-profile-tabs button.active{color:var(--text);border-bottom-color:var(--cyan)}.account-profile-tab{display:none}.account-profile-tab.active{display:block}.profile-edit-card{padding:26px}.section-head.compact{margin-bottom:20px}.section-head.compact h2{margin-bottom:4px}.profile-toggle span{display:grid;gap:3px}.profile-toggle small{color:var(--muted);font-weight:500}.field-counter{text-align:right;color:var(--muted);font-size:.78rem;margin-top:-4px}.profile-save-bar{position:sticky;bottom:14px;margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(15,23,42,.94);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 14px 40px rgba(0,0,0,.22)}.profile-save-bar>div{display:grid;gap:2px}.profile-save-bar small{color:var(--muted)}.profile-form-status{min-height:24px;margin:12px 0 0;color:var(--muted)}.garage-visibility-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.garage-visibility-card p{margin-bottom:0;color:var(--muted)}.sync-pill.active{border-color:rgba(65,225,170,.35);color:var(--green)}.text-btn{border:0;background:transparent;color:var(--cyan);cursor:pointer;font-weight:700}.profile-editor-tip p{color:var(--muted);line-height:1.65}.account-profile-editor .public-layout{padding-bottom:5px}
@media(max-width:820px){.account-public-shell{padding-left:18px;padding-right:18px}.account-public-head{align-items:flex-start;flex-wrap:wrap}.account-public-avatar{width:105px;height:105px;font-size:2.5rem}.account-public-identity{padding-top:48px}.account-profile-actions{width:100%}.account-profile-actions .btn{width:100%}.profile-save-bar,.garage-visibility-card{align-items:stretch;flex-direction:column}}

/* Detailed community profile */
.public-cover-detailed{min-height:245px;position:relative;background:
 radial-gradient(circle at 73% 35%,rgba(94,231,255,.26),transparent 18%),
 radial-gradient(circle at 85% 10%,rgba(156,108,255,.24),transparent 26%),
 linear-gradient(135deg,#172b50,#2c315f 58%,#492e6d)}
.profile-cover-chip{position:absolute;right:0;bottom:22px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(8,11,20,.35);backdrop-filter:blur(12px);font-size:.76rem;color:#dfe9ff}
.editor-chip{right:22px;bottom:20px}
.public-profile-detailed{margin-top:-72px;position:relative;z-index:3}
.detailed-head{padding:0 4px 25px;align-items:flex-end}
.public-avatar-xl{width:108px!important;height:108px!important;border-radius:30px!important;font-size:2.25rem!important;border:5px solid var(--bg2);box-shadow:0 15px 40px rgba(0,0,0,.35)}
.profile-status-text{margin:5px 0 10px;color:var(--muted);font-weight:650}
.profile-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden;margin:4px 0 22px}
.profile-kpi-strip>div{padding:17px 20px;border-right:1px solid var(--line)}.profile-kpi-strip>div:last-child{border-right:0}.profile-kpi-strip span{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.07em}.profile-kpi-strip strong{display:block;margin-top:3px;font-size:1.06rem}.status-good{color:var(--green)!important}
.detailed-tabs{margin-bottom:22px}
.profile-detail-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.7fr);gap:18px}.profile-detail-main{display:grid;gap:18px}.profile-detail-side{display:grid;gap:18px;align-content:start}
.profile-hero-card{min-height:180px;background:radial-gradient(circle at 90% 15%,rgba(94,231,255,.12),transparent 26%),var(--panel)}
.profile-activity-list{display:grid}.profile-activity-row{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:17px 4px;border-bottom:1px solid var(--line)}.profile-activity-row:last-child{border-bottom:0}.profile-activity-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(47,156,255,.18),rgba(156,108,255,.2));border:1px solid var(--line);font-weight:900}.profile-activity-row strong{display:block}.profile-activity-row p{margin:3px 0;color:var(--muted)}.profile-activity-row small{color:var(--muted)}.profile-activity-full{max-width:840px}
.profile-social-links{display:grid;gap:9px;margin-top:13px}.profile-social-links a,.profile-social-links span{display:flex;padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--muted)}.profile-social-links a:hover{color:var(--text);border-color:rgba(94,231,255,.28)}
.profile-about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.profile-about-lines{display:grid;margin-top:22px}.profile-about-lines>div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}.profile-about-lines>div:last-child{border-bottom:0}.profile-about-lines span{color:var(--muted)}.profile-about-lines strong{text-align:right}
.profile-info-card .public-stat{padding:12px 0}.profile-privacy-card p{font-size:.9rem}
.detailed-editor{overflow:hidden}.detailed-editor .account-public-cover{height:230px}.profile-edit-layout{max-width:1000px}.profile-settings-card{padding:28px}.profile-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.profile-subsection{margin-top:26px}.section-head.compact{margin-bottom:10px}.section-head.compact h2,.section-head.compact h3{margin:4px 0}.muted{color:var(--muted)}
@media(max-width:900px){.profile-detail-layout,.profile-about-grid{grid-template-columns:1fr}.profile-kpi-strip{grid-template-columns:1fr 1fr}.profile-kpi-strip>div:nth-child(2){border-right:0}.profile-kpi-strip>div{border-bottom:1px solid var(--line)}.profile-kpi-strip>div:nth-last-child(-n+2){border-bottom:0}.detailed-head{align-items:flex-start}.profile-form-grid{grid-template-columns:1fr}}
@media(max-width:620px){.profile-kpi-strip{grid-template-columns:1fr}.profile-kpi-strip>div{border-right:0!important;border-bottom:1px solid var(--line)!important}.profile-kpi-strip>div:last-child{border-bottom:0!important}.public-avatar-xl{width:88px!important;height:88px!important}.profile-cover-chip{display:none}}

/* Profile media + refined garage */
.public-cover-detailed,.account-public-cover.public-cover-detailed{background-image:linear-gradient(135deg,rgba(23,43,80,.78),rgba(73,46,109,.78)),var(--profile-cover-image,none);background-size:cover;background-position:center}
.profile-avatar-photo{position:relative;overflow:hidden}.profile-avatar-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.profile-media-editor{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;margin:0 0 22px}.profile-media-block{display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03)}.profile-media-block p{margin:3px 0 10px;color:var(--muted);font-size:.84rem}.media-preview{border:1px solid var(--line);background:linear-gradient(135deg,rgba(47,156,255,.15),rgba(156,108,255,.18));flex:0 0 auto}.avatar-media-preview{width:82px;height:82px;border-radius:24px;display:grid;place-items:center;font-size:1.7rem;font-weight:900;overflow:hidden}.avatar-media-preview img{width:100%;height:100%;object-fit:cover}.cover-media-preview{width:150px;height:82px;border-radius:16px;background-size:cover;background-position:center}.media-upload-btn{padding:9px 12px;font-size:.82rem}
.public-garage-preview{display:grid}.public-mod-row.refined{display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.public-mod-row.refined:last-child{border-bottom:0}.public-mod-thumb{height:56px;border-radius:12px;background-size:cover;background-position:center;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}.public-mod-thumb img{max-width:42px;max-height:42px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45))}.public-mod-row.refined small{display:block;color:var(--muted);margin-top:3px}.mod-row-action{font-size:.82rem;color:var(--cyan);font-weight:800}
.refined-mod-card{padding:0;overflow:hidden}.refined-mod-cover{height:190px;padding:18px;display:flex;align-items:flex-end;justify-content:space-between;background-size:cover;background-position:center}.refined-mod-cover img{width:64px;height:64px;object-fit:contain;align-self:flex-start;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}.refined-mod-cover h3{font-size:1.45rem;margin:8px 0 0}.refined-mod-body{padding:18px}.refined-mod-body p{min-height:48px;margin:12px 0 18px}
.profile-detail-main>.card,.profile-detail-side>.card{transform:none!important}.profile-detail-main>.card:hover,.profile-detail-side>.card:hover{transform:none!important}
@media(max-width:800px){.profile-media-editor{grid-template-columns:1fr}.public-mod-row.refined{grid-template-columns:64px 1fr}.mod-row-action{grid-column:2}.cover-media-preview{width:120px}.profile-media-block{align-items:flex-start}}

/* Save/profile form polish */
.profile-switch{display:flex!important;align-items:center;gap:14px;padding:16px 18px!important;margin:22px 0!important;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}
.profile-switch input{width:18px;height:18px;flex:0 0 auto}.profile-switch span{display:grid;gap:2px;flex:1}.profile-switch span strong{display:block}.profile-switch span small{display:block;color:var(--muted)}.profile-switch em{font-style:normal;color:var(--green);font-weight:800}
.profile-savebar{display:flex!important;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding:18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.profile-savebar>div{display:grid;gap:3px}.profile-savebar small{color:var(--muted)}.profile-status{margin-top:12px!important}
@media(max-width:620px){.profile-savebar{align-items:stretch;flex-direction:column}.profile-savebar .btn{width:100%}}


/* ===== SM917 profile overflow / clipping fix ===== */
html,body{max-width:100%;overflow-x:hidden}
.account-shell,.account-content,.profile-detail-layout,.profile-detail-main,.profile-detail-side,
.profile-edit-layout,.profile-editor,.profile-form-grid,.profile-form-grid>*,
.card,.account-card,.public-profile-card{min-width:0;max-width:100%;box-sizing:border-box}

.profile-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);
  gap:18px;
  width:100%;
}
.profile-detail-main,.profile-detail-side{width:100%}
.profile-detail-side{overflow:visible}
.profile-detail-side .card{width:100%;overflow:hidden}
.profile-detail-side .profile-info-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:12px;
  align-items:start;
}
.profile-detail-side .profile-info-row>*{min-width:0}
.profile-detail-side .profile-info-row strong,
.profile-detail-side .profile-info-row span,
.profile-detail-side .profile-info-row a,
.profile-link-card,.profile-link-card *{
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}
.profile-link-card{width:100%;box-sizing:border-box}

.profile-edit-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
}
.profile-editor{width:100%;overflow:visible}
.profile-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.profile-form-grid input,.profile-form-grid textarea,.profile-form-grid select{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box
}

.account-public-cover,.public-cover,.public-cover-detailed{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.account-public-card,.public-profile-shell,.profile-hero{max-width:100%;overflow:hidden}

/* Prevent giant decorative/hero text from escaping its section */
.hero,.account-hero,.profile-hero,.landing-hero{overflow:hidden}
.hero h1,.account-hero h1,.profile-hero h1,.landing-hero h1{
  max-width:100%;
  overflow-wrap:break-word;
}

/* Public mod/library rows */
.public-garage-preview,.public-mod-grid,.library-grid{min-width:0;max-width:100%}
.public-mod-row.refined{min-width:0;width:100%;box-sizing:border-box}
.public-mod-row.refined>div{min-width:0}
.public-mod-row.refined strong,.public-mod-row.refined small{overflow-wrap:anywhere}

/* Responsive: collapse before content starts getting cut */
@media(max-width:1100px){
  .profile-detail-layout{grid-template-columns:1fr}
  .profile-detail-side{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
  .profile-detail-side>.card{margin:0}
}
@media(max-width:760px){
  .profile-detail-side{grid-template-columns:1fr}
  .profile-form-grid{grid-template-columns:1fr}
  .profile-detail-side .profile-info-row{grid-template-columns:1fr}
}

/* Profile image consistency fix */
.user-card-cover-img,.public-cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.user-card-cover-overlay,.public-cover-photo-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(15,31,61,.46),rgba(43,27,72,.55))}
.user-card-cover .user-card-orbit{z-index:2}.user-card-avatar{z-index:4;overflow:hidden}.user-card-avatar img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.public-cover-glow,.account-cover-glow{z-index:2}.public-cover-inner,.profile-cover-chip{z-index:3}
.public-cover:after,.account-public-cover:after{z-index:2;pointer-events:none}.public-cover-photo{z-index:0}.public-cover-photo-overlay{z-index:1}
.profile-avatar-photo img{display:block}


/* ===== PROFILE HEADER / AVATAR / TABS REFINEMENT ===== */
.public-profile-shell.public-profile-detailed,
.account-public-shell{
  position:relative;
  margin-top:-86px;
  padding:0 28px 36px;
}
.public-profile-head.detailed-head,
.account-public-head.detailed-head{
  position:relative;
  display:grid;
  grid-template-columns:148px minmax(0,1fr) auto;
  align-items:end;
  gap:24px;
  min-height:170px;
  padding:0 4px 24px;
}
.public-avatar-xl,
.account-public-avatar.public-avatar-xl{
  width:138px!important;
  height:138px!important;
  border-radius:32px!important;
  border:6px solid rgba(8,11,20,.96)!important;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  box-shadow:0 18px 45px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.08);
  align-self:end;
}
.public-identity,
.account-public-identity{
  align-self:end;
  padding:0 0 10px!important;
  min-width:0;
}
.public-name-line h1,
.account-name-row h1{
  font-size:clamp(2.35rem,4.2vw,4.15rem)!important;
  letter-spacing:-.055em!important;
  line-height:.95!important;
  margin:0!important;
  max-width:100%;
  overflow-wrap:anywhere;
}
.public-handle{
  margin:9px 0 4px!important;
  font-size:1rem;
  font-weight:760;
}
.profile-status-text{margin:4px 0 12px!important}
.public-profile-actions,
.account-profile-actions{
  align-self:end;
  padding:0 0 13px!important;
}
.public-profile-actions .btn,
.account-profile-actions .btn{
  min-height:44px;
  border-radius:14px;
  padding:0 17px;
}

/* tabs become a compact slide/segmented menu placed directly below header */
.public-tabs.detailed-tabs,
.account-profile-tabs.detailed-tabs{
  position:relative;
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  margin:2px 0 26px!important;
  padding:5px;
  border:1px solid var(--line)!important;
  border-radius:16px;
  background:rgba(12,18,34,.78);
  backdrop-filter:blur(18px);
  overflow:auto;
}
.public-tabs.detailed-tabs button,
.account-profile-tabs.detailed-tabs button{
  border:0!important;
  border-radius:11px!important;
  padding:10px 15px!important;
  color:var(--muted)!important;
  background:transparent!important;
  transition:.18s ease;
}
.public-tabs.detailed-tabs button:hover,
.account-profile-tabs.detailed-tabs button:hover{
  color:var(--text)!important;
  background:rgba(255,255,255,.045)!important;
}
.public-tabs.detailed-tabs button.active,
.account-profile-tabs.detailed-tabs button.active{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(47,156,255,.24),rgba(156,108,255,.22))!important;
  box-shadow:inset 0 0 0 1px rgba(94,231,255,.2);
}

/* cover background cleaner and taller */
.public-cover.public-cover-detailed,
.account-public-cover.public-cover-detailed{
  min-height:300px!important;
  height:300px!important;
  border-radius:0!important;
  background-size:cover!important;
  background-position:center 42%!important;
}
.public-cover.public-cover-detailed:after,
.account-public-cover.public-cover-detailed:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,10,19,.08) 0%,rgba(7,10,19,.06) 48%,rgba(7,10,19,.84) 100%),
    linear-gradient(90deg,rgba(7,10,19,.28),transparent 42%,rgba(7,10,19,.14));
  transform:none!important;
  width:auto!important;
  height:auto!important;
}
.public-cover-glow,.account-cover-glow{opacity:.55}

/* refined owned mod cards */
.refined-owned-mod{
  overflow:hidden;
  border-radius:22px;
}
.refined-owned-mod .project-cover{
  height:205px;
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:18px;
}
.owned-mod-cover-copy{position:relative;z-index:2}
.owned-mod-cover-copy h2{margin:7px 0 0;font-size:1.45rem;line-height:1.15}
.owned-pill{
  display:inline-flex;
  padding:5px 8px;
  border-radius:8px;
  background:rgba(8,11,20,.62);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.09em;
  color:#d9eaff;
}
.owned-mod-topline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.owned-version{font-size:.78rem;color:var(--muted);font-weight:750}
.refined-owned-mod .project-body{padding:18px;display:flex;flex-direction:column}
.refined-owned-mod .project-body p{min-height:72px}
.refined-actions{margin-top:auto!important;padding-top:14px!important}
.refined-actions .owned-mod-open{
  width:100%;
  min-height:48px;
  flex:none!important;
  border:0;
  background:linear-gradient(135deg,rgba(47,156,255,.95),rgba(126,92,255,.95));
  box-shadow:0 12px 28px rgba(47,156,255,.16);
}
.refined-actions .owned-mod-open:hover{transform:translateY(-1px);filter:brightness(1.06)}

@media(max-width:900px){
  .public-profile-head.detailed-head,
  .account-public-head.detailed-head{
    grid-template-columns:116px minmax(0,1fr);
    gap:18px;
  }
  .public-avatar-xl,
  .account-public-avatar.public-avatar-xl{
    width:108px!important;height:108px!important;border-radius:27px!important
  }
  .public-profile-actions,.account-profile-actions{grid-column:2;padding-bottom:4px!important}
  .public-profile-shell.public-profile-detailed,.account-public-shell{margin-top:-68px}
}
@media(max-width:620px){
  .public-profile-head.detailed-head,
  .account-public-head.detailed-head{
    grid-template-columns:82px minmax(0,1fr);
    gap:14px;
    min-height:125px;
  }
  .public-avatar-xl,
  .account-public-avatar.public-avatar-xl{
    width:78px!important;height:78px!important;border:4px solid rgba(8,11,20,.96)!important;border-radius:22px!important
  }
  .public-name-line h1,.account-name-row h1{font-size:2rem!important}
  .public-profile-actions,.account-profile-actions{grid-column:1 / -1;width:100%}
  .public-profile-actions .btn,.account-profile-actions .btn{width:100%}
  .public-tabs.detailed-tabs,.account-profile-tabs.detailed-tabs{width:100%;margin-top:10px!important}
  .public-cover.public-cover-detailed,.account-public-cover.public-cover-detailed{height:235px!important;min-height:235px!important}
}


/* =========================================================
   SM917 GLASS PROFILE HERO
   Name on cover + translucent blurred information strip
   ========================================================= */

.profile-hero-cover{
  position:relative;
  height:390px!important;
  min-height:390px!important;
  overflow:hidden;
  isolation:isolate;
}
.profile-hero-cover > .profile-cover-media,
.profile-hero-cover > img.profile-cover-media{
  z-index:-3!important;
}
.profile-hero-cover:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  transform:none!important;
  z-index:-1!important;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,8,16,.08) 0%,rgba(5,8,16,.12) 40%,rgba(5,8,16,.72) 100%),
    linear-gradient(90deg,rgba(4,8,15,.40) 0%,rgba(4,8,15,.08) 48%,rgba(4,8,15,.24) 100%)!important;
}
.profile-cover-inner{
  height:100%;
  position:relative;
}
.profile-cover-identity{
  position:absolute;
  left:18px;
  bottom:68px;
  z-index:5;
  max-width:min(760px,72%);
  text-shadow:0 3px 24px rgba(0,0,0,.62);
}
.account-cover-identity{
  left:30px;
  bottom:66px;
}
.profile-cover-identity .public-name-line,
.profile-cover-identity .account-name-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.profile-cover-identity h1{
  margin:0!important;
  color:#fff;
  font-size:clamp(3rem,5vw,5.4rem)!important;
  line-height:.92!important;
  letter-spacing:-.065em!important;
  overflow-wrap:anywhere;
}
.profile-cover-identity .public-handle{
  margin:10px 0 2px!important;
  color:var(--cyan)!important;
  font-size:1.02rem;
  text-shadow:0 2px 12px rgba(0,0,0,.65);
}
.profile-cover-identity .profile-status-text{
  margin:5px 0 0!important;
  color:rgba(245,248,255,.88);
  font-size:1rem;
  font-weight:650;
}
.profile-shell-glass{
  margin-top:-48px!important;
  position:relative;
  z-index:12;
  padding-top:0!important;
}
.profile-glass-strip{
  min-height:142px;
  display:grid;
  grid-template-columns:minmax(280px,.95fr) minmax(520px,2.05fr) auto;
  align-items:center;
  gap:24px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(15,23,42,.70),rgba(14,18,35,.54));
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  backdrop-filter:blur(24px) saturate(135%);
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}
body.light .profile-glass-strip{
  background:rgba(255,255,255,.68);
  border-color:rgba(20,35,70,.13);
}
.profile-glass-user{
  display:flex;
  align-items:center;
  gap:17px;
  min-width:0;
}
.profile-glass-user .public-avatar-xl,
.profile-glass-user .account-public-avatar.public-avatar-xl{
  width:100px!important;
  height:100px!important;
  min-width:100px;
  border:3px solid rgba(94,231,255,.72)!important;
  border-radius:25px!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.34),
    0 0 0 4px rgba(156,108,255,.12);
  margin:0!important;
}
.profile-glass-user .public-badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-content:center;
}
.profile-glass-stats{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(105px,1fr));
  align-items:stretch;
}
.profile-glass-stats>div{
  min-width:0;
  padding:9px 20px;
  border-left:1px solid rgba(255,255,255,.09);
}
.profile-glass-stats span{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.075em;
}
.profile-glass-stats strong{
  display:block;
  font-size:1.05rem;
  white-space:normal;
  overflow-wrap:anywhere;
}
.profile-glass-action{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-width:max-content;
}
.profile-glass-action .btn{
  min-height:46px;
  padding:0 17px;
  border-radius:14px;
  background:rgba(9,14,27,.42);
  border-color:rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
}
.profile-glass-action .btn:hover{
  background:rgba(47,156,255,.14);
  border-color:rgba(94,231,255,.26);
}

/* Slide menu sits immediately below the glass panel */
.profile-shell-glass > .public-tabs.detailed-tabs,
.profile-shell-glass > .account-profile-tabs.detailed-tabs{
  margin:20px 0 26px!important;
  background:rgba(11,17,31,.52)!important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

/* remove old header layout spacing because identity now lives inside the cover */
.public-profile-head.detailed-head,
.account-public-head.detailed-head{
  display:none!important;
}
.profile-kpi-strip{
  display:none!important;
}

/* More graceful cover image display */
.profile-hero-cover .profile-cover-media{
  object-fit:cover!important;
  object-position:center center!important;
  filter:saturate(.93) contrast(1.02);
}

/* Public cover controls */
.profile-cover-chip{
  z-index:6!important;
}
.back-users{
  position:relative;
  z-index:7;
}

/* Responsive glass hero */
@media(max-width:1150px){
  .profile-glass-strip{
    grid-template-columns:minmax(240px,.9fr) minmax(0,1.7fr);
  }
  .profile-glass-action{
    grid-column:1/-1;
    justify-content:flex-end;
    margin-top:-4px;
  }
}
@media(max-width:900px){
  .profile-hero-cover{height:340px!important;min-height:340px!important}
  .profile-cover-identity{bottom:62px;max-width:82%}
  .profile-cover-identity h1{font-size:clamp(2.7rem,8vw,4.3rem)!important}
  .profile-glass-strip{
    grid-template-columns:1fr;
    gap:16px;
  }
  .profile-glass-stats{
    grid-template-columns:repeat(2,1fr);
  }
  .profile-glass-stats>div:nth-child(odd){border-left:0}
  .profile-glass-action{grid-column:auto}
}
@media(max-width:620px){
  .profile-hero-cover{height:300px!important;min-height:300px!important}
  .profile-cover-identity{
    left:16px;
    bottom:58px;
    max-width:calc(100% - 32px);
  }
  .account-cover-identity{left:18px}
  .profile-cover-identity h1{font-size:2.65rem!important}
  .profile-shell-glass{margin-top:-34px!important;padding-left:11px!important;padding-right:11px!important}
  .profile-glass-strip{padding:16px;border-radius:20px}
  .profile-glass-user{
    align-items:flex-start;
  }
  .profile-glass-user .public-avatar-xl,
  .profile-glass-user .account-public-avatar.public-avatar-xl{
    width:78px!important;height:78px!important;min-width:78px
  }
  .profile-glass-stats{grid-template-columns:1fr 1fr}
  .profile-glass-stats>div{padding:10px 12px}
  .profile-glass-action .btn{width:100%}
}


/* =========================================================
   SM917 PROFILE — MATCH MOCKUP PROPORTIONS
   ========================================================= */

/* Wider profile stage, independent from ordinary pages */
body:has(#public-profile) .header .container,
body:has(#public-profile) .public-cover .container,
body:has(#public-profile) .public-profile-shell,
body[data-account-page="true"] #profile .account-public-shell{
  width:min(1500px,calc(100% - 56px))!important;
  max-width:1500px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Public hero — large cinematic cover */
body:has(#public-profile) .profile-hero-cover{
  height:500px!important;
  min-height:500px!important;
}
body:has(#public-profile) .profile-cover-inner{
  width:min(1500px,calc(100% - 56px))!important;
  max-width:1500px!important;
  margin:auto!important;
}
body:has(#public-profile) .profile-cover-identity{
  left:18px!important;
  bottom:125px!important;
  max-width:900px!important;
}
body:has(#public-profile) .profile-cover-identity h1{
  font-size:clamp(4rem,6vw,6.3rem)!important;
  line-height:.88!important;
}
body:has(#public-profile) .profile-cover-identity .public-handle{
  font-size:1.22rem!important;
  margin-top:14px!important;
}
body:has(#public-profile) .profile-cover-identity .profile-status-text{
  font-size:1.15rem!important;
  margin-top:7px!important;
}

/* Glass strip: broad, premium, overlaps the banner */
body:has(#public-profile) .profile-shell-glass{
  margin-top:-92px!important;
  padding-left:0!important;
  padding-right:0!important;
}
body:has(#public-profile) .profile-glass-strip{
  min-height:180px!important;
  grid-template-columns:minmax(360px,1.05fr) minmax(680px,2.5fr) auto!important;
  gap:30px!important;
  padding:27px 30px!important;
  border-radius:27px!important;
  background:
    linear-gradient(135deg,rgba(19,29,50,.70),rgba(14,20,38,.54))!important;
  border:1px solid rgba(180,205,255,.22)!important;
  -webkit-backdrop-filter:blur(30px) saturate(150%)!important;
  backdrop-filter:blur(30px) saturate(150%)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.08)!important;
}
body:has(#public-profile) .profile-glass-user{
  gap:26px!important;
}
body:has(#public-profile) .profile-glass-user .public-avatar-xl{
  width:128px!important;
  height:128px!important;
  min-width:128px!important;
  border-radius:29px!important;
  border-width:4px!important;
}
body:has(#public-profile) .profile-glass-user .public-badges{
  gap:10px!important;
}
body:has(#public-profile) .profile-glass-user .badge{
  padding:9px 14px!important;
  font-size:.76rem!important;
}
body:has(#public-profile) .profile-glass-stats{
  grid-template-columns:repeat(4,minmax(140px,1fr))!important;
}
body:has(#public-profile) .profile-glass-stats>div{
  padding:15px 28px!important;
}
body:has(#public-profile) .profile-glass-stats span{
  font-size:.75rem!important;
  margin-bottom:9px!important;
}
body:has(#public-profile) .profile-glass-stats strong{
  font-size:1.22rem!important;
}
body:has(#public-profile) .profile-glass-action .btn{
  min-height:50px!important;
  padding:0 22px!important;
}

/* Tabs: wide and visually aligned with screenshot */
body:has(#public-profile) .public-tabs.detailed-tabs{
  width:100%!important;
  max-width:none!important;
  margin:28px 0 32px!important;
  padding:0!important;
  gap:8px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button{
  min-width:150px!important;
  padding:17px 24px!important;
  border-radius:12px 12px 0 0!important;
  font-size:1rem!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button.active{
  background:rgba(47,156,255,.08)!important;
  box-shadow:none!important;
  color:var(--cyan)!important;
  position:relative;
}
body:has(#public-profile) .public-tabs.detailed-tabs button.active:after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:-1px;
  height:3px;border-radius:3px 3px 0 0;
  background:var(--cyan);
}

/* Main public profile content wider and more substantial */
body:has(#public-profile) .profile-detail-layout{
  grid-template-columns:minmax(0,1.65fr) minmax(360px,.72fr)!important;
  gap:28px!important;
}
body:has(#public-profile) .profile-detail-main,
body:has(#public-profile) .profile-detail-side{
  gap:24px!important;
}
body:has(#public-profile) .profile-detail-main>.card,
body:has(#public-profile) .profile-detail-side>.card{
  padding:30px!important;
  border-radius:24px!important;
}
body:has(#public-profile) .profile-hero-card{
  min-height:230px!important;
}
body:has(#public-profile) .profile-hero-card h2{
  font-size:2.4rem!important;
}
body:has(#public-profile) .profile-hero-card .lead{
  font-size:1.12rem!important;
}

/* Account editor profile gets the same proportions */
body[data-account-page="true"] #profile .profile-hero-cover{
  height:500px!important;
  min-height:500px!important;
}
body[data-account-page="true"] #profile .account-cover-identity{
  left:42px!important;
  bottom:125px!important;
  max-width:900px!important;
}
body[data-account-page="true"] #profile .account-cover-identity h1{
  font-size:clamp(4rem,6vw,6.3rem)!important;
  line-height:.88!important;
}
body[data-account-page="true"] #profile .profile-shell-glass{
  width:min(1500px,calc(100% - 56px))!important;
  margin:-92px auto 0!important;
  padding-left:0!important;
  padding-right:0!important;
}
body[data-account-page="true"] #profile .profile-glass-strip{
  min-height:180px!important;
  grid-template-columns:minmax(360px,1.05fr) minmax(680px,2.5fr) auto!important;
  padding:27px 30px!important;
  border-radius:27px!important;
  background:linear-gradient(135deg,rgba(19,29,50,.70),rgba(14,20,38,.54))!important;
  -webkit-backdrop-filter:blur(30px) saturate(150%)!important;
  backdrop-filter:blur(30px) saturate(150%)!important;
}
body[data-account-page="true"] #profile .profile-glass-user .account-public-avatar{
  width:128px!important;height:128px!important;min-width:128px!important;
}
body[data-account-page="true"] #profile .account-profile-tabs.detailed-tabs{
  width:100%!important;
  max-width:none!important;
  margin:28px 0 32px!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
body[data-account-page="true"] #profile .account-profile-tabs.detailed-tabs button{
  min-width:150px!important;
  padding:17px 24px!important;
  border-radius:12px 12px 0 0!important;
  font-size:1rem!important;
}
body[data-account-page="true"] #profile .account-profile-tabs.detailed-tabs button.active{
  background:rgba(47,156,255,.08)!important;
  color:var(--cyan)!important;
  box-shadow:none!important;
}

/* Large desktop proportional tuning */
@media(min-width:1500px){
  body:has(#public-profile) .profile-cover-identity,
  body[data-account-page="true"] #profile .account-cover-identity{
    bottom:135px!important;
  }
}

/* Tablet */
@media(max-width:1200px){
  body:has(#public-profile) .profile-glass-strip,
  body[data-account-page="true"] #profile .profile-glass-strip{
    grid-template-columns:1fr!important;
  }
  body:has(#public-profile) .profile-glass-stats,
  body[data-account-page="true"] #profile .profile-glass-stats{
    grid-template-columns:repeat(4,1fr)!important;
  }
  body:has(#public-profile) .profile-glass-action,
  body[data-account-page="true"] #profile .profile-glass-action{
    justify-content:flex-start!important;
  }
}

/* Mobile */
@media(max-width:760px){
  body:has(#public-profile) .profile-hero-cover,
  body[data-account-page="true"] #profile .profile-hero-cover{
    height:350px!important;
    min-height:350px!important;
  }
  body:has(#public-profile) .profile-cover-identity,
  body[data-account-page="true"] #profile .account-cover-identity{
    bottom:74px!important;
    left:18px!important;
  }
  body:has(#public-profile) .profile-cover-identity h1,
  body[data-account-page="true"] #profile .account-cover-identity h1{
    font-size:3rem!important;
  }
  body:has(#public-profile) .profile-shell-glass,
  body[data-account-page="true"] #profile .profile-shell-glass{
    margin-top:-54px!important;
    width:min(100% - 22px,1500px)!important;
  }
  body:has(#public-profile) .profile-glass-stats,
  body[data-account-page="true"] #profile .profile-glass-stats{
    grid-template-columns:repeat(2,1fr)!important;
  }
  body:has(#public-profile) .profile-detail-layout{
    grid-template-columns:1fr!important;
  }
  body:has(#public-profile) .public-tabs.detailed-tabs button,
  body[data-account-page="true"] #profile .account-profile-tabs.detailed-tabs button{
    min-width:auto!important;
    flex:1 0 auto;
  }
}


/* =========================================================
   SAFE FIX — COVER IMAGE + STABLE PROFILE NAVIGATION
   No changes to Firebase/profile loading JavaScript.
   ========================================================= */

/* Actual saved cover image */
.profile-hero-cover{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.profile-hero-cover > .profile-cover-media{
  position:absolute!important;
  inset:0!important;
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:0!important;
}
.profile-hero-cover > .profile-cover-media[hidden]{
  display:none!important;
}

/* overlays remain above image, content remains above overlays */
.profile-hero-cover:after{
  z-index:1!important;
  pointer-events:none!important;
}
.profile-hero-cover .public-cover-glow,
.profile-hero-cover .account-cover-glow{
  z-index:2!important;
  pointer-events:none!important;
}
.profile-cover-inner,
.profile-cover-identity,
.account-cover-identity,
.profile-cover-chip,
.back-users{
  position:relative;
  z-index:3!important;
}

/* fallback only if no user cover has been loaded */
.profile-hero-cover{
  background:
    radial-gradient(circle at 18% 20%,rgba(47,156,255,.18),transparent 34%),
    radial-gradient(circle at 88% 20%,rgba(156,108,255,.20),transparent 30%),
    linear-gradient(135deg,#15294c,#35285e)!important;
}

/* Profile navigation: one stable horizontal row directly below glass card */
body:has(#public-profile) .public-tabs.detailed-tabs,
#profile .account-profile-tabs.detailed-tabs{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:62px!important;
  margin:24px 0 30px!important;
  padding:0 8px!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  scrollbar-width:none;
}
body:has(#public-profile) .public-tabs.detailed-tabs::-webkit-scrollbar,
#profile .account-profile-tabs.detailed-tabs::-webkit-scrollbar{display:none}

body:has(#public-profile) .public-tabs.detailed-tabs button,
#profile .account-profile-tabs.detailed-tabs button{
  position:relative!important;
  flex:0 0 auto!important;
  min-width:150px!important;
  min-height:62px!important;
  margin:0!important;
  padding:0 22px!important;
  border:0!important;
  border-radius:0!important;
  white-space:nowrap!important;
  background:transparent!important;
  color:var(--muted)!important;
  transform:none!important;
  box-shadow:none!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button:hover,
#profile .account-profile-tabs.detailed-tabs button:hover{
  color:var(--text)!important;
  background:rgba(255,255,255,.025)!important;
  transform:none!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button.active,
#profile .account-profile-tabs.detailed-tabs button.active{
  color:var(--cyan)!important;
  background:rgba(47,156,255,.045)!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button.active:after,
#profile .account-profile-tabs.detailed-tabs button.active:after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:0;
  height:3px;
  border-radius:4px 4px 0 0;
  background:var(--cyan);
}

/* keep nav immediately attached to profile, without layout jumps */
body:has(#public-profile) .profile-shell-glass,
#profile .profile-shell-glass{
  display:block!important;
}
body:has(#public-profile) .profile-glass-strip,
#profile .profile-glass-strip{
  margin-bottom:0!important;
}
.public-tab-view.active,.account-profile-tab.active{animation:none!important}

@media(max-width:760px){
  body:has(#public-profile) .public-tabs.detailed-tabs button,
  #profile .account-profile-tabs.detailed-tabs button{
    min-width:max-content!important;
    padding:0 18px!important;
  }
}


/* =========================================================
   EXACT PROFILE REFERENCE LAYOUT
   ========================================================= */

/* Full-width cinematic profile section */
body:has(#public-profile){
  background:
    radial-gradient(circle at 0 45%,rgba(21,86,145,.18),transparent 34%),
    radial-gradient(circle at 100% 40%,rgba(100,63,164,.18),transparent 36%),
    var(--bg);
}
body:has(#public-profile) main{
  overflow:visible;
}

/* Hero cover */
body:has(#public-profile) .profile-hero-cover{
  height:520px!important;
  min-height:520px!important;
  border-radius:0!important;
  overflow:hidden!important;
  position:relative!important;
  background:#13233e!important;
}
body:has(#public-profile) .profile-hero-cover>.profile-cover-media{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 50%!important;
  z-index:0!important;
  filter:saturate(.92) contrast(1.02) brightness(.90);
}
body:has(#public-profile) .profile-hero-cover:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  transform:none!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(5,10,20,.04) 0%,rgba(5,10,20,.03) 34%,rgba(5,10,20,.22) 62%,rgba(5,10,20,.78) 100%),
    linear-gradient(90deg,rgba(3,8,16,.34) 0%,rgba(3,8,16,.06) 48%,rgba(3,8,16,.28) 100%)!important;
}
body:has(#public-profile) .profile-hero-cover .public-cover-glow{
  opacity:.2!important;
  z-index:2!important;
}

/* Profile content width as in reference */
body:has(#public-profile) .profile-cover-inner,
body:has(#public-profile) .public-profile-shell{
  width:min(1320px,calc(100% - 64px))!important;
  max-width:1320px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Back link and chip */
body:has(#public-profile) .back-users{
  position:absolute!important;
  top:54px!important;
  left:0!important;
  z-index:4!important;
  color:rgba(255,255,255,.86)!important;
  font-size:.95rem!important;
}
body:has(#public-profile) .profile-cover-chip{
  position:absolute!important;
  top:48px!important;
  right:0!important;
  bottom:auto!important;
  z-index:4!important;
  background:rgba(7,12,24,.38)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}

/* Name sits on the banner */
body:has(#public-profile) .profile-cover-identity{
  position:absolute!important;
  left:0!important;
  bottom:118px!important;
  z-index:4!important;
  max-width:800px!important;
  text-shadow:0 3px 24px rgba(0,0,0,.58)!important;
}
body:has(#public-profile) .profile-cover-identity h1{
  margin:0!important;
  font-size:clamp(4rem,5.4vw,5.8rem)!important;
  line-height:.9!important;
  letter-spacing:-.06em!important;
  color:#fff!important;
}
body:has(#public-profile) .profile-cover-identity .profile-verified{
  width:29px!important;
  height:29px!important;
  font-size:.9rem!important;
}
body:has(#public-profile) .profile-cover-identity .public-handle{
  margin:13px 0 2px!important;
  font-size:1.18rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  color:var(--cyan)!important;
}
body:has(#public-profile) .profile-cover-identity .profile-status-text{
  margin:7px 0 0!important;
  font-size:1.08rem!important;
  line-height:1.4!important;
  font-weight:650!important;
  color:rgba(242,247,255,.88)!important;
}

/* Glass panel overlaps the bottom edge of hero */
body:has(#public-profile) .profile-shell-glass{
  position:relative!important;
  z-index:10!important;
  margin-top:-102px!important;
  padding:0!important;
}
body:has(#public-profile) .profile-glass-strip{
  display:grid!important;
  grid-template-columns:410px minmax(0,1fr)!important;
  align-items:center!important;
  gap:0!important;
  min-height:176px!important;
  padding:20px 28px!important;
  border-radius:24px!important;
  background:
    linear-gradient(135deg,rgba(20,31,53,.66),rgba(13,19,35,.51))!important;
  border:1px solid rgba(172,205,255,.22)!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.075)!important;
  backdrop-filter:blur(26px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%)!important;
}

/* Avatar + badges exactly grouped on left */
body:has(#public-profile) .profile-glass-user{
  display:grid!important;
  grid-template-columns:108px minmax(0,1fr)!important;
  align-items:center!important;
  gap:24px!important;
  min-width:0!important;
}
body:has(#public-profile) .profile-glass-user .public-avatar-xl{
  width:104px!important;
  height:104px!important;
  min-width:104px!important;
  border-radius:27px!important;
  border:3px solid rgba(76,208,255,.88)!important;
  box-shadow:
    0 13px 32px rgba(0,0,0,.36),
    0 0 0 3px rgba(156,108,255,.18)!important;
}
body:has(#public-profile) .profile-glass-user .public-badges{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
}
body:has(#public-profile) .profile-glass-user .badge{
  padding:9px 14px!important;
  border-radius:999px!important;
  font-size:.74rem!important;
  letter-spacing:.065em!important;
}

/* Stats exactly across the remaining width */
body:has(#public-profile) .profile-glass-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:center!important;
  min-width:0!important;
}
body:has(#public-profile) .profile-glass-stats>div{
  min-height:80px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:10px 26px!important;
  border-left:1px solid rgba(255,255,255,.09)!important;
}
body:has(#public-profile) .profile-glass-stats span{
  display:block!important;
  margin:0 0 8px!important;
  font-size:.71rem!important;
  line-height:1.25!important;
  text-transform:uppercase!important;
  letter-spacing:.075em!important;
  color:#9caccc!important;
}
body:has(#public-profile) .profile-glass-stats strong{
  display:block!important;
  font-size:1.18rem!important;
  line-height:1.2!important;
  color:#fff!important;
}

/* Hide copy action in the glass row like the reference screenshot */
body:has(#public-profile) .profile-glass-action{
  display:none!important;
}

/* Tabs as a full-width lower rail */
body:has(#public-profile) .public-tabs.detailed-tabs{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:none!important;
  min-height:72px!important;
  margin:24px 0 34px!important;
  padding:0!important;
  gap:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button{
  position:relative!important;
  flex:0 0 auto!important;
  min-width:165px!important;
  min-height:72px!important;
  padding:0 24px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#a8b5d0!important;
  font-size:1rem!important;
  font-weight:750!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button.active{
  color:var(--cyan)!important;
  background:linear-gradient(180deg,rgba(47,156,255,.05),rgba(47,156,255,.02))!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button.active:after{
  content:""!important;
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:0!important;
  height:3px!important;
  border-radius:4px 4px 0 0!important;
  background:var(--cyan)!important;
}

/* Main content same proportions */
body:has(#public-profile) .profile-detail-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1.6fr) minmax(330px,.72fr)!important;
  gap:24px!important;
}
body:has(#public-profile) .profile-detail-main,
body:has(#public-profile) .profile-detail-side{
  gap:20px!important;
}
body:has(#public-profile) .profile-detail-main>.card,
body:has(#public-profile) .profile-detail-side>.card{
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(19,30,51,.94),rgba(13,20,37,.96))!important;
  border:1px solid rgba(166,198,245,.13)!important;
}
body:has(#public-profile) .profile-hero-card{
  min-height:210px!important;
}
body:has(#public-profile) .profile-hero-card h2{
  margin-top:22px!important;
  font-size:2.25rem!important;
  letter-spacing:-.035em!important;
}
body:has(#public-profile) .profile-hero-card .lead{
  margin-top:14px!important;
  font-size:1.08rem!important;
}

/* Use an elegant fallback only when cover isn't loaded */
body:has(#public-profile) .profile-hero-cover>.profile-cover-media[hidden] ~ .public-cover-glow{
  opacity:.65!important;
}

/* Same visual language inside Il mio Garage -> Profilo */
#profile .profile-hero-cover{
  height:500px!important;
  min-height:500px!important;
}
#profile .account-cover-identity{
  left:34px!important;
  bottom:115px!important;
}
#profile .account-cover-identity h1{
  font-size:clamp(4rem,5vw,5.6rem)!important;
}
#profile .profile-shell-glass{
  margin-top:-100px!important;
  padding-left:28px!important;
  padding-right:28px!important;
}
#profile .profile-glass-strip{
  min-height:170px!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,rgba(20,31,53,.66),rgba(13,19,35,.51))!important;
  border:1px solid rgba(172,205,255,.22)!important;
  backdrop-filter:blur(26px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%)!important;
}

/* Responsive */
@media(max-width:1050px){
  body:has(#public-profile) .profile-glass-strip{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  body:has(#public-profile) .profile-glass-stats>div:first-child{
    border-left:0!important;
  }
}
@media(max-width:760px){
  body:has(#public-profile) .profile-hero-cover{
    height:370px!important;
    min-height:370px!important;
  }
  body:has(#public-profile) .profile-cover-inner,
  body:has(#public-profile) .public-profile-shell{
    width:calc(100% - 24px)!important;
  }
  body:has(#public-profile) .profile-cover-identity{
    bottom:72px!important;
  }
  body:has(#public-profile) .profile-cover-identity h1{
    font-size:3rem!important;
  }
  body:has(#public-profile) .profile-shell-glass{
    margin-top:-52px!important;
  }
  body:has(#public-profile) .profile-glass-user{
    grid-template-columns:82px 1fr!important;
  }
  body:has(#public-profile) .profile-glass-user .public-avatar-xl{
    width:80px!important;height:80px!important;min-width:80px!important;
  }
  body:has(#public-profile) .profile-glass-stats{
    grid-template-columns:1fr 1fr!important;
  }
  body:has(#public-profile) .profile-glass-stats>div:nth-child(odd){
    border-left:0!important;
  }
  body:has(#public-profile) .profile-detail-layout{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   PROFILE FINAL FIX
   - original profile dimensions
   - real uploaded cover remains visible
   - dark/blue fade blends cover into page
   ========================================================= */

body:has(#public-profile) .profile-cover-inner,
body:has(#public-profile) .public-profile-shell,
body:has(#public-profile) .profile-shell-glass{
    width:min(1320px, calc(100% - 48px)) !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

body:has(#public-profile) .profile-hero-cover{
    position:relative !important;
    height:520px !important;
    min-height:520px !important;
    max-height:520px !important;
    overflow:visible !important;
    isolation:isolate !important;
    background:#07101f !important;
}

/* The user's actual uploaded background image */
body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    z-index:0 !important;
    opacity:1 !important;
    filter:saturate(.92) contrast(1.03) brightness(.92) !important;
}

/* Gradient ON TOP of the cover, not a replacement image */
body:has(#public-profile) .profile-hero-cover::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(90deg,
        rgba(4,10,20,.38) 0%,
        rgba(4,10,20,.10) 27%,
        rgba(4,10,20,.03) 55%,
        rgba(4,10,20,.22) 100%),
      linear-gradient(180deg,
        rgba(4,8,16,.03) 0%,
        rgba(4,8,16,.02) 42%,
        rgba(5,11,22,.18) 62%,
        rgba(5,12,25,.62) 82%,
        #07101f 100%) !important;
}

/* Continue the fade below the image so there is no hard horizontal cut */
body:has(#public-profile) .profile-hero-cover::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:calc(100% - 2px) !important;
    height:190px !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg,
        #07101f 0%,
        rgba(7,16,31,.97) 22%,
        rgba(7,16,31,.82) 52%,
        rgba(7,16,31,0) 100%) !important;
}

/* Keep profile content above the cover overlays */
body:has(#public-profile) .profile-cover-inner{
    position:relative !important;
    z-index:3 !important;
}
body:has(#public-profile) .profile-cover-identity{
    left:0 !important;
    bottom:118px !important;
    max-width:760px !important;
}
body:has(#public-profile) .profile-cover-identity h1{
    font-size:5.8rem !important;
    line-height:.92 !important;
}
body:has(#public-profile) .profile-cover-identity .public-handle{
    font-size:1.18rem !important;
}
body:has(#public-profile) .profile-cover-identity .profile-status-text{
    font-size:1.08rem !important;
}

/* Restore the normal-sized glass panel */
body:has(#public-profile) .profile-shell-glass{
    position:relative !important;
    z-index:5 !important;
    margin-top:-102px !important;
}
body:has(#public-profile) .profile-glass-strip{
    min-height:176px !important;
    grid-template-columns:410px minmax(0,1fr) !important;
    padding:20px 28px !important;
    border-radius:24px !important;
    background:linear-gradient(135deg,rgba(28,39,62,.68),rgba(12,19,35,.55)) !important;
    border:1px solid rgba(184,210,255,.22) !important;
    backdrop-filter:blur(28px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(28px) saturate(145%) !important;
}
body:has(#public-profile) .profile-glass-user{
    grid-template-columns:108px minmax(0,1fr) !important;
    gap:24px !important;
}
body:has(#public-profile) .profile-glass-user .public-avatar-xl{
    width:104px !important;
    height:104px !important;
    min-width:104px !important;
    border-radius:27px !important;
}
body:has(#public-profile) .profile-glass-stats > div{
    min-height:80px !important;
    padding:10px 26px !important;
}
body:has(#public-profile) .profile-glass-stats span{
    font-size:.71rem !important;
    margin-bottom:8px !important;
}
body:has(#public-profile) .profile-glass-stats strong{
    font-size:1.18rem !important;
}

/* Normal tab/content proportions */
body:has(#public-profile) .public-tabs.detailed-tabs{
    min-height:72px !important;
    margin:24px 0 34px !important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button{
    min-width:165px !important;
    min-height:72px !important;
    font-size:1rem !important;
}
body:has(#public-profile) .profile-detail-layout{
    grid-template-columns:minmax(0,1.6fr) minmax(330px,.72fr) !important;
    gap:24px !important;
}

@media (max-width:1050px){
    body:has(#public-profile) .profile-cover-inner,
    body:has(#public-profile) .public-profile-shell,
    body:has(#public-profile) .profile-shell-glass{
        width:calc(100% - 28px) !important;
    }
    body:has(#public-profile) .profile-hero-cover{
        height:460px !important;
        min-height:460px !important;
        max-height:460px !important;
    }
    body:has(#public-profile) .profile-cover-identity h1{
        font-size:clamp(3rem,10vw,5rem) !important;
    }
    body:has(#public-profile) .profile-glass-strip,
    body:has(#public-profile) .profile-detail-layout{
        grid-template-columns:1fr !important;
    }
}


/* ============================================================
   PUBLIC PROFILE — FINAL REFERENCE LAYOUT / NORMAL WIDTH
   Reference: supplied SM917 profile screenshot.
   IMPORTANT: does not replace user avatar/cover; only styles them.
   ============================================================ */

body:has(#public-profile){
  --profile-width: 1180px;
  --profile-side: 28px;
  --profile-page-bg: #07101f;
}

/* Overall profile width: narrower than the supplied reference screenshot */
body:has(#public-profile) .profile-cover-inner,
body:has(#public-profile) .public-profile-shell,
body:has(#public-profile) .profile-shell-glass{
  width:min(var(--profile-width), calc(100% - (var(--profile-side) * 2))) !important;
  max-width:var(--profile-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* COVER: preserve the user's uploaded background image */
body:has(#public-profile) .profile-hero-cover{
  position:relative !important;
  height:520px !important;
  min-height:520px !important;
  max-height:520px !important;
  overflow:visible !important;
  isolation:isolate !important;
  background:var(--profile-page-bg) !important;
}

body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  z-index:0 !important;
  filter:saturate(.94) contrast(1.04) brightness(.94) !important;
}

/* This is the fade visible in the requested reference:
   photo -> dark blue -> page background. */
body:has(#public-profile) .profile-hero-cover::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,
      rgba(3,8,16,.28) 0%,
      rgba(3,8,16,.07) 28%,
      rgba(3,8,16,.02) 60%,
      rgba(3,8,16,.20) 100%),
    linear-gradient(180deg,
      rgba(5,10,19,.00) 0%,
      rgba(5,10,19,.00) 45%,
      rgba(5,11,22,.10) 61%,
      rgba(6,13,27,.38) 77%,
      rgba(7,16,31,.78) 91%,
      var(--profile-page-bg) 100%) !important;
}

/* Soft continuation below the physical end of the cover */
body:has(#public-profile) .profile-hero-cover::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:calc(100% - 1px) !important;
  height:155px !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,
    var(--profile-page-bg) 0%,
    rgba(7,16,31,.93) 30%,
    rgba(7,16,31,.58) 66%,
    rgba(7,16,31,0) 100%) !important;
}

/* Name / handle / status positioned on the cover like the reference */
body:has(#public-profile) .profile-cover-inner{
  position:relative !important;
  height:100% !important;
  z-index:3 !important;
}
body:has(#public-profile) .profile-cover-identity{
  position:absolute !important;
  left:0 !important;
  bottom:122px !important;
  max-width:720px !important;
  z-index:4 !important;
}
body:has(#public-profile) .profile-cover-identity h1{
  margin:0 !important;
  font-size:4.65rem !important;
  line-height:.94 !important;
  letter-spacing:-.055em !important;
  text-shadow:0 8px 32px rgba(0,0,0,.28) !important;
}
body:has(#public-profile) .profile-cover-identity .public-handle{
  margin-top:12px !important;
  font-size:1.05rem !important;
}
body:has(#public-profile) .profile-cover-identity .profile-status-text{
  margin-top:7px !important;
  font-size:1rem !important;
  font-weight:700 !important;
}

/* Glass information strip overlaps the bottom of the cover */
body:has(#public-profile) .profile-shell-glass{
  position:relative !important;
  z-index:7 !important;
  margin-top:-96px !important;
}
body:has(#public-profile) .profile-glass-strip{
  display:grid !important;
  grid-template-columns:355px minmax(0,1fr) !important;
  align-items:center !important;
  min-height:162px !important;
  padding:20px 25px !important;
  border-radius:25px !important;
  border:1px solid rgba(183,211,255,.23) !important;
  background:
    linear-gradient(135deg,rgba(31,43,66,.66),rgba(12,20,37,.52)) !important;
  backdrop-filter:blur(30px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(30px) saturate(145%) !important;
  box-shadow:
    0 28px 75px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.065) !important;
}

/* Personal avatar remains the uploaded avatar */
body:has(#public-profile) .profile-glass-user{
  display:grid !important;
  grid-template-columns:100px minmax(0,1fr) !important;
  align-items:center !important;
  gap:22px !important;
}
body:has(#public-profile) .profile-glass-user .public-avatar-xl{
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  object-fit:cover !important;
  border-radius:25px !important;
  border:3px solid rgba(74,215,255,.95) !important;
  box-shadow:0 0 0 2px rgba(135,91,255,.55),0 12px 30px rgba(0,0,0,.28) !important;
}
body:has(#public-profile) .profile-glass-user .public-badges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:9px !important;
}
body:has(#public-profile) .profile-glass-user .badge{
  padding:8px 12px !important;
  font-size:.70rem !important;
  letter-spacing:.08em !important;
}

/* Four stats as in reference */
body:has(#public-profile) .profile-glass-stats{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  align-items:stretch !important;
}
body:has(#public-profile) .profile-glass-stats > div{
  display:flex !important;
  min-width:0 !important;
  min-height:76px !important;
  padding:8px 19px !important;
  flex-direction:column !important;
  justify-content:center !important;
  border-left:1px solid rgba(173,200,241,.15) !important;
}
body:has(#public-profile) .profile-glass-stats span{
  margin-bottom:8px !important;
  font-size:.64rem !important;
  letter-spacing:.08em !important;
}
body:has(#public-profile) .profile-glass-stats strong{
  font-size:1.05rem !important;
  line-height:1.2 !important;
}

/* Tabs directly below the glass panel */
body:has(#public-profile) .public-tabs.detailed-tabs{
  position:relative !important;
  z-index:6 !important;
  width:100% !important;
  min-height:68px !important;
  margin:22px 0 30px !important;
  padding:0 !important;
  display:flex !important;
  align-items:stretch !important;
  border-bottom:1px solid rgba(151,178,220,.14) !important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button{
  position:relative !important;
  min-width:150px !important;
  min-height:68px !important;
  padding:0 26px !important;
  font-size:.94rem !important;
  border-radius:14px 14px 0 0 !important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button.active{
  background:linear-gradient(180deg,rgba(17,45,66,.58),rgba(10,27,43,.22)) !important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button.active::after{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  bottom:0 !important;
  height:3px !important;
  border-radius:3px !important;
}

/* Lower profile content retains the reference 2-column composition */
body:has(#public-profile) .profile-detail-layout{
  grid-template-columns:minmax(0,1.62fr) minmax(300px,.72fr) !important;
  gap:22px !important;
}
body:has(#public-profile) .profile-detail-main,
body:has(#public-profile) .profile-detail-side{
  gap:20px !important;
}
body:has(#public-profile) .profile-detail-main > .card,
body:has(#public-profile) .profile-detail-side > .card{
  border-radius:22px !important;
}

/* responsive only; desktop reference above remains untouched */
@media(max-width:1100px){
  body:has(#public-profile){
    --profile-side:18px;
  }
  body:has(#public-profile) .profile-glass-strip{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  body:has(#public-profile) .profile-glass-stats > div:first-child{
    border-left:0 !important;
  }
  body:has(#public-profile) .profile-detail-layout{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:700px){
  body:has(#public-profile) .profile-hero-cover{
    height:440px !important;
    min-height:440px !important;
    max-height:440px !important;
  }
  body:has(#public-profile) .profile-cover-identity{
    bottom:115px !important;
  }
  body:has(#public-profile) .profile-cover-identity h1{
    font-size:clamp(2.8rem,13vw,4.3rem) !important;
  }
  body:has(#public-profile) .profile-glass-stats{
    grid-template-columns:1fr 1fr !important;
  }
  body:has(#public-profile) .profile-glass-stats > div:nth-child(3){
    border-left:0 !important;
  }
  body:has(#public-profile) .public-tabs.detailed-tabs{
    overflow-x:auto !important;
  }
}

/* FINAL: cover to website top + long fade + transparent profile UI */
body:has(#public-profile){--profile-width:1180px;--profile-side:28px;background:#07101f!important}
body:has(#public-profile) .header{position:absolute!important;top:0!important;left:0!important;right:0!important;z-index:100!important;padding:14px 0!important;background:transparent!important}
body:has(#public-profile) .nav{background:rgba(5,10,20,.30)!important;border-color:rgba(255,255,255,.11)!important;backdrop-filter:blur(22px) saturate(145%)!important;-webkit-backdrop-filter:blur(22px) saturate(145%)!important;box-shadow:0 14px 42px rgba(0,0,0,.14)!important}
body:has(#public-profile) .header .container,body:has(#public-profile) .profile-cover-inner,body:has(#public-profile) .public-profile-shell,body:has(#public-profile) .profile-shell-glass{width:min(var(--profile-width),calc(100% - 56px))!important;max-width:var(--profile-width)!important;margin-left:auto!important;margin-right:auto!important}
body:has(#public-profile) .profile-hero-cover{margin-top:0!important;height:555px!important;min-height:555px!important;max-height:555px!important;overflow:visible!important;background:#07101f!important}
body:has(#public-profile) .profile-hero-cover>.profile-cover-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;opacity:1!important;filter:saturate(.95) contrast(1.03) brightness(.93)!important;z-index:0!important}
body:has(#public-profile) .profile-hero-cover::after{content:""!important;position:absolute!important;z-index:1!important;pointer-events:none!important;left:0!important;right:0!important;top:0!important;height:780px!important;background:linear-gradient(90deg,rgba(2,7,15,.22),rgba(2,7,15,.03) 36%,rgba(2,7,15,.02) 68%,rgba(2,7,15,.18)),linear-gradient(180deg,rgba(5,10,19,.01) 0%,rgba(5,10,19,.02) 42%,rgba(6,13,25,.12) 55%,rgba(7,15,29,.32) 67%,rgba(7,16,31,.62) 78%,rgba(7,16,31,.88) 89%,#07101f 100%)!important}
body:has(#public-profile) .profile-hero-cover::before{content:""!important;position:absolute!important;z-index:2!important;pointer-events:none!important;left:0!important;right:0!important;top:380px!important;height:340px!important;background:linear-gradient(180deg,rgba(7,16,31,0),rgba(7,16,31,.10) 23%,rgba(7,16,31,.46) 56%,rgba(7,16,31,.82) 80%,#07101f 100%)!important}
body:has(#public-profile) .profile-cover-inner{position:relative!important;z-index:4!important}
body:has(#public-profile) .profile-cover-identity{left:0!important;bottom:128px!important}
body:has(#public-profile) .profile-shell-glass{position:relative!important;z-index:8!important;margin-top:-100px!important;background:transparent!important}
body:has(#public-profile) .profile-glass-strip{background:linear-gradient(135deg,rgba(18,31,52,.31),rgba(8,16,30,.19))!important;border:1px solid rgba(194,218,255,.22)!important;backdrop-filter:blur(28px) saturate(145%)!important;-webkit-backdrop-filter:blur(28px) saturate(145%)!important;box-shadow:0 24px 70px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.07)!important}
body:has(#public-profile) .public-tabs.detailed-tabs{background:rgba(7,16,31,.08)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;border-bottom-color:rgba(173,202,244,.12)!important}
body:has(#public-profile) .public-tabs.detailed-tabs button{background:transparent!important}
body:has(#public-profile) .public-tabs.detailed-tabs button.active{background:rgba(18,49,72,.25)!important;backdrop-filter:blur(15px)!important;-webkit-backdrop-filter:blur(15px)!important}
body:has(#public-profile) .profile-detail-layout .card{background:linear-gradient(145deg,rgba(17,31,52,.34),rgba(8,17,32,.21))!important;border-color:rgba(177,205,246,.15)!important;backdrop-filter:blur(22px) saturate(125%)!important;-webkit-backdrop-filter:blur(22px) saturate(125%)!important;box-shadow:0 20px 55px rgba(0,0,0,.11),inset 0 1px 0 rgba(255,255,255,.035)!important}
body:has(#public-profile) .profile-detail-layout .card:hover{background:linear-gradient(145deg,rgba(20,36,59,.39),rgba(9,19,35,.25))!important}


/* =========================================================
   REAL COVER FADE — IMAGE ITSELF DISSOLVES INTO PAGE
   ========================================================= */

body:has(#public-profile){
  background:#07101f !important;
}

/* Keep the real uploaded cover image */
body:has(#public-profile) .profile-hero-cover{
  position:relative !important;
  overflow:visible !important;
  background:#07101f !important;
}

/* THIS is the real fade:
   the uploaded image itself fades out toward the bottom */
body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  z-index:0 !important;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 48%,
    rgba(0,0,0,.96) 58%,
    rgba(0,0,0,.82) 68%,
    rgba(0,0,0,.58) 77%,
    rgba(0,0,0,.32) 86%,
    rgba(0,0,0,.10) 94%,
    transparent 100%
  ) !important;

  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 48%,
    rgba(0,0,0,.96) 58%,
    rgba(0,0,0,.82) 68%,
    rgba(0,0,0,.58) 77%,
    rgba(0,0,0,.32) 86%,
    rgba(0,0,0,.10) 94%,
    transparent 100%
  ) !important;

  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}

/* Remove the old heavy vertical dark overlay that hid the effect */
body:has(#public-profile) .profile-hero-cover::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  height:100% !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      90deg,
      rgba(3,8,16,.26) 0%,
      rgba(3,8,16,.06) 28%,
      rgba(3,8,16,.01) 65%,
      rgba(3,8,16,.18) 100%
    ) !important;
}

/* Soft continuation between the end of the image and Panoramica */
body:has(#public-profile) .profile-hero-cover::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:72% !important;
  height:330px !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:linear-gradient(
    to bottom,
    rgba(7,16,31,0) 0%,
    rgba(7,16,31,.24) 26%,
    rgba(7,16,31,.58) 50%,
    rgba(7,16,31,.88) 73%,
    #07101f 100%
  ) !important;
}

/* Glass components must stay genuinely transparent */
body:has(#public-profile) .profile-glass-strip{
  background:linear-gradient(
    135deg,
    rgba(20,32,54,.28),
    rgba(8,16,30,.16)
  ) !important;
  backdrop-filter:blur(30px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(30px) saturate(145%) !important;
}

body:has(#public-profile) .public-tabs.detailed-tabs{
  background:transparent !important;
}

body:has(#public-profile) .profile-detail-layout .card{
  background:linear-gradient(
    145deg,
    rgba(17,31,52,.30),
    rgba(8,17,32,.18)
  ) !important;
  backdrop-filter:blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(120%) !important;
}


/* =========================================================
   PROFILE HERO V2
   - cover reaches the very top of the viewport
   - stronger / longer fade
   - profile content remains at the original compact width
   ========================================================= */

body:has(#public-profile) main,
body:has(#public-profile) .site-main{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Pull the cover underneath the floating navbar, all the way to top */
body:has(#public-profile) .profile-hero-cover{
  margin-top:0 !important;
  top:0 !important;
  min-height:540px !important;
  height:540px !important;
  background:#07101f !important;
}

/* Cover itself fills the whole hero from y=0 */
body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
  top:0 !important;
  bottom:0 !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;

  /* More pronounced and much longer dissolution */
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0,0,0,.98) 46%,
    rgba(0,0,0,.90) 54%,
    rgba(0,0,0,.75) 62%,
    rgba(0,0,0,.56) 70%,
    rgba(0,0,0,.37) 78%,
    rgba(0,0,0,.20) 85%,
    rgba(0,0,0,.08) 92%,
    transparent 100%
  ) !important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0,0,0,.98) 46%,
    rgba(0,0,0,.90) 54%,
    rgba(0,0,0,.75) 62%,
    rgba(0,0,0,.56) 70%,
    rgba(0,0,0,.37) 78%,
    rgba(0,0,0,.20) 85%,
    rgba(0,0,0,.08) 92%,
    transparent 100%
  ) !important;
}

/* Strong blue/black blend behind the disappearing photo */
body:has(#public-profile) .profile-hero-cover::before{
  content:"" !important;
  position:absolute !important;
  inset:auto 0 -180px 0 !important;
  height:440px !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(9,55,91,.30), transparent 52%),
    radial-gradient(ellipse at 88% 24%, rgba(49,29,92,.25), transparent 52%),
    linear-gradient(
      to bottom,
      rgba(7,16,31,0) 0%,
      rgba(7,16,31,.18) 18%,
      rgba(7,16,31,.48) 42%,
      rgba(7,16,31,.78) 66%,
      #07101f 92%
    ) !important;
}

/* Do not put an opaque layer over the cover */
body:has(#public-profile) .profile-hero-cover::after{
  background:linear-gradient(
    90deg,
    rgba(2,7,14,.18),
    rgba(2,7,14,.015) 38%,
    rgba(2,7,14,.015) 68%,
    rgba(2,7,14,.16)
  ) !important;
}

/* Navbar floats on top of the actual image */
body:has(#public-profile) header,
body:has(#public-profile) .site-header,
body:has(#public-profile) .topbar{
  position:relative !important;
  z-index:100 !important;
  background:transparent !important;
}

/* If the page wrapper reserves header height, cancel it only on public profile */
body:has(#public-profile) .profile-page,
body:has(#public-profile) #public-profile{
  margin-top:-80px !important;
  padding-top:0 !important;
}

/* Restore internal hero positioning so text does not move to the top */
body:has(#public-profile) .profile-hero-inner,
body:has(#public-profile) .profile-hero-content{
  padding-top:150px !important;
}

/* Keep the requested compact content width */
body:has(#public-profile) .profile-shell,
body:has(#public-profile) .profile-hero-inner,
body:has(#public-profile) .profile-content-shell{
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* =========================================================
   FINAL PROFILE COVER FADE
   Reference: user's red marked screenshot.
   Full photo at top -> gradual fade -> solid page background
   exactly around the Panoramica/tab line.
   ========================================================= */

body:has(#public-profile){
  --profile-page-bg:#07101f;
  background:var(--profile-page-bg) !important;
}

/* Hero extends far enough for the fade to reach the tabs */
body:has(#public-profile) .profile-hero-cover{
  height:650px !important;
  min-height:650px !important;
  overflow:visible !important;
  background:var(--profile-page-bg) !important;
}

/* The actual user cover dissolves progressively all the way down */
body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:650px !important;
  object-fit:cover !important;
  object-position:center center !important;

  -webkit-mask-image:linear-gradient(
    to bottom,
    rgb(0,0,0) 0%,
    rgb(0,0,0) 30%,
    rgba(0,0,0,.97) 38%,
    rgba(0,0,0,.90) 46%,
    rgba(0,0,0,.78) 54%,
    rgba(0,0,0,.64) 62%,
    rgba(0,0,0,.49) 69%,
    rgba(0,0,0,.34) 76%,
    rgba(0,0,0,.21) 82%,
    rgba(0,0,0,.11) 88%,
    rgba(0,0,0,.045) 93%,
    transparent 99%
  ) !important;

  mask-image:linear-gradient(
    to bottom,
    rgb(0,0,0) 0%,
    rgb(0,0,0) 30%,
    rgba(0,0,0,.97) 38%,
    rgba(0,0,0,.90) 46%,
    rgba(0,0,0,.78) 54%,
    rgba(0,0,0,.64) 62%,
    rgba(0,0,0,.49) 69%,
    rgba(0,0,0,.34) 76%,
    rgba(0,0,0,.21) 82%,
    rgba(0,0,0,.11) 88%,
    rgba(0,0,0,.045) 93%,
    transparent 99%
  ) !important;
}

/* Blue page blend underneath: no horizontal hard edge */
body:has(#public-profile) .profile-hero-cover::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:270px !important;
  bottom:-80px !important;
  height:auto !important;
  z-index:0 !important;
  pointer-events:none !important;

  background:
    radial-gradient(ellipse 80% 70% at 12% 45%,
      rgba(8,44,76,.30) 0%,
      rgba(8,35,63,.17) 38%,
      transparent 72%),
    radial-gradient(ellipse 72% 70% at 91% 48%,
      rgba(42,27,83,.23) 0%,
      rgba(29,23,66,.13) 40%,
      transparent 72%),
    linear-gradient(
      to bottom,
      rgba(7,16,31,0) 0%,
      rgba(7,16,31,.08) 18%,
      rgba(7,16,31,.22) 34%,
      rgba(7,16,31,.42) 50%,
      rgba(7,16,31,.64) 65%,
      rgba(7,16,31,.82) 78%,
      rgba(7,16,31,.94) 89%,
      var(--profile-page-bg) 100%
    ) !important;
}

/* Only subtle horizontal shading, never a bottom cutoff */
body:has(#public-profile) .profile-hero-cover::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  height:650px !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(
    90deg,
    rgba(2,7,14,.20) 0%,
    rgba(2,7,14,.035) 27%,
    rgba(2,7,14,0) 50%,
    rgba(2,7,14,.035) 73%,
    rgba(2,7,14,.20) 100%
  ) !important;
}

/* Pull following profile section upward so tabs sit inside the last
   portion of the fade, as marked by the user */
body:has(#public-profile) .profile-after-hero,
body:has(#public-profile) .profile-content,
body:has(#public-profile) .profile-main-content{
  position:relative !important;
  z-index:5 !important;
}

/* tabs remain visually transparent over final fade */
body:has(#public-profile) .public-tabs.detailed-tabs{
  background:rgba(7,16,31,.16) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}


/* =========================================================
   FADE EXTENSION FIX
   Keep layout size unchanged.
   Extend ONLY the uploaded cover image behind glass + tabs,
   and finish the fade much lower, at the marked line.
   ========================================================= */

body:has(#public-profile) .profile-hero-cover{
  /* layout height stays compact */
  height:540px !important;
  min-height:540px !important;
  max-height:540px !important;
  overflow:visible !important;
  position:relative !important;
  isolation:isolate !important;
}

/* IMPORTANT:
   the real uploaded cover visually continues beyond the hero.
   This does NOT add layout height. */
body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:auto !important;

  width:100% !important;
  height:790px !important;
  max-height:none !important;

  object-fit:cover !important;
  object-position:center top !important;
  z-index:0 !important;
  opacity:1 !important;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 42%,
    rgba(0,0,0,.99) 50%,
    rgba(0,0,0,.95) 58%,
    rgba(0,0,0,.86) 65%,
    rgba(0,0,0,.73) 72%,
    rgba(0,0,0,.58) 78%,
    rgba(0,0,0,.42) 84%,
    rgba(0,0,0,.27) 89%,
    rgba(0,0,0,.15) 93%,
    rgba(0,0,0,.07) 96%,
    rgba(0,0,0,.025) 98%,
    transparent 100%
  ) !important;

  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 42%,
    rgba(0,0,0,.99) 50%,
    rgba(0,0,0,.95) 58%,
    rgba(0,0,0,.86) 65%,
    rgba(0,0,0,.73) 72%,
    rgba(0,0,0,.58) 78%,
    rgba(0,0,0,.42) 84%,
    rgba(0,0,0,.27) 89%,
    rgba(0,0,0,.15) 93%,
    rgba(0,0,0,.07) 96%,
    rgba(0,0,0,.025) 98%,
    transparent 100%
  ) !important;

  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}

/* Underlay also extends down to the same point,
   so the photo fades into the exact page blue instead of grey/black. */
body:has(#public-profile) .profile-hero-cover::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:330px !important;
  height:500px !important;
  bottom:auto !important;
  z-index:-1 !important;
  pointer-events:none !important;

  background:
    radial-gradient(ellipse 85% 75% at 12% 40%,
      rgba(9,48,82,.34) 0%,
      rgba(9,40,70,.18) 40%,
      transparent 72%),
    radial-gradient(ellipse 80% 75% at 90% 40%,
      rgba(50,31,91,.25) 0%,
      rgba(36,25,72,.14) 42%,
      transparent 72%),
    linear-gradient(
      to bottom,
      rgba(7,16,31,0) 0%,
      rgba(7,16,31,.06) 18%,
      rgba(7,16,31,.18) 35%,
      rgba(7,16,31,.38) 52%,
      rgba(7,16,31,.62) 68%,
      rgba(7,16,31,.82) 82%,
      rgba(7,16,31,.95) 93%,
      #07101f 100%
    ) !important;
}

/* Horizontal vignette only; no vertical cutoff */
body:has(#public-profile) .profile-hero-cover::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:790px !important;
  bottom:auto !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(
    90deg,
    rgba(2,7,14,.19) 0%,
    rgba(2,7,14,.025) 29%,
    rgba(2,7,14,0) 52%,
    rgba(2,7,14,.025) 73%,
    rgba(2,7,14,.18) 100%
  ) !important;
}

/* Profile UI stays above the extended fading image */
body:has(#public-profile) .profile-cover-inner{z-index:4 !important}
body:has(#public-profile) .profile-shell-glass{z-index:8 !important}
body:has(#public-profile) .public-tabs.detailed-tabs{position:relative !important;z-index:9 !important}
body:has(#public-profile) .public-tab-view{position:relative !important;z-index:9 !important}

/* transparent UI so the extended fade can actually be seen through it */
body:has(#public-profile) .profile-glass-strip{
  background:linear-gradient(135deg,rgba(18,31,52,.26),rgba(8,16,30,.14)) !important;
}
body:has(#public-profile) .public-tabs.detailed-tabs{
  background:rgba(7,16,31,.06) !important;
}


/* COVER HEIGHT CORRECTION
   Keep the long fade, but stop stretching/cropping the actual cover too far down. */
body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
  height:690px !important;
  object-fit:cover !important;
  object-position:center top !important;
}

/* Overlay follows corrected cover height. */
body:has(#public-profile) .profile-hero-cover::after{
  height:690px !important;
}

/* Fade still reaches the lower target area without making the photo itself too tall. */
body:has(#public-profile) .profile-hero-cover::before{
  top:285px !important;
  height:500px !important;
}


/* =========================================================
   COVER POSITION FIX ONLY
   Keep fade/layout untouched; move the user's cover image upward.
   ========================================================= */

body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
  object-position:center 18% !important;
}


/* =========================================================
   FINAL REFERENCE LAYOUT
   Same visual composition as the supplied reference screenshot,
   but keeping the requested compact profile width.
   ========================================================= */

body:has(#public-profile){
  --profile-width:1180px;
  --profile-bg:#07101f;
  background:var(--profile-bg)!important;
}

/* Keep cover visible and cinematic */
body:has(#public-profile) .profile-hero-cover{
  position:relative!important;
  height:575px!important;
  min-height:575px!important;
  max-height:575px!important;
  overflow:visible!important;
  background:var(--profile-bg)!important;
}

/* User-uploaded cover: keep it HIGH in the frame */
body:has(#public-profile) .profile-hero-cover > .profile-cover-media{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  width:100%!important;
  height:710px!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 16%!important;
  opacity:1!important;
  z-index:0!important;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 43%,
    rgba(0,0,0,.98) 51%,
    rgba(0,0,0,.93) 59%,
    rgba(0,0,0,.82) 67%,
    rgba(0,0,0,.67) 74%,
    rgba(0,0,0,.51) 81%,
    rgba(0,0,0,.34) 87%,
    rgba(0,0,0,.19) 92%,
    rgba(0,0,0,.08) 96%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 43%,
    rgba(0,0,0,.98) 51%,
    rgba(0,0,0,.93) 59%,
    rgba(0,0,0,.82) 67%,
    rgba(0,0,0,.67) 74%,
    rgba(0,0,0,.51) 81%,
    rgba(0,0,0,.34) 87%,
    rgba(0,0,0,.19) 92%,
    rgba(0,0,0,.08) 96%,
    transparent 100%
  )!important;
}

/* Soft background blend below the image */
body:has(#public-profile) .profile-hero-cover::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:335px!important;
  height:440px!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse 80% 70% at 12% 35%,rgba(8,48,83,.28),transparent 72%),
    radial-gradient(ellipse 75% 70% at 90% 38%,rgba(47,29,88,.22),transparent 72%),
    linear-gradient(
      to bottom,
      rgba(7,16,31,0) 0%,
      rgba(7,16,31,.09) 20%,
      rgba(7,16,31,.25) 40%,
      rgba(7,16,31,.49) 60%,
      rgba(7,16,31,.75) 77%,
      rgba(7,16,31,.93) 91%,
      var(--profile-bg) 100%
    )!important;
}

/* Only subtle side darkening */
body:has(#public-profile) .profile-hero-cover::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  height:710px!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(2,7,14,.20) 0%,
    rgba(2,7,14,.025) 28%,
    rgba(2,7,14,0) 52%,
    rgba(2,7,14,.025) 74%,
    rgba(2,7,14,.18) 100%
  )!important;
}

/* Compact centered width */
body:has(#public-profile) .profile-cover-inner,
body:has(#public-profile) .public-profile-shell,
body:has(#public-profile) .profile-shell-glass{
  width:min(var(--profile-width),calc(100% - 56px))!important;
  max-width:var(--profile-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Identity placement matching reference */
body:has(#public-profile) .profile-cover-identity{
  left:0!important;
  bottom:148px!important;
  max-width:760px!important;
  z-index:4!important;
}
body:has(#public-profile) .profile-cover-identity h1{
  font-size:4.7rem!important;
  line-height:.93!important;
}
body:has(#public-profile) .profile-cover-identity .public-handle{
  margin-top:12px!important;
  font-size:1.05rem!important;
}
body:has(#public-profile) .profile-cover-identity .profile-status-text{
  margin-top:7px!important;
  font-size:1rem!important;
}

/* THIS is the important change:
   the glass panel is LOWER, not pulled upward too far */
body:has(#public-profile) .profile-shell-glass{
  position:relative!important;
  z-index:8!important;
  margin-top:-42px!important;
  padding:0!important;
  background:transparent!important;
}

/* Glass bar keeps reference proportions */
body:has(#public-profile) .profile-glass-strip{
  min-height:162px!important;
  grid-template-columns:355px minmax(0,1fr)!important;
  padding:20px 25px!important;
  border-radius:25px!important;
  background:linear-gradient(135deg,rgba(19,32,53,.30),rgba(8,16,30,.16))!important;
  border:1px solid rgba(190,217,255,.22)!important;
  backdrop-filter:blur(28px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(145%)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* Tabs sit lower as well, exactly after the glass panel */
body:has(#public-profile) .public-tabs.detailed-tabs{
  position:relative!important;
  z-index:9!important;
  width:100%!important;
  min-height:68px!important;
  margin:26px 0 30px!important;
  padding:0!important;
  background:rgba(7,16,31,.05)!important;
  border-bottom:1px solid rgba(170,201,242,.13)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

/* Lower content starts after the reference-style navigation */
body:has(#public-profile) .public-tab-view{
  position:relative!important;
  z-index:9!important;
}

/* Keep actual panels translucent */
body:has(#public-profile) .profile-detail-layout .card{
  background:linear-gradient(145deg,rgba(17,31,52,.30),rgba(8,17,32,.18))!important;
  border-color:rgba(177,205,246,.15)!important;
  backdrop-filter:blur(20px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(120%)!important;
}

@media(max-width:700px){
  body:has(#public-profile) .profile-hero-cover{
    height:500px!important;
    min-height:500px!important;
    max-height:500px!important;
  }
  body:has(#public-profile) .profile-shell-glass{
    margin-top:-30px!important;
  }
}


/* ============================================================
   USER.HTML — EXACT REFERENCE COMPOSITION
   Only difference from reference: compact site width.
   ============================================================ */

body:has(#public-profile){
  --profile-width:1180px;
  --profile-bg:#07101f;
  background:var(--profile-bg)!important;
}

/* Cover begins at page top, behind the floating navbar */
body:has(#public-profile) .header{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:100!important;
  background:transparent!important;
}
body:has(#public-profile) .header .container,
body:has(#public-profile) .profile-cover-inner,
body:has(#public-profile) .public-profile-shell,
body:has(#public-profile) .profile-shell-glass{
  width:min(var(--profile-width),calc(100% - 56px))!important;
  max-width:var(--profile-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Exact vertical composition of the reference */
body:has(#public-profile) .profile-hero-cover{
  position:relative!important;
  height:565px!important;
  min-height:565px!important;
  max-height:565px!important;
  margin:0!important;
  overflow:visible!important;
  background:var(--profile-bg)!important;
  isolation:isolate!important;
}

/* Real uploaded cover image */
body:has(#public-profile) .profile-hero-cover>.profile-cover-media{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:720px!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 15%!important;
  opacity:1!important;
  z-index:0!important;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0,0,0,.98) 54%,
    rgba(0,0,0,.92) 62%,
    rgba(0,0,0,.80) 70%,
    rgba(0,0,0,.64) 77%,
    rgba(0,0,0,.47) 84%,
    rgba(0,0,0,.29) 90%,
    rgba(0,0,0,.13) 95%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    rgba(0,0,0,.98) 54%,
    rgba(0,0,0,.92) 62%,
    rgba(0,0,0,.80) 70%,
    rgba(0,0,0,.64) 77%,
    rgba(0,0,0,.47) 84%,
    rgba(0,0,0,.29) 90%,
    rgba(0,0,0,.13) 95%,
    transparent 100%
  )!important;
}

/* Soft dark-blue continuation exactly toward the tabs */
body:has(#public-profile) .profile-hero-cover::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:335px!important;
  height:430px!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse 75% 65% at 12% 35%,rgba(10,47,80,.28),transparent 72%),
    radial-gradient(ellipse 72% 65% at 90% 38%,rgba(45,29,86,.22),transparent 72%),
    linear-gradient(
      to bottom,
      rgba(7,16,31,0) 0%,
      rgba(7,16,31,.08) 22%,
      rgba(7,16,31,.24) 42%,
      rgba(7,16,31,.48) 61%,
      rgba(7,16,31,.74) 78%,
      rgba(7,16,31,.93) 92%,
      var(--profile-bg) 100%
    )!important;
}
body:has(#public-profile) .profile-hero-cover::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  height:720px!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(2,7,14,.20) 0%,
    rgba(2,7,14,.03) 28%,
    rgba(2,7,14,0) 52%,
    rgba(2,7,14,.03) 74%,
    rgba(2,7,14,.18) 100%
  )!important;
}

/* Back link placement */
body:has(#public-profile) .back-users{
  position:absolute!important;
  top:125px!important;
  left:0!important;
  z-index:5!important;
}

/* Name / handle / status exactly above the glass bar */
body:has(#public-profile) .profile-cover-inner{
  position:relative!important;
  height:100%!important;
  z-index:4!important;
}
body:has(#public-profile) .profile-cover-identity{
  position:absolute!important;
  left:0!important;
  bottom:148px!important;
  max-width:720px!important;
  z-index:5!important;
}
body:has(#public-profile) .profile-cover-identity h1{
  margin:0!important;
  font-size:4.7rem!important;
  line-height:.93!important;
  letter-spacing:-.055em!important;
}
body:has(#public-profile) .profile-cover-identity .public-handle{
  margin:11px 0 0!important;
  font-size:1.05rem!important;
}
body:has(#public-profile) .profile-cover-identity .profile-status-text{
  margin:7px 0 0!important;
  font-size:1rem!important;
  font-weight:700!important;
}

/* The glass bar sits LOWER like the reference, not pulled too high */
body:has(#public-profile) .profile-shell-glass{
  position:relative!important;
  z-index:8!important;
  margin-top:-42px!important;
  padding:0!important;
  background:transparent!important;
}
body:has(#public-profile) .profile-glass-strip{
  display:grid!important;
  grid-template-columns:355px minmax(0,1fr)!important;
  align-items:center!important;
  min-height:162px!important;
  padding:20px 25px!important;
  border-radius:25px!important;
  background:linear-gradient(135deg,rgba(20,33,55,.30),rgba(8,16,30,.16))!important;
  border:1px solid rgba(190,216,255,.22)!important;
  backdrop-filter:blur(28px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(145%)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body:has(#public-profile) .profile-glass-user{
  display:grid!important;
  grid-template-columns:100px minmax(0,1fr)!important;
  gap:22px!important;
  align-items:center!important;
}
body:has(#public-profile) .profile-glass-user .public-avatar-xl{
  width:96px!important;
  height:96px!important;
  min-width:96px!important;
  border-radius:25px!important;
}
body:has(#public-profile) .profile-glass-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
body:has(#public-profile) .profile-glass-stats>div{
  min-height:76px!important;
  padding:8px 19px!important;
}

/* Panoramica rail exactly below the glass bar */
body:has(#public-profile) .public-tabs.detailed-tabs{
  position:relative!important;
  z-index:9!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  width:100%!important;
  min-height:68px!important;
  margin:26px 0 30px!important;
  padding:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  background:rgba(7,16,31,.05)!important;
  border:0!important;
  border-bottom:1px solid rgba(170,201,242,.13)!important;
  border-radius:0!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button{
  flex:0 0 auto!important;
  min-width:150px!important;
  min-height:68px!important;
  margin:0!important;
  padding:0 26px!important;
  border-radius:14px 14px 0 0!important;
  font-size:.94rem!important;
}

/* Below content keeps the same 2-column reference composition */
body:has(#public-profile) .profile-detail-layout{
  grid-template-columns:minmax(0,1.62fr) minmax(300px,.72fr)!important;
  gap:22px!important;
}
body:has(#public-profile) .profile-detail-layout .card{
  background:linear-gradient(145deg,rgba(17,31,52,.30),rgba(8,17,32,.18))!important;
  border-color:rgba(177,205,246,.15)!important;
  backdrop-filter:blur(20px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(120%)!important;
}

/* Nothing on users.html or account.html is changed by these selectors. */
@media(max-width:900px){
  body:has(#public-profile) .profile-glass-strip{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  body:has(#public-profile) .profile-detail-layout{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
   USER.HTML — REFERENCE CORRECTION 02
   Screenshot-matched vertical geometry; compact width retained.
   ============================================================ */

body:has(#public-profile){
  --profile-width:1180px;
}

/* Cover: same visual proportion as the requested reference */
body:has(#public-profile) .profile-hero-cover{
  height:515px!important;
  min-height:515px!important;
  max-height:515px!important;
  overflow:visible!important;
}

/* Uploaded background remains full bleed and reaches the very top */
body:has(#public-profile) .profile-hero-cover>.profile-cover-media{
  top:0!important;
  bottom:auto!important;
  height:690px!important;
  object-fit:cover!important;
  object-position:center center!important;
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 49%,
    rgba(0,0,0,.98) 57%,
    rgba(0,0,0,.91) 64%,
    rgba(0,0,0,.78) 72%,
    rgba(0,0,0,.60) 80%,
    rgba(0,0,0,.40) 87%,
    rgba(0,0,0,.20) 93%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 49%,
    rgba(0,0,0,.98) 57%,
    rgba(0,0,0,.91) 64%,
    rgba(0,0,0,.78) 72%,
    rgba(0,0,0,.60) 80%,
    rgba(0,0,0,.40) 87%,
    rgba(0,0,0,.20) 93%,
    transparent 100%
  )!important;
}

/* Long fade continues almost to Panoramica */
body:has(#public-profile) .profile-hero-cover::before{
  top:300px!important;
  height:440px!important;
  background:
    radial-gradient(ellipse 78% 75% at 8% 35%,rgba(9,45,78,.34),transparent 70%),
    radial-gradient(ellipse 78% 75% at 92% 36%,rgba(51,31,94,.28),transparent 70%),
    linear-gradient(
      to bottom,
      rgba(7,16,31,0) 0%,
      rgba(7,16,31,.05) 17%,
      rgba(7,16,31,.17) 34%,
      rgba(7,16,31,.36) 50%,
      rgba(7,16,31,.60) 67%,
      rgba(7,16,31,.82) 82%,
      rgba(7,16,31,.96) 94%,
      #07101f 100%
    )!important;
}

/* Identity is near the lower part of the visible photo, like the reference */
body:has(#public-profile) .profile-cover-identity{
  bottom:94px!important;
}
body:has(#public-profile) .profile-cover-identity h1{
  font-size:3.75rem!important;
  line-height:.98!important;
}

/* Stats glass panel overlaps the bottom of the cover, not the middle */
body:has(#public-profile) .profile-shell-glass{
  margin-top:-30px!important;
}
body:has(#public-profile) .profile-glass-strip{
  min-height:142px!important;
  padding:18px 24px!important;
  border-radius:24px!important;
  background:linear-gradient(
    135deg,
    rgba(22,34,55,.40),
    rgba(13,23,41,.25)
  )!important;
  backdrop-filter:blur(30px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(140%)!important;
}
body:has(#public-profile) .profile-glass-user .public-avatar-xl{
  width:88px!important;
  height:88px!important;
  min-width:88px!important;
}

/* Give the reference its breathing room before Panoramica */
body:has(#public-profile) .public-tabs.detailed-tabs{
  margin-top:22px!important;
  margin-bottom:30px!important;
  min-height:64px!important;
}
body:has(#public-profile) .public-tabs.detailed-tabs button{
  min-height:64px!important;
}

/* Keep the whole profile compact horizontally */
body:has(#public-profile) .profile-cover-inner,
body:has(#public-profile) .public-profile-shell,
body:has(#public-profile) .profile-shell-glass{
  width:min(var(--profile-width),calc(100% - 64px))!important;
  max-width:var(--profile-width)!important;
}

/* Desktop positioning from the reference */
@media(min-width:901px){
  body:has(#public-profile) .back-users{
    top:112px!important;
  }
}


/* =========================================================
   USER PAGE — SIMPLE ALIGNMENT FIX
   Name aligned above avatar + cleaner back link.
   ========================================================= */

/* Avatar starts 24px inside the glass panel:
   align the identity to that exact same X position. */
body:has(#public-profile) .profile-cover-identity{
  left:24px !important;
}

/* Back link aligned with the same profile column, but kept higher */
body:has(#public-profile) .back-users{
  left:24px !important;
  top:118px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:7px 10px !important;
  border-radius:10px !important;
  color:rgba(255,255,255,.88) !important;
  background:rgba(7,16,31,.16) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  text-decoration:none !important;
}

/* Keep name/handle/status visually grouped */
body:has(#public-profile) .profile-cover-identity .public-handle,
body:has(#public-profile) .profile-cover-identity .profile-status-text{
  margin-left:0 !important;
}


/* =========================================================
   USER PAGE — REAL AVATAR ALIGNMENT
   The identity must align to the REAL avatar X position,
   not to the outer cover container.
   ========================================================= */

/* The glass panel is narrower/centred inside the cover column.
   On desktop the avatar starts ~160px to the right of the
   cover container edge. Align name/handle/status to that line. */
body:has(#public-profile) .profile-cover-identity{
  left:160px !important;
}

/* Back navigation stays independent, at the outer profile edge. */
body:has(#public-profile) .back-users{
  left:0 !important;
  top:118px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:rgba(255,255,255,.82) !important;
}

/* At narrower layouts the profile panel fills the container,
   so return identity to the panel padding/avatar line. */
@media(max-width:1100px){
  body:has(#public-profile) .profile-cover-identity{
    left:24px !important;
  }
}


/* Back users link click fix */
body:has(#public-profile) .back-users{
  position:absolute !important;
  z-index:999 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}
body:has(#public-profile) .profile-hero-cover::before,
body:has(#public-profile) .profile-hero-cover::after{
  pointer-events:none !important;
}


/* =========================================================
   ACCOUNT > PROFILO — LAYOUT + AVATAR FIX
   Does not affect public user.html.
   ========================================================= */

#profile .account-profile-editor{
  overflow:visible!important;
}

/* Cover preview */
#profile .account-public-cover.profile-hero-cover{
  position:relative!important;
  height:430px!important;
  min-height:430px!important;
  max-height:430px!important;
  overflow:hidden!important;
  border-radius:24px 24px 0 0!important;
}
#profile .account-public-cover.profile-hero-cover>.profile-cover-media{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 25%!important;
  z-index:0!important;
}
#profile .account-public-cover.profile-hero-cover::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:auto!important;
  height:auto!important;
  transform:none!important;
  background:linear-gradient(
    180deg,
    rgba(5,10,20,.04) 0%,
    rgba(5,10,20,.08) 48%,
    rgba(5,10,20,.54) 78%,
    rgba(7,16,31,.86) 100%
  )!important;
  pointer-events:none!important;
}

/* Name/handle/status stay fully inside the cover */
#profile .account-cover-identity{
  position:absolute!important;
  left:28px!important;
  bottom:88px!important;
  z-index:4!important;
  max-width:calc(100% - 56px)!important;
  padding:0!important;
}
#profile .account-cover-identity h1{
  margin:0!important;
  font-size:clamp(2.5rem,4vw,4.2rem)!important;
  line-height:.95!important;
}
#profile .account-cover-identity .public-handle{
  margin:9px 0 3px!important;
}
#profile .account-cover-identity .profile-status-text{
  margin:4px 0 0!important;
}

/* Glass panel overlaps cover cleanly */
#profile .account-public-shell.profile-shell-glass{
  position:relative!important;
  z-index:5!important;
  margin-top:-58px!important;
  padding:0 20px 28px!important;
}
#profile .profile-glass-strip{
  min-height:140px!important;
  padding:18px 20px!important;
  border-radius:22px!important;
}

/* Real avatar image fills the avatar frame */
#profile .account-public-avatar.profile-avatar-photo{
  position:relative!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
}
#profile .account-public-avatar.profile-avatar-photo>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block;
  z-index:2!important;
}
#profile .account-public-avatar.profile-avatar-photo>img[hidden]{
  display:none!important;
}
#profile .account-public-avatar [data-avatar-fallback]{
  position:relative;
  z-index:1;
}

/* Tabs/content alignment */
#profile .account-profile-tabs.detailed-tabs{
  margin:22px 0 24px!important;
}
#profile .account-profile-tab{
  min-width:0!important;
}
#profile .account-profile-tab.active{
  display:block!important;
}

/* Prevent the profile right-side cards from squeezing text */
#profile .profile-detail-layout,
#profile .account-profile-overview{
  min-width:0!important;
}
#profile .profile-detail-side .card,
#profile .account-profile-side .card{
  min-width:0!important;
  overflow:hidden!important;
}
#profile .profile-info-row strong,
#profile .profile-info-row span{
  overflow-wrap:anywhere!important;
}

/* Mobile */
@media(max-width:760px){
  #profile .account-public-cover.profile-hero-cover{
    height:350px!important;
    min-height:350px!important;
    max-height:350px!important;
  }
  #profile .account-cover-identity{
    left:18px!important;
    right:18px!important;
    bottom:70px!important;
  }
  #profile .account-public-shell.profile-shell-glass{
    margin-top:-42px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}




/* =========================================================
   ACCOUNT LAYOUT — PRECISE, NON-STRETCHING
   ========================================================= */
body[data-account-page="true"] .account-shell{
  align-items:start !important;
}
body[data-account-page="true"] .account-sidebar{
  align-self:start !important;
  height:fit-content !important;
  min-height:0 !important;
  max-height:none !important;
}
body[data-account-page="true"] .account-sidebar .side-links{
  display:flex !important;
  flex-direction:column !important;
}
body[data-account-page="true"] .account-sidebar .side-links .danger{
  margin-top:28px !important;
}
body[data-account-page="true"] .account-main{
  min-width:0 !important;
}

/* Profile header panel: all content stays inside, aligned and readable */
body[data-account-page="true"] #profile .account-profile-editor,
body[data-account-page="true"] #profile .account-public-cover,
body[data-account-page="true"] #profile .account-public-shell,
body[data-account-page="true"] #profile .account-profile-tabs,
body[data-account-page="true"] #profile .account-profile-tab{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}
body[data-account-page="true"] #profile .profile-glass-strip{
  display:grid !important;
  grid-template-columns:minmax(190px,.9fr) minmax(440px,2.2fr) 138px !important;
  align-items:center !important;
  gap:14px !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  padding:16px 18px !important;
}
body[data-account-page="true"] #profile .profile-glass-user{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:74px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:center !important;
}
body[data-account-page="true"] #profile .profile-glass-user .account-public-avatar{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  border-radius:20px !important;
}
body[data-account-page="true"] #profile .profile-glass-user .public-badges{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
  min-width:0 !important;
}
body[data-account-page="true"] #profile .profile-glass-user .badge{
  max-width:100% !important;
  white-space:nowrap !important;
  padding:6px 9px !important;
  font-size:.62rem !important;
}

body[data-account-page="true"] #profile .profile-glass-stats{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  min-width:0 !important;
  width:100% !important;
}
body[data-account-page="true"] #profile .profile-glass-stats>div{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:64px !important;
  padding:7px 12px !important;
  box-sizing:border-box !important;
}
body[data-account-page="true"] #profile .profile-glass-stats span{
  display:block !important;
  margin:0 0 6px !important;
  font-size:.58rem !important;
  line-height:1.2 !important;
  letter-spacing:.055em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
body[data-account-page="true"] #profile .profile-glass-stats strong{
  display:block !important;
  font-size:.85rem !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
body[data-account-page="true"] #profile .profile-glass-action{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  float:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width:138px !important;
  max-width:138px !important;
  min-width:0 !important;
  margin:0 !important;
}
body[data-account-page="true"] #profile .profile-glass-action .btn{
  width:100% !important;
  max-width:138px !important;
  min-width:0 !important;
  padding:0 9px !important;
  font-size:.70rem !important;
  white-space:nowrap !important;
}

/* Lower cards stay aligned with the main column */
body[data-account-page="true"] #profile .profile-detail-layout{
  grid-template-columns:minmax(0,1.55fr) minmax(245px,.72fr) !important;
  gap:18px !important;
  width:100% !important;
}
body[data-account-page="true"] #profile .profile-detail-side{
  min-width:0 !important;
}
body[data-account-page="true"] #profile .profile-detail-side .card{
  min-width:0 !important;
  overflow:hidden !important;
}
body[data-account-page="true"] #profile .profile-social-links{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  min-width:0 !important;
}
body[data-account-page="true"] #profile .profile-social-links span,
body[data-account-page="true"] #profile .profile-social-links a{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* =========================================================
   DIRECT MESSAGES
   ========================================================= */
.dm-layout{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:18px;
  min-height:560px;
}
.dm-sidebar,
.dm-thread{
  min-width:0;
}
.dm-sidebar{
  display:flex;
  flex-direction:column;
  padding:0 !important;
  overflow:hidden;
}
.dm-sidebar-head{
  padding:18px 18px 12px;
  border-bottom:1px solid var(--line);
}
.dm-sidebar-head h2{margin:7px 0 0}
.dm-thread-list{
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:580px;
  overflow:auto;
}
.dm-thread-item{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:14px 16px;
  text-align:left;
  cursor:pointer;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
}
.dm-thread-item:hover,.dm-thread-item.active{background:rgba(56,139,253,.09)}
.dm-thread-avatar{
  width:42px;height:42px;border-radius:14px;overflow:hidden;
  display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg,#438dff,#8b64ff);
}
.dm-thread-avatar img{width:100%;height:100%;object-fit:cover}
.dm-thread-copy{min-width:0}
.dm-thread-copy strong,.dm-thread-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-thread-copy span{font-size:.78rem;color:var(--muted);margin-top:4px}
.dm-unread{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;font-size:.68rem;font-weight:900;
  background:var(--cyan);color:#06111d;
}
.dm-thread{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:0 !important;
  overflow:hidden;
}
.dm-thread-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.dm-recipient{display:flex;align-items:center;gap:11px;min-width:0}
.dm-recipient-copy{min-width:0}
.dm-recipient-copy strong,.dm-recipient-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-recipient-copy span{font-size:.78rem;color:var(--cyan);margin-top:3px}
.dm-messages{
  min-height:0;
  height:440px;
  overflow:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dm-empty{
  margin:auto;text-align:center;color:var(--muted);max-width:340px;
}
.dm-bubble{
  max-width:min(72%,560px);
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:16px 16px 16px 5px;
  background:rgba(255,255,255,.035);
}
.dm-bubble.mine{
  margin-left:auto;
  border-radius:16px 16px 5px 16px;
  background:linear-gradient(135deg,rgba(47,156,255,.20),rgba(139,100,255,.16));
}
.dm-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.dm-bubble small{display:block;margin-top:6px;color:var(--muted);font-size:.68rem}
.dm-composer{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  padding:14px 16px;border-top:1px solid var(--line);
}
.dm-composer textarea{
  min-height:46px;max-height:130px;resize:vertical;
  border:1px solid var(--line);border-radius:13px;
  background:rgba(255,255,255,.035);color:var(--text);
  padding:11px 12px;font:inherit;
}
.dm-composer button{min-width:108px}
.dm-start-card{padding:26px;text-align:center}
.dm-message-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  text-decoration:none;
}

/* =========================================================
   PROFILE ROLES & TAGS
   ========================================================= */
.profile-role-stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.profile-role,.profile-achievement{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;padding:6px 10px;
  font-size:.66rem;font-weight:900;letter-spacing:.055em;text-transform:uppercase;
  white-space:nowrap;
}
.profile-role{
  color:#79efff;border:1px solid rgba(94,231,255,.34);
  background:rgba(15,88,116,.20)
}
.profile-role.role-premium,.profile-role.role-pro{
  color:#dcc8ff;border-color:rgba(172,126,255,.42);
  background:rgba(111,67,181,.20)
}
.profile-role.role-admin,.profile-role.role-owner{
  color:#ffd889;border-color:rgba(255,195,91,.42);
  background:rgba(133,86,17,.20)
}
.profile-achievement{
  color:#b8c8e8;border:1px solid rgba(184,204,238,.18);
  background:rgba(130,151,191,.09)
}
.user-card .profile-role-stack{margin-top:8px;gap:5px}
.user-card .profile-role,.user-card .profile-achievement{padding:4px 7px;font-size:.57rem}

/* Account badge preview */
#profile-account-roles{margin-top:8px}

@media(max-width:900px){
  body[data-account-page="true"] #profile .profile-glass-strip{
    grid-template-columns:1fr !important;
    overflow:visible !important;
  }
  body[data-account-page="true"] #profile .profile-glass-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body[data-account-page="true"] #profile .profile-glass-action{
    width:100% !important;max-width:none !important;justify-content:flex-start !important;
  }
  .dm-layout{grid-template-columns:1fr}
  .dm-thread-list{max-height:270px}
}


/* =========================================================
   GLOBAL DM BUTTON + POPUP
   ========================================================= */
.dm-nav-btn{
  position:relative;
  height:42px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  margin-left:8px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(12,20,37,.74);
  color:var(--text);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:.18s ease;
}
.dm-nav-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(91,220,255,.32);
  background:rgba(18,31,52,.90);
}
.dm-nav-icon{font-size:1rem;line-height:1}
.dm-nav-label{font-size:.78rem}
.dm-nav-badge{
  position:absolute;
  right:-6px;
  top:-7px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#5ce9ff;
  color:#06111d;
  border:2px solid #081121;
  font-size:.66rem;
  font-weight:950;
}
body.dm-popup-open{overflow:hidden}
.dm-popup-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,7,16,.56);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity .18s ease;
}
.dm-popup-overlay[hidden]{display:none!important}
.dm-popup-overlay.open{opacity:1}
.dm-popup{
  width:min(1080px,calc(100vw - 48px));
  height:min(720px,calc(100vh - 48px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(176,205,245,.18);
  border-radius:26px;
  background:
    radial-gradient(circle at 8% 0%,rgba(34,105,158,.15),transparent 35%),
    radial-gradient(circle at 100% 10%,rgba(100,65,165,.13),transparent 36%),
    rgba(7,15,29,.96);
  box-shadow:0 36px 100px rgba(0,0,0,.52);
  transform:translateY(12px) scale(.985);
  transition:transform .18s ease;
}
.dm-popup-overlay.open .dm-popup{transform:none}
.dm-popup-topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px 14px 22px;
  border-bottom:1px solid var(--line);
  background:rgba(11,20,37,.64);
}
.dm-popup-topbar>div{display:flex;align-items:center;gap:12px}
.dm-popup-topbar strong{font-size:1.15rem}
.dm-popup-close{
  width:38px;height:38px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-size:1.5rem;line-height:1;
  cursor:pointer;
}
.dm-popup-body{
  min-height:0;
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
}
.dm-popup-inbox{
  min-width:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border-right:1px solid var(--line);
  background:rgba(8,16,31,.50);
}
.dm-popup-inbox-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:58px;padding:0 16px;border-bottom:1px solid var(--line);
}
.dm-popup-inbox-head span{color:var(--muted);font-size:.72rem}
.dm-popup-thread-list{min-height:0;overflow:auto}
.dm-popup-thread{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:13px 14px;
  cursor:pointer;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  text-align:left;
}
.dm-popup-thread:hover,.dm-popup-thread.active{background:rgba(54,145,255,.095)}
.dm-popup-chat{
  min-width:0;min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.dm-popup-chat-head{
  min-height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 16px;border-bottom:1px solid var(--line);
}
.dm-popup-messages{
  min-height:0;
  overflow:auto;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dm-popup-empty{
  margin:auto;
  max-width:360px;
  text-align:center;
  color:var(--muted);
  display:grid;
  gap:7px;
}
.dm-popup-empty strong{color:var(--text);font-size:1.05rem}
.dm-popup-empty.error strong{color:#ff929e}
.dm-popup-bubble{
  max-width:min(72%,570px);
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:17px 17px 17px 5px;
  background:rgba(255,255,255,.045);
}
.dm-popup-bubble.mine{
  align-self:flex-end;
  border-radius:17px 17px 5px 17px;
  border-color:rgba(73,187,255,.24);
  background:linear-gradient(135deg,rgba(48,146,255,.22),rgba(129,87,245,.17));
}
.dm-popup-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}
.dm-popup-bubble small{display:block;margin-top:6px;color:var(--muted);font-size:.67rem}
.dm-popup-composer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:13px 15px;
  border-top:1px solid var(--line);
  background:rgba(7,15,29,.72);
}
.dm-popup-composer textarea{
  min-height:44px;max-height:120px;resize:none;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font:inherit;
  outline:none;
}
.dm-popup-composer textarea:focus{border-color:rgba(91,220,255,.38)}
.dm-popup-composer .btn{min-width:100px}
.dm-popup .dm-thread-avatar{
  width:44px;height:44px;border-radius:14px;
  overflow:hidden;display:grid;place-items:center;
  font-weight:900;background:linear-gradient(135deg,#438dff,#8b64ff);
}
.dm-popup .dm-thread-avatar img{width:100%;height:100%;object-fit:cover}
.dm-popup .dm-thread-copy{min-width:0}
.dm-popup .dm-thread-copy strong,.dm-popup .dm-thread-copy span{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.dm-popup .dm-thread-copy span{margin-top:4px;color:var(--muted);font-size:.75rem}
.dm-popup .dm-unread{
  min-width:21px;height:21px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;background:#5ce9ff;color:#07111e;
  font-size:.64rem;font-weight:950
}

@media(max-width:760px){
  .dm-nav-label{display:none}
  .dm-nav-btn{width:42px;padding:0;justify-content:center}
  .dm-popup-overlay{padding:0}
  .dm-popup{
    width:100vw;height:100dvh;border-radius:0;border-left:0;border-right:0;
  }
  .dm-popup-body{grid-template-columns:118px minmax(0,1fr)}
  .dm-popup-inbox-head{padding:0 10px}
  .dm-popup-inbox-head strong{font-size:.72rem}
  .dm-popup-thread{grid-template-columns:38px minmax(0,1fr);padding:10px 8px}
  .dm-popup-thread .dm-thread-copy span,.dm-popup-thread .dm-unread{display:none}
  .dm-popup .dm-thread-avatar{width:38px;height:38px}
  .dm-popup-messages{padding:14px}
  .dm-popup-bubble{max-width:88%}
}


/* DM realtime status: transient only, never replaces chat content */
.dm-popup-chat{position:relative}
.dm-popup-status{
  position:absolute;
  left:50%;
  bottom:82px;
  z-index:5;
  transform:translate(-50%,8px);
  max-width:min(520px,80%);
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(109,220,255,.22);
  background:rgba(8,18,34,.94);
  color:var(--muted);
  font-size:.72rem;
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.dm-popup-status.show{
  opacity:1;
  transform:translate(-50%,0);
}
.dm-popup-status.error{
  color:#ff9ca7;
  border-color:rgba(255,102,122,.25);
}

/* Make unread badge highly visible on navbar */
.dm-nav-badge{
  z-index:3 !important;
  min-width:20px !important;
  height:20px !important;
  display:grid !important;
  place-items:center !important;
}
.dm-nav-badge[hidden]{
  display:none !important;
}


/* DM notifications */
.dm-popup-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.dm-notify-toggle{
  height:38px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font:inherit;
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
}
.dm-notify-toggle:hover{color:var(--text)}
.dm-notify-toggle.active{
  color:#72efb6;
  border-color:rgba(81,230,164,.30);
  background:rgba(26,113,81,.16);
}


/* =========================================================
   SM917 ID — Login / Registration
   ========================================================= */
.auth-card-account{overflow:hidden}
.auth-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:5px;
  margin:18px 0 24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(5,12,24,.45);
}
.auth-switch-btn{
  min-height:42px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:850;
  cursor:pointer;
  transition:.18s ease;
}
.auth-switch-btn:hover{color:var(--text)}
.auth-switch-btn.active{
  color:var(--text);
  background:linear-gradient(135deg,rgba(42,137,236,.22),rgba(105,80,221,.19));
  box-shadow:inset 0 0 0 1px rgba(116,201,255,.15);
}
.auth-panel[hidden]{display:none!important}
.auth-panel h1{margin-bottom:8px}
.auth-form-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:13px 0 22px;
}
.auth-checkbox{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:.84rem;
}
.auth-register-remember{margin:4px 0 20px}
.auth-card .field small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:.72rem;
}
.auth-register-info{
  display:grid;
  gap:5px;
  margin-top:18px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(62,147,255,.045);
}
.auth-register-info strong{font-size:.82rem}
.auth-register-info span{color:var(--muted);font-size:.75rem;line-height:1.45}
@media(max-width:620px){
  .auth-form-row{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   STABLE DM COMPOSER FIX — no JS changes
   ========================================================= */
.dm-popup{
  max-height:calc(100dvh - 28px);
}
.dm-popup-body{
  min-height:0;
  overflow:hidden;
}
.dm-popup-chat{
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.dm-popup-messages{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.dm-popup-composer{
  flex-shrink:0;
  position:relative;
  z-index:5;
}


/* =========================================================
   DM composer stability — CSS only, no DM logic changes
   ========================================================= */
.dm-popup{
  height:min(720px,calc(100dvh - 28px)) !important;
  max-height:calc(100dvh - 28px) !important;
  overflow:hidden !important;
}
.dm-popup-body{
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
}
.dm-popup-inbox{
  min-height:0 !important;
  overflow:hidden !important;
}
.dm-popup-thread-list{
  min-height:0 !important;
  height:100% !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
}
.dm-popup-chat{
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
}
.dm-popup-messages{
  min-height:0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
}
.dm-popup-composer{
  position:relative !important;
  inset:auto !important;
  flex-shrink:0 !important;
  z-index:8 !important;
  background:rgba(7,15,29,.98) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* Existing role badge, only its color changes */
.user-role-badge.role-garage-member{
  color:#72e8ff !important;
  border-color:rgba(71,207,255,.32) !important;
  background:rgba(21,102,137,.16) !important;
}
.user-role-badge.role-collaborator{
  color:#c7b2ff !important;
  border-color:rgba(166,126,255,.38) !important;
  background:rgba(92,57,166,.18) !important;
}
.user-role-badge.role-admin{
  color:#ffd477 !important;
  border-color:rgba(255,190,70,.42) !important;
  background:rgba(132,86,17,.20) !important;
}


/* =========================================================
   GLOBAL HEADER / NAV STABILITY FIX
   Same geometry on every page; no layout-shifting animations.
   ========================================================= */
.header{
  position:relative;
  z-index:100;
}
.header > .container{
  width:min(1180px,calc(100% - 32px));
  max-width:1180px;
  margin-inline:auto;
}
.nav{
  width:100%;
  min-height:64px;
  height:64px;
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) 260px;
  align-items:center;
  gap:18px;
  padding:0 14px !important;
  box-sizing:border-box;
  transform:none !important;
  animation:none !important;
}
.brand{
  min-width:0;
  width:220px;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  transform:none !important;
}
.brand-mark{
  flex:0 0 auto;
}
.nav-links{
  min-width:0;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:4px !important;
  white-space:nowrap;
  transform:none !important;
  animation:none !important;
}
.nav-links > a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:40px;
  padding:0 11px !important;
  margin:0 !important;
  border:1px solid transparent !important;
  border-radius:10px;
  box-sizing:border-box;
  font-weight:inherit !important;
  transform:none !important;
  animation:none !important;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease !important;
}
.nav-links > a:hover{
  transform:none !important;
}
.nav-links > a.active{
  font-weight:inherit !important;
  transform:none !important;
  border-color:rgba(94,204,255,.12) !important;
  background:rgba(75,139,255,.09);
}
.nav-actions{
  width:260px;
  min-width:260px;
  display:flex !important;
  justify-content:flex-end;
  align-items:center;
  gap:8px !important;
  white-space:nowrap;
  transform:none !important;
  animation:none !important;
}
.nav-actions > *{
  flex:0 0 auto;
  transform:none !important;
}
.account-nav-btn{
  min-width:116px;
  justify-content:center;
}
/* Prevent auth hydration from visibly collapsing the right side. */
.nav-actions [data-account-link]{
  min-height:40px;
}
.dm-nav-trigger{
  min-height:40px;
}
/* Disable entrance/translate animations specifically inside the global header. */
.header *,
.header *::before,
.header *::after{
  animation-name:none !important;
}
/* The mobile menu still opens/closes, but without sliding the desktop header around. */
@media (min-width:901px){
  .menu-btn{display:none !important;}
  .nav-links{
    opacity:1 !important;
    visibility:visible !important;
    max-height:none !important;
    position:static !important;
  }
}
@media (max-width:1100px) and (min-width:901px){
  .nav{
    grid-template-columns:190px minmax(0,1fr) 220px;
    gap:10px;
  }
  .brand{width:190px;}
  .nav-actions{width:220px;min-width:220px;}
  .nav-links > a{padding-inline:7px !important;font-size:.84rem;}
}
@media (max-width:900px){
  .header > .container{width:min(100% - 20px,1180px);}
  .nav{
    height:auto;
    min-height:60px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    padding:7px 10px !important;
  }
  .brand{width:auto;}
  .nav-actions{width:auto;min-width:0;}
  .menu-btn{display:inline-flex !important;}
  .nav-links{
    grid-column:1/-1;
    width:100%;
    justify-content:flex-start;
  }
}


/* =========================================================
   AUTH NAV STABILITY
   Logged-in and logged-out header occupy identical geometry.
   ========================================================= */
.nav{
  grid-template-columns:220px minmax(0,1fr) 320px !important;
}
.nav-actions{
  width:320px !important;
  min-width:320px !important;
  display:grid !important;
  grid-template-columns:126px 112px 40px;
  justify-content:end !important;
  align-items:center;
  gap:8px !important;
}
.nav-actions [data-account-link],
.nav-actions .account-nav-btn{
  width:126px !important;
  min-width:126px !important;
  max-width:126px !important;
  height:40px !important;
  padding-inline:8px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  white-space:nowrap;
}
.nav-actions .dm-nav-btn{
  width:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  height:40px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  box-sizing:border-box;
}
.nav-actions .dm-nav-placeholder{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.nav-actions .theme-btn{
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:40px !important;
}
.account-dot{
  flex:0 0 auto;
}
html:not([data-auth-ready="true"]) .nav-actions [data-account-link]{
  visibility:hidden;
}
@media (max-width:1100px) and (min-width:901px){
  .nav{
    grid-template-columns:190px minmax(0,1fr) 286px !important;
  }
  .nav-actions{
    width:286px !important;
    min-width:286px !important;
    grid-template-columns:118px 104px 40px;
  }
  .nav-actions [data-account-link],
  .nav-actions .account-nav-btn{
    width:118px !important;
    min-width:118px !important;
    max-width:118px !important;
    font-size:.78rem;
  }
  .nav-actions .dm-nav-btn{
    width:104px !important;
    min-width:104px !important;
    max-width:104px !important;
    font-size:.78rem;
  }
}
@media (max-width:900px){
  .nav{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .nav-actions{
    width:auto !important;
    min-width:0 !important;
    display:flex !important;
  }
  .nav-actions .dm-nav-placeholder{
    display:none !important;
  }
}


/* =========================================================
   TRUE PERSISTENT MENU
   Header exists with final geometry from first paint.
   ========================================================= */
@view-transition{
  navigation:auto;
}

/* Header is captured independently and remains visually fixed. */
.header{
  view-transition-name:sm917-global-header !important;
}
::view-transition-old(sm917-global-header),
::view-transition-new(sm917-global-header){
  animation:none !important;
  mix-blend-mode:normal !important;
}

/* Do not fade/slide the whole old/new document. */
::view-transition-old(root),
::view-transition-new(root){
  animation:none !important;
  mix-blend-mode:normal !important;
}

/* All desktop nav slots exist before Firebase/DM JS runs. */
.nav-actions{
  grid-template-columns:126px 112px 40px !important;
}
.nav-actions .dm-nav-btn{
  grid-column:2;
}
.nav-actions .theme-btn{
  grid-column:3;
}
.nav-actions .menu-btn{
  grid-column:4;
}
.nav-actions .dm-nav-placeholder{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Correct account label shape from the first frame.
   site-auth will replace the actual text immediately after auth restoration. */
html[data-auth-hint="in"] .nav-actions [data-account-link]{
  width:126px !important;
}

/* No header animation whatsoever. */
.header,
.header *,
.header *::before,
.header *::after{
  transition:none !important;
  animation:none !important;
}

/* Keep final geometry during auth hydration instead of hiding the account button. */
html:not([data-auth-ready="true"]) .nav-actions [data-account-link]{
  visibility:visible !important;
  opacity:1 !important;
}

@media(max-width:900px){
  .header{view-transition-name:none !important;}
}


/* =========================================================
   STATIC AUTH HEADER STATE
   Account + Messages are permanently present in DOM.
   ========================================================= */
.nav{
  grid-template-columns:220px minmax(0,1fr) 320px !important;
}
.nav-actions{
  width:320px !important;
  min-width:320px !important;
  display:grid !important;
  grid-template-columns:126px 112px 40px;
  gap:8px !important;
  justify-content:end !important;
  align-items:center !important;
}
.nav-actions [data-account-link]{
  width:126px !important;
  min-width:126px !important;
  max-width:126px !important;
  height:40px !important;
  padding:0 8px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.account-label{
  grid-area:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  transition:none !important;
  animation:none !important;
}
html[data-auth-state="out"] .account-label-login{visibility:visible!important;opacity:1!important}
html[data-auth-state="out"] .account-label-garage{visibility:hidden!important;opacity:0!important}
html[data-auth-state="in"] .account-label-login{visibility:hidden!important;opacity:0!important}
html[data-auth-state="in"] .account-label-garage{visibility:visible!important;opacity:1!important}

.nav-actions .dm-nav-btn{
  width:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  height:40px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:none !important;
  animation:none !important;
}
.nav-actions .dm-nav-disabled{
  opacity:.38 !important;
  cursor:default !important;
}
.nav-actions .theme-btn{
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:40px !important;
}

/* Nothing in the header may disappear/reappear during auth hydration. */
.header,
.header *,
.header *::before,
.header *::after{
  transition:none !important;
  animation:none !important;
}
html:not([data-auth-ready="true"]) .nav-actions [data-account-link],
html:not([data-auth-ready="true"]) .nav-actions .dm-nav-btn{
  visibility:visible !important;
}

/* Desktop menu geometry remains constant on every page. */
@media (min-width:901px){
  .menu-btn{display:none!important}
}
@media (max-width:1100px) and (min-width:901px){
  .nav{grid-template-columns:190px minmax(0,1fr) 286px !important}
  .nav-actions{
    width:286px !important;
    min-width:286px !important;
    grid-template-columns:118px 104px 40px;
  }
  .nav-actions [data-account-link]{
    width:118px !important;min-width:118px !important;max-width:118px !important;
    font-size:.78rem;
  }
  .nav-actions .dm-nav-btn{
    width:104px !important;min-width:104px !important;max-width:104px !important;
    font-size:.78rem;
  }
}
@media(max-width:900px){
  .nav{grid-template-columns:minmax(0,1fr) auto !important}
  .nav-actions{width:auto!important;min-width:0!important;display:flex!important}
}


/* =========================================================
   AUTH LAYOUT LOCK
   Two fixed header states. No reflow while changing page.
   ========================================================= */

.header{
  contain:layout paint;
}

/* Base desktop geometry */
.nav{
  grid-template-columns:220px minmax(0,1fr) 320px !important;
  align-items:center !important;
}

.nav-actions{
  position:relative !important;
  width:320px !important;
  min-width:320px !important;
  max-width:320px !important;
  height:40px !important;
  display:block !important;
}

/* Each control uses an absolute fixed slot.
   Nothing can push another control sideways. */
.nav-actions [data-account-link]{
  position:absolute !important;
  right:160px !important;
  top:0 !important;
  width:152px !important;
  min-width:152px !important;
  max-width:152px !important;
  height:40px !important;
  padding:0 8px !important;
  display:grid !important;
  place-items:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.nav-actions .dm-nav-btn{
  position:absolute !important;
  right:48px !important;
  top:0 !important;
  width:104px !important;
  min-width:104px !important;
  max-width:104px !important;
  height:40px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  box-sizing:border-box !important;
}

.nav-actions .theme-btn{
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:40px !important;
  margin:0 !important;
}

/* The mobile menu button must not create a desktop grid/width slot. */
@media(min-width:901px){
  .nav-actions .menu-btn{
    display:none !important;
    position:absolute !important;
    right:0 !important;
  }
}

/* Both labels already exist; only visibility changes.
   The ACCOUNT BUTTON itself never changes dimensions. */
.account-label{
  grid-area:1/1 !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  transition:none !important;
  animation:none !important;
}

html[data-auth-state="out"] .account-label-login{
  visibility:visible !important;
  opacity:1 !important;
}
html[data-auth-state="out"] .account-label-garage{
  visibility:hidden !important;
  opacity:0 !important;
}
html[data-auth-state="in"] .account-label-login{
  visibility:hidden !important;
  opacity:0 !important;
}
html[data-auth-state="in"] .account-label-garage{
  visibility:visible !important;
  opacity:1 !important;
}

/* LOGGED OUT:
   Keep the messages slot occupied but invisible.
   This means the menu has the SAME width before/after login. */
html[data-auth-state="out"] .nav-actions .dm-nav-btn{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* LOGGED IN:
   same physical slot, simply visible/enabled */
html[data-auth-state="in"] .nav-actions .dm-nav-btn{
  visibility:visible !important;
  opacity:1 !important;
}

/* JavaScript can disable it while auth is resolving without changing geometry */
.nav-actions .dm-nav-disabled{
  pointer-events:none !important;
}

/* Never animate/reflow the global header */
.header,
.header *,
.header *::before,
.header *::after{
  transition:none !important;
  animation:none !important;
  transform:none;
}

/* Prevent hydration selectors from hiding/recreating controls */
html:not([data-auth-ready="true"]) .nav-actions [data-account-link],
html:not([data-auth-ready="true"]) .nav-actions .dm-nav-btn{
  display:flex !important;
}

/* Tablet desktop-ish lock */
@media(max-width:1100px) and (min-width:901px){
  .nav{
    grid-template-columns:190px minmax(0,1fr) 294px !important;
  }
  .nav-actions{
    width:294px !important;
    min-width:294px !important;
    max-width:294px !important;
  }
  .nav-actions [data-account-link]{
    right:142px !important;
    width:144px !important;
    min-width:144px !important;
    max-width:144px !important;
    font-size:.78rem !important;
  }
  .nav-actions .dm-nav-btn{
    right:48px !important;
    width:86px !important;
    min-width:86px !important;
    max-width:86px !important;
    font-size:.76rem !important;
  }
}

/* Mobile returns to flexible controls */
@media(max-width:900px){
  .nav{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .nav-actions{
    position:static !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    display:flex !important;
  }
  .nav-actions [data-account-link],
  .nav-actions .dm-nav-btn,
  .nav-actions .theme-btn,
  .nav-actions .menu-btn{
    position:static !important;
  }
}


/* =========================================================
   SERVICES / TEAM / HELP REWORK
   ========================================================= */
.services-rework .page-hero,.team-rework .page-hero,.help-rework .page-hero{padding-bottom:38px}
.services-hero .lead,.team-hero .lead,.help-ai-hero .lead{max-width:760px}
.services-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.access-rework-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.access-rework-card{
  position:relative;padding:27px;border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:0 18px 48px rgba(0,0,0,.14)
}
.access-rework-card.featured{border-color:rgba(94,231,255,.28);background:linear-gradient(145deg,rgba(39,126,188,.15),rgba(86,53,143,.11))}
.access-rework-card h3{font-size:1.5rem;margin:14px 0 8px}
.access-rework-card p{color:var(--muted)}
.access-rework-card ul{padding:0;margin:22px 0;display:grid;gap:10px;list-style:none}
.access-rework-card li{position:relative;padding-left:22px;color:var(--muted);font-size:.9rem}
.access-rework-card li:before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:900}
.access-level{font-size:.7rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)}
.services-roadmap-section{padding-top:14px}
.services-roadmap{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:center;padding:30px;border:1px solid var(--line);border-radius:26px;background:var(--panel)}
.services-roadmap h2{margin:9px 0 0}
.services-roadmap p{margin:0;color:var(--muted);font-size:1rem}

.team-role-section{margin-bottom:50px}
.team-role-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}
.team-role-heading h2{margin:8px 0 0;font-size:2rem}
.team-count{min-width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:rgba(94,231,255,.08);border:1px solid rgba(94,231,255,.18);color:var(--cyan);font-weight:900}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.team-member-card{display:block;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--panel);transition:.18s ease}
.team-member-card:hover{transform:translateY(-3px);border-color:rgba(94,231,255,.28)}
.team-member-cover{height:120px;position:relative;background:linear-gradient(135deg,#173353,#2f2148);overflow:hidden}
.team-member-cover img{width:100%;height:100%;object-fit:cover}
.team-member-cover span{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(6,12,23,.7))}
.team-member-content{position:relative;padding:0 20px 20px}
.team-member-avatar{width:72px;height:72px;margin-top:-36px;position:relative;z-index:1;border:4px solid #09111f;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet));font-size:1.4rem;font-weight:900;overflow:hidden}
.team-member-avatar img{width:100%;height:100%;object-fit:cover}
.team-member-title{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-top:13px}
.team-member-title strong,.team-member-title small{display:block}
.team-member-title small{color:var(--muted);margin-top:2px}
.team-member-title em{font-style:normal;font-size:.63rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:5px 8px;border-radius:999px}
.role-admin .team-member-title em{color:#ffd477;background:rgba(132,86,17,.20);border:1px solid rgba(255,190,70,.35)}
.role-collaborator .team-member-title em{color:#c7b2ff;background:rgba(92,57,166,.18);border:1px solid rgba(166,126,255,.32)}
.team-member-card p{min-height:66px;color:var(--muted);font-size:.88rem;line-height:1.55}
.team-profile-link{font-size:.78rem;color:var(--cyan);font-weight:850}

.help-ai-section{padding-top:12px}
.help-ai-shell{max-width:920px;margin:0 auto;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:rgba(7,15,29,.72);box-shadow:0 28px 80px rgba(0,0,0,.2)}
.help-ai-head{height:72px;padding:0 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
.help-ai-orb{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet));font-weight:900}
.help-ai-head strong,.help-ai-head span{display:block}
.help-ai-head span{font-size:.7rem;color:var(--muted);margin-top:2px}
.help-ai-head em{margin-left:auto;font-style:normal;font-size:.62rem;font-weight:900;color:#69e7a3}
.help-ai-conversation{height:390px;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.help-ai-message{display:flex;gap:10px;max-width:78%}
.help-ai-message>span{width:30px;height:30px;flex:0 0 30px;border-radius:10px;display:grid;place-items:center;background:rgba(47,156,255,.15);color:var(--cyan);font-weight:900}
.help-ai-message>div{padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}
.help-ai-message strong{display:block;margin-bottom:5px}
.help-ai-message p{margin:0;color:var(--muted)}
.help-ai-message.user{margin-left:auto;justify-content:flex-end}
.help-ai-message.user>div{background:rgba(47,156,255,.13);border-color:rgba(94,231,255,.2)}
.help-ai-message.user p{color:var(--text)}
.help-ai-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px;border-top:1px solid var(--line)}
.help-ai-composer textarea{resize:none;min-height:58px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);color:var(--text);outline:none}
.help-ai-composer textarea:focus{border-color:rgba(94,231,255,.38)}
.help-ai-suggestions{display:flex;gap:7px;flex-wrap:wrap;padding:0 14px 15px}
.help-ai-suggestions button{border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.03);color:var(--muted);font-size:.72rem;cursor:pointer}
.help-ai-suggestions button:hover{color:var(--text);border-color:rgba(94,231,255,.2)}
.help-ai-note{max-width:920px;margin:14px auto 0;padding:14px 17px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}
.help-ai-note strong{font-size:.8rem}
.help-ai-note p{margin:4px 0 0;color:var(--muted);font-size:.76rem}
.team-description-field{padding:14px;border:1px solid rgba(166,126,255,.18);border-radius:15px;background:rgba(92,57,166,.06)}

@media(max-width:900px){
  .access-rework-grid,.team-grid{grid-template-columns:1fr 1fr}
  .services-roadmap{grid-template-columns:1fr}
}
@media(max-width:620px){
  .access-rework-grid,.team-grid{grid-template-columns:1fr}
  .help-ai-conversation{height:360px}
  .help-ai-message{max-width:92%}
  .help-ai-composer{grid-template-columns:1fr}
}

/* === SERVICES V3 === */
.insider-page{overflow:hidden}.insider-hero{padding:92px 0 64px}.insider-hero-grid{display:grid;grid-template-columns:1fr .95fr;gap:70px;align-items:center}.insider-hero h1{font-size:clamp(3.6rem,7vw,6.5rem);line-height:.92;letter-spacing:-.065em;margin:18px 0}.insider-hero p{max-width:650px;color:var(--muted);font-size:1.08rem}.insider-actions{display:flex;gap:10px;margin-top:26px}.insider-console{border:1px solid rgba(94,231,255,.2);border-radius:24px;padding:0 18px 18px;background:linear-gradient(150deg,rgba(10,23,42,.95),rgba(20,13,35,.94));box-shadow:0 32px 90px rgba(0,0,0,.35)}.insider-console-top{height:52px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line);margin-bottom:10px}.insider-console-top>span{width:8px;height:8px;border-radius:50%;background:#344257}.insider-console-top>span:first-child{background:#ff687d}.insider-console-top>span:nth-child(2){background:#ffc95a}.insider-console-top>span:nth-child(3){background:#54dda1}.insider-console-top b{margin-left:auto;font-size:.6rem;letter-spacing:.12em;color:var(--muted)}.insider-feed-row{display:grid;grid-template-columns:48px 1fr auto;gap:13px;align-items:center;padding:15px 5px;border-bottom:1px solid rgba(255,255,255,.065)}.insider-feed-row em{font-style:normal;font-size:.58rem;font-weight:950;color:var(--cyan)}.insider-feed-row strong,.insider-feed-row small{display:block}.insider-feed-row small{color:var(--muted);font-size:.72rem;margin-top:2px}.insider-feed-row time{font-size:.58rem;font-weight:900;color:#71e8af}.insider-feed-status{padding:16px 4px 0;font-size:.7rem;color:var(--muted)}.insider-feed-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#54dda1;box-shadow:0 0 12px #54dda1;margin-right:7px}.insider-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.insider-feature{position:relative;min-height:280px;padding:28px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025)}.insider-feature.main{background:linear-gradient(145deg,rgba(34,126,193,.13),rgba(101,59,170,.08));border-color:rgba(94,231,255,.22)}.feature-no{position:absolute;right:22px;top:18px;font-size:2.8rem;font-weight:950;color:rgba(255,255,255,.045)}.feature-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(47,156,255,.12);border:1px solid rgba(94,231,255,.16);color:var(--cyan);font-size:1.3rem}.insider-feature h3{font-size:1.45rem;margin:18px 0 8px}.insider-feature p{color:var(--muted);max-width:520px}.feature-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}.feature-tags span{font-size:.65rem;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--muted)}.insider-not-card{display:grid;grid-template-columns:.8fr 1fr 1.1fr;gap:30px;align-items:center;padding:30px;border:1px solid rgba(255,104,125,.15);border-radius:24px;background:rgba(255,104,125,.025)}.insider-not-card h2{margin:8px 0}.not-list{display:grid;gap:8px;color:#ff9aaa;font-size:.82rem}.insider-not-card>p{color:var(--muted);margin:0}
/* === TEAM V3 === */
.team-v3-hero{padding:86px 0 48px}.team-v3-hero h1{font-size:clamp(3.4rem,7vw,6rem);line-height:.94;letter-spacing:-.06em;margin:17px 0}.team-v3-hero p{max-width:740px;color:var(--muted)}.team-v3-legend{display:flex;gap:15px;margin-top:24px;font-size:.75rem;font-weight:850}.team-v3-legend .admin{color:#ffd477}.team-v3-legend .collab{color:#c7b2ff}.team-v3-content{padding-top:8px}.team-v3-section{margin-bottom:60px}.team-v3-section>header{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}.team-v3-section>header>div{display:flex;align-items:center;gap:14px}.team-v3-section header small{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.58rem}.team-v3-section h2{margin:2px 0 0;font-size:2rem}.team-v3-number{font-size:2.4rem;font-weight:950;color:rgba(255,255,255,.10)}.team-v3-section header>b{min-width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line)}.team-v3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.team-v3-card{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025);transition:.18s}.team-v3-card:hover{transform:translateY(-4px);border-color:rgba(94,231,255,.25);box-shadow:0 22px 60px rgba(0,0,0,.22)}.team-v3-cover{position:relative;height:150px;background:linear-gradient(135deg,#16304e,#2b2043);overflow:hidden}.team-v3-cover img{width:100%;height:100%;object-fit:cover}.team-v3-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(5,11,22,.78))}.team-v3-role{position:absolute;right:14px;top:14px;padding:5px 8px;border-radius:999px;font-size:.58rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.role-admin .team-v3-role{color:#ffd477;background:rgba(70,45,9,.72);border:1px solid rgba(255,190,70,.3)}.role-collaborator .team-v3-role{color:#d4c5ff;background:rgba(54,32,100,.72);border:1px solid rgba(166,126,255,.28)}.team-v3-card-body{position:relative;padding:0 20px 20px}.team-v3-avatar{width:76px;height:76px;margin-top:-38px;position:relative;border-radius:21px;border:4px solid #08101d;background:linear-gradient(135deg,var(--blue),var(--violet));display:grid;place-items:center;overflow:hidden;font-size:1.4rem;font-weight:950}.team-v3-avatar img{width:100%;height:100%;object-fit:cover}.team-v3-name{margin-top:12px}.team-v3-name strong,.team-v3-name span{display:block}.team-v3-name strong{font-size:1.08rem}.team-v3-name span{color:var(--muted);font-size:.75rem}.team-v3-card p{min-height:68px;color:var(--muted);font-size:.85rem;line-height:1.55}.team-v3-open{display:flex;justify-content:space-between;color:var(--cyan);font-size:.75rem;font-weight:850;padding-top:12px;border-top:1px solid var(--line)}.team-v3-loading,.team-v3-empty{padding:40px;text-align:center;border:1px dashed var(--line);border-radius:20px;color:var(--muted)}.team-spinner{display:inline-block;width:16px;height:16px;margin-right:9px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}
@media(max-width:900px){.insider-hero-grid,.insider-not-card{grid-template-columns:1fr}.team-v3-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.insider-feature-grid,.team-v3-grid{grid-template-columns:1fr}.insider-hero h1,.team-v3-hero h1{font-size:3.4rem}}


/* =========================================================
   ONE SOURCE HEADER — final geometry lock
   ========================================================= */
.header > .container{
  width:min(1180px,calc(100% - 32px)) !important;
  max-width:1180px !important;
  margin-inline:auto !important;
}
.header .nav{
  box-sizing:border-box !important;
  width:100% !important;
  height:64px !important;
  min-height:64px !important;
  padding:0 14px !important;
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) 320px !important;
  gap:18px !important;
  align-items:center !important;
}
.header .brand{
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
}
.header .nav-links{
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:repeat(8,max-content) !important;
  justify-content:center !important;
  align-items:center !important;
  gap:4px !important;
}
.header .nav-links > a{
  height:40px !important;
  padding:0 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  font-weight:inherit !important;
}
.header .nav-actions{
  position:relative !important;
  display:block !important;
  width:320px !important;
  min-width:320px !important;
  max-width:320px !important;
  height:40px !important;
}
.header .nav-actions [data-account-link]{
  position:absolute !important;
  top:0 !important;
  right:160px !important;
  width:152px !important;
  min-width:152px !important;
  max-width:152px !important;
  height:40px !important;
}
.header .nav-actions .dm-nav-btn{
  position:absolute !important;
  top:0 !important;
  right:48px !important;
  width:104px !important;
  min-width:104px !important;
  max-width:104px !important;
  height:40px !important;
}
.header .nav-actions .theme-btn{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:40px !important;
}
@media(min-width:901px){
  .header .menu-btn{display:none !important}
}
.header,
.header *,
.header *::before,
.header *::after{
  transition:none !important;
  animation:none !important;
}
@media(max-width:1100px) and (min-width:901px){
  .header .nav{
    grid-template-columns:190px minmax(0,1fr) 294px !important;
    gap:10px !important;
  }
  .header .brand{
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
  }
  .header .nav-links > a{
    padding-inline:7px !important;
    font-size:.82rem !important;
  }
  .header .nav-actions{
    width:294px !important;
    min-width:294px !important;
    max-width:294px !important;
  }
  .header .nav-actions [data-account-link]{
    right:142px !important;
    width:144px !important;
    min-width:144px !important;
    max-width:144px !important;
  }
  .header .nav-actions .dm-nav-btn{
    right:48px !important;
    width:86px !important;
    min-width:86px !important;
    max-width:86px !important;
  }
}
@media(max-width:900px){
  .header .nav{
    height:auto !important;
    min-height:60px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .header .brand{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
  .header .nav-actions{
    position:static !important;
    display:flex !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
  .header .nav-actions [data-account-link],
  .header .nav-actions .dm-nav-btn,
  .header .nav-actions .theme-btn{
    position:static !important;
  }
}


/* =========================================================
   FINAL ACCOUNT LABEL + CLEAN NAVIGATION
   One physical label; no Accedi/Garage DOM swap.
   ========================================================= */
.account-state-label{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  transition:none !important;
  animation:none !important;
}
.account-state-label::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  content:"Accedi";
}
html[data-auth-state="in"] .account-state-label::before{
  content:"●  Il mio Garage";
  color:inherit;
}
html[data-auth-state="out"] .account-state-label::before{
  content:"Accedi";
}
/* Remove any legacy label from the rendering path if cached HTML somehow contains it. */
.account-label-login,.account-label-garage{display:none !important;}


/* Account avatar + Firebase role sync fixes only */
#account-primary-role.role-garage-member{
  color:#72e8ff !important;
  border-color:rgba(71,207,255,.32) !important;
  background:rgba(21,102,137,.16) !important;
}
#account-primary-role.role-collaborator{
  color:#c7b2ff !important;
  border-color:rgba(166,126,255,.38) !important;
  background:rgba(92,57,166,.18) !important;
}
#account-primary-role.role-admin{
  color:#ffd477 !important;
  border-color:rgba(255,190,70,.42) !important;
  background:rgba(132,86,17,.20) !important;
}
.account-public-avatar.profile-avatar-photo{
  position:relative;
  overflow:hidden;
}
.account-public-avatar.profile-avatar-photo > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:2;
}
.account-public-avatar.profile-avatar-photo > [data-avatar-fallback]{
  position:relative;
  z-index:1;
}


/* Team description: visible ONLY to Collaborator/Admin */
#team-description-field[hidden],
.team-description-field[hidden]{
  display:none !important;
}
#team-description-field.team-description-locked{
  display:none !important;
}
#team-description:disabled{
  pointer-events:none;
  opacity:.55;
}


/* =========================================================
   DYNAMIC CONTENT LAYOUT STABILITY
   Reserve final geometry before Firebase/data arrives.
   ========================================================= */

/* Generic skeleton */
.skeleton{
  display:block;
  border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.075),rgba(255,255,255,.035));
  background-size:220% 100%;
  animation:sm917-skeleton 1.35s ease-in-out infinite;
}
@keyframes sm917-skeleton{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

/* TEAM: loading state occupies roughly same geometry as loaded staff section. */
.team-layout-reserve{
  min-height:380px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  text-align:left !important;
}
.team-skeleton-heading{
  display:flex;
  align-items:center;
  gap:14px;
  height:78px;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.team-skeleton-heading>div{display:grid;gap:7px}
.sk-num{width:34px;height:38px;opacity:.5}
.sk-kicker{width:78px;height:8px}
.sk-title{width:180px;height:25px}
.team-skeleton-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.team-skeleton-card{
  position:relative;
  height:220px;
  padding:0 18px 18px;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.sk-cover{
  height:105px;
  margin:0 -18px 0;
  border-radius:0;
}
.sk-avatar{
  width:58px;
  height:58px;
  margin-top:-28px;
  border-radius:17px;
  border:4px solid #08101d;
}
.sk-line{height:10px;margin-top:10px}
.sk-line.lg{width:58%}
.sk-line.md{width:42%}
.sk-line.sm{width:78%}

/* Never collapse the team content area while data swaps in. */
.team-v3-content > .container{
  min-height:380px;
}
.team-v3-section[hidden],
#team-empty[hidden],
#team-loading[hidden]{
  display:none !important;
}

/* USERS: keep result zone stable while profiles arrive. */
.users-layout-reserve,
#users-grid{
  min-height:360px;
  align-content:start;
}

/* PUBLIC PROFILE: hero/data areas keep their footprint while Firebase resolves. */
.public-profile-page .public-user-shell,
.public-profile-page .public-profile-shell,
.public-profile-page main{
  min-height:620px;
}
.public-profile-page .profile-hero,
.public-profile-page .public-profile-hero{
  min-height:330px;
}
.public-profile-page .profile-content,
.public-profile-page .public-profile-content{
  min-height:260px;
}

/* MOD pages: prevent content lists/detail sections from collapsing on first paint. */
.dynamic-content-page main{
  min-height:620px;
}
.new_arrivals-page .grid,
.featured-page .grid,
.categories-page .grid,
#mods-grid,
#featured-grid,
#categories-grid{
  min-height:380px;
  align-content:start;
}
.mod-page .mod-detail,
.mod-page .mod-shell,
#mod-detail{
  min-height:520px;
}

/* Images shouldn't change card size once loaded */
.team-v3-cover,
.team-member-cover,
.user-card-cover,
.project-cover,
.mod-cover-link{
  overflow:hidden;
}
.team-v3-cover img,
.team-member-cover img,
.user-card-cover img,
.project-cover img,
.mod-cover-link img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* No transform/fade entrance for dynamically inserted cards.
   Hover effects remain. */
.team-v3-grid > *,
#users-grid > *,
#mods-grid > *,
#featured-grid > *,
#categories-grid > *{
  animation:none !important;
}
.team-v3-grid > *:not(:hover),
#users-grid > *:not(:hover),
#mods-grid > *:not(:hover),
#featured-grid > *:not(:hover),
#categories-grid > *:not(:hover){
  transform:none !important;
}

/* Keep scroll anchoring from moving viewport when content is inserted. */
.team-v3-content,
.users-layout-reserve,
.public-profile-page main,
.dynamic-content-page main{
  overflow-anchor:none;
}

@media(max-width:900px){
  .team-skeleton-grid{grid-template-columns:1fr 1fr}
  .team-layout-reserve,.team-v3-content>.container{min-height:600px}
}
@media(max-width:620px){
  .team-skeleton-grid{grid-template-columns:1fr}
  .team-layout-reserve,.team-v3-content>.container{min-height:760px}
}


/* =========================================================
   MOBILE MENU — FINAL OVERRIDE
   Uses the EXISTING site.js behavior: .nav-links.open
   Desktop is untouched.
   ========================================================= */
@media (max-width:900px){
  .header{
    position:relative !important;
    z-index:3000 !important;
  }

  .header .nav{
    position:relative !important;
    overflow:visible !important;
  }

  .header .menu-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    position:relative !important;
    z-index:3002 !important;
  }

  /* Hidden until the EXISTING JS toggles .open */
  .header .nav-links{
    display:none !important;
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:0 !important;
    z-index:3001 !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;

    padding:9px !important;
    margin:0 !important;

    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:4px !important;

    border:1px solid var(--line) !important;
    border-radius:16px !important;
    background:rgba(8,16,30,.985) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.45) !important;
    backdrop-filter:blur(18px) !important;

    overflow:visible !important;
    white-space:normal !important;
  }

  .header .nav-links.open{
    display:flex !important;
  }

  .header .nav-links > a{
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    box-sizing:border-box !important;

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

    padding:0 13px !important;
    margin:0 !important;
    border-radius:11px !important;
    white-space:nowrap !important;
  }

  /* The old mobile rule hid .btn, which also hid Account/Garage.
     Keep the account control visible on phone. */
  .header .nav-actions [data-account-link],
  .header .nav-actions .account-nav-btn{
    display:grid !important;
  }
}

/* =========================================================
   USERS CARDS — restore avatar overlap
   The layout-stability rule accidentally clipped the avatar.
   ========================================================= */
.user-card-cover{
  overflow:visible !important;
}

.user-card-cover-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.user-card-cover-overlay{
  position:absolute !important;
  inset:0 !important;
}

.user-card-avatar{
  z-index:5 !important;
  overflow:hidden !important;
}

.user-card-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}


/* =========================================================
   MOBILE MENU — FIX PAINT CONTAINMENT CLIPPING
   Old desktop rule `.header { contain: layout paint; }`
   clipped the dropdown outside the header box.
   ========================================================= */
@media (max-width:900px){
  .header{
    contain:none !important;
    overflow:visible !important;
  }

  .header > .container{
    contain:none !important;
    overflow:visible !important;
  }

  .header .nav{
    contain:none !important;
    overflow:visible !important;
  }

  .header .nav-actions{
    overflow:visible !important;
  }

  .header .nav-links{
    contain:none !important;
    overflow:visible !important;
    max-height:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /* Still hidden until site.js adds .open */
  .header .nav-links:not(.open){
    display:none !important;
  }

  .header .nav-links.open{
    display:flex !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}




/* =========================================================
   MOBILE HEADER — CORRECTED
   Keep nav-actions visible only as a container so hamburger survives.
   Hide account/messages/theme in top bar; clones live in dropdown.
   ========================================================= */
@media (max-width:900px){
  .header{
    contain:none !important;
    overflow:visible !important;
  }
  .header > .container,
  .header .nav{
    contain:none !important;
    overflow:visible !important;
  }

  .header .nav{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
  }

  .header .brand{
    min-width:0 !important;
    width:auto !important;
  }

  /* Keep the action wrapper because hamburger is physically inside it */
  .header .nav-actions{
    display:flex !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
  }

  /* Hide the desktop actions in the top bar */
  .header .nav-actions > [data-account-link],
  .header .nav-actions > .dm-nav-btn,
  .header .nav-actions > .theme-btn{
    display:none !important;
  }

  /* Hamburger remains visible */
  .header .nav-actions > .menu-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:40px !important;
    margin:0 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    position:relative !important;
    z-index:3003 !important;
  }

  /* Existing nav menu */
  .header .nav-links{
    display:none !important;
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:0 !important;
    z-index:3001 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
    padding:9px !important;
    margin:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:4px !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
    background:rgba(8,16,30,.985) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.45) !important;
    backdrop-filter:blur(18px) !important;
    overflow:visible !important;
  }

  .header .nav-links.open{
    display:flex !important;
  }

  .header .nav-links > a{
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:0 13px !important;
    margin:0 !important;
    border-radius:11px !important;
  }

  /* Container appended by JS inside the dropdown */
  .header .mobile-menu-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr 44px !important;
    gap:8px !important;
    width:100% !important;
    margin-top:7px !important;
    padding-top:9px !important;
    border-top:1px solid var(--line) !important;
  }

  .header .mobile-menu-actions [data-mobile-account]{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    display:grid !important;
    place-items:center !important;
  }

  .header .mobile-menu-actions .mobile-dm{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
  }

  .header .mobile-menu-actions .mobile-theme{
    width:44px !important;
    min-width:44px !important;
    height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}


/* =========================================================
   FINAL DESKTOP/MOBILE ACTION SEPARATION
   Mobile clones must NEVER appear on desktop.
   ========================================================= */

/* Default / desktop: hide cloned mobile controls completely */
.header .mobile-menu-actions{
  display:none !important;
}

/* Mobile only: reveal them inside the opened dropdown */
@media (max-width:900px){
  .header .nav-links.open .mobile-menu-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr 44px !important;
    gap:8px !important;
    width:100% !important;
    margin-top:7px !important;
    padding-top:9px !important;
    border-top:1px solid var(--line) !important;
  }
}


/* =========================================================
   ACCOUNT LIBRARY — MOD TITLE FIX
   Keep names readable and consistent across cards.
   ========================================================= */

.library-card h3,
.account-library-card h3,
.mod-library-card h3,
[data-library-card] h3,
.library-grid .project-card h3,
#library .project-card h3{
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;

  line-height:1.12 !important;
  min-height:2.24em !important;
  max-height:2.24em !important;
  margin:0 !important;
}

/* Prevent very narrow inner wrappers from forcing one word per line */
.library-card .project-cover > div,
.account-library-card .project-cover > div,
.mod-library-card .project-cover > div,
[data-library-card] .project-cover > div,
.library-grid .project-cover > div,
#library .project-cover > div{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}

/* Slightly more horizontal breathing room for titles */
.library-card .project-cover,
.account-library-card .project-cover,
.mod-library-card .project-cover,
[data-library-card] .project-cover,
.library-grid .project-cover,
#library .project-cover{
  padding-left:16px !important;
  padding-right:16px !important;
  box-sizing:border-box !important;
}


/* =========================================================
   ACCOUNT LIBRARY — READABILITY PASS
   More breathing room between title, badge and card content.
   ========================================================= */
.library-card h3,
.account-library-card h3,
.mod-library-card h3,
[data-library-card] h3,
.library-grid .project-card h3,
#library .project-card h3{
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  line-height:1.18 !important;
  letter-spacing:0 !important;
  margin:0 0 14px 0 !important;
  min-height:2.36em !important;
  max-height:none !important;
  overflow:visible !important;
  display:block !important;
}

/* Separate the "NEL GARAGE" label from the title */
.library-card .project-cover .badge,
.account-library-card .project-cover .badge,
.mod-library-card .project-cover .badge,
[data-library-card] .project-cover .badge,
.library-grid .project-cover .badge,
#library .project-cover .badge{
  position:static !important;
  display:inline-flex !important;
  width:max-content !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Give the cover/header area enough room so text never collides */
.library-card .project-cover,
.account-library-card .project-cover,
.mod-library-card .project-cover,
[data-library-card] .project-cover,
.library-grid .project-cover,
#library .project-cover{
  min-height:210px !important;
  height:210px !important;
  padding:24px 18px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  box-sizing:border-box !important;
}

/* If title + badge are wrapped, preserve vertical spacing */
.library-card .project-cover > div,
.account-library-card .project-cover > div,
.mod-library-card .project-cover > div,
[data-library-card] .project-cover > div,
.library-grid .project-cover > div,
#library .project-cover > div{
  width:100% !important;
  min-width:0 !important;
}

/* Body content spacing */
.library-card .project-body,
.account-library-card .project-body,
.mod-library-card .project-body,
[data-library-card] .project-body,
.library-grid .project-body,
#library .project-body{
  padding-top:18px !important;
}


/* DIRECT presence */
.dm-recipient-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.dm-presence{
  margin-top:3px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.72rem;
  font-weight:700;
  color:var(--muted);
}
.dm-presence i,
.dm-presence-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  flex:0 0 7px;
  background:#64748b;
}
.dm-presence.online{color:#49e6a5}
.dm-presence.online i,
.dm-presence-dot.online{
  background:#49e6a5;
  box-shadow:0 0 0 3px rgba(73,230,165,.11),0 0 10px rgba(73,230,165,.45);
}
.dm-thread-name-row{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.dm-thread-name-row strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* SM917 Help — generative assistant */
.help-ai-generated{
  line-height:1.62;
  color:var(--text);
}
.help-ai-generated h4{
  margin:4px 0 8px;
  font-size:.95rem;
}
.help-ai-line{
  margin:5px 0;
}
.help-ai-typing{
  opacity:.72;
}
.help-ai-composer button:disabled{
  opacity:.55;
  cursor:wait;
}


/* =========================================================
   SM917 THEME CONSISTENCY FIX
   Dark + Light contrast fixes only. No layout overrides.
   ========================================================= */

/* Complete the shared palette used by later components. */
:root{
  --surface:rgba(18,25,45,.78);
  --surface-2:#11182b;
  --border:var(--line);
  --card:rgba(18,25,45,.82);
  color-scheme:dark;
}

body.light{
  --bg:#edf3ff;
  --bg2:#f7f9ff;
  --panel:rgba(255,255,255,.90);
  --panel2:#ffffff;
  --surface:#ffffff;
  --surface-2:#f5f7fc;
  --card:#ffffff;
  --border:rgba(28,43,76,.14);
  --text:#111827;
  --muted:#66718b;
  --line:rgba(28,43,76,.14);
  --blue:#2477e8;
  --cyan:#157fa6;
  --violet:#6a54d7;
  --green:#168b5c;
  --shadow:0 22px 62px rgba(52,68,108,.14);
  color-scheme:light;
}

/* ---------- Buttons: readable in both themes ---------- */
button,
.btn,
.icon-btn,
.menu-btn,
.filter,
.text-btn,
.side-links button,
.public-tabs button,
.account-profile-tabs button{
  color:var(--text);
}

.btn{
  background:var(--panel);
  border-color:var(--line);
  color:var(--text);
}

.btn.primary,
.filter.active{
  color:#fff !important;
}

.btn.primary{
  background:linear-gradient(135deg,var(--blue),var(--violet));
}

.btn:disabled,
.btn[disabled],
button:disabled{
  cursor:not-allowed;
  opacity:.58;
}

body:not(.light) .btn:disabled,
body:not(.light) .btn[disabled],
body:not(.light) button:disabled{
  color:rgba(245,248,255,.62);
}

body.light .btn:disabled,
body.light .btn[disabled],
body.light button:disabled{
  color:rgba(17,24,39,.48);
}

/* Header actions were inheriting the browser's black button color. */
.nav-actions .btn,
.nav-actions .account-nav-btn,
.nav-actions .dm-nav-btn,
.nav-actions .theme-btn,
.public-profile-actions .btn,
.account-profile-actions .btn,
.profile-glass-action .btn{
  color:var(--text) !important;
}

.nav-actions .btn.primary,
.public-profile-actions .btn.primary,
.account-profile-actions .btn.primary,
.profile-glass-action .btn.primary{
  color:#fff !important;
}

/* ---------- Dark theme surfaces ---------- */
body:not(.light) .btn:not(.primary),
body:not(.light) .icon-btn,
body:not(.light) .menu-btn{
  background:rgba(18,25,45,.82);
  border-color:rgba(255,255,255,.10);
}

body:not(.light) .btn:not(.primary):hover,
body:not(.light) .icon-btn:hover,
body:not(.light) .menu-btn:hover{
  background:rgba(31,42,70,.94);
  border-color:rgba(94,231,255,.22);
}

/* ---------- Light theme: global surfaces ---------- */
body.light{
  background:
    radial-gradient(circle at 12% 0%,rgba(36,119,232,.10),transparent 31%),
    radial-gradient(circle at 88% 8%,rgba(106,84,215,.09),transparent 27%),
    linear-gradient(145deg,var(--bg),var(--bg2));
}

body.light .nav{
  background:rgba(255,255,255,.90);
  border-color:var(--line);
  box-shadow:0 12px 34px rgba(52,68,108,.10);
}

body.light .nav-links a:hover,
body.light .nav-links a.active{
  color:var(--text);
  background:rgba(36,119,232,.09);
}

body.light .card,
body.light .stat-card,
body.light .account-sidebar,
body.light .account-profile-editor,
body.light .user-card,
body.light .giveaway-card,
body.light .giveaway-admin-card,
body.light .users-count,
body.light .auth-layout,
body.light .toast{
  background:#fff;
  border-color:var(--line);
  box-shadow:0 16px 45px rgba(52,68,108,.10);
}

/* Forms */
body.light .field input,
body.light .field select,
body.light textarea,
body.light .handle-input,
body.light .giveaway-form-grid input,
body.light .giveaway-form-grid textarea{
  background:#fff;
  color:var(--text);
  border-color:rgba(28,43,76,.16);
}

body.light .field input::placeholder,
body.light textarea::placeholder,
body.light input::placeholder{
  color:#8791a8;
}

body.light .field input:focus,
body.light .field select:focus,
body.light textarea:focus{
  border-color:rgba(36,119,232,.55);
  box-shadow:0 0 0 4px rgba(36,119,232,.09);
}

/* Light theme buttons */
body.light .btn:not(.primary),
body.light .icon-btn,
body.light .menu-btn{
  background:#fff;
  color:var(--text) !important;
  border-color:rgba(28,43,76,.15);
  box-shadow:0 5px 16px rgba(52,68,108,.06);
}

body.light .btn:not(.primary):hover,
body.light .icon-btn:hover,
body.light .menu-btn:hover{
  background:#f3f7ff;
  border-color:rgba(36,119,232,.28);
}

body.light .nav-actions .dm-nav-btn,
body.light .nav-actions .account-nav-btn{
  background:#fff;
  color:var(--text) !important;
}

body.light .nav-actions .dm-nav-btn:hover,
body.light .nav-actions .account-nav-btn:hover{
  background:#f3f7ff;
}

/* Sidebar */
body.light .side-links button{
  color:var(--muted);
}

body.light .side-links button:hover,
body.light .side-links button.active{
  color:var(--text);
  background:rgba(36,119,232,.11);
}

body.light .side-links button.danger{
  color:#d94255;
}

/* Small rows / chips / secondary surfaces */
body.light .metric,
body.light .flow-row,
body.light .tag,
body.light .public-mod-row,
body.light .user-badge,
body.light .profile-toggle,
body.light .giveaway-meta>div,
body.light .giveaway-manual-delivery-note{
  background:#f6f8fd;
  border-color:rgba(28,43,76,.11);
}

body.light .item-action{
  background:rgba(36,119,232,.10);
  color:#1763bd;
}

/* User/community cards */
body.light .user-card{
  color:var(--text);
}

body.light .user-card:hover{
  border-color:rgba(36,119,232,.26);
  box-shadow:0 22px 56px rgba(52,68,108,.15);
}

body.light .user-card-handle,
body.light .public-handle,
body.light .text-btn,
body.light .license-key{
  color:var(--cyan);
}

body.light .user-badge{
  color:#30415f;
}

/* Public/account profile glass area.
   Keep cover artwork photographic/dark, but make UI below it truly light. */
body.light .profile-glass-strip{
  background:rgba(255,255,255,.90);
  border-color:rgba(28,43,76,.14);
  box-shadow:
    0 22px 58px rgba(52,68,108,.15),
    inset 0 1px 0 rgba(255,255,255,.85);
}

body.light .profile-glass-stats>div{
  border-left-color:rgba(28,43,76,.11);
}

body.light .profile-glass-action .btn{
  background:#f7f9fe;
  color:var(--text) !important;
  border-color:rgba(28,43,76,.14);
}

body.light .profile-glass-action .btn:hover{
  background:#eef4ff;
  border-color:rgba(36,119,232,.26);
}

body.light .profile-shell-glass > .public-tabs.detailed-tabs,
body.light .profile-shell-glass > .account-profile-tabs.detailed-tabs{
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(28,43,76,.11);
}

body.light .public-tabs button,
body.light .account-profile-tabs button{
  color:var(--muted);
}

body.light .public-tabs button.active,
body.light .account-profile-tabs button.active{
  color:var(--text);
}

/* Profile editor save bar was always dark. */
body.light .profile-save-bar{
  background:rgba(255,255,255,.94);
  border-color:rgba(28,43,76,.14);
  box-shadow:0 12px 34px rgba(52,68,108,.12);
}

/* Account dashboard */
body.light .sync-pill{
  background:rgba(22,139,92,.08);
  border-color:rgba(22,139,92,.22);
  color:#147a52;
}

body.light .item-row,
body.light .list-head,
body.light .profile-mini{
  border-color:rgba(28,43,76,.11);
}

/* Security/action buttons in account area */
body.light .account-main .btn:not(.primary){
  background:#f8faff;
  color:var(--text) !important;
  border-color:rgba(28,43,76,.14);
}

/* Giveaway */
body.light .giveaway-hero-grid,
body.light .giveaway-admin-card,
body.light .giveaway-card{
  background:#fff;
  border-color:rgba(28,43,76,.13);
}

body.light .giveaway-media{
  background:linear-gradient(145deg,rgba(36,119,232,.08),rgba(106,84,215,.05));
}

body.light .giveaway-state{
  background:rgba(255,255,255,.88);
  color:#1c2941;
  border-color:rgba(28,43,76,.13);
}

body.light .giveaway-winner{
  background:rgba(184,126,0,.07);
  border-color:rgba(184,126,0,.20);
}

/* Mod/profile cards and general borders */
body.light .public-mod-row:hover,
body.light .card:hover{
  border-color:rgba(36,119,232,.25);
}

/* Improve light-theme badge contrast */
body.light .eyebrow,
body.light .badge{
  color:#126d91;
  background:rgba(36,119,232,.07);
  border-color:rgba(21,127,166,.20);
}

body.light .status-good{
  color:#137c53 !important;
}

/* Dropdown mobile menu */
@media(max-width:900px){
  body.light .nav-links{
    background:#fff;
    border-color:rgba(28,43,76,.14);
    box-shadow:0 18px 44px rgba(52,68,108,.14);
  }
}


/* =========================================================
   MOD REVIEWS + DYNAMIC HOME FEATURE
   ========================================================= */

.home-featured-mod{
  position:relative;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.home-featured-mod::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(90deg,rgba(8,13,25,.94) 0%,rgba(8,13,25,.82) 47%,rgba(8,13,25,.26) 100%),
    var(--home-featured-cover,none);
  background-size:cover;
  background-position:center;
  opacity:.88
}
.home-featured-mod::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 75% 28%,rgba(94,231,255,.17),transparent 29%)
}
.home-featured-mod:hover{
  transform:translateY(-2px);
  border-color:rgba(94,231,255,.26);
  box-shadow:0 18px 36px rgba(0,0,0,.19)
}
.home-featured-machine img{
  width:76px;
  height:76px;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))
}
.home-featured-stars{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:11px;
  font-size:.78rem;
  color:var(--muted)
}
.home-featured-stars[hidden]{display:none}
.home-star-row{
  color:#ffcf4d;
  letter-spacing:.08em;
  font-size:1rem
}
.home-featured-metrics .metric:last-child{
  cursor:pointer
}

.quality-filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px
}
.quality-filters>span{
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  margin-right:2px
}
.quality-filter{
  appearance:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font:inherit;
  font-size:.78rem;
  cursor:pointer
}
.quality-filter:hover,.quality-filter.active{
  color:var(--text);
  border-color:rgba(94,231,255,.28);
  background:rgba(94,231,255,.08)
}
.mod-card-rating{
  display:flex;
  align-items:center;
  gap:8px;
  margin:13px 0 3px;
  color:var(--muted);
  font-size:.78rem
}
.mod-rating-stars{
  color:#ffcf4d;
  letter-spacing:.08em;
  font-size:.95rem;
  white-space:nowrap
}

.mod-reviews-section{padding-top:0}
.mod-review-card{overflow:hidden}
.mod-review-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px
}
.mod-review-head h2{margin-top:7px}
.mod-review-summary{
  min-width:150px;
  display:grid;
  justify-items:end;
  gap:3px
}
.mod-review-summary strong{
  font-size:1.4rem
}
#mod-rating-stars{
  color:#ffcf4d;
  letter-spacing:.09em;
  font-size:1.12rem
}
.mod-review-summary small{color:var(--muted)}
.mod-review-copy{
  max-width:720px;
  color:var(--muted);
  line-height:1.6
}
.mod-rating-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:18px 0 10px
}
.mod-rating-actions button{
  min-width:72px;
  height:44px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  color:#aab3c8;
  font:inherit;
  font-size:1.08rem;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.16s ease
}
.mod-rating-actions button:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(255,207,77,.42);
  color:#ffcf4d
}
.mod-rating-actions button.active{
  background:rgba(255,207,77,.10);
  border-color:rgba(255,207,77,.43);
  color:#ffcf4d
}
.mod-rating-actions button:disabled{cursor:not-allowed;opacity:.52}
.mod-rating-message{
  min-height:22px;
  color:var(--muted);
  font-size:.84rem
}
.mod-rating-message a{color:var(--cyan)}

body.light .quality-filter,
body.light .mod-rating-actions button{
  background:#fff;
  border-color:rgba(28,43,76,.14)
}
body.light .quality-filter.active{
  background:rgba(36,119,232,.08);
  border-color:rgba(36,119,232,.24)
}
body.light .home-featured-mod::before{
  background-image:
    linear-gradient(90deg,rgba(17,24,39,.91) 0%,rgba(17,24,39,.77) 47%,rgba(17,24,39,.20) 100%),
    var(--home-featured-cover,none)
}
body.light .home-featured-mod{
  color:#fff
}
body.light .home-featured-mod small,
body.light .home-featured-stars{
  color:rgba(240,246,255,.74)
}

@media(max-width:760px){
  .mod-review-head{display:grid}
  .mod-review-summary{justify-items:start}
  .quality-filters{width:100%}
}