/* Qoinomics Education — toegang en uitnodigingen */
header .brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
header .brand .brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#123c3a; color:#fff; font-size:25px; font-weight:600; line-height:1; position:relative; }
header .brand-mark > span { position:absolute; width:7px; height:7px; background:#edb77a; border:2px solid #123c3a; border-radius:3px; bottom:4px; right:3px; }
header .brand .brand-name { color:var(--ink); font-size:17px; font-weight:600; }
header .brand-name > span { color:var(--muted); font-weight:400; }
.auth-mode { background:#f4f6f3; }
.auth-mode > header { max-width:1240px; padding:28px 32px 24px; align-items:center; }
.auth-mode header nav { align-items:center; gap:16px; }
.auth-mode header nav > a { font-size:13px; color:#536661; }
.auth-mode header nav > a:hover { color:#123c3a; text-decoration:underline; text-underline-offset:4px; }
.auth-mode main { max-width:1240px; padding:0 32px 28px; }
.auth-layout { display:grid; grid-template-columns:44% 56%; min-height:690px; background:#fff; border:1px solid #e2e7e1; border-radius:24px; overflow:hidden; box-shadow:0 16px 60px #15372d09; }
.auth-story { background:#123c3a; padding:40px 36px 30px; color:#f5f6ed; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.story-tag { display:flex; align-items:center; gap:8px; color:#cadcd3; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:600; margin-bottom:28px; }
.story-tag > span { width:7px; height:7px; border-radius:50%; background:#bad6a5; box-shadow:0 0 0 4px #bad6a512; }
.auth-story h2 { font-size:clamp(36px,3.7vw,50px); line-height:1.09; letter-spacing:-.05em; font-weight:500; }
.auth-story h2 em { font-style:normal; color:#c4dcb0; }
.auth-story > p { color:#b9cfc5; font-size:14px; line-height:1.75; max-width:330px; margin:18px 0 0; }
.story-city { position:relative; margin:12px -34px 8px; flex:1; min-height:235px; display:flex; align-items:center; }
.story-city > img { width:100%; height:auto; display:block; }
.city-note { position:absolute; right:28px; bottom:22px; padding:11px 35px 11px 14px; background:#f4f3e9; color:#294740; border-radius:12px; font-size:11px; line-height:1.55; transform:rotate(-5deg); box-shadow:0 8px 20px #071c1b25; }
.city-note b { font-size:14px; font-weight:600; }
.city-note > span { position:absolute; right:12px; top:15px; color:#8c9f72; font-size:22px; }
.story-bottom { display:flex; gap:12px; align-items:center; border-top:1px solid #ffffff1c; padding-top:20px; margin-top:auto; }
.story-lock { height:34px; width:34px; display:grid; place-items:center; background:#ffffff0c; border:1px solid #ffffff15; border-radius:11px; color:#c5d8be; flex:none; }
.story-lock svg { width:17px; height:17px; }
.story-bottom strong { display:block; font-size:12px; font-weight:500; color:#edf4e9; }
.story-bottom div > span { display:block; color:#a6c0b7; font-size:10px; margin-top:2px; }
.auth-panel { padding:44px 52px 36px; min-width:0; align-self:center; }
.auth-eyebrow { color:#668072; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.15em; margin-bottom:10px; }
.auth-panel h1 { font-size:34px; line-height:1.15; font-weight:600; letter-spacing:-.045em; color:#193a34; text-wrap:balance; overflow-wrap:anywhere; }
.auth-description { font-size:14px; line-height:1.7; color:#68786e; margin:12px 0 24px; overflow-wrap:anywhere; }
.auth-description strong { color:#3f5b4f; font-weight:500; }
.auth-switch { display:flex; padding:4px; background:#f2f5f1; border:1px solid #e9ede6; border-radius:11px; margin:22px 0 25px; gap:4px; }
.auth-switch button { flex:1; padding:9px 7px; color:#738074; border:0; background:transparent; border-radius:7px; font:inherit; font-size:12px; font-weight:500; cursor:pointer; }
.auth-switch button.on { background:#fff; color:#244d40; box-shadow:0 2px 6px #1e3b2a09; }
.auth-panel label { color:#374f45; font-size:12px; font-weight:500; margin:18px 0 7px; }
.auth-panel input:not([type=checkbox]) { border:1px solid #dfe6dc; padding:12px 14px; border-radius:9px; background:#fff; font-size:14px; min-height:47px; color:#25473a; transition:border-color .15s,box-shadow .15s; }
.auth-panel input:not([type=checkbox]):focus { border-color:#6b937e; box-shadow:0 0 0 3px #d8e8dc66; }
.auth-panel input::placeholder { color:#a8b2a7; }
.auth-panel input[readonly], .auth-panel input[disabled] { background:#f4f6f2; border-color:#e6ebe2; color:#6f7f70; opacity:1; }
.auth-panel input.bad, .auth-panel input[aria-invalid=true] { border-color:#bf544c; box-shadow:0 0 0 3px #bf544c0b; }
.auth-panel form { margin:0; }
.auth-panel .grid { gap:0 18px; }
.auth-panel .grid label { margin-top:13px; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:50px !important; }
.password-toggle { position:absolute; right:5px; top:4px; width:40px; height:40px; border:0; display:grid; place-items:center; background:transparent; color:#8a9b8c; border-radius:6px; cursor:pointer; }
.password-toggle:hover { color:#315c48; background:#f3f6f0; }
.password-toggle[aria-pressed=true] { color:#315c48; background:#edf3e8; }
.password-toggle svg { width:19px; height:19px; }
.password-meter { height:3px; border-radius:3px; background:#eff2eb; overflow:hidden; margin:10px 0 0; }
.password-meter > span { display:block; height:100%; width:0; background:#d9ad75; transition:width .2s; border-radius:3px; }
.password-meter > span.valid { background:#7a9f68; }
.password-help { color:#73826c; font-size:11px; margin:6px 0 0; line-height:1.6; }
.password-help.valid { color:#527b42; }
.auth-panel .btn.auth-primary { width:100%; display:flex; align-items:center; justify-content:center; gap:14px; background:#214c3d; color:#fff; border:1px solid #214c3d; min-height:49px; padding:12px 16px; border-radius:9px; font-size:13px; font-weight:500; margin-top:24px; box-shadow:0 3px 6px #153d2212; transition:background .15s,transform .15s; }
.auth-panel .btn.auth-primary:hover { background:#143d2f; transform:translateY(-1px); }
.auth-panel .btn.auth-primary:disabled { transform:none; opacity:.6; }
.auth-primary svg { width:17px; height:17px; }
.auth-panel .err { border-radius:8px; color:#a8453b; font-size:12px; line-height:1.7; margin-top:14px; min-height:0; }
.auth-panel .err:not(:empty) { padding:10px 12px; border:1px solid #f2dcd5; background:#fcf5f2; }
.auth-panel .okmsg { font-size:12px; line-height:1.7; border-radius:8px; color:#456e42; }
.auth-panel .okmsg:not(:empty) { padding:10px 12px; background:#f1f7ed; border:1px solid #e1edda; }
.auth-form-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; color:#73836c; font-size:11px; }
.auth-form-meta .lnk { color:#53705c; font-size:11px; text-decoration:none; }
.auth-form-meta .lnk:hover { text-decoration:underline; }
.auth-footer { display:flex; align-items:flex-start; justify-content:center; gap:7px; color:#79896f; font-size:11px; line-height:1.7; margin-top:25px; text-align:center; }
.auth-footer > svg { width:13px; height:13px; flex:none; margin-top:2px; }
.auth-bottom { display:flex; justify-content:space-between; gap:12px; padding:19px 4px 0; font-size:10px; color:#a0aa9d; }
.auth-progress { display:flex; gap:0; list-style:none; padding:0; margin:0 0 31px; color:#a5aea2; }
.auth-progress li { display:flex; align-items:center; gap:6px; font-size:9px; white-space:nowrap; flex:1; position:relative; }
.auth-progress li::after { content:''; height:1px; background:#e5eadd; flex:1; margin:0 10px; }
.auth-progress li:last-child { flex:0; }
.auth-progress li:last-child::after { display:none; }
.auth-progress li > span { display:grid; place-items:center; width:21px; height:21px; border:1px solid #e2e8db; border-radius:50%; font-size:9px; flex:none; }
.auth-progress li.current { color:#315a43; font-weight:600; }
.auth-progress li.current > span { background:#294f3d; color:#fff; border-color:#294f3d; }
.auth-progress li.done { color:#6f8d62; }
.auth-progress li.done > span { background:#f0f5e9; border-color:#dce7d0; }
.auth-progress svg { width:11px; height:11px; }
.invitation-card { display:flex; align-items:center; gap:14px; background:#f4f6ef; border:1px solid #e4eadb; border-radius:12px; padding:15px 17px; margin:20px 0 21px; }
.invitation-icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid #dce7cf; background:#eaf0e0; border-radius:12px; color:#7f965d; flex:none; }
.invitation-icon svg { width:23px; height:23px; }
.invitation-detail { min-width:0; flex:1; }
.invitation-detail strong { display:block; font-size:13px; font-weight:500; color:#3e5a37; overflow-wrap:anywhere; }
.invitation-detail > span { display:block; font-size:11px; color:#758363; overflow-wrap:anywhere; }
.invitation-serial { font-size:13px; letter-spacing:.06em; font-weight:600; color:#5b7347; white-space:nowrap; }
.invitation-serial > span { display:block; font-size:9px; font-weight:400; letter-spacing:0; color:#758363; margin-bottom:3px; }
.serial-help { color:#73836b; font-size:11px; margin:-13px 0 21px; }
.auth-panel .auth-consent { display:flex; align-items:flex-start; gap:9px; font-weight:400; color:#6e7e65; font-size:12px; line-height:1.7; margin:20px 0 0; cursor:pointer; }
.auth-panel .auth-consent input { width:15px; height:15px; margin:2px 0 0; accent-color:#315c43; flex:none; }
.auth-note { padding:14px 16px; background:#f4f7f0; border:1px solid #e5ebdd; border-radius:10px; font-size:12px; color:#6e8064; line-height:1.8; margin:20px 0; }
.auth-note strong { color:#405c35; }
.auth-success-icon { width:66px; height:66px; border-radius:50%; background:#edf4e6; color:#739256; display:grid; place-items:center; margin:25px 0; box-shadow:0 0 0 9px #f8faf5; }
.auth-success-icon svg { width:31px; height:31px; }
.success-serial { margin:24px 0; padding:18px 20px; border:1px dashed #d5e0c6; border-radius:10px; background:#fafbf7; }
.success-serial > span { display:block; font-size:11px; color:#86927b; }
.success-serial strong { color:#3e6038; letter-spacing:.08em; font-size:25px; font-weight:500; }
.success-serial p { color:#8a9581; font-size:11px; margin:4px 0 0; }
.auth-panel .steps { font-size:10px; margin-top:22px; border-color:#e0e8d9; }
.auth-panel .steps span { font-size:10px; padding-right:5px; }
.auth-panel .steps span.now { color:#446a3c; border-color:#608a53; }
.auth-panel .steps span.done { color:#84957b; border-color:#a4ba94; }
.auth-panel .actions { margin-top:18px; }
.auth-panel .actions .lnk { font-size:12px; color:#4c7150; }
.auth-panel :focus-visible, .auth-switch button:focus-visible { outline:3px solid #abc88b; outline-offset:3px; }
.auth-panel input:focus-visible { outline:none; }
@media (min-width:1050px) { .auth-layout.auth-wide { grid-template-columns:39% 61%; } .auth-wide .auth-panel { padding:38px 45px; } .auth-wide .auth-story { padding-top:45px; } }
@media (max-width:1040px) { .auth-panel { padding:34px; } .auth-story { padding:34px 25px 25px; } .auth-story h2 { font-size:40px; } .story-city { margin:18px -24px; } .auth-progress li { font-size:8px; gap:4px; } .auth-progress li::after { margin:0 6px; } }
@media (max-width:760px) { .auth-mode > header { padding:21px 22px; } .auth-mode main { padding:0 16px 24px; } .auth-mode header .brand-name { font-size:15px; } .auth-mode header .brand-name > span { display:block; font-size:10px; line-height:1.3; } .auth-mode header nav > a { font-size:11px; } .auth-mode header nav > span { display:none; } .auth-layout { grid-template-columns:1fr; min-height:0; border-radius:18px; } .auth-story { display:none; } .auth-panel { padding:34px 26px 29px; width:100%; max-width:540px; margin:0 auto; } .auth-panel h1 { font-size:31px; } .auth-panel .grid { grid-template-columns:1fr; gap:0; } .auth-progress { margin-bottom:29px; } .auth-progress li { font-size:9px; } .auth-bottom { font-size:9px; padding:16px 6px 0; } .invitation-card { padding:13px; gap:10px; } .invitation-serial { font-size:12px; } .auth-panel input:not([type=checkbox]) { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { .auth-panel *, .auth-panel *::before, .auth-panel *::after { transition:none !important; } }