/* Crimora City — unified login / register portal */
@property --cp-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
    --cp-gold: #e0b84c;
    --cp-gold-hi: #f6dc8a;
    --cp-gold-lo: #a6812a;
    --cp-ink: #05080f;
    --cp-text: #eef1f6;
    --cp-mute: #8b97a9;
    --cp-ok: #4ade80;
    --cp-bad: #ff5d6c;
    --cp-ease: cubic-bezier(.65, 0, .18, 1);
    --cp-out: cubic-bezier(.16, 1, .3, 1);
    --cp-h: 620px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.cp-body {
    background: var(--cp-ink);
    color: var(--cp-text);
    font-family: "Inter", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}
.cp-body a { color: inherit; text-decoration: none; }
.cp-body button, .cp-body input { font: inherit; color: inherit; }

/* ───────── Scene ───────── */
#cpScene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.cp-grain {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cp-curtain {
    position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(224,184,76,.10) 0%, #070b13 45%, #05080f 100%);
    transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
}
.is-entering .cp-curtain { opacity: 1; }
.is-entering .cp-tilt { transform: scale(1.05); opacity: 0; transition: transform 1.3s cubic-bezier(.4, 0, .2, 1), opacity .9s ease; }

/* ───────── Layout ───────── */
.cp-top {
    position: fixed; z-index: 5; top: 0; left: 0; right: 0; padding: 22px 28px;
    display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.cp-top a { pointer-events: auto; }
.cp-back {
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--cp-mute);
    display: inline-flex; gap: 8px; align-items: center; transition: color .25s, transform .25s var(--cp-out);
}
.cp-back:hover { color: var(--cp-gold-hi); transform: translateX(-4px); }
.cp-ver { font: 600 .68rem "JetBrains Mono", monospace; color: rgba(255,255,255,.28); letter-spacing: .16em; text-transform: uppercase; }

.cp-wrap {
    position: relative; z-index: 4; min-height: 100vh; display: flex; padding: 84px 16px 40px;
}
.cp-tilt {
    margin: auto; width: min(1060px, 100%);
    transform: perspective(1500px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
    transition: transform .9s var(--cp-ease), opacity .6s ease;
    will-change: transform;
}

.cp-stage {
    --mx: 50%; --my: 30%;
    position: relative; height: var(--cp-h); border-radius: 28px;
    background: linear-gradient(145deg, rgba(14,19,31,.72), rgba(7,10,17,.8));
    backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: 0 50px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.08);
    transition: height .85s var(--cp-ease);
    opacity: 0; transform: translateY(46px) scale(.95); filter: blur(14px);
}
.cp-ready .cp-stage {
    opacity: 1; transform: none; filter: none;
    transition: height .85s var(--cp-ease), opacity 1s ease .25s, transform 1.2s var(--cp-out) .25s, filter 1s ease .25s;
}
/* spinning gold rim light */
.cp-stage::before {
    content: ""; position: absolute; inset: -1px; border-radius: 29px; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--cp-ang), transparent 0 62%, rgba(224,184,76,.15) 74%, rgba(246,220,138,.95) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: cp-spin 9s linear infinite;
}
@keyframes cp-spin { to { --cp-ang: 360deg; } }
/* cursor glow */
.cp-stage::after {
    content: ""; position: absolute; inset: 0; border-radius: 28px; pointer-events: none;
    background: radial-gradient(520px circle at var(--mx) var(--my), rgba(224,184,76,.09), transparent 60%);
}

/* ───────── Showcase slab ───────── */
.cp-showcase {
    position: absolute; z-index: 3; top: 10px; bottom: 10px; left: 10px; width: calc(50% - 10px);
    border-radius: 20px; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(224,184,76,.2), transparent 55%),
        linear-gradient(165deg, #1b1608 0%, #0b0e17 55%, #070a12 100%);
    box-shadow: inset 0 0 0 1px rgba(224,184,76,.16), 0 24px 60px -20px rgba(0,0,0,.8);
    transition: transform .95s var(--cp-ease);
    padding: 34px 34px 30px; display: flex; flex-direction: column;
}
[data-mode="register"] .cp-showcase { transform: translateX(100%); }

.cp-showcase::before { /* drifting city grid */
    content: ""; position: absolute; inset: -40%; z-index: -1; opacity: .5;
    background-image:
        linear-gradient(rgba(224,184,76,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224,184,76,.09) 1px, transparent 1px);
    background-size: 38px 38px;
    transform: perspective(500px) rotateX(58deg) translateY(0);
    transform-origin: 50% 100%;
    mask-image: linear-gradient(to top, #000 10%, transparent 75%);
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 75%);
    animation: cp-grid 6s linear infinite;
}
@keyframes cp-grid { to { background-position: 0 38px, 0 0; } }
.cp-showcase::after { /* pulsing orb */
    content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -140px; bottom: -150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(224,184,76,.35), transparent 65%);
    animation: cp-orb 5s ease-in-out infinite;
}
@keyframes cp-orb { 50% { transform: scale(1.25) translate(-18px, -12px); opacity: .6; } }

.cp-logo { margin-bottom: auto; }

.cp-headlines { display: grid; margin: 28px 0 12px; }
.cp-headline {
    grid-area: 1 / 1; margin: 0; font: 700 clamp(1.9rem, 3.2vw, 2.65rem)/1.05 "Oswald", sans-serif;
    text-transform: uppercase; letter-spacing: .01em; pointer-events: none;
}
.cp-headline .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.cp-headline .w > span {
    display: inline-block; transform: translateY(115%) rotate(6deg); opacity: 0;
    transition: transform .55s var(--cp-ease), opacity .35s ease;
    transition-delay: calc(var(--i) * 40ms);
}
.cp-headline em { font-style: normal; background: linear-gradient(95deg, var(--cp-gold-hi), var(--cp-gold) 55%, var(--cp-gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-mode="login"] .cp-headline[data-for="login"] .w > span,
[data-mode="register"] .cp-headline[data-for="register"] .w > span {
    transform: none; opacity: 1; transition-delay: calc(var(--i) * 55ms + 380ms);
}

.cp-sublines { display: grid; margin-bottom: 26px; }
.cp-sub {
    grid-area: 1 / 1; margin: 0; font-size: .9rem; line-height: 1.55; color: #aab4c4; max-width: 34ch;
    opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--cp-out);
}
[data-mode="login"] .cp-sub[data-for="login"], [data-mode="register"] .cp-sub[data-for="register"] {
    opacity: 1; transform: none; transition-delay: .62s;
}

.cp-features { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 4px; }
.cp-features li {
    display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 7px 8px; margin: 0 -8px; border-radius: 12px;
    opacity: 0; transform: translateX(-14px); transition: background .3s, opacity .6s ease, transform .7s var(--cp-out);
    transition-delay: calc(.5s + var(--i) * 70ms), 0s, 0s;
}
.cp-ready .cp-features li { opacity: 1; transform: none; }
.cp-features li:hover { background: rgba(224,184,76,.07); transition-delay: 0s; }
.cp-fi {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--cp-gold-hi);
    background: linear-gradient(145deg, rgba(224,184,76,.18), rgba(224,184,76,.04)); box-shadow: inset 0 0 0 1px rgba(224,184,76,.22);
    transition: transform .5s var(--cp-out), box-shadow .3s;
}
.cp-features li:hover .cp-fi { transform: rotate(-8deg) scale(1.1); box-shadow: inset 0 0 0 1px rgba(246,220,138,.6), 0 0 22px rgba(224,184,76,.35); }
.cp-fi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp-features b { display: block; font-size: .82rem; letter-spacing: .02em; }
.cp-features small { display: block; font-size: .74rem; color: var(--cp-mute); margin-top: 1px; }

/* mode switch */
.cp-switch {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px;
    background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cp-switch button {
    position: relative; z-index: 1; background: none; border: 0; cursor: pointer; padding: 11px 8px; border-radius: 11px;
    font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-mute); transition: color .4s;
}
.cp-switch button[aria-selected="true"] { color: #1a1304; }
.cp-switch button:not([aria-selected="true"]):hover { color: var(--cp-text); }
.cp-switch i {
    position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 11px;
    background: linear-gradient(135deg, var(--cp-gold-hi), var(--cp-gold) 55%, var(--cp-gold-lo));
    box-shadow: 0 6px 22px -4px rgba(224,184,76,.6), inset 0 1px 0 rgba(255,255,255,.5);
    transition: transform .6s var(--cp-ease);
}
[data-mode="register"] .cp-switch i { transform: translateX(100%); }

/* light streak that sweeps during a switch */
.cp-streak-clip { position: absolute; inset: 0; z-index: 4; border-radius: 28px; overflow: hidden; pointer-events: none; }
.cp-streak {
    position: absolute; top: -5%; bottom: -5%; left: 0; width: 26%; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(246,220,138,.14), rgba(255,244,214,.38), rgba(246,220,138,.14), transparent);
    transform: skewX(-18deg) translateX(-130%);
}
.cp-streak.go { animation: cp-streak .95s var(--cp-ease); }
.cp-streak.go.rev { animation-name: cp-streak-rev; }
@keyframes cp-streak { 0% { opacity: 0; transform: skewX(-18deg) translateX(-130%); } 25% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
@keyframes cp-streak-rev { 0% { opacity: 0; transform: skewX(-18deg) translateX(420%); } 25% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(-130%); } }

/* ───────── Panes ───────── */
.cp-forms { position: absolute; inset: 0; z-index: 2; }
.cp-pane {
    position: absolute; top: 0; width: 50%; visibility: hidden; opacity: 0; pointer-events: none;
    filter: blur(8px); transition: opacity .4s ease, transform .7s var(--cp-ease), filter .45s ease, visibility 0s linear .7s;
}
.cp-pane[data-pane="login"] { right: 0; transform: translateX(46px) scale(.98); }
.cp-pane[data-pane="register"] { left: 0; transform: translateX(-46px) scale(.98); }
[data-mode="login"] .cp-pane[data-pane="login"],
[data-mode="register"] .cp-pane[data-pane="register"] {
    visibility: visible; opacity: 1; pointer-events: auto; filter: none; transform: none;
    transition: opacity .55s ease .45s, transform .9s var(--cp-out) .4s, filter .6s ease .45s, visibility 0s;
}
.cp-inner { padding: 52px 50px 42px; display: flex; flex-direction: column; justify-content: center; min-height: 100%; }

.cp-st { opacity: 0; transform: translateY(18px); transition: opacity .3s ease, transform .3s ease; }
[data-mode="login"] [data-pane="login"] .cp-st, [data-mode="register"] [data-pane="register"] .cp-st {
    opacity: 1; transform: none; transition: opacity .6s ease, transform .8s var(--cp-out);
    transition-delay: calc(.55s + var(--i) * 65ms);
}

.cp-kicker { font: 700 .68rem "JetBrains Mono", monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--cp-gold); display: flex; align-items: center; gap: 10px; }
.cp-kicker::before { content: ""; width: 22px; height: 1px; background: var(--cp-gold); }
.cp-title { margin: 12px 0 6px; font: 700 2rem/1.05 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.cp-lede { margin: 0 0 24px; color: var(--cp-mute); font-size: .88rem; line-height: 1.5; }

.cp-form { display: grid; gap: 14px; }

/* ───────── Fields ───────── */
.cp-field { position: relative; }
.cp-box {
    position: relative; border-radius: 14px; background: rgba(255,255,255,.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); transition: background .3s, box-shadow .3s, transform .4s var(--cp-out);
}
.cp-box:hover { background: rgba(255,255,255,.055); }
.cp-box::after { /* gold underline that draws in on focus */
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--cp-gold-hi), transparent);
    transform: scaleX(0); transition: transform .6s var(--cp-out); pointer-events: none;
}
.cp-box:focus-within { background: rgba(224,184,76,.06); box-shadow: inset 0 0 0 1px rgba(224,184,76,.55), 0 0 0 4px rgba(224,184,76,.1), 0 10px 30px -12px rgba(224,184,76,.4); }
.cp-box:focus-within::after { transform: scaleX(1); }
.cp-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #6e7a8d; transition: color .3s, transform .5s var(--cp-out); pointer-events: none; }
.cp-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp-box:focus-within .cp-ico { color: var(--cp-gold-hi); transform: translateY(-50%) scale(1.15); }
.cp-box input {
    width: 100%; height: 58px; padding: 22px 46px 6px 46px; background: none; border: 0; outline: 0; font-size: .95rem; caret-color: var(--cp-gold-hi);
}
.cp-box input::placeholder { color: transparent; }
.cp-box label {
    position: absolute; left: 46px; top: 50%; transform: translateY(-50%); transform-origin: left center; color: #7d899c; font-size: .9rem; pointer-events: none;
    transition: transform .35s var(--cp-out), color .3s, top .35s var(--cp-out);
}
.cp-box input:focus + label, .cp-box input:not(:placeholder-shown) + label, .cp-box input:-webkit-autofill + label {
    top: 17px; transform: translateY(-50%) scale(.74); color: var(--cp-gold);
}
.cp-box input:-webkit-autofill { -webkit-text-fill-color: var(--cp-text); box-shadow: 0 0 0 40px #121827 inset; transition: background-color 9999s; }

.cp-state { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none; }
.cp-state.has-toggle { right: 52px; }
.cp-state svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cp-state path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--cp-out); }
.cp-state .ok { stroke: var(--cp-ok); } .cp-state .bad { stroke: var(--cp-bad); }
.cp-field[data-state="success"] .cp-state .ok path, .cp-field[data-state="error"] .cp-state .bad path { stroke-dashoffset: 0; }
.cp-state .spin { position: absolute; inset: 2px; border-radius: 50%; border: 2px solid rgba(224,184,76,.25); border-top-color: var(--cp-gold-hi); opacity: 0; animation: cp-rot .7s linear infinite; }
.cp-field[data-state="checking"] .cp-state .spin { opacity: 1; }
@keyframes cp-rot { to { transform: rotate(360deg); } }

.cp-field[data-state="success"] .cp-box { box-shadow: inset 0 0 0 1px rgba(74,222,128,.5); }
.cp-field[data-state="error"] .cp-box { box-shadow: inset 0 0 0 1px rgba(255,93,108,.7), 0 0 0 4px rgba(255,93,108,.08); animation: cp-shake .45s; }
@keyframes cp-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.cp-msg { display: block; font-size: .74rem; line-height: 1.35; max-height: 0; opacity: 0; transform: translateY(-4px); overflow: hidden; padding-left: 4px; color: var(--cp-mute); transition: max-height .4s var(--cp-out), opacity .3s, transform .4s var(--cp-out), margin .3s; }
.cp-field[data-state] .cp-msg:not(:empty) { max-height: 40px; opacity: 1; transform: none; margin-top: 6px; }
.cp-field[data-state="error"] .cp-msg { color: #ff8a95; }
.cp-field[data-state="success"] .cp-msg { color: #7be6a3; }
.cp-field[data-state="checking"] .cp-msg { color: var(--cp-gold); }

.cp-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; border: 0; background: none; cursor: pointer; color: #6e7a8d; display: grid; place-items: center; transition: color .25s, background .25s; }
.cp-eye:hover { color: var(--cp-gold-hi); background: rgba(224,184,76,.1); }
.cp-eye svg { grid-area: 1/1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s, transform .4s var(--cp-out); }
.cp-eye .ec-eye-closed { opacity: 0; transform: scale(.6) rotate(-30deg); }
.cp-eye[aria-pressed="true"] .ec-eye-open { opacity: 0; transform: scale(.6) rotate(30deg); }
.cp-eye[aria-pressed="true"] .ec-eye-closed { opacity: 1; transform: none; }

/* password meter */
.cp-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; }
.cp-meter i { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.cp-meter i::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--c, var(--cp-gold)); transition: transform .5s var(--cp-out); box-shadow: 0 0 10px var(--c, var(--cp-gold)); }
.cp-meter[data-score="1"] { --c: #ff5d6c; } .cp-meter[data-score="2"] { --c: #ffa24d; } .cp-meter[data-score="3"] { --c: #e0b84c; } .cp-meter[data-score="4"] { --c: #4ade80; }
.cp-meter[data-score="1"] i:nth-child(-n+1)::after, .cp-meter[data-score="2"] i:nth-child(-n+2)::after,
.cp-meter[data-score="3"] i:nth-child(-n+3)::after, .cp-meter[data-score="4"] i:nth-child(-n+4)::after { transform: scaleX(1); }
.cp-meter i:nth-child(2)::after { transition-delay: .06s; } .cp-meter i:nth-child(3)::after { transition-delay: .12s; } .cp-meter i:nth-child(4)::after { transition-delay: .18s; }
.cp-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cp-rules span { font-size: .68rem; font-weight: 600; padding: 4px 9px 4px 8px; border-radius: 99px; color: #6e7a8d; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: inline-flex; align-items: center; gap: 5px; transition: color .35s, background .35s, box-shadow .35s, transform .5s var(--cp-out); }
.cp-rules span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; transition: all .4s var(--cp-out); }
.cp-rules span.is-met { color: #7be6a3; background: rgba(74,222,128,.09); box-shadow: inset 0 0 0 1px rgba(74,222,128,.3); transform: scale(1.04); }
.cp-rules span.is-met::before { opacity: 1; box-shadow: 0 0 8px currentColor; }
.cp-rules .cp-strength-label { margin-left: auto; background: none; box-shadow: none; padding: 4px 0; transform: none; }
.cp-rules .cp-strength-label::before { display: none; }
.cp-strength-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-mute); }

/* referral disclosure */
.cp-ref-toggle { background: none; border: 0; padding: 2px 4px; cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--cp-mute); display: inline-flex; gap: 8px; align-items: center; justify-self: start; transition: color .25s; }
.cp-ref-toggle[hidden], .cp-field[hidden] { display: none; }
.cp-ref-toggle:hover { color: var(--cp-gold-hi); }
.cp-ref-toggle b { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: rgba(224,184,76,.14); color: var(--cp-gold-hi); line-height: 1; transition: transform .5s var(--cp-out); }
.cp-ref-toggle[aria-expanded="true"] b { transform: rotate(135deg); }
.cp-ref { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--cp-ease); margin-top: -14px; }
.cp-ref > div { overflow: hidden; min-height: 0; }
.cp-ref.open { grid-template-rows: 1fr; margin-top: 0; }
.cp-ref > div > .cp-field { padding-top: 2px; opacity: 0; transform: translateY(-8px); transition: opacity .4s ease, transform .5s var(--cp-out); }
.cp-ref.open > div > .cp-field { opacity: 1; transform: none; transition-delay: .2s; }
.cp-ref:not(.open) input { pointer-events: none; }

/* consent */
.cp-consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; cursor: pointer; font-size: .76rem; line-height: 1.5; color: var(--cp-mute); }
.cp-consent input { position: absolute; opacity: 0; pointer-events: none; }
.cp-consent .cp-chk { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); display: grid; place-items: center; transition: all .35s var(--cp-out); margin-top: 1px; }
.cp-consent .cp-chk svg { width: 14px; height: 14px; fill: none; stroke: #1a1304; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cp-consent .cp-chk path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s var(--cp-out) .08s; }
.cp-consent:hover .cp-chk { box-shadow: inset 0 0 0 1.5px var(--cp-gold); }
.cp-consent input:focus-visible + .cp-chk { box-shadow: inset 0 0 0 1.5px var(--cp-gold), 0 0 0 4px rgba(224,184,76,.2); }
.cp-consent input:checked + .cp-chk { background: linear-gradient(135deg, var(--cp-gold-hi), var(--cp-gold)); box-shadow: 0 0 18px rgba(224,184,76,.5); transform: scale(1.08); }
.cp-consent input:checked + .cp-chk path { stroke-dashoffset: 0; }
.cp-consent a { color: var(--cp-gold-hi); text-decoration: underline; text-decoration-color: rgba(224,184,76,.4); text-underline-offset: 3px; }

/* status + banner */
.cp-status { font-size: .8rem; line-height: 1.45; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); animation: cp-pop .5s var(--cp-out); }
.cp-status[hidden] { display: none; }
.cp-status[data-tone="error"] { background: rgba(255,93,108,.1); box-shadow: inset 0 0 0 1px rgba(255,93,108,.35); color: #ffb0b8; }
.cp-status[data-tone="success"] { background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1px rgba(74,222,128,.35); color: #a8f0c4; }
.cp-status[data-tone="info"] { color: var(--cp-gold-hi); background: rgba(224,184,76,.08); box-shadow: inset 0 0 0 1px rgba(224,184,76,.25); }
@keyframes cp-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.cp-banner { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; padding: 11px 14px; border-radius: 12px; font-size: .8rem; color: #a8f0c4; background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1px rgba(74,222,128,.35); animation: cp-pop .6s var(--cp-out); }
.cp-banner[hidden] { display: none; }

/* submit */
.cp-submit {
    position: relative; overflow: hidden; height: 56px; border: 0; border-radius: 15px; cursor: pointer; margin-top: 4px;
    font: 700 .9rem "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #1a1304;
    background: linear-gradient(135deg, var(--cp-gold-hi), var(--cp-gold) 50%, var(--cp-gold-lo));
    box-shadow: 0 14px 34px -10px rgba(224,184,76,.65), inset 0 1px 0 rgba(255,255,255,.55);
    display: flex; align-items: center; justify-content: center; gap: 12px; transition: transform .4s var(--cp-out), box-shadow .4s, filter .3s;
}
.cp-submit::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-20deg); transition: left .9s var(--cp-ease); }
.cp-submit:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 22px 44px -12px rgba(224,184,76,.8), inset 0 1px 0 rgba(255,255,255,.6); }
.cp-submit:hover:not(:disabled)::before { left: 120%; }
.cp-submit:active:not(:disabled) { transform: translateY(0) scale(.985); }
.cp-submit .arrow { display: inline-block; transition: transform .45s var(--cp-out); font-size: 1.15rem; }
.cp-submit:hover:not(:disabled) .arrow { transform: translateX(6px); }
.cp-submit .spinner { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(26,19,4,.25); border-top-color: #1a1304; opacity: 0; transform: scale(.5); transition: all .3s; animation: cp-rot .7s linear infinite; }
.cp-submit .label, .cp-submit .arrow { transition: opacity .25s, transform .4s var(--cp-out); }
.cp-submit.is-loading .label, .cp-submit.is-loading .arrow { opacity: 0; transform: translateY(8px); }
.cp-submit.is-loading .spinner { opacity: 1; transform: none; }
.cp-submit:disabled { cursor: default; filter: saturate(.7); }
.cp-submit.is-loading { box-shadow: 0 0 0 0 rgba(224,184,76,.6); animation: cp-throb 1.2s ease-out infinite; }
@keyframes cp-throb { to { box-shadow: 0 0 0 16px rgba(224,184,76,0); } }

.cp-alt { margin: 20px 0 0; text-align: center; font-size: .82rem; color: var(--cp-mute); }
.cp-alt button { background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--cp-gold-hi); font-weight: 700; position: relative; }
.cp-alt button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--cp-out); }
.cp-alt button:hover::after { transform: scaleX(1); transform-origin: left; }

.cp-body :focus-visible { outline: 2px solid var(--cp-gold-hi); outline-offset: 3px; }
.cp-box input:focus-visible, .cp-box :focus-visible { outline: none; }

.cp-enter-pop { animation: cp-shake .45s; }

/* ───────── Responsive ───────── */
@media (max-width: 880px) {
    .cp-wrap { padding: 54px 10px 22px; }
    .cp-tilt { transform: none !important; }
    .cp-stage { height: auto; display: flex; flex-direction: column; border-radius: 22px; }
    .cp-stage::before { border-radius: 23px; }
    .cp-showcase, [data-mode="register"] .cp-showcase { position: relative; inset: auto; width: auto; margin: 8px 8px 0; transform: none; padding: 16px 16px 14px; border-radius: 16px; }
    .cp-logo { margin-bottom: 8px; } .cp-logo strong { font-size: 13px; } .cp-logo small { font-size: 9px; }
    .cp-headlines { margin: 0 0 4px; min-height: 2.1em; }
    .cp-headline { font-size: 1.2rem; }
    .cp-sublines { margin-bottom: 10px; min-height: 2.9em; }
    .cp-sub { font-size: .72rem; line-height: 1.45; }
    .cp-features { display: none; }
    .cp-switch { padding: 3px; border-radius: 11px; }
    .cp-switch button { padding: 8px 4px; font-size: .64rem; border-radius: 9px; }
    .cp-switch i { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; }
    .cp-forms { position: relative; inset: auto; height: var(--cp-fh, 460px); transition: height .8s var(--cp-ease); }
    .cp-pane { width: 100%; left: 0 !important; right: auto !important; }
    .cp-pane[data-pane="login"] { transform: translateX(34px); }
    .cp-pane[data-pane="register"] { transform: translateX(-34px); }
    .cp-inner { padding: 20px 18px 18px; }
    .cp-kicker { font-size: .58rem; }
    .cp-title { font-size: 1.35rem; margin: 8px 0 4px; }
    .cp-lede { font-size: .74rem; margin-bottom: 14px; }
    .cp-form { gap: 9px; }
    .cp-box { border-radius: 11px; }
    .cp-box input { height: 46px; padding: 18px 40px 4px 38px; font-size: .82rem; }
    .cp-box label { left: 38px; font-size: .78rem; }
    .cp-box input:focus + label, .cp-box input:not(:placeholder-shown) + label, .cp-box input:-webkit-autofill + label { top: 13px; }
    .cp-ico { left: 12px; width: 16px; height: 16px; }
    .cp-state { width: 16px; height: 16px; right: 11px; } .cp-state.has-toggle { right: 42px; }
    .cp-eye { width: 32px; height: 32px; right: 5px; } .cp-eye svg { width: 16px; height: 16px; }
    .cp-msg { font-size: .66rem; }
    .cp-rules { gap: 4px; margin-top: 7px; } .cp-rules span { font-size: .6rem; padding: 3px 7px 3px 6px; }
    .cp-meter { margin-top: 7px; }
    .cp-consent { font-size: .66rem; gap: 9px; grid-template-columns: 18px 1fr; }
    .cp-consent .cp-chk { width: 18px; height: 18px; border-radius: 6px; } .cp-consent .cp-chk svg { width: 11px; height: 11px; }
    .cp-ref-toggle { font-size: .7rem; }
    .cp-status, .cp-banner { font-size: .7rem; padding: 8px 11px; }
    .cp-submit { height: 46px; font-size: .74rem; border-radius: 12px; }
    .cp-alt { font-size: .72rem; margin-top: 14px; }
    .cp-top { padding: 12px 14px; }
    .cp-back { font-size: .68rem; }
    .cp-ver { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* wordmark (matches the navbar brand) */
.wm { display: grid; gap: 2px; white-space: nowrap; text-align: left; }
.wm strong { color: var(--cp-gold-hi, #f6dc8a); font: 600 15px "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.wm small { color: #8b97a9; font-size: 10px; letter-spacing: .05em; }

.cp-top::before { content: ""; position: absolute; inset: 0 0 -20px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(5,8,15,.6), transparent); }
.cp-ver { color: rgba(255,255,255,.55); }

.cp-help { display: block; margin: 8px 4px 0; font-size: .68rem; line-height: 1.45; color: var(--cp-mute); }

/* Real page-to-page dissolve into the Command Centre (Chromium). The card eases away first, then the browser crossfades the page itself. */
@view-transition { navigation: auto; }
.is-leaving .cp-tilt { transform: scale(1.04); opacity: 0; transition: transform 1s cubic-bezier(.4, 0, .2, 1), opacity .8s ease; }
.is-leaving .cp-top { opacity: 0; transition: opacity .6s ease; }

/* phones: slimmer everything */
@media (max-width: 880px) {
    .cp-wrap { padding: 48px 8px 16px; }
    .cp-stage { border-radius: 18px; }
    .cp-stage::before { border-radius: 19px; }
    .cp-showcase, [data-mode="register"] .cp-showcase { margin: 6px 6px 0; padding: 12px 12px 10px; border-radius: 13px; }
    .cp-logo strong { font-size: 12px; font-weight: 500; }
    .cp-headline { font-size: 1.02rem; font-weight: 600; }
    .cp-sublines { margin-bottom: 8px; min-height: 2.5em; }
    .cp-sub { font-size: .66rem; }
    .cp-switch { padding: 2px; border-radius: 9px; }
    .cp-switch button { padding: 6px 4px; font-size: .58rem; font-weight: 600; letter-spacing: .06em; }
    .cp-switch i { top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 7px; }
    .cp-inner { padding: 14px 14px 12px; }
    .cp-kicker { font-size: .52rem; letter-spacing: .18em; }
    .cp-kicker::before { width: 14px; }
    .cp-title { font-size: 1.12rem; font-weight: 600; margin: 5px 0 2px; }
    .cp-lede { font-size: .68rem; margin-bottom: 10px; }
    .cp-form { gap: 7px; }
    .cp-box { border-radius: 9px; }
    .cp-box input { height: 38px; padding: 15px 34px 3px 34px; font-size: .76rem; }
    .cp-box label { left: 34px; font-size: .72rem; }
    .cp-box input:focus + label, .cp-box input:not(:placeholder-shown) + label, .cp-box input:-webkit-autofill + label { top: 11px; }
    .cp-ico { left: 10px; width: 14px; height: 14px; }
    .cp-state { width: 14px; height: 14px; right: 9px; } .cp-state.has-toggle { right: 36px; }
    .cp-eye { width: 28px; height: 28px; right: 4px; } .cp-eye svg { width: 14px; height: 14px; }
    .cp-msg { font-size: .62rem; }
    .cp-meter { gap: 3px; margin-top: 6px; } .cp-meter i { height: 3px; }
    .cp-rules { gap: 3px; margin-top: 5px; } .cp-rules span { font-size: .56rem; padding: 2px 6px 2px 5px; font-weight: 500; }
    .cp-consent { font-size: .62rem; gap: 7px; grid-template-columns: 16px 1fr; }
    .cp-consent .cp-chk { width: 16px; height: 16px; border-radius: 5px; }
    .cp-ref-toggle { font-size: .66rem; font-weight: 500; }
    .cp-help { font-size: .58rem; }
    .cp-status, .cp-banner { font-size: .64rem; padding: 6px 9px; border-radius: 9px; }
    .cp-submit { height: 38px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; border-radius: 10px; }
    .cp-alt { font-size: .66rem; margin-top: 10px; }
}

.cp-body .cp-ref-toggle { font-size: .78rem; font-weight: 600; }
@media (max-width: 880px) { .cp-body .cp-ref-toggle { font-size: .66rem; font-weight: 500; } .cp-ref-toggle b { width: 14px; height: 14px; border-radius: 5px; font-size: .7rem; } }