/* KRONMC panels — authentication and management surfaces */
.auth-page,
.control-center-page {
    min-height: 100svh;
    background: #05070d;
}

.auth-page .site-backdrop,
.control-center-page .site-backdrop {
    z-index: 0;
}

.auth-topbar {
    position: relative;
    z-index: 10;
    display: grid;
    width: min(calc(100% - 2rem), 1440px);
    min-height: 76px;
    margin: 1rem auto 0;
    padding: 0.75rem 0.85rem 0.75rem 1rem;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(14,24,40,.8), rgba(5,9,17,.64));
    box-shadow: 0 18px 55px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
}

.auth-topbar > .btn { justify-self: end; }
.auth-topbar-status {
    display: inline-flex;
    padding: .55rem .8rem;
    align-items: center;
    gap: .55rem;
    border: 1px solid rgba(57,229,140,.14);
    border-radius: 999px;
    background: rgba(57,229,140,.055);
    color: #b6f8d6;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .03em;
}

.auth-stage {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(calc(100% - 2rem), 1280px);
    min-height: calc(100svh - 175px);
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 6.5rem) 0 3rem;
    grid-template-columns: minmax(0, .9fr) minmax(440px, .72fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.auth-stage--wide { grid-template-columns: minmax(0, .7fr) minmax(580px, 1fr); }
.auth-story { max-width: 610px; }
.auth-story h1 {
    margin: 1rem 0 1.4rem;
    font-size: clamp(3rem, 6vw, 6.1rem);
    letter-spacing: -.067em;
    line-height: .9;
}
.auth-story > p:not(.eyebrow) {
    max-width: 58ch;
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.auth-network { display: grid; margin-top: 2rem; gap: .7rem; }
.auth-network article {
    display: grid;
    padding: .8rem .9rem;
    grid-template-columns: 44px minmax(0,1fr);
    align-items: center;
    gap: .8rem;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
}
.auth-network strong,
.auth-network small { display: block; }
.auth-network strong { font-size: .84rem; }
.auth-network small { color: var(--text-muted); font-size: .69rem; }
.auth-network-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(79,217,255,.2);
    border-radius: 13px;
    background: rgba(79,217,255,.08);
    color: var(--accent-primary);
}
.auth-network-icon .icon { width: 22px; height: 22px; }
.auth-network-icon--green { border-color: rgba(57,229,140,.2); background: rgba(57,229,140,.08); color: var(--accent-green); }
.auth-network-icon--discord { border-color: rgba(88,101,242,.25); background: rgba(88,101,242,.1); }
.auth-network-icon--discord img { width: 24px; height: 24px; }
.auth-trust-line {
    display: flex;
    margin-top: 1.5rem;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.auth-trust-line span:nth-child(odd) { color: var(--accent-primary); }

.auth-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2.15rem);
    border-radius: 30px;
}
.auth-card::before {
    position: absolute;
    top: -12rem;
    right: -10rem;
    width: 26rem;
    aspect-ratio: 1;
    content: "";
    border-radius: 50%;
    background: rgba(22,140,255,.14);
    filter: blur(80px);
    pointer-events: none;
}
.auth-card > * { position: relative; }
.auth-card-head { display: flex; margin-bottom: 1.5rem; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.auth-card-head h2 { margin: .3rem 0 .45rem; font-size: clamp(1.75rem, 4vw, 2.55rem); letter-spacing: -.045em; line-height: 1; }
.auth-card-head p:last-child { margin: 0; color: var(--text-muted); font-size: .83rem; }
.security-orb {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(79,217,255,.22);
    border-radius: 17px;
    background: rgba(79,217,255,.08);
    color: var(--accent-primary);
    box-shadow: 0 0 32px rgba(79,217,255,.08);
}
.security-orb .icon { width: 25px; height: 25px; }
.security-orb--green { border-color: rgba(57,229,140,.22); background: rgba(57,229,140,.08); color: var(--accent-green); }
.security-orb--amber { border-color: rgba(255,184,77,.22); background: rgba(255,184,77,.08); color: var(--accent-amber); }

.auth-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .45rem; }
.field label { color: #eaf3ff; font-size: .76rem; font-weight: 750; }
.field > small { color: var(--text-muted); font-size: .67rem; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.field-label-row a { color: #82ddff; font-size: .7rem; font-weight: 700; }
.field-label-row a:hover { color: #fff; }
.field-control {
    position: relative;
    display: flex;
    min-height: 52px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(3,8,16,.54);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.field-control:focus-within { border-color: rgba(79,217,255,.55); background: rgba(5,13,24,.8); box-shadow: var(--shadow-focus); }
.field-control > .icon { width: 19px; height: 19px; margin-left: .9rem; flex: 0 0 auto; color: #6fcde9; }
.field-control input,
.field-control textarea,
.field-control select {
    width: 100%;
    min-width: 0;
    padding: .78rem .9rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: .87rem;
}
.field-control textarea { min-height: 100px; resize: vertical; }
.field-control select { color-scheme: dark; }
.field-control input::placeholder,
.field-control textarea::placeholder { color: #617086; }
.field-control input:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); transition: background-color 9999s; }
.password-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    margin-right: .25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.password-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.password-toggle .icon { width: 20px; height: 20px; }
.caps-lock { color: #ffd18a !important; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }

.form-notice { padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; font-size: .75rem; }
.form-notice--error { border-color: rgba(255,107,122,.25); background: rgba(255,107,122,.08); color: #ffc1c8; }
.form-notice--success { border-color: rgba(57,229,140,.23); background: rgba(57,229,140,.075); color: #b7f8d6; }
.form-notice--warning { border-color: rgba(255,184,77,.24); background: rgba(255,184,77,.075); color: #ffd59a; }
.current-session { display: flex; margin-bottom: 1rem; padding: .75rem .9rem; align-items: center; justify-content: space-between; gap: .7rem; border: 1px solid rgba(57,229,140,.18); border-radius: 13px; background: rgba(57,229,140,.055); color: #b7f8d6; font-size: .75rem; font-weight: 700; }

.kron-captcha {
    padding: .85rem;
    border: 1px solid rgba(79,217,255,.13);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(79,217,255,.045), rgba(4,9,17,.38));
}
.kron-captcha.is-loading { opacity: .7; pointer-events: none; }
.captcha-head { display: flex; margin-bottom: .75rem; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.captcha-head span,
.captcha-head strong { display: block; }
.captcha-head span { margin-bottom: .12rem; color: var(--accent-primary); font-size: .56rem; font-weight: 850; letter-spacing: .13em; }
.captcha-head strong { max-width: 43ch; font-size: .71rem; line-height: 1.35; }
.captcha-head button {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    background: rgba(255,255,255,.04);
    color: var(--text-secondary);
    cursor: pointer;
}
.captcha-head button:hover { border-color: rgba(79,217,255,.35); color: #fff; }
.captcha-head .icon { width: 18px; height: 18px; }
.captcha-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .45rem; }
.captcha-tile {
    position: relative;
    display: grid;
    min-height: 66px;
    padding: .45rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(4,10,18,.65);
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.captcha-tile:hover { transform: translateY(-2px); border-color: rgba(79,217,255,.32); }
.captcha-tile.is-selected { border-color: var(--accent-primary); background: rgba(79,217,255,.12); box-shadow: 0 0 0 3px rgba(79,217,255,.08); }
.captcha-symbol { width: 24px; height: 24px; transform: rotate(var(--captcha-rotation)); border: 2px solid currentColor; color: #71dfff; }
.captcha-symbol--circle { border-radius: 50%; }
.captcha-symbol--diamond { transform: rotate(calc(45deg + var(--captcha-rotation))); }
.captcha-symbol--cross { position: relative; border: 0; }
.captcha-symbol--cross::before,
.captcha-symbol--cross::after { position: absolute; inset: 10px 0; content: ""; background: currentColor; }
.captcha-symbol--cross::after { transform: rotate(90deg); }
.captcha-tile--green .captcha-symbol { color: #52e99b; }
.captcha-tile--amber .captcha-symbol { color: #ffbf62; }
.captcha-tile--blue .captcha-symbol { color: #559eff; }
.captcha-pulses { position: absolute; right: .35rem; bottom: .25rem; color: var(--text-muted); font-size: .58rem; letter-spacing: .08em; }
.captcha-status { min-height: 1rem; margin: .55rem 0 0; color: var(--text-muted); font-size: .62rem; }

.check-row { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: .7rem; cursor: pointer; }
.check-row input { position: absolute; opacity: 0; }
.check-row > span[aria-hidden] { display: grid; width: 22px; height: 22px; margin-top: .1rem; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(3,8,16,.6); }
.check-row input:checked + span[aria-hidden] { border-color: var(--accent-primary); background: var(--gradient-brand); }
.check-row input:checked + span[aria-hidden]::after { width: 9px; height: 5px; content: ""; transform: translateY(-1px) rotate(-45deg); border-bottom: 2px solid #fff; border-left: 2px solid #fff; }
.check-row input:focus-visible + span[aria-hidden] { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.check-row strong,
.check-row small { display: block; }
.check-row strong { font-size: .73rem; }
.check-row small { color: var(--text-muted); font-size: .64rem; }
.check-row--compact { padding: .75rem; border: 1px solid rgba(255,255,255,.075); border-radius: 13px; background: rgba(255,255,255,.025); }
.btn-submit { width: 100%; min-height: 52px; }
.auth-card-footer { display: flex; margin: 1.2rem -2.15rem -2.15rem; padding: 1rem 2.15rem; align-items: center; justify-content: center; gap: .45rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(2,6,12,.28); color: var(--text-muted); font-size: .72rem; }
.auth-card-footer a { color: #84ddff; font-weight: 750; }
.auth-footer { position: relative; z-index: 2; display: flex; width: min(calc(100% - 2rem), 1280px); margin: 0 auto; padding: 1rem 0 1.5rem; justify-content: space-between; gap: 1rem; color: var(--text-muted); font-size: .65rem; }

.activation-steps { display: grid; margin: 2rem 0 0; padding: 0; list-style: none; gap: .75rem; }
.activation-steps li { display: grid; padding: .8rem; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: .8rem; border-left: 1px solid rgba(255,255,255,.09); opacity: .6; }
.activation-steps li.is-active { border-left-color: var(--accent-primary); opacity: 1; }
.activation-steps li > span { color: var(--accent-primary); font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
.activation-steps strong,
.activation-steps small { display: block; }
.activation-steps strong { font-size: .83rem; }
.activation-steps small { color: var(--text-muted); font-size: .67rem; }
.register-policy { display: grid; margin-top: 1.5rem; padding: 1rem; grid-template-columns: 34px minmax(0,1fr); gap: .8rem; border-radius: 16px; }
.register-policy > .icon { width: 28px; height: 28px; color: var(--accent-green); }
.register-policy strong { font-size: .78rem; }
.register-policy p { margin: .25rem 0 0; color: var(--text-muted); font-size: .67rem; }
.password-meter { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.password-meter i { display: block; width: var(--strength,0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff6b7a,#ffb84d,#39e58c); transition: width .2s ease; }
.recovery-flow { display: flex; margin-top: 2rem; align-items: center; gap: .65rem; }
.recovery-flow div { display: grid; justify-items: center; gap: .35rem; color: var(--text-muted); text-align: center; }
.recovery-flow div.is-active { color: #fff; }
.recovery-flow div span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.035); font-size: .7rem; }
.recovery-flow div.is-active span { border-color: rgba(79,217,255,.35); background: rgba(79,217,255,.1); color: var(--accent-primary); }
.recovery-flow strong { font-size: .62rem; }
.recovery-flow i { height: 1px; flex: 1; background: linear-gradient(90deg,rgba(79,217,255,.35),rgba(255,255,255,.07)); }
.security-list { display: grid; margin: 1.7rem 0 0; padding: 0; list-style: none; gap: .7rem; color: var(--text-secondary); font-size: .74rem; }
.security-list li { display: flex; align-items: center; gap: .65rem; }
.security-list .icon { width: 17px; height: 17px; color: var(--accent-green); }

/* Application shell */
.control-center-page { overflow-x: hidden; }
.cc-shell { position: relative; z-index: 2; display: grid; min-height: 100svh; grid-template-columns: 276px minmax(0,1fr); }
.cc-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100svh;
    padding: 1rem;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg,rgba(8,14,25,.94),rgba(3,7,13,.92));
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
}
.cc-brand { display: flex; min-height: 64px; padding: .55rem .65rem; align-items: center; gap: .7rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.cc-brand img { width: 42px; height: 42px; }
.cc-brand span,
.cc-brand strong,
.cc-brand small { display: block; }
.cc-brand strong { font-size: .9rem; }
.cc-brand small { color: var(--text-muted); font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cc-role { margin: 1rem 0; padding: .75rem; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(255,255,255,.025); }
.cc-role-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--text-muted); font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; }
.cc-role strong { display: block; margin-top: .28rem; font-size: .78rem; }
.cc-nav { display: grid; gap: .2rem; overflow-y: auto; }
.cc-nav-label { margin: .8rem .7rem .3rem; color: #5f7087; font-size: .54rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.cc-nav button {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: .65rem .7rem;
    align-items: center;
    gap: .7rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #91a1b7;
    font-size: .73rem;
    font-weight: 720;
    text-align: left;
    cursor: pointer;
}
.cc-nav button:hover { background: rgba(255,255,255,.035); color: #fff; }
.cc-nav button.is-active { border-color: rgba(79,217,255,.16); background: linear-gradient(90deg,rgba(79,217,255,.1),rgba(79,217,255,.025)); color: #dff8ff; }
.cc-nav button .icon { width: 19px; height: 19px; flex: 0 0 auto; }
.cc-nav button.is-active .icon { color: var(--accent-primary); }
.cc-sidebar-footer { display: grid; margin-top: auto; padding-top: 1rem; gap: .55rem; border-top: 1px solid rgba(255,255,255,.07); }
.cc-user-mini { display: grid; padding: .55rem; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: .65rem; }
.cc-avatar { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(79,217,255,.2); border-radius: 12px; background: rgba(79,217,255,.08); color: var(--accent-primary); font-size: .72rem; font-weight: 900; }
.cc-user-mini strong,
.cc-user-mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-user-mini strong { font-size: .72rem; }
.cc-user-mini small { color: var(--text-muted); font-size: .58rem; }
.cc-sidebar-footer .btn { width: 100%; min-height: 42px; }

.cc-workspace { min-width: 0; }
.cc-topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: grid;
    min-height: 78px;
    padding: .85rem clamp(1rem,3vw,2.2rem);
    grid-template-columns: auto minmax(220px,520px) auto;
    align-items: center;
    gap: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.075);
    background: rgba(5,9,16,.76);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
}
.cc-mobile-toggle { display: none; }
.cc-breadcrumb small,
.cc-breadcrumb strong { display: block; }
.cc-breadcrumb small { color: var(--text-muted); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; }
.cc-breadcrumb strong { font-size: .86rem; }
.cc-search { position: relative; }
.cc-search .icon { position: absolute; top: 50%; left: .9rem; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-muted); }
.cc-search input { width: 100%; min-height: 44px; padding: .65rem .9rem .65rem 2.7rem; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; outline: 0; background: rgba(255,255,255,.035); color: #fff; font: inherit; font-size: .73rem; }
.cc-search input:focus { border-color: rgba(79,217,255,.35); box-shadow: var(--shadow-focus); }
.cc-top-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.cc-icon-button { position: relative; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.035); color: var(--text-secondary); cursor: pointer; }
.cc-icon-button:hover { border-color: rgba(79,217,255,.26); color: #fff; }
.cc-icon-button .icon { width: 20px; height: 20px; }
.cc-presence { display: flex; min-height: 44px; padding: .55rem .75rem; align-items: center; gap: .55rem; border: 1px solid rgba(57,229,140,.13); border-radius: 13px; background: rgba(57,229,140,.045); color: #aef5d0; font-size: .64rem; font-weight: 750; }

.cc-content { width: min(100%, 1500px); margin: 0 auto; padding: clamp(1rem,3vw,2.2rem); }
.cc-view[hidden] { display: none !important; }
.cc-view-header { display: flex; margin-bottom: 1.5rem; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.cc-view-header h1 { margin: .35rem 0 .45rem; font-size: clamp(2rem,4vw,3.5rem); letter-spacing: -.055em; line-height: .95; }
.cc-view-header p { max-width: 65ch; margin: 0; color: var(--text-secondary); font-size: .82rem; }
.cc-view-actions { display: flex; gap: .55rem; }
.cc-live-label { display: inline-flex; padding: .45rem .65rem; align-items: center; gap: .45rem; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.025); color: var(--text-muted); font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

.cc-grid { display: grid; gap: 1rem; }
.cc-grid--metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.cc-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.cc-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.cc-grid--main { grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); }
.cc-card { position: relative; overflow: hidden; padding: 1.1rem; border: 1px solid rgba(255,255,255,.085); border-radius: 20px; background: linear-gradient(135deg,rgba(15,25,42,.66),rgba(5,10,18,.56)); box-shadow: 0 18px 54px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.07); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.cc-card--strong { background: linear-gradient(135deg,rgba(19,32,52,.8),rgba(5,10,18,.7)); }
.cc-card--accent::before { position: absolute; top: -8rem; right: -8rem; width: 18rem; aspect-ratio: 1; content: ""; border-radius: 50%; background: rgba(79,217,255,.09); filter: blur(55px); }
.cc-card > * { position: relative; }
.cc-card-head { display: flex; margin-bottom: 1rem; align-items: center; justify-content: space-between; gap: .8rem; }
.cc-card-head h2,
.cc-card-head h3 { margin: 0; font-size: .9rem; }
.cc-card-head p { margin: .15rem 0 0; color: var(--text-muted); font-size: .64rem; }
.cc-card-head .icon { width: 20px; height: 20px; color: var(--accent-primary); }
.cc-metric { min-height: 132px; }
.cc-metric-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--text-muted); font-size: .62rem; font-weight: 750; }
.cc-metric-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(79,217,255,.16); border-radius: 12px; background: rgba(79,217,255,.06); color: var(--accent-primary); }
.cc-metric-icon .icon { width: 19px; height: 19px; }
.cc-metric strong { display: block; margin-top: .8rem; font-size: clamp(1.45rem,3vw,2.25rem); letter-spacing: -.04em; line-height: 1; }
.cc-metric small { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .62rem; }
.cc-source { display: inline-flex; padding: .3rem .5rem; align-items: center; gap: .35rem; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: var(--text-muted); font-size: .53rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.cc-source--live { border-color: rgba(57,229,140,.16); color: #a8f5cd; }
.cc-source--offline { border-color: rgba(255,184,77,.16); color: #ffd294; }

.cc-status-list,
.cc-activity-list,
.cc-integration-list { display: grid; margin: 0; padding: 0; list-style: none; gap: .55rem; }
.cc-status-list li,
.cc-integration-list li { display: grid; min-height: 54px; padding: .65rem .7rem; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.065); border-radius: 13px; background: rgba(255,255,255,.02); }
.cc-status-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(79,217,255,.07); color: var(--accent-primary); }
.cc-status-icon .icon { width: 17px; height: 17px; }
.cc-status-list strong,
.cc-status-list small,
.cc-integration-list strong,
.cc-integration-list small { display: block; }
.cc-status-list strong,
.cc-integration-list strong { font-size: .69rem; }
.cc-status-list small,
.cc-integration-list small { color: var(--text-muted); font-size: .57rem; }
.cc-state { display: inline-flex; padding: .3rem .5rem; align-items: center; gap: .35rem; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: var(--text-muted); font-size: .52rem; font-weight: 800; }
.cc-state--ok { border-color: rgba(57,229,140,.16); background: rgba(57,229,140,.04); color: #aef5d0; }
.cc-state--warn { border-color: rgba(255,184,77,.16); background: rgba(255,184,77,.04); color: #ffd394; }
.cc-state--error { border-color: rgba(255,107,122,.18); background: rgba(255,107,122,.045); color: #ffbec5; }
.cc-empty { display: grid; min-height: 180px; padding: 1.2rem; place-items: center; align-content: center; text-align: center; }
.cc-empty .icon { width: 34px; height: 34px; margin-bottom: .8rem; color: #577087; }
.cc-empty strong { font-size: .82rem; }
.cc-empty p { max-width: 42ch; margin: .35rem 0 0; color: var(--text-muted); font-size: .65rem; }
.cc-activity-item { display: grid; padding: .65rem .7rem; grid-template-columns: minmax(0,1fr) auto; gap: .15rem .7rem; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: rgba(255,255,255,.02); }
.cc-activity-item strong { font-size: .68rem; }
.cc-activity-item span { grid-column: 1; color: var(--text-muted); font-size: .58rem; }
.cc-activity-item time { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--text-muted); font-size: .53rem; }

.cc-table-wrap { overflow-x: auto; }
.cc-table { width: 100%; border-collapse: collapse; font-size: .67rem; }
.cc-table th { padding: .65rem; border-bottom: 1px solid rgba(255,255,255,.09); color: var(--text-muted); font-size: .53rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.cc-table td { padding: .75rem .65rem; border-bottom: 1px solid rgba(255,255,255,.055); color: var(--text-secondary); }
.cc-table tr:last-child td { border-bottom: 0; }
.cc-code { font-family: "Cascadia Code",Consolas,monospace; color: #aeefff; }
.cc-table td strong,
.cc-table td small { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.table-action { min-height: 32px; padding: .35rem .55rem; border: 1px solid rgba(79,217,255,.16); border-radius: 9px; background: rgba(79,217,255,.055); color: #aeefff; font: inherit; font-size: .57rem; font-weight: 800; cursor: pointer; }
.table-action:hover { border-color: rgba(79,217,255,.38); background: rgba(79,217,255,.1); }
.cc-toolbar { display: flex; margin-bottom: 1rem; align-items: flex-end; gap: .7rem; flex-wrap: wrap; }
.cc-toolbar .field { min-width: 180px; flex: 1; }
.cc-toolbar .btn { min-height: 52px; }

.chat-window { display: grid; min-height: 430px; grid-template-rows: auto minmax(240px,1fr) auto; }
.chat-messages { display: flex; max-height: 430px; padding: .7rem 0; overflow-y: auto; flex-direction: column; gap: .55rem; }
.chat-message { display: grid; padding: .6rem .7rem; grid-template-columns: 34px minmax(0,1fr) auto; align-items: start; gap: .6rem; border-radius: 12px; }
.chat-message:hover { background: rgba(255,255,255,.025); }
.chat-message-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(79,217,255,.07); color: var(--accent-primary); font-size: .6rem; font-weight: 900; }
.chat-message strong { font-size: .65rem; }
.chat-message p { margin: .15rem 0 0; color: #c5d0df; font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
.chat-message time { color: var(--text-muted); font-size: .53rem; }
.chat-compose { display: grid; padding-top: .8rem; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; border-top: 1px solid rgba(255,255,255,.07); }
.chat-compose input { min-width: 0; min-height: 44px; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; outline: 0; background: rgba(3,8,16,.52); color: #fff; font: inherit; font-size: .7rem; }
.chat-compose input:focus { border-color: rgba(79,217,255,.35); box-shadow: var(--shadow-focus); }

.cc-form { display: grid; gap: .8rem; }
.cc-form-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.link-code,
.generated-access-code { display: grid; margin-top: 1rem; padding: .85rem; gap: .25rem; border: 1px solid rgba(57,229,140,.18); border-radius: 14px; background: rgba(57,229,140,.055); }
.link-code strong,
.generated-access-code code { color: #c6ffe1; font-family: "Cascadia Code",Consolas,monospace; font-size: clamp(1.1rem,3vw,1.55rem); font-weight: 900; letter-spacing: .06em; overflow-wrap: anywhere; }
.link-code span,
.generated-access-code span,
.generated-access-code small { color: var(--text-muted); font-size: .61rem; }
.recovery-code-list { display: grid; margin-top: 1rem; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.recovery-code-list code { padding: .55rem; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(3,8,16,.5); color: #bdefff; font-size: .68rem; text-align: center; }
.permission-tile { padding: .9rem; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; background: rgba(255,255,255,.02); }
.permission-tile strong { font-size: .74rem; }
.permission-tile p { margin: .35rem 0 0; color: var(--text-muted); font-size: .62rem; }
.permission-stack { display: grid; gap: .75rem; }
.cc-dialog-head p { margin: .3rem 0 0; color: var(--text-muted); font-size: .65rem; overflow-wrap: anywhere; }
.cc-dialog .check-row input + span:not([aria-hidden]) { grid-column: 2; }
.cc-dialog .check-row input { position: static; width: 22px; height: 22px; opacity: 1; accent-color: var(--accent-primary); }
.cc-dialog.cc-dialog--wide { width: min(900px, calc(100% - 2rem)); }
.sensitive-message-list { display: grid; max-height: min(58vh, 640px); margin-top: 1rem; padding-right: .25rem; gap: .65rem; overflow: auto; }
.sensitive-message { padding: .9rem; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(3,8,16,.48); }
.sensitive-message > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sensitive-message strong { font-size: .7rem; }
.sensitive-message time { color: var(--text-muted); font-size: .58rem; }
.sensitive-message p { margin: .55rem 0 0; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.private-message-list { display: grid; max-height: 520px; gap: .6rem; overflow: auto; }
.private-message { padding: .75rem; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(3,8,16,.4); }
.private-message.is-outgoing { border-color: rgba(79,217,255,.18); background: rgba(22,140,255,.07); }
.private-message > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.private-message strong { font-size: .66rem; }
.private-message time { color: var(--text-muted); font-size: .55rem; }
.private-message p { margin: .45rem 0 0; color: var(--text-secondary); font-size: .66rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-warning { display: grid; padding: .8rem; grid-template-columns: 24px minmax(0,1fr); gap: .65rem; border: 1px solid rgba(255,184,77,.17); border-radius: 13px; background: rgba(255,184,77,.05); color: #f4d9ad; font-size: .64rem; }
.cc-warning .icon { width: 20px; height: 20px; color: var(--accent-amber); }
.cc-dialog { width: min(calc(100% - 1rem),560px); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: #09111d; color: var(--text-primary); box-shadow: 0 36px 120px rgba(0,0,0,.65); }
.cc-dialog::backdrop { background: rgba(1,4,9,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cc-dialog-head { display: flex; padding: 1rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.cc-dialog-head h2 { margin: 0; font-size: 1rem; }
.cc-dialog-body { padding: 1rem; }

.cc-skeleton { position: relative; overflow: hidden; color: transparent !important; border-radius: 7px; background: rgba(255,255,255,.055); }
.cc-skeleton::after { position: absolute; inset: 0; content: ""; transform: translateX(-100%); background: linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation: cc-shimmer 1.4s infinite; }
@keyframes cc-shimmer { to { transform: translateX(100%); } }

@media (max-width: 1180px) {
    .auth-stage { gap: 3rem; }
    .auth-story h1 { font-size: clamp(3rem,7vw,5rem); }
    .cc-grid--metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cc-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 960px) {
    .auth-topbar { grid-template-columns: 1fr auto; }
    .auth-topbar-status { display: none; }
    .auth-stage,
    .auth-stage--wide { width: min(calc(100% - 2rem),720px); grid-template-columns: 1fr; gap: 2rem; }
    .auth-story { max-width: none; padding-top: 1rem; text-align: center; }
    .auth-story > p:not(.eyebrow) { margin-inline: auto; }
    .auth-network { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .auth-network article { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .auth-trust-line { justify-content: center; }
    .activation-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .activation-steps li { grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,.09); border-left: 0; text-align: center; }
    .activation-steps li.is-active { border-top-color: var(--accent-primary); border-left-color: transparent; }
    .register-policy { text-align: left; }
    .recovery-flow { justify-content: center; }

    .cc-shell { grid-template-columns: 1fr; }
    .cc-sidebar { position: fixed; z-index: 90; inset: 0 auto 0 0; width: min(86vw,300px); transform: translateX(-105%); box-shadow: 20px 0 70px rgba(0,0,0,.55); transition: transform var(--transition-base); }
    .cc-sidebar.is-open { transform: translateX(0); }
    .cc-mobile-toggle { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.035); color: #fff; }
    .cc-mobile-toggle .icon { width: 21px; height: 21px; }
    .cc-topbar { grid-template-columns: auto minmax(0,1fr) auto; }
    .cc-breadcrumb { display: none; }
    .cc-grid--main { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .auth-topbar { width: calc(100% - 1rem); margin-top: .5rem; padding: .55rem; border-radius: 16px; }
    .auth-topbar .brand-text { display: none; }
    .auth-topbar > .btn { min-width: 44px; padding-inline: .75rem; font-size: 0; }
    .auth-topbar > .btn .icon { margin: 0; }
    .auth-stage,
    .auth-stage--wide { width: calc(100% - 1rem); min-height: auto; padding: 2.5rem 0 1.5rem; }
    .auth-story h1 { font-size: clamp(2.8rem,14vw,4.3rem); }
    .auth-network { grid-template-columns: 1fr; }
    .auth-network article { grid-template-columns: 44px minmax(0,1fr); justify-items: stretch; text-align: left; }
    .auth-trust-line { display: none; }
    .auth-card { padding: 1.05rem; border-radius: 22px; }
    .auth-card-head h2 { font-size: 1.75rem; }
    .security-orb { width: 48px; height: 48px; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .auth-card-footer { margin: 1rem -1.05rem -1.05rem; padding: 1rem; flex-direction: column; text-align: center; }
    .auth-footer { width: calc(100% - 1rem); flex-direction: column; text-align: center; }
    .activation-steps { grid-template-columns: 1fr; }
    .activation-steps li { grid-template-columns: 42px minmax(0,1fr); border-top: 0; border-left: 1px solid rgba(255,255,255,.09); text-align: left; }
    .activation-steps li.is-active { border-top-color: transparent; border-left-color: var(--accent-primary); }
    .recovery-flow strong { display: none; }

    .cc-topbar { min-height: 68px; padding: .65rem; grid-template-columns: auto minmax(0,1fr) auto; gap: .55rem; }
    .cc-search input { padding-right: .5rem; }
    .cc-presence { display: none; }
    .cc-content { padding: .75rem; }
    .cc-view-header { align-items: stretch; flex-direction: column; }
    .cc-view-actions { display: grid; grid-template-columns: 1fr; }
    .cc-view-actions .btn { width: 100%; }
    .cc-grid--metrics,
    .cc-grid--2,
    .cc-grid--3 { grid-template-columns: 1fr; }
    .cc-toolbar { display: grid; grid-template-columns: 1fr; }
    .cc-toolbar .btn { width: 100%; }
    .cc-table { min-width: 680px; }
    .chat-compose { grid-template-columns: 1fr; }
    .chat-compose .btn { width: 100%; }
}

@media (max-width: 380px) {
    .captcha-grid { gap: .3rem; }
    .captcha-tile { min-height: 58px; }
    .auth-card-head { display: block; }
    .security-orb { display: none; }
}

@media (max-width: 340px) {
    .auth-shell { width: calc(100% - .75rem); }
    .auth-card,
    .cc-card { padding: .85rem; border-radius: 17px; }
    .auth-card-footer { margin-right: -.85rem; margin-left: -.85rem; padding-right: .85rem; padding-left: .85rem; }
    .captcha-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .cc-content { padding: .5rem; }
    .cc-topbar { padding: .5rem; }
    .cc-view-header h1 { font-size: clamp(1.45rem, 10vw, 1.8rem); }
}

@media (prefers-reduced-motion: reduce) {
    .cc-skeleton::after { animation: none; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .auth-topbar,
    .cc-topbar,
    .cc-sidebar,
    .cc-card { background: #0b1421; }
}