/* Design 003: approved futuristic account composition. Existing scenery is
   1536x1024, not native 4K. Text, panels, inputs and buttons are live HTML/CSS.
   Scoped to join; no Classic or shared account behavior is changed. */
body.c1-join{--join-cyan:#77e3ff;--join-gold:#ffda81;color:#f2f8ff;background:#04132b}
body.c1-join header{gap:18px;padding:16px 3%;flex-wrap:wrap}
body.c1-join header .brand{font-size:clamp(24px,2.3vw,40px);line-height:1.15}
body.c1-join header nav{display:flex;flex-wrap:wrap;gap:10px}
body.c1-join header nav a{display:inline-flex;align-items:center;min-height:48px;padding:8px 16px;border:1px solid var(--join-cyan);border-radius:12px;background:#08264b}
body.c1-join .login-scene{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(360px,1.3fr) minmax(240px,.75fr);align-items:start;align-content:start;gap:24px;padding:36px 3% 48px;background:linear-gradient(#03142b22,#03142b88),url('/assets/dev82-holographic/account-city-derived-v2.png') center top/cover no-repeat;min-height:calc(100vh - 160px)}
body.c1-join .login-intro{grid-column:1;grid-row:1;text-align:left;padding:20px;background:#031b37df;min-width:0}
body.c1-join .login-intro h1{font-size:clamp(30px,3vw,56px);line-height:1.08;overflow-wrap:anywhere}
body.c1-join .login-intro em{color:var(--join-gold);font-style:normal}
body.c1-join .login-intro .eyebrow{font-size:12px;letter-spacing:.12em;color:var(--join-cyan)}
body.c1-join .join-mascot{display:block;width:100%;height:auto;max-width:430px;margin:22px auto 0;filter:drop-shadow(0 0 20px #43bdff55)}
body.c1-join .join-motto{color:var(--join-gold);font-size:clamp(18px,1.6vw,26px);font-weight:700;text-align:center}
body.c1-join .login-panel{grid-column:2;grid-row:1;max-width:none;margin:0;min-width:0;padding:clamp(20px,2vw,36px);border:2px solid var(--join-cyan);border-radius:26px;background:linear-gradient(150deg,#082e53f7,#041429fa);box-shadow:0 0 0 4px #1a9add22,0 0 32px #12b5ff55,inset 0 0 30px #176a9e22}
body.c1-join .join-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--join-cyan);margin:0}
body.c1-join .login-panel h2{color:#fff;font-size:clamp(28px,2.6vw,44px);line-height:1.1;margin:10px 0}
body.c1-join .login-panel p{line-height:1.5;overflow-wrap:anywhere}
body.c1-join .login-panel form{gap:10px}
body.c1-join .login-panel :is(input,select,textarea){font-size:16px;border-color:#52cfff;min-height:48px}
body.c1-join .login-panel .check input{min-height:24px;width:24px}
body.c1-join .login-panel .check{font-size:15px}
body.c1-join .login-panel .fine{font-size:14px!important;margin:0}
body.c1-join .login-panel a{color:#9feaff;text-underline-offset:3px}
body.c1-join .login-panel .actions button{min-height:60px;font-size:clamp(19px,1.6vw,26px);border:2px solid var(--join-cyan);border-radius:14px;background:linear-gradient(#168cff,#0657c3);box-shadow:0 0 18px #0fa7ff66,inset 0 1px 0 #ffffff66}
body.c1-join .join-role-picker{min-width:0;margin:6px 0;padding:0;border:0}
body.c1-join .join-role-picker legend{font-weight:700;margin-bottom:10px}
body.c1-join .join-role-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.c1-join .join-role-tiles button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;min-height:84px;padding:10px;border:1px solid var(--join-cyan);border-radius:12px;background:linear-gradient(#0d3b66,#061c38);color:#fff;font:600 16px/1.25 system-ui;cursor:pointer;overflow-wrap:anywhere}
body.c1-join .join-role-tiles button span{font-size:26px;color:var(--join-gold)}
body.c1-join .join-role-tiles button[aria-pressed=true]{border:2px solid var(--join-gold);box-shadow:0 0 0 2px #ffd46d33,0 0 16px #ffd46d44;background:#163d68}
body.c1-join #join-role-note{font-size:14px;min-height:3em;color:#d5eaff;margin-bottom:0}
body.c1-join .join-aside{grid-column:3;grid-row:1;display:grid;gap:20px;min-width:0}
body.c1-join .join-console{border:2px solid var(--join-cyan);border-radius:22px;padding:22px;background:linear-gradient(145deg,#0b3159f5,#03162bf5);box-shadow:0 0 22px #08a9ff44}
body.c1-join .join-console h2{font-size:clamp(20px,1.7vw,29px);margin:0 0 14px;color:var(--join-gold)}
body.c1-join .join-console p{line-height:1.6;color:#d5eaff}
body.c1-join .join-console a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:12px 4px;border-top:1px solid #60cfff66;text-decoration:none;color:#fff}
body.c1-join footer a{display:inline-flex;align-items:center;min-height:44px}
body.c1-join :is(a,button,input,select,textarea):focus-visible{outline:3px solid var(--join-gold);outline-offset:3px}
body.c1-join button:hover:not(:disabled){filter:brightness(1.12)}
body.c1-join button:disabled{opacity:.65;cursor:not-allowed}
@media(min-width:2300px){body.c1-join .login-scene{padding-left:max(3%,calc((100vw - 2200px)/2));padding-right:max(3%,calc((100vw - 2200px)/2))}}
@media(max-width:1150px){body.c1-join .login-scene{grid-template-columns:minmax(0,.65fr) minmax(340px,1fr);gap:20px}body.c1-join .join-aside{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr))}body.c1-join .join-console{padding:18px}}
@media(max-width:760px){body.c1-join header{padding:14px}body.c1-join .login-scene{display:flex;flex-direction:column;padding:20px 14px 32px;background-size:auto 650px;background-color:#04132b}body.c1-join .login-intro{width:100%;padding:16px}body.c1-join .login-intro h1{font-size:32px}body.c1-join .join-mascot{display:none}body.c1-join .login-intro .join-motto{display:none}body.c1-join .login-panel{width:100%;padding:22px 18px}body.c1-join .join-aside{width:100%;grid-template-columns:1fr}body.c1-join .join-role-tiles{gap:8px}}
@media(prefers-reduced-motion:reduce){body.c1-join *{scroll-behavior:auto;transition:none}}
@media(forced-colors:active){body.c1-join .join-role-tiles button[aria-pressed=true]{outline:3px solid Highlight}}