@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-regular.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/open-sans-regular.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/open-sans-bold.ttf') format('truetype')}
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;font-display:block;src:url('../fonts/material-icons.ttf') format('truetype')}

:root{--bg:#0c0b0b;--cod-gray:#141312;--mine-shaft:#1f1f1f;--quote:#1b1b1b;--pearl:#e4dad1;--silk:#bab1a8;--red:#cd412b;--warning:#c72a2a;--blue:#2f86c7;--green:#4c8f2e;--display:'Bebas Neue',sans-serif;--body:'Open Sans',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:none;background:var(--bg)}
html::-webkit-scrollbar{display:none}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--pearl);font-family:var(--body);font-size:16px;line-height:28px}
button,input{font:inherit}
button,a{transition:.2s ease}
button{color:inherit}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* header.header — donor index.php + Figma 132:1037 */
header.header{position:fixed;z-index:1000;top:0;left:0;right:0;height:64px;color:#fff;background:linear-gradient(to top,rgba(205,65,43,.2),#111);backdrop-filter:blur(5px);box-shadow:0 5px 10px rgba(0,0,0,.2)}
header.header .container{width:1300px;max-width:calc(100% - 32px);height:64px;margin:0 auto;display:flex;align-items:center}
header.header .header-brand{display:flex;align-items:center;min-width:100px;padding-right:52px}
header.header .header-brand img{width:48px;height:48px;transform:scale(1);transition:transform .2s ease}
header.header .header-brand:hover img{transform:scale(1.1)}
header.header .toggle-navigation{display:none;width:48px;height:48px;padding:0;border:0;background:var(--red);align-items:center;justify-content:center}
header.header .toggle-navigation .icon{display:flex;align-items:center;justify-content:center}
header.header .toggle-navigation i{font-family:'Material Icons';font-style:normal;font-size:24px}
header.header .header-navigation{min-width:0;min-height:64px;display:flex;flex:1;align-items:center;justify-content:flex-end;font-family:var(--display);font-size:20px;text-transform:lowercase}
header.header .header-navigation a{height:64px;padding:12px 24px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid transparent;color:var(--pearl);white-space:nowrap}
header.header .header-navigation a:hover{color:#fff;background:linear-gradient(to top,rgba(34,34,34,.6),rgba(34,34,34,0));border-bottom-color:#333}
header.header .header-navigation a.buy-button{height:48px;margin-left:16px;background:var(--red)}
header.header .header-navigation a.buy-button:hover{background:#b83a27;border-bottom-color:transparent}

main#top{padding-top:64px}
.button{height:50px;padding:8px 16px;border:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#fff;font-family:var(--display);font-size:20px;line-height:20px;text-align:center;text-transform:uppercase;cursor:pointer}
.button-red{background:var(--red)}
.button-red:hover{background:#b83a27}

/* div.blog-hero — Figma 132:807 */
.hero{position:relative;width:100%;height:840px;min-height:840px;padding:148px 0 64px;overflow:hidden;background:#111}
.hero-bg,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg{filter:blur(0)}
.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.04) 55%,rgba(0,0,0,.72))}
.hero-content{position:relative;z-index:1;width:1300px;max-width:calc(100% - 32px);height:628px;margin:0 auto;padding-top:78px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.hero-brand{width:800px;max-width:100%;height:437px;margin:0;flex:0 0 437px}
.hero-brand img{width:100%;height:100%;object-fit:contain;transform-origin:center;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.hero-brand:hover img{transform:scale(1.06)}
.hero-content>p{width:780px;max-width:100%;height:88px;margin:0;padding:0 8px 32px;color:var(--silk);font-size:16px;line-height:28px;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.tags{height:25px;display:flex;align-items:flex-start;justify-content:center;font-family:var(--display);font-size:16px;line-height:19px;letter-spacing:1px;text-transform:uppercase}
.tags span{height:21px;margin-right:8px;padding:2px 4px;background:rgba(0,0,0,.4);box-shadow:0 2px 0 rgba(0,0,0,.4)}
.tags .tag-red{background:var(--red)}

/* LATEST NEWS / CLAN FEATURE + LIKES — Figma 145:967 */
.latest-section{position:relative;width:100%;height:1281.45px;padding:64px 0;background:var(--bg)}
.feature-wrap{position:relative;width:1300px;max-width:calc(100% - 32px);height:1153.45px;margin:0 auto}
.feature-label{position:absolute;z-index:4;top:20px;left:20px;height:41px;padding:8px 16px;display:flex;align-items:center;background:var(--red);box-shadow:0 10px 10px rgba(0,0,0,.2);font-family:var(--display);font-size:20px;line-height:20px;text-transform:capitalize}
.feature-label .material-icons{margin-right:8px;padding-bottom:5px}
.edit-block{padding:0;overflow:hidden;background:transparent;box-shadow:0 5px 15px rgba(0,0,0,.3);border-radius:8px;border:solid 1px rgba(255,255,255,.2);transition:all .2s ease;transform:scale(1);cursor:pointer}
.edit-block:hover{background-color:#cd412b;outline:solid 2px rgba(205,65,43,0);animation:lightbox-hover 1s ease infinite forwards;box-shadow:0 5px 30px rgba(0,0,0,.6);transform:scale(1.02);z-index:5}
.edit-block img{display:block;width:100%;height:100%;border:0;object-fit:cover}
@keyframes lightbox-hover{0%{outline-offset:0;outline:solid 2px rgba(205,65,43,.5)}80%{outline-offset:4px;outline:solid 8px rgba(205,65,43,0)}}
.feature-media,.feature-media:hover{position:absolute;z-index:1;top:41px;left:0;width:1300px;max-width:100%;height:731.25px}
.featured-blog-body{position:absolute;z-index:3;top:697.25px;left:130px;width:1040px;height:434px;background:rgba(31,31,31,.98);backdrop-filter:blur(5px);box-shadow:0 10px 10px rgba(0,0,0,.2);text-align:center}
.featured-blog-body h2{position:absolute;top:64px;left:0;width:100%;height:77px;margin:0;color:var(--pearl);font-family:var(--display);font-size:64px;font-weight:400;line-height:77px;white-space:nowrap}
.feature-date{position:absolute;top:141px;left:64px;right:64px;height:57px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:16px;line-height:19px;letter-spacing:1px}
.feature-date::after{content:'';position:absolute;z-index:-1;top:25.5px;left:20%;right:20%;height:2px;background:linear-gradient(90deg,rgba(205,65,43,0),var(--red),rgba(205,65,43,0))}
.feature-date span{height:21px;margin-right:16px;padding:2px 4px;background:var(--red);box-shadow:0 2px 0 rgba(0,0,0,.4)}
.featured-blog-body>p{position:absolute;top:214px;left:154px;width:732px;height:84px;margin:0;color:var(--silk);font-size:16px;line-height:28px}
.featured-blog-body>.button{position:absolute;top:330px;left:50%;height:40px;transform:translateX(-50%)}
.likes{position:absolute;right:0;bottom:0;height:22.2px;display:flex;justify-content:flex-end}
.likes button{height:22.2px;margin-left:0;padding:2.6px 7.4px;border:1px solid rgba(228,218,209,.1);border-radius:2px;background:rgba(0,0,0,.2);display:flex;align-items:center;gap:8px;color:var(--pearl);font-family:var(--display);font-size:14.4px;line-height:14.4px;cursor:pointer}
.likes button:first-child{margin-right:8px}
.likes .material-icons{color:rgba(255,255,255,.3);font-size:14.4px}
.likes b{font-weight:400}
.likes button.active{background:var(--red)}

/* STEP-TO-STEP STORY — Figma 132:1052 */
.story{width:100%;padding:0;background:var(--bg)}
.story-step{position:relative;width:100%;height:620px;margin:0;background:var(--bg)}
.story-step::before{content:'';position:absolute;top:82px;left:calc(50% - 80.4109px);width:160.8218px;height:2px;background:linear-gradient(90deg,rgba(205,65,43,0),var(--red),rgba(205,65,43,0))}
.story-step>*{position:absolute}
.story-step .story-media{top:129.5px;left:calc(50% - 640px);width:680px;height:383px}
.story-step .step-copy{top:177.5px;left:calc(50% + 120px);width:520px}
.story-step:not(.reverse) .step-copy{left:calc(50% - 640px)}
.story-step:not(.reverse) .story-media{left:calc(50% - 40px)}
.story-step:nth-of-type(3) .story-media,.story-step:nth-of-type(3) .step-copy{top:116px}
.step-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;overflow:hidden}
.step-copy h3{width:520px;height:53px;margin:0;color:var(--red);font-family:var(--display);font-size:44px;font-weight:400;line-height:53px}
.step-copy p{width:520px;margin:0;color:var(--silk);font-size:18px;line-height:28px}
.step-copy .button{flex:0 0 50px}
#sign-in-step .step-copy{top:138.5px}
#sign-in-step .story-media{top:129.5px}
#play-together::before{top:52.55px}
#play-together .step-copy,#play-together .story-media{top:116px}
#clan-menu-step::before{top:0}
#clan-menu-step .step-copy,#clan-menu-step .story-media{top:116px}

/* IMAGE REVEAL / MASKED SCROLL WINDOW — Figma 133:900 */
.dark-bar-pattern{position:relative;width:100%;height:53px;flex:0 0 53px;background:#1b1b1b;overflow:hidden}
.dark-bar-pattern.mask-group{background:transparent}.dark-bar-pattern.mask-group::before{content:'';position:absolute;inset:0;background:#141312;-webkit-mask:url('../img/figma-dark-bar-mask.svg') center/100% 53px no-repeat;mask:url('../img/figma-dark-bar-mask.svg') center/100% 53px no-repeat}
.image-reveal{position:relative;width:100%;height:518px;overflow:hidden;isolation:isolate;clip-path:inset(0);background:#0c0b0b}
.image-reveal>.image{position:absolute;z-index:0;top:-148px;left:0;width:100%;height:1080px;border-radius:4px;background-color:#161311;background-image:url('../img/reveal.png');background-repeat:no-repeat;background-size:cover;background-position:50% 38%;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 2px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.1);transform:translateY(var(--reveal-shift,0px));will-change:transform}
.image-reveal>.dark-bar-pattern{position:absolute;z-index:3;left:0;right:0}.image-reveal>.dark-bar-pattern.mask-group{background:transparent;overflow:hidden}.image-reveal>.dark-bar-pattern.mask-group::before{background:#141312;-webkit-mask:url('../img/figma-dark-bar-exact.svg') center/100% 53px no-repeat;mask:url('../img/figma-dark-bar-exact.svg') center/100% 53px no-repeat}.image-reveal-top{top:0;transform:scaleY(-1)}.image-reveal-bottom{top:340px}
.reveal-dim{position:absolute;z-index:1;top:-15px;left:0;width:100%;height:430px;background:rgba(9,8,8,.18);pointer-events:none}
.reveal-caption{position:absolute;z-index:2;top:360px;right:0;bottom:0;left:0;background:#0c0b0b}
.image-reveal .warning-message{position:absolute;z-index:4;bottom:56px;left:50%;width:940px;max-width:calc(100% - 32px);height:31px;padding:4px 10px;background:rgba(199,42,42,.2);color:var(--warning);font-family:var(--display);font-size:16px;line-height:23px;letter-spacing:2px;text-align:center;white-space:nowrap;transform:translateX(-50%)}
.clan-menu-video{overflow:hidden}.clan-menu-video video{display:block;width:100%;height:100%;object-fit:cover}
.product-bar,.footer-bar{position:absolute;left:0;right:0;height:53px;background:var(--cod-gray);-webkit-mask:url('../img/figma-dark-bar-mask.svg') center/100% 53px no-repeat;mask:url('../img/figma-dark-bar-mask.svg') center/100% 53px no-repeat}

/* QUOTE / official rust.facepunch.com section.quote — Figma 145:906 */
.section.quote{position:relative;z-index:2;width:100%;min-height:325px;margin:0;padding:80px 310px;background:var(--quote);color:var(--pearl);overflow:visible}
.section.quote>.dark-bar-pattern{position:absolute;z-index:3;top:-20px;left:0;overflow:visible;background:transparent;-webkit-mask:none;mask:none}
.section.quote>.dark-bar-pattern::before{content:'';position:absolute;inset:0;background:var(--quote);-webkit-mask:url('../img/figma-dark-bar-exact.svg') center/100% 53px no-repeat;mask:url('../img/figma-dark-bar-exact.svg') center/100% 53px no-repeat}
.section.quote>.dark-bar-pattern.bottom{top:auto;bottom:-20px;transform:rotate(180deg)}
.section.quote>.container{position:relative;z-index:0;width:100%;max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.quote-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:910px;text-align:center}
.quote-text h1{margin:0;color:var(--pearl);font-family:var(--display);font-size:48px;font-weight:400;font-style:normal;line-height:44px}
.quote-text h1::after{content:'';display:block;width:546.5px;height:2px;margin:26px auto 20px;background:linear-gradient(90deg,rgba(205,65,43,0),var(--red),rgba(205,65,43,0))}
.quote-text .company{color:var(--pearl);font-family:var(--display);font-size:24px;line-height:29px;text-decoration:none}
.quote-text .company:hover{color:var(--red)}

/* Figma 222:7117 — CLAN SYSTEM / SINGLE IMAGE + DARK BARS */
.product-banner{position:relative;width:100%;height:680px;min-height:600px;overflow:hidden;background:#0c0b0b}
.product-stage{position:absolute;top:0;left:0;width:100%;height:100%;padding:160px 32px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-stage>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.product-tint{position:absolute;inset:0;background:rgba(205,65,43,.34);mix-blend-mode:multiply;transition:background-color .45s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.product-stage:hover .product-tint{background:rgba(205,65,43,.82)}
.product-stage>img{transition:filter .45s ease,transform .65s cubic-bezier(.16,1,.3,1)}
.product-stage:hover>img{filter:saturate(.72) contrast(1.04);transform:scale(1.025)}
.product-bar-top{top:0;transform:scaleY(-1)}.product-bar-bottom{bottom:0}
.product-bar{position:absolute;z-index:4;left:0;width:100%;height:53px;background:#141312;mask-image:url('../img/clan-system-dark-bar.svg');mask-repeat:repeat-x;mask-size:100% 53px}
.product-overlay{position:absolute;z-index:3;top:50%;left:50%;width:500px;max-width:500px;height:312px;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translate(-50%,-50%)}
.product-overlay h2{width:500px;height:160px;margin:0;padding:6px 40px 32px;color:#fff;font-family:var(--display);font-size:116px;font-weight:400;line-height:128px;white-space:nowrap;filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.2));transform:translateX(.06em)}
.product-subtitle{height:54px;margin:0 0 48px;padding:16px;background:rgba(0,0,0,.7);backdrop-filter:blur(2.5px);color:#fff;font-family:var(--display);font-size:18px;line-height:22px;letter-spacing:.6px;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.product-overlay .button{width:220px;height:50px;padding:8px 20px;font-size:28px;box-shadow:0 5px 5px rgba(0,0,0,.3)}

/* CREATE ACCOUNT — Figma 223:1049 */
.account-section{position:relative;width:100%;height:286px;padding:36px 0;background:var(--mine-shaft)}
.account-panel{position:relative;width:772.33px;height:214px;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:16px}
.account-heading{width:748.33px;height:92px;display:flex;flex-direction:column;align-items:center}
.account-heading h2{height:48px;margin:0;color:var(--pearl);font-family:var(--display);font-size:40px;font-weight:400;line-height:48px}
.account-heading p{position:relative;height:44px;margin:0;padding-bottom:20px;color:var(--silk);font-family:var(--display);font-size:20px;line-height:24px}
.account-heading p::after{content:'';position:absolute;bottom:4px;left:20%;right:20%;height:2px;background:linear-gradient(90deg,rgba(205,65,43,0),var(--red),rgba(205,65,43,0))}
.form-step{display:none;width:748.33px;height:82px}
.form-step.active{display:block}
.account-fields{width:100%;height:82px;display:flex;align-items:flex-start}
.account-fields label{width:325.165px;height:66px;padding:16px 12px 0 0}
.account-fields label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.account-fields input{width:313.165px;height:50px;padding:14px 18px;border:2px solid transparent;background:rgba(0,0,0,.2);color:var(--pearl);font-size:16px;line-height:22px;outline:0}
.account-fields input:focus{border-color:var(--red)}
.account-fields .account-next{width:auto;height:50px;margin:16px 0;padding:8px 16px;flex:0 0 auto}
.ready-card{gap:16px;align-items:center;color:var(--pearl);font-family:var(--display);font-size:24px}
.ready-card img{width:50px;height:50px}.ready-card small{display:block;color:var(--silk);font-family:var(--body);font-size:12px}

/* CLAN ACCOUNT + FIND A CLAN — Figma 50:487 */
.legacy-account-section{display:none!important}
.clan-flow-dialog{width:min(764px,calc(100vw - 32px));max-width:764px;max-height:90vh;margin:auto;padding:26px;border:1px solid rgba(255,255,255,.2);background:rgba(20,19,18,.96);color:var(--pearl);overflow:auto;backdrop-filter:blur(5px);box-shadow:0 24px 70px rgba(0,0,0,.62)}
.clan-flow-dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}
.clan-flow-dialog>div{padding:0}.clan-flow-close{position:absolute;z-index:5;top:12px;right:12px;width:36px;height:36px;padding:0;border:0;background:rgba(0,0,0,.28);color:var(--silk);font-family:var(--display);font-size:28px;line-height:36px;cursor:pointer}.clan-flow-close:hover{background:var(--red);color:#fff}
.clan-flow-screen[hidden]{display:none}.clan-flow-screen.active{display:block;animation:panelEnter .28s cubic-bezier(.16,1,.3,1) both}
.clan-account-panel{width:100%;height:auto;margin:0;padding:0;gap:10px}.clan-account-panel .account-heading{width:100%;height:auto;align-items:flex-start;padding-right:42px}.clan-account-panel .account-heading h2{height:auto;font-size:38px;line-height:46px}.clan-account-panel .account-heading p{height:auto;padding:0;font-size:16px;line-height:20px}.clan-account-panel .account-heading p::after{display:none}
.clan-account-panel .form-step{width:100%;height:auto;margin-top:12px}.clan-account-panel .account-fields{height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end}.clan-account-panel .account-fields label{width:auto;height:auto;padding:0}.clan-account-panel .account-fields input{width:100%;height:48px}.clan-account-panel .account-fields .account-next{height:48px;margin:0}.clan-account-panel .steam-fields{grid-template-columns:minmax(0,1fr) auto}
.steam-help{margin:10px 0 0;color:var(--silk);font-family:var(--display);font-size:14px;line-height:18px;letter-spacing:.04em}.steam-auth-status{margin-top:14px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;background:rgba(76,143,46,.2);box-shadow:inset 3px 0 var(--green)}.steam-auth-status[hidden]{display:none}.steam-auth-status strong{font-family:var(--display);font-size:20px;line-height:24px}.steam-auth-status span{color:var(--silk);font-family:var(--display);font-size:13px;line-height:17px}.steam-auth-status .button{grid-column:2;grid-row:1/3;white-space:nowrap}
.clan-search-heading{padding-right:42px}.clan-search-heading h2{margin:0;color:var(--pearl);font-family:var(--display);font-size:38px;font-weight:400;line-height:46px}.clan-search-heading p{margin:0 0 10px;color:var(--silk);font-family:var(--display);font-size:16px;line-height:20px}
.clan-search-tabs{width:100%;height:40px;flex:0 0 40px;display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.24);overflow:hidden}.clan-search-tabs button{position:relative;height:40px;padding:0;border:0;background:transparent;color:var(--silk);font-family:var(--display);font-size:20px;line-height:40px;cursor:pointer}.clan-search-tabs button.active{color:var(--pearl)}.clan-search-tabs button.active::after{content:'';position:absolute;left:-1px;right:0;bottom:0;height:3px;background:var(--red)}
.clan-search-form{width:100%;height:48px;flex:0 0 48px;margin:0;display:grid;grid-template-columns:minmax(0,600px) 100px;gap:12px}.clan-search-form label{min-width:0}.clan-search-form label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.clan-search-form input{width:100%;height:48px;padding:13px 17px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.32);color:var(--pearl);font-family:var(--display);font-size:17px;line-height:22px;outline:0}.clan-search-form input:focus{border-color:rgba(255,255,255,.08)}.clan-search-form input::placeholder{color:#757575;opacity:1}.clan-search-form input[type="search"]::-webkit-search-decoration,.clan-search-form input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}.clan-search-form input[type="search"]::-ms-clear{display:none;width:0;height:0}.clan-search-form .button{width:100%;height:48px;padding:8px 16px;font-size:20px}
.clan-search-table{width:100%;overflow-x:auto}.clan-search-row{width:100%;min-width:712px;height:48px;padding:0;border:0;display:grid;grid-template-columns:48px 210px 100px 110px 196px;gap:12px;align-items:center;background:rgba(0,0,0,.18);color:var(--silk);font-family:var(--display);font-size:18px;line-height:26px;text-align:left}.clan-search-columns{height:34px;flex:0 0 34px;background:rgba(0,0,0,.28);color:var(--pearl);line-height:34px}.clan-search-results{height:256px;display:grid;gap:4px}.clan-search-results .clan-search-row:first-child{background:rgba(79,66,59,.72)}.clan-search-results .clan-search-row:nth-child(3),.clan-search-results .clan-search-row:nth-child(5){background:rgba(0,0,0,.24)}.clan-search-results button{cursor:pointer}.clan-search-results button:hover{background:rgba(111,85,74,.82)}.clan-search-row>span:first-child{color:var(--pearl);text-align:center}.clan-search-row strong{color:var(--pearl);font-family:var(--display);font-weight:400}.clan-search-row[hidden]{display:none}

.clan-search-results button.selected{background:rgba(205,65,43,.42)}

/* CLAN MENU / normal story step → inline CREATE ACCOUNT — Figma 129:687, then 50:487 */
#clan-menu-step{height:620px}
#clan-menu-step::before{top:0}
#clan-menu-step .clan-menu-intro,#clan-menu-step .story-media{top:116px}
#clan-menu-step .clan-inline-flow[hidden]{display:none}
#clan-menu-step .clan-inline-flow{position:absolute;top:110px;left:calc(50% + 80px);width:764px;height:558px;padding:26px;border:0;background:rgba(20,19,18,.96);box-shadow:0 5px 15px rgba(0,0,0,.5);overflow:hidden;backdrop-filter:blur(5px);opacity:0;transform:translateY(18px);pointer-events:none}
#clan-menu-step.is-open{height:770px}
#clan-menu-step.is-open::before{top:52px}
#clan-menu-step.is-open .clan-menu-intro{display:none}
#clan-menu-step.is-open .clan-inline-flow.is-visible{opacity:1;transform:none;pointer-events:auto;transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1)}
#clan-menu-step.is-open .story-media{top:198px;transform:translateX(-48px)}
.clan-inline-screen[hidden]{display:none}.clan-inline-screen.active{display:block;animation:panelEnter .28s cubic-bezier(.16,1,.3,1) both}
.inline-account-panel{height:100%;margin:0}.inline-account-panel h3{height:46px;margin:0;color:var(--pearl);font-family:var(--display);font-size:38px;font-weight:400;line-height:46px}.inline-subtitle{height:22px;margin:0 0 15px;color:var(--silk);font-family:var(--display);font-size:16px;line-height:22px}.inline-steps{position:relative;height:40px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.24)}.inline-steps span{position:relative;display:grid;place-items:center;color:var(--silk);font-family:var(--display);font-size:20px;line-height:40px;text-align:center}.inline-steps span.active{color:var(--pearl)}.inline-steps span.active::after{content:'';position:absolute;right:0;bottom:-1px;left:0;height:3px;background:var(--red)}
.inline-form-step{display:none;padding-top:24px}.inline-form-step.active{display:block;animation:panelEnter .24s cubic-bezier(.16,1,.3,1) both}.inline-form-step label{display:block;color:var(--silk);font-family:var(--display);font-size:16px;line-height:22px}.inline-form-step input{display:block;width:100%;height:50px;margin-top:4px;padding:14px 18px;border:2px solid transparent;background:rgba(0,0,0,.2);color:var(--pearl);font-family:var(--display);font-size:17px;line-height:22px;outline:0}.inline-form-step input:focus{border-color:var(--red)}.inline-form-step small{display:block;height:18px;margin:6px 0 18px;color:var(--silk);font-family:var(--display);font-size:13px;line-height:18px}.inline-form-step .button{width:100%;height:54px;margin-top:28px;font-size:20px}.inline-form-step[data-inline-step="steam"] .button{margin-top:28px}.inline-confirmation{margin:40px 0 0;padding:18px 20px;background:rgba(76,143,46,.2);box-shadow:inset 3px 0 var(--green);color:var(--pearl);font-family:var(--display);font-size:24px;line-height:28px}.inline-confirmation span{color:var(--silk);font-size:14px;line-height:18px}
.clan-inline-screen[data-inline-screen="find"].active{height:100%;display:flex;flex-direction:column;gap:10px}.clan-inline-screen[data-inline-screen="find"] .clan-search-heading{display:contents}.clan-inline-screen[data-inline-screen="find"] .clan-search-heading h2{width:100%;height:46px;font-size:38px;line-height:46px}.clan-inline-screen[data-inline-screen="find"] .clan-search-heading p{width:100%;height:22px;margin:0;line-height:22px}.clan-inline-screen[data-inline-screen="find"] .clan-search-table{height:300px;max-height:none;margin:0;display:flex;flex-direction:column;gap:10px}

.steam-auth-page{min-height:100dvh;background:#141312}.steam-auth-shell{min-height:100dvh;padding:28px;display:grid;place-items:center;background:linear-gradient(rgba(12,11,11,.72),rgba(12,11,11,.92)),url('../img/clan-system-full-width.png') center/cover no-repeat}.steam-auth-card{width:min(460px,100%);padding:34px;background:rgba(20,19,18,.94);box-shadow:0 24px 70px rgba(0,0,0,.58);backdrop-filter:blur(6px)}.steam-auth-marque{width:58px;height:58px;margin-bottom:28px}.steam-auth-card h1{margin:4px 0 18px;font-family:var(--display);font-size:44px;font-weight:400;line-height:48px}.steam-auth-card>p:not(.panel-kicker):not(.steam-window-status){margin:0 0 24px;color:var(--silk);font-size:14px;line-height:23px}.steam-id-preview{margin-bottom:18px;padding:14px 16px;background:rgba(0,0,0,.28)}.steam-id-preview span{display:block;color:var(--silk);font-family:var(--display);font-size:14px}.steam-id-preview strong{font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:.06em}.steam-auth-card .button{width:100%;height:50px}.steam-auth-card .button:disabled{opacity:.45;cursor:not-allowed}.steam-window-status{margin:16px 0 0;color:var(--silk);font-family:var(--display);font-size:13px;letter-spacing:.05em;text-align:center}

/* Footer copied from the supplied index.php / styles.min.css */
.site-footer{position:relative;height:424px;background:#0c0b0b;color:#bab1a8}
.site-footer>.cefc80a3281{position:absolute;z-index:1;top:-20px;left:0;right:0;width:100%;height:53px;overflow:hidden;background-color:#0c0b0b;mask-image:url('../img/bar-dark.svg');mask-repeat:repeat-x}
.site-footer>.container,.site-footer .c85a0097d65>.container{width:100%;max-width:1300px;margin:0 auto}
.site-footer .c5b97bd38b0{display:flex;align-items:center;justify-content:center;padding-top:6rem;margin-bottom:4rem}
.site-footer .c5b97bd38b0 .cc81669f039{padding-bottom:5px}
.site-footer .c5b97bd38b0 .cross{margin:0 3rem;padding-bottom:5px}
.site-footer .c872e9e57ba{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-bottom:6rem}
.site-footer .c872e9e57ba .c3198b08bc1{background-color:rgba(186,177,168,.2);border-bottom:2px solid transparent;color:#bab1a8;font-size:1rem;font-family:var(--display);line-height:normal;padding:4px 8px 2px;margin-right:1.5rem;text-transform:uppercase;transition:all .15s ease;text-decoration:none;white-space:nowrap}
.site-footer .c872e9e57ba .c3198b08bc1:last-of-type{margin-right:0}
.site-footer .c872e9e57ba .c3198b08bc1:hover{background-color:rgba(186,177,168,.4);color:#e4dad1}
.site-footer .c872e9e57ba .c3198b08bc1.is-active,.site-footer .c872e9e57ba .c3198b08bc1.is-exact{border-bottom-color:#cd412b;color:#e4dad1}
.site-footer .c85a0097d65{background-color:rgba(0,0,0,.2);padding:1.5rem}
.site-footer .c85a0097d65 .c2c7ff28dbe{display:flex;flex-direction:row;align-items:center;justify-content:center}
.site-footer .c85a0097d65 .cb6e4221cf8{font-family:var(--display);color:rgba(186,177,168,.6);font-size:1.1rem;line-height:21px;letter-spacing:.1rem;flex:1}
.site-footer .c85a0097d65 .c9165d536d5{display:flex}
.site-footer .c85a0097d65 .c9165d536d5 .social-button{align-items:center;display:flex;justify-content:center;margin-left:.5rem;width:40px;height:40px}
.site-footer .c85a0097d65 .c9165d536d5 .social-button img{display:block;width:32px;height:32px;transition:all .15s ease}

dialog{width:min(1000px,92vw);padding:0;border:1px solid rgba(255,255,255,.18);background:#111;color:var(--pearl);box-shadow:0 30px 100px #000}
dialog::backdrop{background:rgba(0,0,0,.9)}dialog>img{width:100%;max-height:65vh;object-fit:cover}dialog>div{padding:28px 36px}.lightbox-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border:0;background:#111;color:#fff;font-size:25px;cursor:pointer}.eyebrow{color:var(--red);font-family:var(--display)}

/* Dedicated CLAN UI TABLE surface */
.clan-system-page{min-height:100dvh;background:#1f1712;overflow:hidden}
.clan-app{position:relative;isolation:isolate;min-height:100dvh;display:grid;grid-template-columns:350px minmax(0,1fr);overflow:hidden}
.clan-app>.dashboard-bg,.clan-app>.dashboard-tint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.clan-app>.dashboard-bg{z-index:-3;filter:blur(6px);transform:scale(1.02)}.clan-app>.dashboard-tint{z-index:-2;background:rgba(51,38,31,.48)}
.clan-sidebar{position:relative;z-index:1;min-height:100dvh;overflow:hidden;background:rgba(20,18,17,.48)}
.clan-banner{position:absolute;left:19px;top:-13px;width:358px;height:min(900px,calc(100dvh - 280px));max-width:none;object-fit:fill}.clan-identity{position:absolute;left:50%;bottom:24px;width:250px;padding:0;transform:translateX(-50%);text-align:center}.clan-identity h1{margin:0 0 20px;text-align:center;font-family:var(--display);font-size:34px;line-height:1}.clan-identity p{margin:8px 0;display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--display);font-size:22px}.clan-identity p img{width:28px;height:24px}.leave-button{margin:24px auto 0;padding:12px 16px;border:0;display:flex;align-items:center;gap:10px;background:rgba(12,11,11,.55);color:var(--pearl);font-family:var(--display)}.leave-button img{width:22px;height:22px}
.clan-main{position:relative;z-index:1;min-width:0;max-height:100dvh;overflow:auto;padding:0 30px 32px}.clan-tabs{position:sticky;z-index:5;top:0;width:calc(100% + 60px);margin:0 -30px;display:flex;overflow-x:auto;background:rgba(31,24,21,.72);backdrop-filter:blur(8px)}.clan-tabs button{height:52px;padding:0 16px;border:0;border-right:1px solid rgba(255,255,255,.06);display:flex;flex:1 0 auto;min-width:max-content;align-items:center;justify-content:center;gap:8px;background:rgba(31,24,21,.75);color:#c8bdb5;font-family:var(--display);font-size:18px;white-space:nowrap;cursor:pointer}.clan-tabs button.active{background:rgba(131,107,96,.58);color:#fff}.clan-tabs .material-icons{font-size:22px;color:#bdb4ad}
.clan-tabs .clan-tab-icon{width:22px;height:22px;object-fit:contain;opacity:.78}
.clan-panel{display:none;padding:28px 0 32px}.clan-panel.active{display:block}.panel-kicker{margin:0;color:#d3c7bf;font-family:var(--display);letter-spacing:.14em}.clan-panel h2{margin:0 0 28px;font-family:var(--display);font-size:48px;line-height:1}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.announcement-box,.empty-state{max-width:960px;padding:24px;border:1px solid rgba(255,255,255,.12);background:rgba(85,65,57,.58)}.empty-state{padding:80px 24px;text-align:center;font-family:var(--display);font-size:28px}.empty-state span{color:var(--silk);font-family:var(--body);font-size:15px}
.game-button{padding:11px 18px;border:0;background:#4d453f;color:#fff;font-family:var(--display);cursor:pointer}.game-button.blue{background:var(--blue)}
.member-list>div{min-height:68px;padding:10px 14px;display:grid;grid-template-columns:48px minmax(180px,1fr) 150px 150px;align-items:center;gap:14px;border-bottom:2px solid rgba(34,24,21,.75);background:rgba(151,125,114,.34)}.member-avatar{display:block;width:44px;height:44px;border:2px solid rgba(228,218,209,.32);border-radius:50%;object-fit:cover}.member-avatar.clan-avatar{border-radius:0;object-fit:contain;background:#07162d}.member-list b,.member-list span{align-self:center;line-height:20px}
.player-picker,.turret-picker{max-width:520px;margin:12px 0 16px auto;padding:8px;border:1px solid rgba(255,255,255,.18);background:rgba(12,11,11,.88)}.player-picker button,.turret-picker button{display:block;width:100%;margin-bottom:3px;padding:12px;border:0;background:#302724;color:var(--pearl);text-align:left;cursor:pointer}
.rank-grid{max-width:960px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rank-grid button{padding:24px;border:1px solid rgba(255,255,255,.18);background:rgba(92,72,63,.72);color:#fff;text-align:left;font-family:var(--display);font-size:24px}.rank-grid small{display:block;margin-top:8px;color:#c7bbb3}
.score-bars{max-width:800px}.score-bars span{position:relative;isolation:isolate;display:block;margin:9px 0;padding:15px;background:#211b18;font-family:var(--display)}.score-bars span::before{content:'';position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--w);background:#783c2c}.log-list p{padding:16px;border-bottom:1px solid rgba(255,255,255,.18);background:rgba(44,35,31,.7)}.log-list b{margin-right:20px;color:var(--red)}
.turret-list article{min-height:118px;padding:12px 22px;display:grid;grid-template-columns:100px minmax(220px,1fr) auto auto;align-items:center;gap:18px;border-bottom:4px solid rgba(32,23,20,.8);background:rgba(92,72,63,.66)}.turret-visual{width:96px;height:96px;display:grid;place-items:center;background:transparent}.turret-visual img{display:block;width:92px;height:92px;object-fit:contain}.turret-list h3{margin:0 0 8px;font-family:var(--display);font-size:28px;line-height:1}.turret-list p{margin:0;color:#c0b5ad}.state-button,.cancel-button{padding:10px 20px;border:0;color:#fff;font-family:var(--display);cursor:pointer}.state-button{background:#25201e}.state-button.on{background:var(--green)}.cancel-button{background:#332b28}.toast{position:fixed;z-index:10;top:24px;right:24px;padding:15px 22px;border:1px solid #4f8d3d;background:#193716;color:#fff;opacity:0;transform:translateY(-20px);pointer-events:none;font-family:var(--display);letter-spacing:.08em}.toast.show{opacity:1;transform:none}

@media(max-width:1320px){header.header .header-navigation{font-size:18px}header.header .header-navigation a{padding-inline:15px}.feature-wrap{max-width:calc(100% - 32px)}.featured-blog-body{left:10%;width:80%}.story-step .story-media{left:calc(50% - 48vw);width:51vw;height:auto;aspect-ratio:680/383}.story-step .step-copy{left:calc(50% + 8vw);width:40vw}.story-step:not(.reverse) .step-copy{left:calc(50% - 48vw)}.story-step:not(.reverse) .story-media{left:calc(50% - 3vw)}.step-copy h3,.step-copy p{width:100%}}
@media(max-width:849px){header.header .container{justify-content:space-between}header.header .header-brand{min-width:0;padding-right:0}header.header .toggle-navigation{display:flex}header.header .header-navigation{display:none;position:fixed;top:64px;left:0;right:0;min-height:0;padding:16px;background:var(--cod-gray);flex-direction:column;font-size:17px}header.header .header-navigation.is-open{display:flex}header.header .header-navigation a{width:100%;height:44px;padding:8px 0}header.header .header-navigation a.buy-button{height:44px;margin:4px 0 0}.hero-brand{width:min(800px,90vw);height:auto;flex-basis:auto}.hero-content>p{height:auto}.latest-section{height:auto;padding:48px 16px}.feature-wrap{height:auto;display:flex;flex-direction:column}.feature-label{top:12px;left:12px}.feature-media{position:relative;top:auto;height:auto;aspect-ratio:16/9}.featured-blog-body{position:relative;top:auto;left:auto;width:94%;height:auto;min-height:380px;margin:-40px auto 36px;padding:48px 24px 32px}.featured-blog-body h2,.feature-date,.featured-blog-body>p,.featured-blog-body>.button{position:relative;top:auto;left:auto;width:auto;height:auto;transform:none}.featured-blog-body h2{font-size:48px;line-height:1}.feature-date{margin:14px 0 20px}.featured-blog-body>p{margin:0 auto 24px}.likes{position:relative;align-self:flex-end}.story-step{height:auto;min-height:0;padding:76px 18px;display:flex;flex-direction:column;gap:28px}.story-step::before,#play-together::before,#clan-menu-step::before{top:38px}.story-step>*,.story-step .story-media,.story-step .step-copy,.story-step:not(.reverse) .story-media,.story-step:not(.reverse) .step-copy,#sign-in-step .story-media,#sign-in-step .step-copy,#play-together .story-media,#play-together .step-copy,#clan-menu-step .story-media,#clan-menu-step .step-copy{position:relative;top:auto;left:auto;width:100%}.story-step.reverse .step-copy{order:2}.story-step.reverse .story-media{order:1}.story-media{height:auto;aspect-ratio:680/383}.step-copy h3,.step-copy p{width:100%;height:auto}.image-reveal{height:360px}.warning-message{width:90%;height:auto;white-space:normal}.section.quote{height:auto;min-height:325px;padding:80px 24px}.quote-text{padding:0}.quote-text h1{font-size:38px;line-height:40px}.product-overlay{width:min(500px,90%)}.product-overlay h2{width:100%}.product-overlay p{height:auto;white-space:normal}.account-section{height:auto;min-height:286px;padding-inline:18px}.account-panel,.account-heading,.form-step{width:100%;height:auto}.account-fields{height:auto;flex-direction:column}.account-fields label{width:100%;height:66px;padding-right:0}.account-fields input{width:100%}.site-footer{height:424px;min-height:424px}.footer-container{width:100%;height:240px}.footer-branding{transform:scale(.72)}.footer-navigation{left:16px;right:16px;width:auto;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.footer-navigation::-webkit-scrollbar{display:none}.footer-copyright{padding:24px 16px}.footer-copy-flex{width:100%}.footer-copy-flex>p{font-size:12px;line-height:16px;letter-spacing:1px}.footer-socials{width:auto}.footer-socials a{width:36px;padding-left:4px}.footer-socials img{width:28px;height:28px}.clan-app{grid-template-columns:230px minmax(0,1fr)}.clan-banner{width:210px;height:min(58vh,620px)}.clan-identity{padding-inline:8px}.clan-tabs button{padding-inline:14px}}
@media(max-width:720px){.clan-system-page{overflow:auto}.clan-app{display:block;min-height:100dvh;overflow:visible}.clan-sidebar{min-height:0;height:250px;display:grid;grid-template-columns:92px 1fr;padding:54px 18px 16px;align-items:start}.clan-banner{grid-column:1;width:82px;height:178px}.clan-identity{grid-column:2;margin:0;padding:8px 0 0 14px}.clan-identity h1{font-size:30px;margin-bottom:12px}.clan-identity p{font-size:16px;margin:5px 0}.clan-main{max-height:none;overflow:visible;padding:0 10px 24px}.clan-tabs{width:calc(100% + 20px);margin:0 -10px}.clan-tabs button{height:56px;padding:0 13px;font-size:16px}.clan-panel{padding:30px 0}.clan-panel h2{font-size:42px}.rank-grid{grid-template-columns:1fr}.turret-list article{grid-template-columns:60px 1fr auto;gap:10px;padding:14px 12px}.turret-visual{width:56px;height:56px}.cancel-button{grid-column:2/4}.toast{top:12px;left:12px;right:12px;text-align:center}}
@media(max-width:849px){.site-footer{height:auto;min-height:0}.site-footer .c5b97bd38b0 .cc81669f039 img{max-width:140px}.site-footer .c5b97bd38b0 .cross{margin:0 1rem}.site-footer .c5b97bd38b0 .cross img{max-height:20px}.site-footer .c872e9e57ba{flex-direction:column}.site-footer .c872e9e57ba .c3198b08bc1{margin:.5rem 0}.site-footer .c85a0097d65{text-align:center}.site-footer .c85a0097d65 .c2c7ff28dbe{flex-direction:column-reverse}.site-footer .c85a0097d65 .c9165d536d5{margin-bottom:1rem}}
@media(min-width:721px) and (max-width:849px){.clan-banner{left:0;width:248px}.clan-identity{left:50%;width:190px}.clan-identity h1{font-size:30px}.clan-identity p{font-size:18px}}
@media(max-width:720px){.clan-banner{position:relative;left:auto;top:auto;width:82px;height:178px}.clan-identity{position:relative;left:auto;bottom:auto;width:auto;transform:none;text-align:left}.clan-identity h1{text-align:left}.clan-identity p{justify-content:flex-start}.leave-button{margin:24px 0 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Interaction polish: donor palette, game-menu depth, purposeful motion */
@keyframes sectionReveal{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes panelEnter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes menuDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes bannerEnter{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes identityEnter{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes scoreFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes heroBrandEnter{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

.motion-ready .motion-section{opacity:0}
.motion-ready .motion-section.is-visible{animation:sectionReveal .72s cubic-bezier(.16,1,.3,1) both}
.motion-ready .image-reveal.motion-section{opacity:1;transform:none;animation:none}
.hero-brand img{animation:heroBrandEnter 1.1s cubic-bezier(.16,1,.3,1)}
.edit-block img{transition:transform .55s cubic-bezier(.16,1,.3,1),filter .3s ease}
.edit-block:hover img{transform:scale(1.025);filter:saturate(1.06)}
.button-red,.game-button,.state-button,.cancel-button{transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .18s ease,box-shadow .18s ease,filter .18s ease}
.button-red:hover,.game-button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.28);filter:brightness(1.08)}
.featured-blog-body>.button:hover{transform:translateX(-50%) translateY(-2px)}
.featured-blog-body>.button:active{transform:translateX(-50%) translateY(1px)}
.button-red:active,.game-button:active,.state-button:active,.cancel-button:active{transform:translateY(1px);box-shadow:none}
.likes button{border:0;transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .18s ease}
.likes button:hover{transform:translateY(-2px);background:rgba(205,65,43,.48)}
.account-fields input{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.account-fields input:focus{background:rgba(0,0,0,.34);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.form-step.active{animation:panelEnter .32s cubic-bezier(.16,1,.3,1) both}
dialog{border:0;animation:panelEnter .28s cubic-bezier(.16,1,.3,1) both}

.clan-banner{animation:bannerEnter .5s cubic-bezier(.16,1,.3,1) both}
.clan-identity{animation:identityEnter .48s .1s cubic-bezier(.16,1,.3,1) both}
.clan-tabs{box-shadow:0 12px 28px rgba(0,0,0,.18)}
.clan-tabs button{position:relative;border-right:0;opacity:.7;transition:opacity .18s ease,color .18s ease,background-color .18s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.clan-tabs button:hover{opacity:1;background:rgba(90,70,62,.45);transform:translateY(-1px)}
.clan-tabs button:focus{outline:0}.clan-tabs button:focus-visible{background:rgba(90,70,62,.58);box-shadow:inset 0 -2px var(--red)}
.clan-tabs button.active{opacity:1}
.clan-panel.active{animation:panelEnter .3s cubic-bezier(.16,1,.3,1) both}
.announcement-box,.empty-state{border:0;background:rgba(85,65,57,.58);box-shadow:0 16px 42px rgba(0,0,0,.18)}
.member-list{box-shadow:0 18px 46px rgba(0,0,0,.14)}
.member-list>div{margin-bottom:3px;border-bottom:0;transition:transform .2s cubic-bezier(.16,1,.3,1),background-color .2s ease,box-shadow .2s ease}
.member-list>div:hover{z-index:1;transform:translateX(5px);background:rgba(169,139,126,.48);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.member-avatar{border:0;box-shadow:0 3px 12px rgba(0,0,0,.32)}
.player-picker,.turret-picker{border:0;box-shadow:0 20px 50px rgba(0,0,0,.42);animation:menuDrop .24s cubic-bezier(.16,1,.3,1) both}
.player-picker button,.turret-picker button{margin-bottom:2px;transition:background-color .16s ease,transform .16s cubic-bezier(.16,1,.3,1)}
.player-picker button:hover,.turret-picker button:hover{background:#493832;transform:translateX(4px)}
.rank-grid button{border:0;box-shadow:0 10px 26px rgba(0,0,0,.14);transition:transform .2s cubic-bezier(.16,1,.3,1),background-color .2s ease,box-shadow .2s ease}
.rank-grid button:hover{transform:translateY(-4px);background:rgba(117,90,78,.82);box-shadow:0 18px 38px rgba(0,0,0,.24)}
.score-bars span{overflow:hidden;box-shadow:0 7px 18px rgba(0,0,0,.12)}
.clan-panel.active .score-bars span::before{transform-origin:left;animation:scoreFill .65s cubic-bezier(.16,1,.3,1) both}
.clan-panel.active .score-bars span:nth-child(2)::before{animation-delay:.08s}.clan-panel.active .score-bars span:nth-child(3)::before{animation-delay:.16s}
.log-list p{margin:0 0 3px;border-bottom:0;transition:background-color .18s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.log-list p:hover{background:rgba(72,55,48,.82);transform:translateX(4px)}
.turret-list article{margin-bottom:4px;border-bottom:0;box-shadow:0 12px 30px rgba(0,0,0,.14);transition:transform .2s cubic-bezier(.16,1,.3,1),background-color .2s ease,box-shadow .2s ease}
.turret-list article:hover{transform:translateY(-3px);background:rgba(111,85,74,.75);box-shadow:0 20px 42px rgba(0,0,0,.24)}
.state-button:hover,.cancel-button:hover{filter:brightness(1.16)}
.toast{border:0;box-shadow:0 16px 42px rgba(0,0,0,.35);transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1)}

@media(max-width:720px){.member-list>div:hover,.log-list p:hover,.player-picker button:hover,.turret-picker button:hover{transform:none}.turret-list article:hover,.rank-grid button:hover{transform:none}}
@media(max-width:600px){
 .hero{height:620px;min-height:620px;padding:96px 16px 40px}
 .hero-content{width:100%;max-width:100%;height:auto;padding-top:30px}
 .hero-brand{width:100%;height:260px;flex:0 0 260px}
 .hero-content>p{width:100%;height:auto;padding:0 0 24px;font-size:15px;line-height:24px}
 .tags{font-size:14px}
 .latest-section{padding:36px 12px 48px}
 .feature-wrap{max-width:100%}
 .feature-label{top:8px;left:8px;height:36px;padding:7px 12px;font-size:18px}
 .featured-blog-body{width:calc(100% - 16px);min-height:0;margin:-24px auto 24px;padding:42px 20px 28px;text-align:left}
 .featured-blog-body h2{font-size:40px;line-height:44px;white-space:normal;text-align:left}
 .feature-date{justify-content:flex-start;margin:12px 0 18px}
 .featured-blog-body>p{font-size:15px;line-height:25px;text-align:left}
 .featured-blog-body>.button{width:100%;min-height:48px;margin-top:4px;transform:none}
 .featured-blog-body>.button:hover,.featured-blog-body>.button:active{transform:none}
 .likes{width:100%;height:44px;align-items:center;justify-content:flex-end}
 .likes button{min-width:64px;height:36px;justify-content:center}
 .story-step{padding:64px 16px;gap:22px}
 .step-copy{gap:16px}
 .step-copy h3{font-size:36px;line-height:43px}
 .step-copy p{font-size:16px;line-height:26px}
 .step-copy .button{width:100%;min-height:48px}
 .story-media{border-radius:6px}
 .image-reveal{height:410px}
 .image-reveal>.image{top:-110px;height:720px;background-position:50% 38%}
 .reveal-dim{top:-15px;height:340px}
 .reveal-caption{display:block;top:290px;bottom:0;height:auto}
 .image-reveal-bottom{top:270px}
 .image-reveal .warning-message{bottom:34px;width:calc(100% - 32px);height:auto;padding:7px 10px;font-size:13px;line-height:18px;letter-spacing:1px;white-space:normal}
 .section.quote{min-height:280px;padding:72px 20px}
 .quote-text{padding:0}
 .quote-text h1{font-size:32px;line-height:36px}
 .quote-text h1::after{width:min(80vw,320px)}
 .quote-text .company{font-size:20px}
 .product-banner{height:560px;min-height:560px}
 .product-stage{top:0;height:100%;padding:80px 20px}
 .product-bar-bottom{bottom:0}
 .product-overlay{top:50%;left:50%;width:100%;max-width:100%;height:auto;transform:translate(-50%,-50%)}
 .product-overlay h2{width:100%;height:auto;padding:0 0 22px;font-size:72px;line-height:76px;white-space:normal}
 .product-subtitle{width:100%;height:auto;margin:0 0 30px;padding:13px 12px;font-size:16px;line-height:20px;white-space:normal}
 .product-overlay .button{width:100%;max-width:260px;min-height:50px}
 .account-section{padding:32px 16px 44px}
 .account-panel{padding:0;gap:14px}
 .account-heading h2{font-size:34px;line-height:40px}
 .account-heading p{height:auto;font-size:17px;line-height:22px;text-align:center}
 .account-fields{gap:8px}
 .account-fields label{height:58px;padding:8px 0 0}
 .account-fields input{height:50px}
 .account-fields .account-next{width:100%;min-height:50px;margin:10px 0 0}
}
@media(max-width:800px){.clan-flow-dialog{width:calc(100vw - 24px);padding:20px}.clan-account-panel .account-fields{grid-template-columns:1fr}.clan-account-panel .steam-fields{grid-template-columns:1fr}.steam-auth-status{grid-template-columns:1fr}.steam-auth-status .button{grid-column:1;grid-row:auto;width:100%;margin-top:8px}}
@media(max-width:600px){.clan-flow-dialog{width:calc(100vw - 12px);max-height:94vh;padding:16px}.clan-account-panel .account-heading h2,.clan-search-heading h2{font-size:34px;line-height:40px}.clan-account-panel .account-fields .account-next{width:100%}.clan-search-form{grid-template-columns:minmax(0,1fr) 84px;gap:8px}.clan-search-tabs button{font-size:14px}.steam-auth-shell{padding:14px}.steam-auth-card{padding:26px 22px}.steam-auth-card h1{font-size:38px;line-height:42px}}
@media(max-width:1700px){#clan-menu-step.is-open{height:720px}#clan-menu-step.is-open .clan-inline-flow{top:80px;left:50%;width:min(764px,calc(100vw - 64px));height:558px;min-height:0;padding:26px;transform:translateX(-50%)}#clan-menu-step.is-open .clan-inline-flow.is-visible{transform:translateX(-50%)}#clan-menu-step.is-open .story-media{display:none}}
@media(max-width:849px){#clan-menu-step,#clan-menu-step.is-open{height:auto;min-height:0;padding:64px 16px}#clan-menu-step.is-open .clan-inline-flow{position:relative;top:auto;left:50%;width:min(764px,calc(100vw - 32px));height:558px;min-height:558px;padding:25px;transform:translateX(-50%);order:0}#clan-menu-step.is-open .clan-inline-flow.is-visible{transform:translateX(-50%)}#clan-menu-step .story-media,#clan-menu-step.is-open .story-media{position:relative;display:block;top:auto;left:auto;width:100%;height:auto;aspect-ratio:680/383;transform:none;order:1}.inline-account-panel h3{font-size:36px;line-height:42px}.inline-form-step .button{margin-top:18px}}
@media(max-width:600px){#clan-menu-step{padding:52px 12px}#clan-menu-step .clan-inline-flow{min-height:0;padding:16px}.inline-account-panel h3{font-size:32px;line-height:38px}.inline-subtitle{font-size:14px}.inline-steps span{font-size:16px}.inline-form-step{padding-top:18px}.inline-form-step small{height:auto;margin-bottom:14px}.inline-form-step .button{height:50px;margin-top:14px}.inline-confirmation{margin-top:20px;font-size:21px;line-height:25px}.clan-inline-screen[data-inline-screen="find"] .clan-search-table{margin-right:-16px;width:calc(100% + 16px)}}

@media(prefers-reduced-motion:reduce){.motion-ready .motion-section{opacity:1}.motion-ready .motion-section.is-visible,.hero-brand img,.form-step.active,.clan-banner,.clan-identity,.clan-panel.active,.player-picker,.turret-picker,.clan-panel.active .score-bars span::before{animation:none!important}.edit-block img{transition:none!important}}

/* ACCOUNT CHECKING / clan-system shell rebuild / Figma 233:1119 */
.account-checking-page{min-height:100dvh;background:#1f1712;overflow:hidden}
.account-checking-page .clan-app>.dashboard-bg{object-position:center 30%;filter:blur(4px) saturate(.72) contrast(1.08);transform:scale(1.025)}
.account-checking-page .clan-app>.dashboard-tint{background:linear-gradient(90deg,rgba(22,17,14,.76),rgba(51,38,31,.56) 45%,rgba(21,16,14,.68))}
.account-checking-page .clan-sidebar{background:rgba(20,18,17,.52)}
.account-checking-page .clan-tabs button.is-locked{opacity:.38;cursor:not-allowed;filter:grayscale(1)}
.account-checking-page .clan-tabs button.is-locked:hover{opacity:.48;background:rgba(31,24,21,.75);transform:none}
.account-checking-page .clan-tabs button.is-locked:focus-visible{opacity:.58;box-shadow:inset 0 -2px rgba(205,65,43,.72)}
.account-checking-panel{width:100%;max-width:1240px;padding-top:34px}
.account-checking-panel .account-checking-heading{margin:0 0 30px;padding:0;background:none}
.account-checking-panel .account-checking-heading h2{margin:0;color:#f0e8df;font-family:var(--display);font-size:64px;font-weight:400;line-height:.94;letter-spacing:.01em;text-shadow:0 3px 18px rgba(0,0,0,.36)}
.account-checking-panel .account-checking-heading p{margin:12px 0 0;color:#c7bbb3;font-family:var(--display);font-size:20px;line-height:1;letter-spacing:.14em}
.account-checking-panel .checking-ellipsis{display:inline-block;width:1.1em;text-align:left}
.account-checking-panel .checking-ellipsis::after{content:'';animation:checking-dots 1.2s steps(4,end) infinite}
@keyframes checking-dots{0%,20%{content:''}40%{content:'.'}60%{content:'..'}80%,100%{content:'...'}}
.account-checking-panel .account-checking-columns{height:28px;padding:0 22px;display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:14px;color:rgba(237,232,224,.58);font-family:var(--display);font-size:16px;line-height:1;letter-spacing:.1em}
.account-checking-panel .account-checking-rows{display:flex;flex-direction:column;gap:7px}
.account-checking-panel .account-checking-row{position:relative;min-height:72px;padding:0 22px;display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;gap:14px;overflow:hidden;background:rgba(54,43,39,.72);color:#ede8e0;font-family:var(--display);box-shadow:0 10px 28px rgba(0,0,0,.12);transition:background-color .18s ease,opacity .28s ease,transform .28s ease}
.account-checking-panel .account-checking-row:hover{background:rgba(65,50,45,.78)}
.account-checking-panel .account-checking-row.is-checking{background:rgba(104,74,63,.78);box-shadow:0 16px 36px rgba(0,0,0,.18)}
.account-checking-panel .account-checking-row.is-passed{background:rgba(68,78,60,.76)}
.account-checking-panel .account-checking-row.is-leaving{pointer-events:none;animation:checking-row-exit .34s cubic-bezier(.4,0,1,1) forwards}
.account-checking-label{font-size:24px;line-height:1}
.account-checking-panel .account-checking-row strong{color:rgba(237,232,224,.56);font-size:18px;font-weight:400;letter-spacing:.08em}
.account-checking-panel .account-checking-row.is-checking strong{color:#f0e8df}
.account-checking-panel .account-checking-row.is-passed strong{color:rgba(225,234,216,.78)}
.account-checking-progress{position:absolute;right:0;bottom:0;left:0;height:3px;overflow:hidden;background:rgba(20,18,17,.82)}
.account-checking-progress-bar{display:block;width:100%;height:100%;background:#d9291a;transform:scaleX(0);transform-origin:left center}
.account-checking-progress-bar.is-running{animation:checking-progress-fill var(--check-duration) linear forwards}
.account-checking-panel.is-complete .checking-ellipsis{display:none}
.account-checking-toast{border:1px solid rgba(205,65,43,.46);background:rgba(64,28,23,.96);color:#f0e8df}
.account-checking-page .account-verification-success {
  margin-top: 7px;
}

.account-checking-page .account-verification-success .drawer-description {
  margin: 0;
}

.account-checking-page .account-verification-success[hidden] {
  display: none;
}

@keyframes checking-progress-fill{to{transform:scaleX(1)}}
@keyframes checking-row-exit{to{opacity:0;transform:translateY(-22px)}}
@media(max-width:720px){.account-checking-page{overflow-x:hidden;overflow-y:auto}.account-checking-page .clan-app{overflow-x:clip}.account-checking-page .dashboard-bg{object-position:58% center;filter:blur(2px) saturate(.72) contrast(1.08);transform:none}.account-checking-page .clan-identity{transform:none;animation:none}.account-checking-panel{padding-top:28px}.account-checking-panel .account-checking-heading{margin-bottom:24px}.account-checking-panel .account-checking-heading h2{font-size:46px;line-height:.96}.account-checking-panel .account-checking-heading p{margin-top:10px;font-size:17px}.account-checking-panel .account-checking-columns{padding-inline:12px;grid-template-columns:minmax(0,1fr) 92px;gap:10px;font-size:14px}.account-checking-panel .account-checking-row{min-height:62px;padding:0 12px;grid-template-columns:minmax(0,1fr) 92px;gap:10px}.account-checking-label{font-size:18px}.account-checking-panel .account-checking-row strong{font-size:14px;letter-spacing:.04em}.account-checking-toast{top:12px;right:12px;left:12px;text-align:center}}
@media(prefers-reduced-motion:reduce){.account-checking-progress-bar.is-running{animation:none;transform:scaleX(1)}.account-checking-panel .account-checking-row.is-leaving{animation:none;opacity:0}}

/* --- EXTENDED ERROR DETAILS, SCREENSHOTS & NEXT BUTTON UI STYLES --- */
.account-checking-panel .account-checking-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: auto;
  padding: 0;
}

.account-checking-row-main {
  min-height: 72px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 14px;
  position: relative;
  width: 100%;
  cursor: pointer;
}

.account-checking-drawer {
  background: rgba(22, 17, 15, 0.92);
  border-top: 1px solid rgba(205, 65, 43, 0.35);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: drawer-fade-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawer-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px dashed rgba(237, 232, 224, 0.15);
  padding-bottom: 12px;
}

.drawer-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-tag {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #cd412b;
  text-transform: uppercase;
}

.drawer-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  color: #f0e8df;
  margin: 0;
}

.checking-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #cd412b;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(205, 65, 43, 0.4);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.checking-next-btn:hover {
  background: #e54a33;
  transform: translateY(-1px);
}

.drawer-description {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #bab1a8;
  margin: 0;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer-section-title {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.12em;
  color: #e4dad1;
  margin: 0;
}

.drawer-steps-list {
  margin: 0;
  padding-left: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #d1c7bc;
}

.drawer-steps-list li {
  margin-bottom: 6px;
}

.drawer-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.drawer-gallery.grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(12, 11, 11, 0.6);
  border: 1px solid rgba(237, 232, 224, 0.12);
  padding: 8px;
  border-radius: 4px;
  max-width: 480px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #000;
  transition: transform 0.2s ease;
}

.gallery-item img:hover {
  transform: scale(1.02);
}

.gallery-item figcaption {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #bab1a8;
  line-height: 1.4;
}

.drawer-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.btn-rust-action {
  background: #cd412b;
  color: #fff;
  border: none;
  padding: 10px 22px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.btn-rust-action:hover {
  background: #e54a33;
}

.btn-rust-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #bab1a8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 22px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.btn-rust-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* --- FAMILY GROUPS ACTION BUTTONS & HIDDEN DRAWER STYLES --- */
.family-groups-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.btn-accept-family {
  background: #cd412b;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(205, 65, 43, 0.4);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.btn-accept-family:hover {
  background: #e54a33;
  transform: translateY(-1px);
}

.btn-decline-family {
  background: rgba(255, 255, 255, 0.08);
  color: #bab1a8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 24px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.btn-decline-family:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* --- FIX FOR HIDDEN DRAWERS OVERRIDE --- */
.account-checking-drawer[hidden] {
  display: none !important;
}

.account-checking-drawer:not([hidden]) {
  display: flex !important;
}

/* --- TRADE LINK INPUT & BOT CHECKING STYLES --- */
.trade-link-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(12, 11, 11, 0.7);
  border: 1px solid rgba(237, 232, 224, 0.15);
  padding: 14px 18px;
  border-radius: 4px;
}

.trade-link-label {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #cd412b;
}

.trade-link-input-wrapper {
  display: flex;
  gap: 10px;
}

.trade-link-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(237, 232, 224, 0.2);
  padding: 10px 14px;
  color: #f0e8df;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s ease;
}

.trade-link-input:focus {
  border-color: #cd412b;
}

.btn-save-trade-link {
  background: #cd412b;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}

.btn-save-trade-link:hover {
  background: #e54a33;
}

/* --- VIDEO GALLERY & GATE NEXT BUTTON STYLES --- */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.video-item video {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(237, 232, 224, 0.15);
  background: #000;
  display: block;
}

.bot-gate-next-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  background: rgba(12, 11, 11, 0.5);
  border: 1px dashed rgba(237, 232, 224, 0.2);
  border-radius: 4px;
}

.btn-gate-next {
  background: #cd412b;
  color: #ffffff;
  border: none;
  padding: 12px 32px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(205, 65, 43, 0.35);
}

.btn-gate-next:hover:not(:disabled) {
  background: #e54a33;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(205, 65, 43, 0.5);
}

.btn-gate-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
  box-shadow: none;
}

.gate-waiting-text {
  font-size: 13px;
  color: rgba(237, 232, 224, 0.6);
  font-style: italic;
}

/* --- VIDEO LIGHTBOX MODAL & PHASE 2 STYLES --- */
.video-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}

.video-item:hover video {
  filter: brightness(1.15);
  transform: scale(1.02);
}

.video-item video {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.video-play-overlay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 42px;
  pointer-events: none;
  transition: transform 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.video-item:hover .video-play-overlay {
  color: #cd412b;
  transform: translate(-50%, -50%) scale(1.15);
}

/* Modal Overlay */
.video-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(8, 7, 7, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: fadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal-backdrop[hidden] {
  display: none !important;
}

@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.video-modal-container {
  position: relative;
  max-width: 900px;
  width: 100%;
  background: #121010;
  border: 1px solid rgba(205, 65, 43, 0.4);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(205, 65, 43, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.video-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(237, 232, 224, 0.3);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.video-modal-close:hover {
  background: #cd412b;
  border-color: #cd412b;
  transform: scale(1.1);
}

.video-modal-body video {
  width: 100%;
  max-height: 70vh;
  display: block;
  background: #000;
}

.video-modal-caption {
  padding: 14px 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #f0e8df;
  background: rgba(18, 16, 16, 0.95);
  border-top: 1px solid rgba(237, 232, 224, 0.1);
  text-align: center;
}

/* Phase 2 Styling */
.bot-checking-phase2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 12px;
}

.btn-back-phase1 {
  background: transparent;
  border: none;
  color: rgba(237, 232, 224, 0.7);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0;
  transition: color 0.18s ease;
}

.btn-back-phase1:hover {
  color: #cd412b;
}

.friends-selection-menu {
  background: rgba(12, 11, 11, 0.7);
  border: 1px solid rgba(237, 232, 224, 0.15);
  padding: 16px 20px;
  border-radius: 4px;
}

.friends-menu-subtext {
  font-size: 13px;
  color: rgba(237, 232, 224, 0.65);
  margin-bottom: 14px;
}

.friends-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friends-menu-loading {
  font-size: 13px;
  color: rgba(237, 232, 224, 0.5);
  font-style: italic;
}

.friend-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(237, 232, 224, 0.12);
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.friend-card-item:hover {
  background: rgba(205, 65, 43, 0.12);
  border-color: rgba(205, 65, 43, 0.4);
}

.friend-card-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid rgba(237, 232, 224, 0.2);
}

.friend-name {
  font-size: 14px;
  font-weight: 600;
  color: #f0e8df;
}

/* FIX CSS DISPLAY OVERRIDE ON HIDDEN ATTRIBUTES */
[hidden],
.bot-checking-phase2[hidden],
.bot-checking-phase1[hidden],
#tradeLinkBlock[hidden],
#drawer-bot-checking[hidden] {
  display: none !important;
}

/* Inventory Section */
.inventory-section { margin-top: 24px; }
.inventory-section[hidden] { display: none !important; }

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}

.inventory-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 8px 4px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.inventory-item:hover { background: rgba(255,255,255,.08); border-color: rgba(205,65,43,.4); }
.inventory-item.is-selected { background: rgba(205,65,43,.15); border-color: var(--red); }

.inventory-item-img { width: 64px; height: 64px; object-fit: contain; border-radius: 4px; }
.inventory-item-name {
  font-size: 10px;
  text-align: center;
  color: var(--silk);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  max-width: 80px;
}

.inventory-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.inventory-selected-count {
  font-size: 13px;
  color: var(--silk);
}

.btn-rust-send {
  padding: 10px 24px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .05em;
  cursor: pointer;
  transition: opacity .2s;
}
.btn-rust-send:disabled { opacity: .4; cursor: not-allowed; }
.btn-rust-send:not(:disabled):hover { opacity: .85; }

/* Friend card selected state */
.friend-card-item.is-selected { border-color: var(--red) !important; background: rgba(205,65,43,.08) !important; }

/* ========================================================================== 
   ACCOUNT CHECKING — CLAN SYSTEM UI ALIGNMENT
   Visual overrides only. Existing markup, states and JavaScript hooks remain
   unchanged.
   ========================================================================== */

.account-checking-page .clan-app > .dashboard-bg {
  transform: scale(1.035);
  filter: blur(5px) saturate(.62) contrast(1.08) brightness(.62);
  object-position: center;
}

.account-checking-page .dashboard-tint {
  background: rgba(36, 27, 23, .72);
}

.account-checking-page .account-checking-panel {
  width: min(1120px, calc(100% - 72px));
  margin-inline: auto;
  padding-top: 28px;
  padding-bottom: 44px;
}

.account-checking-page .account-checking-heading {
  margin: 0 0 22px;
  font-size: clamp(42px, 4vw, 56px);
  line-height: .92;
  letter-spacing: .012em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}

.account-checking-page .account-checking-columns,
.account-checking-page .account-checking-row-main {
  grid-template-columns: minmax(0, 1fr) 150px;
}

.account-checking-page .account-checking-columns {
  min-height: 30px;
  padding: 0 20px;
  color: rgba(224, 214, 205, .62);
  font-size: 12px;
  letter-spacing: .11em;
}

.account-checking-page .account-checking-list {
  gap: 4px;
}

.account-checking-page .account-checking-row {
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(78, 61, 54, .72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .055) inset,
              0 -1px 0 rgba(0, 0, 0, .28) inset;
  transition: background-color .18s ease, opacity .22s ease;
}

.account-checking-page .account-checking-row:hover {
  transform: none;
  background: rgba(90, 69, 60, .8);
}

.account-checking-page .account-checking-row.is-checking {
  background: rgba(112, 83, 72, .86);
}

.account-checking-page .account-checking-row.is-passed,
.account-checking-page .account-checking-row.is-complete {
  background: rgba(55, 69, 55, .78);
}

.account-checking-page .account-checking-row-main {
  min-height: 64px;
  padding: 0 20px;
  align-items: center;
}

.account-checking-page .account-checking-name,
.account-checking-page .account-checking-state {
  font-family: var(--display);
  text-transform: uppercase;
}

.account-checking-page .account-checking-name {
  font-size: 18px;
  letter-spacing: .035em;
}

.account-checking-page .account-checking-state {
  justify-self: end;
  text-align: right;
  font-size: 15px;
  letter-spacing: .075em;
}

.account-checking-page .account-checking-progress {
  height: 3px;
  background: rgba(0, 0, 0, .28);
}

.account-checking-page .account-checking-progress-bar {
  background: var(--red);
  box-shadow: none;
}

.account-checking-page .account-checking-drawer {
  margin: 0;
  padding: 18px 22px 22px;
  border: 0;
  border-radius: 0;
  background: rgba(27, 23, 21, .97);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) inset;
}

.account-checking-page .drawer-header {
  margin: 0 0 16px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(230, 219, 210, .13);
}

.account-checking-page .drawer-title {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .035em;
}

.account-checking-page .drawer-description,
.account-checking-page .drawer-copy,
.account-checking-page .drawer-status {
  max-width: 760px;
  color: rgba(229, 219, 210, .76);
  font-family: var(--body);
  line-height: 1.55;
}

.account-checking-page .drawer-instructions {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  counter-reset: checking-instruction;
}

.account-checking-page .drawer-instructions li {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 42px;
  border: 0;
  border-bottom: 1px solid rgba(230, 219, 210, .09);
  border-radius: 0;
  background: rgba(255, 255, 255, .025);
  counter-increment: checking-instruction;
}

.account-checking-page .drawer-instructions li::before {
  content: counter(checking-instruction, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--red);
  font-family: var(--display);
  letter-spacing: .06em;
}

.account-checking-page .drawer-gallery,
.account-checking-page .video-gallery {
  gap: 10px;
  margin-top: 16px;
}

.account-checking-page .gallery-item,
.account-checking-page .video-item,
.account-checking-page .trade-link-block,
.account-checking-page .friends-selection-menu,
.account-checking-page .friend-card-item,
.account-checking-page .inventory-item {
  border-radius: 0;
  box-shadow: none;
}

.account-checking-page .gallery-item,
.account-checking-page .video-item {
  overflow: hidden;
  border: 1px solid rgba(232, 222, 213, .12);
  background: rgba(10, 9, 9, .7);
  transition: border-color .18s ease, background-color .18s ease;
}

.account-checking-page .gallery-item:hover,
.account-checking-page .video-item:hover {
  transform: none;
  border-color: rgba(205, 65, 43, .72);
}

.account-checking-page .gallery-item img,
.account-checking-page .video-item video,
.account-checking-page .video-item img {
  border-radius: 0;
}

.account-checking-page .trade-link-block,
.account-checking-page .friends-selection-menu {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(232, 222, 213, .12);
  background: rgba(255, 255, 255, .025);
}

.account-checking-page input,
.account-checking-page .trade-link-input {
  min-height: 42px;
  border: 1px solid rgba(232, 222, 213, .18);
  border-radius: 0;
  background: rgba(9, 8, 8, .72);
  color: var(--pearl);
  box-shadow: none;
}

.account-checking-page input:focus,
.account-checking-page .trade-link-input:focus {
  border-color: var(--red);
  outline: 0;
  box-shadow: 0 0 0 1px rgba(205, 65, 43, .22);
}

.account-checking-page .friend-card-item {
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(232, 222, 213, .1);
  background: rgba(255, 255, 255, .025);
  transition: background-color .18s ease;
}

.account-checking-page .friend-card-item:hover {
  transform: none;
  background: rgba(255, 255, 255, .055);
}

.account-checking-page .friend-card-item.is-selected {
  border-color: rgba(205, 65, 43, .55) !important;
  background: rgba(205, 65, 43, .13) !important;
}

.account-checking-page .inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 5px;
}

.account-checking-page .inventory-item {
  min-height: 112px;
  padding: 8px 5px;
  border: 1px solid rgba(232, 222, 213, .1);
  background: rgba(255, 255, 255, .025);
}

.account-checking-page .inventory-item:hover {
  transform: none;
  border-color: rgba(205, 65, 43, .5);
  background: rgba(255, 255, 255, .055);
}

.account-checking-page .inventory-item.is-selected {
  border-color: var(--red);
  background: rgba(205, 65, 43, .15);
}

.account-checking-page .inventory-item-img {
  border-radius: 0;
}

.account-checking-page .checking-next-btn,
.account-checking-page .btn-rust,
.account-checking-page .btn-rust-primary,
.account-checking-page .btn-rust-secondary,
.account-checking-page .btn-rust-send,
.account-checking-page button[class*="btn-"] {
  min-height: 42px;
  padding: 9px 20px;
  border: 0;
  border-radius: 0;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}

.account-checking-page .checking-next-btn:hover,
.account-checking-page .btn-rust:hover,
.account-checking-page .btn-rust-primary:hover,
.account-checking-page .btn-rust-secondary:hover,
.account-checking-page .btn-rust-send:not(:disabled):hover,
.account-checking-page button[class*="btn-"]:hover {
  transform: none;
  box-shadow: none;
}

.account-checking-page .btn-rust-secondary {
  background: #3a302c;
  color: var(--pearl);
}

.account-checking-page .video-modal-backdrop {
  background: rgba(7, 6, 6, .9);
  backdrop-filter: blur(2px);
}

.account-checking-page .video-modal-container {
  border: 1px solid rgba(232, 222, 213, .15);
  border-radius: 0;
  background: #171311;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .55);
}

.account-checking-page .video-modal-close {
  border-radius: 0;
  background: var(--red);
  box-shadow: none;
}

.account-checking-page .video-modal-close:hover {
  transform: none;
  background: #b83826;
}

@media (max-width: 720px) {
  .account-checking-page .account-checking-panel {
    width: min(100% - 28px, 1120px);
    padding-top: 20px;
    padding-bottom: 28px;
  }

  .account-checking-page .account-checking-heading {
    margin-bottom: 18px;
    font-size: 40px;
  }

  .account-checking-page .account-checking-columns,
  .account-checking-page .account-checking-row-main {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .account-checking-page .account-checking-columns,
  .account-checking-page .account-checking-row-main {
    padding-inline: 14px;
  }

  .account-checking-page .account-checking-name {
    font-size: 16px;
  }

  .account-checking-page .account-checking-state {
    font-size: 13px;
  }

  .account-checking-page .account-checking-drawer {
    padding: 16px 14px 18px;
  }

  .account-checking-page .drawer-gallery,
  .account-checking-page .video-gallery {
    grid-template-columns: 1fr;
  }

  .account-checking-page .trade-link-block,
  .account-checking-page .friends-selection-menu {
    padding: 12px;
  }

  .account-checking-page .inventory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ========================================================================== 
   ACCOUNT CHECKING — CLEAN VIDEO VIEW
   Borderless previews and lightbox, fewer controls, quieter supporting layer.
   ========================================================================== */

.account-checking-page .account-checking-drawer {
  background: rgba(31, 24, 21, .78);
}

.account-checking-page .video-gallery {
  margin-top: 0;
}

.account-checking-page .video-gallery .video-item {
  gap: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.account-checking-page .video-gallery .video-item:hover {
  border: 0;
  background: transparent;
}

.account-checking-page .video-item video {
  background: rgba(12, 10, 9, .56);
  transition: filter .18s ease, opacity .18s ease;
}

.account-checking-page .video-item:hover video {
  filter: brightness(1.07);
  transform: none;
}

.account-checking-page .video-play-overlay {
  display: none;
}

.account-checking-page .video-item figcaption {
  min-height: 44px;
  padding: 0 0 10px;
  align-items: flex-start;
  background: transparent;
}

.account-checking-page .bot-gate-next-container {
  margin-top: 22px;
}

.account-checking-page .btn-gate-next {
  min-width: 190px;
  min-height: 52px;
  padding-inline: 34px;
  font-size: 20px;
}

.account-checking-page .btn-back-phase1 {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(229, 219, 210, .62);
  font-family: Arial, sans-serif;
  font-size: 27px;
  line-height: 1;
}

.account-checking-page .btn-back-phase1::before {
  content: none;
}

.account-checking-page .video-modal-backdrop {
  padding: 3vw;
  background: rgba(10, 8, 7, .92);
  backdrop-filter: none;
}

.account-checking-page .video-modal-container {
  width: min(1280px, 94vw);
  max-height: 92vh;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.account-checking-page .video-modal-body {
  background: transparent;
}

.account-checking-page .video-modal-body video {
  display: block;
  width: 100%;
  max-height: 88vh;
  border: 0;
  background: transparent;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .38);
}



@media (max-width: 720px) {
  .account-checking-page .account-checking-drawer {
    background: rgba(31, 24, 21, .84);
  }

  .account-checking-page .video-item figcaption {
    padding-top: 9px;
  }

  .account-checking-page .btn-gate-next {
    min-height: 54px;
    font-size: 21px;
  }
}

.account-checking-page button.btn-gate-next {
  min-width: 190px;
  min-height: 52px;
  padding-inline: 34px;
  font-size: 20px;
}

.account-checking-page button.btn-back-phase1 {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(229, 219, 210, .62);
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 27px;
  line-height: 1;
}

@media (max-width: 720px) {
  .account-checking-page button.btn-gate-next {
    min-height: 54px;
    font-size: 21px;
  }
}

/* Compact, explicit return action for the trade setup view. */
.account-checking-page button.btn-back-phase1 {
  width: auto;
  min-width: 96px;
  min-height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(235, 226, 217, .8);
  background: rgba(82, 69, 63, .68);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .07em;
}

.account-checking-page button.btn-back-phase1:hover {
  color: rgba(241, 233, 225, .96);
  background: rgba(104, 86, 77, .82);
}

.account-checking-page .phase2-header {
  margin-bottom: 26px;
}

/* ========================================================================== 
   ACCOUNT CHECKING — MOTION SYSTEM
   Short, purposeful motion using transform and opacity only.
   ========================================================================== */

.account-checking-page {
  --ac-ease-out: cubic-bezier(.23, 1, .32, 1);
  --ac-ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

@keyframes ac-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ac-drawer-in {
  from { opacity: 0; transform: translateY(-8px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ac-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ac-modal-video-in {
  from { opacity: 0; transform: scale(.975); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ac-checking-pulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

.account-checking-page .clan-tabs {
  animation: ac-rise-in 260ms var(--ac-ease-out) both;
}

.account-checking-page .account-checking-heading {
  animation: ac-rise-in 280ms 45ms var(--ac-ease-out) both;
}

.account-checking-page .account-checking-columns {
  animation: ac-rise-in 240ms 85ms var(--ac-ease-out) both;
}

.account-checking-page .account-checking-row {
  transition: background-color 180ms ease,
              box-shadow 180ms ease,
              transform 180ms var(--ac-ease-out),
              opacity 180ms ease;
}

.account-checking-page .account-checking-row.is-checking .account-checking-state {
  animation: ac-checking-pulse 1.55s ease-in-out infinite;
}

.account-checking-page .account-checking-drawer:not([hidden]) {
  transform-origin: top center;
  animation: ac-drawer-in 230ms var(--ac-ease-drawer) both;
}

.account-checking-page .account-checking-drawer:not([hidden]) .video-item {
  animation: ac-rise-in 240ms var(--ac-ease-out) both;
}

.account-checking-page .account-checking-drawer:not([hidden]) .video-item:nth-child(1) {
  animation-delay: 35ms;
}

.account-checking-page .account-checking-drawer:not([hidden]) .video-item:nth-child(2) {
  animation-delay: 80ms;
}

.account-checking-page .account-checking-drawer:not([hidden]) .video-item:nth-child(3) {
  animation-delay: 125ms;
}

.account-checking-page .account-checking-drawer:not([hidden]) .video-item:nth-child(4) {
  animation-delay: 170ms;
}

.account-checking-page .bot-checking-phase2:not([hidden]) > * {
  animation: ac-rise-in 230ms var(--ac-ease-out) both;
}

.account-checking-page .bot-checking-phase2:not([hidden]) > :nth-child(2) {
  animation-delay: 45ms;
}

.account-checking-page .bot-checking-phase2:not([hidden]) > :nth-child(3) {
  animation-delay: 90ms;
}

.account-checking-page .video-modal-backdrop:not([hidden]) {
  animation: ac-modal-backdrop-in 180ms ease-out both;
}

.account-checking-page .video-modal-backdrop:not([hidden]) .video-modal-container {
  transform-origin: center;
  animation: ac-modal-video-in 240ms var(--ac-ease-out) both;
}

.account-checking-page .clan-tabs button,
.account-checking-page button.btn-gate-next,
.account-checking-page button.btn-back-phase1,
.account-checking-page button.btn-save-trade-link,
.account-checking-page button.btn-rust-send {
  transition: background-color 180ms ease,
              color 180ms ease,
              opacity 180ms ease,
              transform 130ms var(--ac-ease-out);
}

.account-checking-page button.btn-gate-next:not(:disabled):active,
.account-checking-page button.btn-back-phase1:active,
.account-checking-page button.btn-save-trade-link:active,
.account-checking-page button.btn-rust-send:not(:disabled):active {
  transform: scale(.97);
}

.account-checking-page .bot-gate-next-container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.account-checking-page button.btn-gate-next {
  order: initial;
}

.account-checking-page .gate-waiting-text {
  order: initial;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .account-checking-page .account-checking-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(10, 8, 7, .13);
  }

  .account-checking-page .video-gallery .video-item:hover {
    transform: translateY(-2px);
  }

  .account-checking-page .clan-tabs button:not(.active):hover {
    background: rgba(74, 59, 52, .78);
    color: rgba(239, 231, 223, .86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-checking-page .clan-tabs,
  .account-checking-page .account-checking-heading,
  .account-checking-page .account-checking-columns,
  .account-checking-page .account-checking-drawer:not([hidden]),
  .account-checking-page .account-checking-drawer:not([hidden]) .video-item,
  .account-checking-page .bot-checking-phase2:not([hidden]) > *,
  .account-checking-page .video-modal-backdrop:not([hidden]),
  .account-checking-page .video-modal-backdrop:not([hidden]) .video-modal-container {
    animation-duration: 120ms;
    animation-delay: 0ms;
    animation-name: ac-modal-backdrop-in;
  }

  .account-checking-page .account-checking-row.is-checking .account-checking-state {
    animation: none;
  }

  .account-checking-page .account-checking-row,
  .account-checking-page .video-gallery .video-item,
  .account-checking-page button {
    transform: none !important;
  }
}

/* ========================================================================== 
   ACCOUNT CHECKING — SPACIOUS GUIDANCE PASS
   One visual layer, clearer copy, larger videos and calmer secondary actions.
   ========================================================================== */

.account-checking-page .account-checking-panel {
  width: min(1240px, calc(100% - 64px));
}

.account-checking-page .account-checking-columns span:last-child {
  justify-self: end;
  transform: translateX(10px);
  text-align: right;
}

.account-checking-page .account-checking-state {
  transform: translateX(10px);
}

.account-checking-page .account-checking-row:not(:has(.account-checking-drawer:not([hidden]))) {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

.account-checking-page .account-checking-drawer {
  gap: 24px;
  padding: 28px 30px 34px;
  background: rgba(31, 24, 21, .96);
  box-shadow: none;
  animation: drawer-reveal .2s cubic-bezier(.22, 1, .36, 1);
}

@keyframes drawer-reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.account-checking-page .drawer-header {
  margin: 0;
  padding: 0;
  border: 0;
}

.account-checking-page .drawer-title {
  max-width: 28ch;
  font-size: clamp(28px, 2.2vw, 36px);
  line-height: 1.02;
}

.account-checking-page .drawer-description {
  max-width: 68ch;
  margin-top: -12px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(232, 222, 213, .78);
}

.account-checking-page .drawer-section {
  gap: 14px;
}

.account-checking-page .drawer-section + .drawer-section {
  margin-top: 8px;
}

.account-checking-page .drawer-section-title,
.account-checking-page .trade-link-label {
  color: rgba(239, 231, 223, .9);
  font-size: 17px;
  letter-spacing: .085em;
}

.account-checking-page .drawer-steps-list {
  max-width: 76ch;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: drawer-step;
}

.account-checking-page .drawer-steps-list li {
  position: relative;
  margin: 0;
  padding: 11px 0 11px 42px;
  border: 0;
  color: rgba(231, 221, 212, .78);
  font-size: 14px;
  line-height: 1.55;
  counter-increment: drawer-step;
}

.account-checking-page .drawer-steps-list li::before {
  content: counter(drawer-step, decimal-leading-zero);
  position: absolute;
  top: 9px;
  left: 0;
  color: rgba(217, 77, 54, .9);
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .06em;
}

.account-checking-page .drawer-gallery {
  margin-top: 0;
}

.account-checking-page .gallery-item {
  width: min(100%, 720px);
  max-width: none;
  padding: 0;
  border: 0;
  background: rgba(14, 12, 11, .72);
}

.account-checking-page .gallery-item img {
  max-height: 420px;
  border: 0;
}

.account-checking-page .gallery-item figcaption {
  padding: 11px 14px 13px;
  color: rgba(230, 220, 211, .7);
  font-size: 13px;
}

.account-checking-page .video-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  counter-reset: video-step;
}

.account-checking-page .video-gallery .video-item {
  width: 100%;
  counter-increment: video-step;
  background: rgba(15, 13, 12, .82);
}

.account-checking-page .video-item video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
}

.account-checking-page .video-item figcaption {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 14px;
}

.account-checking-page .video-item figcaption::before {
  content: counter(video-step, decimal-leading-zero);
  flex: 0 0 auto;
  color: var(--red);
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .05em;
}

.account-checking-page .video-play-overlay {
  top: calc(50% - 25px);
  width: 54px;
  height: 54px;
  color: rgba(240, 232, 224, .86);
  background: rgba(22, 18, 16, .72);
  text-shadow: none;
}

.account-checking-page .video-item:hover .video-play-overlay {
  color: rgba(240, 232, 224, .96);
  transform: translate(-50%, -50%);
}

.account-checking-page .bot-gate-next-container {
  min-height: 66px;
  margin-top: 8px;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border: 0;
  background: transparent;
}

.account-checking-page .btn-gate-next {
  order: 2;
  min-width: 150px;
  background: var(--red);
}

.account-checking-page .btn-gate-next:disabled {
  opacity: 1;
  color: rgba(226, 216, 207, .42);
  background: rgba(79, 68, 62, .72);
  filter: none;
}

.account-checking-page .gate-waiting-text {
  max-width: 56ch;
  color: rgba(226, 216, 207, .6);
  font-style: normal;
  line-height: 1.5;
}

.account-checking-page .bot-checking-phase2 {
  gap: 0;
  margin-top: 0;
}

.account-checking-page .phase2-header {
  margin-bottom: 20px;
}

.account-checking-page .btn-back-phase1 {
  position: relative;
  min-height: 32px;
  padding: 0 0 0 22px;
  color: rgba(225, 215, 206, .55);
  background: transparent;
  font-size: 14px;
  letter-spacing: .06em;
}

.account-checking-page .btn-back-phase1::before {
  content: '‹';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-53%);
  color: currentColor;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
}

.account-checking-page .btn-back-phase1:hover {
  color: rgba(239, 231, 223, .9);
  background: transparent;
}

.account-checking-page .phase2-intro {
  margin-bottom: 30px;
}

.account-checking-page .phase2-intro .friends-menu-subtext {
  margin: 7px 0 0;
}

.account-checking-page .trade-link-block,
.account-checking-page .friends-selection-menu,
.account-checking-page .inventory-section {
  margin: 0;
  padding: 26px 0;
  border: 0;
  border-top: 1px solid rgba(232, 222, 213, .1);
  background: transparent;
}

.account-checking-page .trade-link-input-wrapper {
  margin-top: 10px;
  gap: 8px;
}

.account-checking-page .trade-link-input {
  min-height: 48px;
  padding-inline: 15px;
  border-color: rgba(232, 222, 213, .16);
  background: rgba(14, 12, 11, .68);
}

.account-checking-page .btn-save-trade-link {
  min-width: 110px;
  color: rgba(239, 231, 223, .9);
  background: rgba(91, 76, 69, .86);
}

.account-checking-page .btn-save-trade-link:hover {
  background: rgba(110, 91, 82, .96);
}

.account-checking-page .friends-menu-subtext {
  max-width: 65ch;
  margin: 7px 0 18px;
  color: rgba(230, 220, 211, .62);
  font-size: 14px;
  line-height: 1.55;
}

.account-checking-page .friends-menu-list {
  gap: 2px;
}

.account-checking-page .friends-menu-loading {
  padding: 16px 0;
  color: rgba(230, 220, 211, .52);
  font-style: normal;
}

.account-checking-page .friend-card-item {
  min-height: 64px;
  padding: 10px 12px;
  border: 0;
  background: rgba(255, 255, 255, .025);
}

.account-checking-page .inventory-grid {
  gap: 8px;
  padding: 0;
}

.account-checking-page .inventory-item {
  border-color: transparent;
  background: rgba(255, 255, 255, .035);
}

.account-checking-page .inventory-actions {
  margin-top: 20px;
  padding-top: 0;
  border: 0;
}

.account-checking-page .btn-rust-send:disabled {
  opacity: 1;
  color: rgba(226, 216, 207, .42);
  background: rgba(79, 68, 62, .72);
}

@media (max-width: 720px) {
  .account-checking-page .account-checking-panel {
    width: min(100% - 28px, 1240px);
  }

  .account-checking-page .account-checking-columns span:last-child,
  .account-checking-page .account-checking-state {
    transform: translateX(4px);
  }

  .account-checking-page .account-checking-drawer {
    gap: 20px;
    padding: 22px 16px 28px;
  }

  .account-checking-page .drawer-description {
    margin-top: -10px;
    font-size: 14px;
  }

  .account-checking-page .video-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .account-checking-page .bot-gate-next-container {
    align-items: stretch;
    flex-direction: column;
  }

  .account-checking-page .btn-gate-next {
    order: initial;
    width: 100%;
  }

  .account-checking-page .trade-link-input-wrapper {
    flex-direction: column;
  }

  .account-checking-page .btn-save-trade-link {
    width: 100%;
  }
}

/* Final clean-video overrides must remain last in the cascade. */
.account-checking-page .account-checking-drawer {
  background: rgba(31, 24, 21, .78);
}

.account-checking-page .video-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 0;
}
@media (max-width: 960px) {
  .account-checking-page .video-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .account-checking-page .video-gallery {
    grid-template-columns: 1fr;
  }
}

.account-checking-page .video-gallery .video-item,
.account-checking-page .video-gallery .video-item:hover {
  gap: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.account-checking-page .video-item video,
.account-checking-page .video-item:hover video {
  width: 100%;
  height: 160px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  transform: none;
  display: block;
}

.account-checking-page .video-play-overlay {
  display: none;
}

.account-checking-page .video-item figcaption {
  min-height: 60px;
  padding: 0 0 8px;
  align-items: flex-start;
  background: transparent;
  display: flex;
  font-size: 13px;
  line-height: 1.35;
}

.account-checking-page .video-gallery .video-item:nth-child(4) {
  transform: translateY(-10px);
}

.account-checking-page .video-gallery .video-item:nth-child(4) figcaption {
  font-size: 11.5px;
  line-height: 1.24;
  letter-spacing: -0.01em;
}

.account-checking-page .video-gallery .video-item:nth-child(4) video {
  margin-top: 8px;
}

.account-checking-page .btn-gate-next {
  min-width: 190px;
  min-height: 52px;
  padding-inline: 34px;
  font-size: 20px;
}

.account-checking-page .btn-back-phase1 {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(229, 219, 210, .62);
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 27px;
  line-height: 1;
}

.account-checking-page .btn-back-phase1::before {
  content: none;
}

.account-checking-page .video-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vw;
  background: rgba(10, 8, 7, .92);
  backdrop-filter: none;
  cursor: pointer;
}

.account-checking-page .video-modal-backdrop[hidden] {
  display: none !important;
}

.account-checking-page .video-modal-container {
  width: min(1280px, 94vw);
  max-height: 92vh;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.account-checking-page .video-modal-body {
  background: transparent;
}

.account-checking-page .video-modal-body video {
  display: block;
  width: 100%;
  max-height: 88vh;
  border: 0;
  background: transparent;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .38);
  cursor: pointer;
}

.account-checking-page .video-modal-close,
.account-checking-page .video-modal-caption {
  display: none !important;
}

@media (max-width: 720px) {
  .account-checking-page .account-checking-drawer {
    background: rgba(31, 24, 21, .84);
  }

  .account-checking-page .btn-gate-next {
    min-height: 54px;
    font-size: 21px;
  }
}

/* Final return-button treatment. */
.account-checking-page button.btn-back-phase1 {
  width: auto;
  min-width: 96px;
  min-height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(235, 226, 217, .8);
  background: rgba(82, 69, 63, .68);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .07em;
}

.account-checking-page button.btn-back-phase1:hover {
  color: rgba(241, 233, 225, .96);
  background: rgba(104, 86, 77, .82);
}

.account-checking-page .phase2-header {
  margin-bottom: 26px;
}

/* Final centered NEXT action. */
.account-checking-page .bot-gate-next-container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.account-checking-page button.btn-gate-next,
.account-checking-page .gate-waiting-text {
  order: initial;
}

.account-checking-page .gate-waiting-text {
  text-align: center;
}

/* Account access guard. */
.account-checking-page .account-access-error {
  max-width: 760px;
  margin-top: 18px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(223, 74, 54, .7);
  border-top-width: 2px;
  background: rgba(104, 29, 24, .72);
  color: rgba(255, 243, 238, .96);
}

.account-checking-page .account-access-error[hidden] {
  display: none !important;
}

.account-checking-page .account-access-error-icon {
  flex: 0 0 auto;
  color: rgba(255, 132, 111, .96);
  font-size: 38px;
}

.account-checking-page .account-access-error h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}

.account-checking-page .account-access-error p {
  margin: 9px 0 0;
  color: rgba(255, 224, 217, .82);
  font: 600 14px/1.45 'Open Sans', sans-serif;
  letter-spacing: .08em;
}

@media (max-width: 720px) {
  .account-checking-page .account-access-error {
    align-items: flex-start;
    padding: 20px 18px;
  }

  .account-checking-page .account-access-error h3 {
    font-size: 25px;
  }
}

/* Progressive Bot Checking steps. */
.account-checking-page .friends-search-wrapper {
  margin: 14px 0 12px;
}

.account-checking-page .friends-search-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(232, 222, 213, .16);
  border-radius: 0;
  outline: 0;
  background: rgba(12, 11, 11, .58);
  color: rgba(244, 237, 230, .94);
  font: 600 13px/1.35 'Open Sans', sans-serif;
  letter-spacing: .055em;
}

.account-checking-page .friends-search-input::placeholder {
  color: rgba(224, 214, 205, .42);
}

.account-checking-page .friends-search-input:focus {
  border-color: rgba(205, 65, 43, .78);
  box-shadow: 0 0 0 2px rgba(205, 65, 43, .14);
}

.account-checking-page .friends-menu-list {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.account-checking-page .friends-menu-list,
.account-checking-page .inventory-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(205, 65, 43, .82) rgba(18, 15, 14, .72);
  scrollbar-gutter: stable;
}

.account-checking-page .friends-menu-list::-webkit-scrollbar,
.account-checking-page .inventory-grid::-webkit-scrollbar {
  width: 10px;
}

.account-checking-page .friends-menu-list::-webkit-scrollbar-track,
.account-checking-page .inventory-grid::-webkit-scrollbar-track {
  background: rgba(18, 15, 14, .72);
}

.account-checking-page .friends-menu-list::-webkit-scrollbar-thumb,
.account-checking-page .inventory-grid::-webkit-scrollbar-thumb {
  border: 2px solid rgba(18, 15, 14, .72);
  background: rgba(205, 65, 43, .82);
}

.account-checking-page .friends-menu-list::-webkit-scrollbar-thumb:hover,
.account-checking-page .inventory-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(229, 74, 51, .96);
}

.account-checking-page .inventory-item-img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: rgba(13, 11, 10, .36);
}

.account-checking-page .inventory-actions {
  flex-wrap: wrap;
  gap: 12px;
}

.account-checking-page .btn-select-all-items {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid rgba(232, 222, 213, .18);
  background: rgba(79, 68, 62, .72);
  color: rgba(244, 237, 230, .92);
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .075em;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 130ms cubic-bezier(.16, 1, .3, 1);
}

.account-checking-page .btn-select-all-items:hover {
  border-color: rgba(205, 65, 43, .62);
  background: rgba(104, 55, 46, .84);
}

.account-checking-page .btn-select-all-items:active {
  transform: scale(.97);
}

@media (max-width: 720px) {
  .account-checking-page .friends-menu-list {
    max-height: 300px;
  }

  .account-checking-page .inventory-actions {
    align-items: stretch;
  }

  .account-checking-page .btn-select-all-items,
  .account-checking-page .btn-rust-send {
    flex: 1 1 150px;
  }

  .account-checking-page .inventory-selected-count {
    flex: 1 0 100%;
  }
}

/* Post-trade verification instructions. */
.account-checking-page .post-trade-waiting-panel {
  min-width: 0;
  color: rgba(239, 231, 223, .92);
}

.account-checking-page .post-trade-waiting-panel[hidden],
.account-checking-page .post-trade-accordion-content[hidden] {
  display: none !important;
}

.account-checking-page .post-trade-waiting-status {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(232, 222, 213, .15);
  border-bottom: 0;
  background: rgba(13, 11, 10, .42);
}

.account-checking-page .post-trade-spinner {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 2px solid rgba(232, 222, 213, .18);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: post-trade-spin 900ms linear infinite;
}

.account-checking-page .post-trade-status-copy h4,
.account-checking-page .post-trade-status-copy p {
  margin: 0;
}

.account-checking-page .post-trade-status-copy h4 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .055em;
}

.account-checking-page .post-trade-status-copy p {
  margin-top: 4px;
  color: rgba(230, 220, 211, .6);
  font-size: 13px;
  line-height: 1.45;
}

.account-checking-page .post-trade-progress-rail {
  height: 3px;
  overflow: hidden;
  background: rgba(205, 65, 43, .16);
}

.account-checking-page .post-trade-progress-rail span {
  display: block;
  width: 42%;
  height: 100%;
  background: var(--red);
}

.account-checking-page .post-trade-accordions {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.account-checking-page .post-trade-accordion {
  min-width: 0;
  border: 1px solid rgba(232, 222, 213, .15);
  background: rgba(17, 14, 13, .54);
}

.account-checking-page .post-trade-accordion-heading {
  margin: 0;
}

.account-checking-page .post-trade-accordion-toggle {
  width: 100%;
  min-height: 56px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  border-left: 3px solid var(--red);
  border-radius: 0;
  background: rgba(50, 39, 35, .64);
  color: rgba(244, 237, 230, .96);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .035em;
  text-align: left;
  cursor: pointer;
}

.account-checking-page .post-trade-accordion-toggle:hover,
.account-checking-page .post-trade-accordion-toggle:focus-visible {
  background: rgba(68, 48, 42, .76);
}

.account-checking-page .post-trade-accordion-toggle:focus-visible {
  outline: 2px solid rgba(205, 65, 43, .9);
  outline-offset: -3px;
}

.account-checking-page .post-trade-accordion-arrow {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms ease;
}

.account-checking-page .post-trade-accordion-toggle[aria-expanded="false"] .post-trade-accordion-arrow {
  transform: rotate(-45deg);
}

.account-checking-page .post-trade-accordion-content {
  padding: 18px;
  border-top: 1px solid rgba(232, 222, 213, .1);
}

.account-checking-page .post-trade-instruction-image {
  width: 100%;
  height: auto;
  border: 1px solid rgba(232, 222, 213, .12);
  background: rgba(8, 7, 7, .35);
}

.account-checking-page .post-trade-cancel-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
  gap: 22px;
}

.account-checking-page .post-trade-cancel-copy {
  min-width: 0;
}

.account-checking-page .post-trade-cancel-copy h5 {
  margin: 0 0 12px;
  color: var(--red);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .035em;
}

.account-checking-page .post-trade-cancel-copy p {
  margin: 0 0 12px;
  color: rgba(230, 220, 211, .72);
  font-size: 14px;
  line-height: 1.58;
}

.account-checking-page .post-trade-cancel-copy .post-trade-alert {
  margin: 18px 0 0;
  padding: 13px 14px;
  border-left: 3px solid var(--red);
  background: rgba(140, 48, 34, .18);
  color: #e2a36f;
  font-weight: 700;
}

.account-checking-page .post-trade-video-wrap {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 222, 213, .14);
  background: #0c0b0b;
}

.account-checking-page .post-trade-video-wrap video {
  width: 100%;
  height: auto;
}

@keyframes post-trade-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .account-checking-page .post-trade-cancel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .account-checking-page .post-trade-waiting-panel {
    scroll-margin-top: 96px;
  }

  .account-checking-page .post-trade-waiting-status {
    padding: 16px;
  }

  .account-checking-page .post-trade-accordion-toggle {
    min-height: 48px;
    padding: 12px 13px;
    gap: 14px;
    font-size: 17px;
  }

  .account-checking-page .post-trade-accordion-content {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-checking-page .post-trade-spinner {
    animation: none;
  }

  .account-checking-page .post-trade-accordion-arrow {
    transition: none;
  }
}

/* ==========================================================================
   ACCOUNT CHECKING — UNOFFICIAL BADGE, DEMO MARKERS, DATA-DRIVEN STATES, FOOTER
   ========================================================================== */

/* UNOFFICIAL fan-project badge (same visual language as landing.css) */
.badge-unofficial {
  display: inline-flex;
  align-items: center;
  align-self: center;
  background: rgba(206, 66, 43, .18);
  border: 1px solid rgba(206, 66, 43, .5);
  color: #ff6e54;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-checking-page .sidebar-unofficial-badge {
  align-self: center;
  margin: -6px 0 0;
}

/* Per-row status cell: status text + optional ДЕМО badge */
.checking-state-wrap {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.checking-state-demo {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(224, 160, 48, .16);
  border: 1px solid rgba(224, 160, 48, .62);
  color: #ecb45c;
  font-family: var(--display);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.checking-state-demo[hidden] { display: none !important; }

/* Honest data-driven status colors */
.account-checking-page .account-checking-state.state-pass { color: #a8c86a; }
.account-checking-page .account-checking-state.state-fail { color: #ff6a52; }
.account-checking-page .account-checking-state.state-warn { color: #e0a030; }
.account-checking-page .account-checking-state.state-nodata,
.account-checking-page .account-checking-state.state-skipped { color: rgba(237, 232, 224, .45); }

/* Row tint per outcome (class names come from JS: is-pass / is-fail / is-warn) */
.account-checking-page .account-checking-row.is-pass { background: rgba(55, 69, 55, .78); }
.account-checking-page .account-checking-row.is-fail { background: rgba(118, 44, 36, .78); }
.account-checking-page .account-checking-row.is-warn { background: rgba(116, 89, 50, .76); }
.account-checking-page .account-checking-row.is-nodata,
.account-checking-page .account-checking-row.is-skipped { background: rgba(66, 54, 48, .62); }

/* Progress bar: indeterminate scan while the real request is in flight,
   then a final state-colored fill. No timed fake completion. */
.account-checking-progress-bar.is-pending {
  width: 34%;
  transform: none;
  animation: checking-progress-scan 1.1s ease-in-out infinite alternate;
}

@keyframes checking-progress-scan {
  from { transform: translateX(-30%); }
  to { transform: translateX(300%); }
}

.account-checking-progress-bar.is-done { transform: scaleX(1); }
.account-checking-progress-bar.is-done-pass { background: #7fae4a; }
.account-checking-progress-bar.is-done-fail { background: #d9291a; }
.account-checking-progress-bar.is-done-warn { background: #e0a030; }
.account-checking-progress-bar.is-done-nodata,
.account-checking-progress-bar.is-done-skipped { background: rgba(237, 232, 224, .3); }

/* Demo notice under the panel heading */
.account-checking-page .checking-demo-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(224, 160, 48, .55);
  border-left: 3px solid #e0a030;
  background: rgba(78, 58, 26, .45);
  color: #ecd9ae;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.account-checking-page .checking-demo-notice[hidden] { display: none !important; }

/* Non-success result card (demo / partial / failed) */
.account-checking-page .account-checking-extra {
  margin-top: 7px;
  border: 1px solid rgba(232, 222, 213, .18);
  border-top: 3px solid #8b8076;
  background: rgba(24, 21, 19, .97);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
}

.account-checking-page .account-checking-extra[hidden] { display: none !important; }

.account-checking-page .account-checking-extra .drawer-tag { color: #b3a89e; }

/* Summary value colors (used by JS-rendered tiles) */
.account-checking-page .summary-val.status-pass,
.account-checking-page .summary-val.status-verified,
.account-checking-page .summary-val.status-clean,
.account-checking-page .summary-val.status-ready { color: #a8c86a; }
.account-checking-page .summary-val.status-fail { color: #ff6a52; }
.account-checking-page .summary-val.status-warn { color: #e0a030; }
.account-checking-page .summary-val.status-nodata,
.account-checking-page .summary-val.status-skipped { color: rgba(237, 232, 224, .42); }

/* Fan-project footer */
.account-checking-page .checking-footer {
  max-width: 1240px;
  margin: 34px auto 0;
  padding: 18px 20px 6px;
  border-top: 1px solid rgba(237, 232, 224, .12);
  color: rgba(214, 204, 195, .66);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 1.55;
}

.account-checking-page .checking-footer .checking-footer-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.account-checking-page .checking-footer .checking-footer-row p {
  margin: 0;
}

.account-checking-page .checking-footer .badge-unofficial {
  flex: 0 0 auto;
  margin-top: 2px;
}

.account-checking-page .checking-footer .checking-footer-note {
  margin: 8px 0 0;
  color: rgba(214, 204, 195, .52);
}

.account-checking-page .checking-footer { width: min(100%, 1240px); }

@media (max-width: 720px) {
  .account-checking-page .checking-state-wrap { gap: 3px; }
  .account-checking-page .checking-state-demo { font-size: 9px; padding: 1px 5px; }
  .account-checking-page .checking-demo-notice { align-items: flex-start; margin-top: 12px; }
  .account-checking-page .checking-footer { margin-top: 24px; padding: 14px 4px 4px; }
  .account-checking-page .checking-footer .checking-footer-row { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .account-checking-progress-bar.is-pending { animation: none; transform: none; width: 100%; opacity: .4; }
}

/* Status column alignment: shift the whole status cell, not just the text */
.account-checking-page .checking-state-wrap { transform: translateX(10px); }
.account-checking-page .checking-state-wrap .account-checking-state,
.account-checking-page .checking-state-wrap .checking-state-demo { transform: none; }

@media (max-width: 720px) {
  .account-checking-page .checking-state-wrap { transform: translateX(4px); }
}

/* SteamID64 input row (lets /api/steam/check run for a specific account) */
.account-checking-page .checking-steamid-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 14px 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(232, 222, 213, .14);
  background: rgba(14, 12, 11, .55);
}

.account-checking-page .checking-steamid-label {
  flex: 0 0 auto;
  color: rgba(239, 231, 223, .8);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .12em;
}

.account-checking-page .checking-steamid-input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(232, 222, 213, .18);
  border-radius: 0;
  outline: 0;
  background: rgba(9, 8, 8, .72);
  color: var(--pearl);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  letter-spacing: .08em;
}

.account-checking-page .checking-steamid-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(205, 65, 43, .22);
}

.account-checking-page .checking-steamid-submit {
  flex: 0 0 auto;
}

/* Error variant of the status notice (server refused the check, bad input) */
.account-checking-page .checking-demo-notice.is-error {
  border-color: rgba(223, 74, 54, .6);
  border-left-color: #d9291a;
  background: rgba(96, 30, 24, .45);
  color: #f0c8bf;
}

.account-checking-page .checking-demo-notice.is-error .checking-state-demo {
  border-color: rgba(223, 74, 54, .7);
  background: rgba(223, 74, 54, .16);
  color: #ff8570;
}

@media (max-width: 720px) {
  .account-checking-page .checking-steamid-form { margin-top: 12px; padding: 12px; }
  .account-checking-page .checking-steamid-submit { flex: 1 1 100%; }
}

/* Overflow guards: result-card header may wrap; grid tracks never force
   the panel wider than the viewport (fixes horizontal cut on phones). */
.account-checking-page .account-checking-extra .drawer-header,
.account-checking-page .account-verification-success .drawer-header { flex-wrap: wrap; }

.account-checking-page .verification-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.account-checking-page .drawer-gallery.grid-gallery {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Prevent drawers for steps 1-5 from ever expanding or being visible */
.account-checking-page .account-checking-row:not([data-step-id="bot_checking"]) .account-checking-drawer {
  display: none !important;
}

.account-checking-page .account-checking-row:not([data-step-id="bot_checking"]) .account-checking-row-main {
  cursor: default !important;
}