/* CABAL EP33 MEMBER PAGES FIX v3
   Separate versioned stylesheet prevents stale cabal.css hiding new page layouts.
   Only layout/presentation rules are changed, not API/database logic.
*/
*, *::before, *::after {box-sizing:border-box}

/* Sidebar links and account shortcut */
.dashboard .member-sidebar {flex:0 0 230px;min-width:0}
.dashboard .member-sidebar a {line-height:1.45;transition:color .15s,background .15s,border-color .15s}
.dashboard .member-sidebar a.security-menu {margin:5px 0;padding:13px 14px;border:1px solid #244664;border-radius:6px;background:#102239;color:#c5e7ff;overflow-wrap:normal;word-break:normal}
.dashboard .member-sidebar a.security-menu:hover,
.dashboard .member-sidebar a.color-menu-active {border-color:#398bd1;background:#113457;color:#fff}
.dashboard .dashmain {min-width:0}
.account-security {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:23px;padding-top:20px;border-top:1px solid #203044;color:#a4bad2}
.account-security .primary {display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;white-space:nowrap;color:#fff;font-size:14px;flex:0 0 auto}

/* Password screen: centered card, stacked full-width fields */
.password-page {min-height:calc(100vh - 72px);padding:54px 20px 85px;background:radial-gradient(ellipse at 60% 0%,#112e4f 0%,transparent 42%),#060c14}
.password-container {max-width:600px;width:100%;margin:0 auto}
.password-head {text-align:center;margin:0 0 27px}
.password-head .eyebrow {margin:0 0 10px}
.password-head h1 {font-size:clamp(29px,4vw,39px);line-height:1.25;margin:0 0 12px;color:#f5f9ff}
.password-head p {color:#a0b6cf;font-size:15px;margin:0 0 14px;line-height:1.6}
.password-back {display:inline-block;font-size:14px;color:#72c7ff}
.password-back:hover {text-decoration:underline}
.password-card {width:100%;padding:32px;background:linear-gradient(145deg,#0c1828,#0a121e);border:1px solid #28445e;border-radius:14px;box-shadow:0 22px 65px #0008}
.password-card-heading {display:flex;align-items:center;gap:15px;margin-bottom:19px}
.password-lock {flex:0 0 54px;width:54px;height:54px;display:grid;place-items:center;background:#102b49;border:1px solid #2b668f;border-radius:12px;font-size:23px}
.password-card-heading .eyebrow {font-size:11px;margin:0 0 3px}
.password-card-heading h2 {font-size:24px;line-height:1.25;color:#f3f9ff;margin:0}
.password-current-user {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;margin-bottom:16px;background:#0a2236;border:1px solid #254866;border-radius:8px;color:#b5cadd;font-size:14px;line-height:1.5}
.password-current-user strong {max-width:65%;color:#fff;text-align:right;overflow-wrap:anywhere;float:none}
.password-form {display:flex;flex-direction:column;align-items:stretch;min-width:0}
.password-form label {display:block;margin:18px 0 8px;color:#d9e9f8;font-weight:600;font-size:15px}
.password-form input[type="password"] {display:block;width:100%;min-width:0;max-width:100%;padding:13px 14px;background:#070f19;border:1px solid #314b65;border-radius:8px;color:#fff;font:inherit;font-size:15px;outline:0;transition:box-shadow .18s,border-color .18s}
.password-form input[type="password"]:focus {border-color:#48a3f5;box-shadow:0 0 0 3px #2378d534}
.password-form input[type="password"]::placeholder {color:#74879c}
.password-help {display:block;color:#92a9c2;font-size:13px;line-height:1.6;margin-top:7px}
.password-submit {display:block;width:100%;min-height:48px;margin-top:24px;padding:12px 20px!important;border:0;border-radius:8px;clip-path:none;font:inherit;font-weight:600;color:#fff;cursor:pointer;text-align:center}
.password-submit:hover,.color-save:hover {filter:brightness(1.12)}
.password-tip {margin-top:24px;padding-top:18px;border-top:1px solid #273e54;color:#99aec5;line-height:1.8;font-size:13px}
.password-notice {padding:12px 14px;margin-bottom:18px;border-radius:8px;font-size:14px;line-height:1.65}
.password-success {background:#123b31;border:1px solid #267d5b;color:#a0f6cd}
.password-error {background:#452326;border:1px solid #a14555;color:#ffd0d7}

/* Character color editor: one row / one character with usable color picker */
.color-settings-main {width:100%;min-width:0;max-width:1250px}
.color-settings-intro {margin-top:0!important;background:linear-gradient(120deg,#0d1a2a,#0a1523);border-color:#284765}
.color-settings-intro h1 {margin:8px 0 10px;font-size:clamp(23px,3vw,32px);line-height:1.3}
.color-settings-intro p {margin:5px 0;line-height:1.7}
.color-settings-intro strong {color:#bfdefb}
.color-settings-panel {max-width:1030px}
.color-settings-panel h2 {margin:8px 0 5px}
.color-settings-panel>p {line-height:1.7}
.name-colors .color-list {display:grid;gap:12px;margin-top:24px;min-width:0}
.name-colors .color-row {display:grid;grid-template-columns:minmax(0,1fr) 135px 80px 124px;align-items:center;gap:18px;min-width:0;margin:0;padding:16px 18px;background:#071320;border:1px solid #274158;border-radius:9px}
.name-colors .name-preview {display:block;font-size:17px;font-weight:700;line-height:1.5;min-width:0;overflow-wrap:anywhere;text-shadow:0 1px 4px #000}
.name-colors .color-row small {font-size:13px;color:#94acc6;white-space:nowrap}
.name-colors .color-picker-label {display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;min-width:50px;cursor:pointer}
.name-colors .color-picker-caption {display:block;color:#9ebbd8;font-size:12px;line-height:1.2;white-space:nowrap}
.name-colors .color-row input[type="color"] {display:block;flex:0 0 auto;width:50px;height:42px;min-width:50px;min-height:42px;padding:3px;background:#101f2d;border:1px solid #36556d;border-radius:7px;cursor:pointer}
.name-colors .color-save {display:flex;align-items:center;justify-content:center;min-width:0;min-height:42px;width:124px;margin:0;padding:10px 15px;border:0;border-radius:7px;clip-path:none;background:linear-gradient(135deg,#167afe,#1055ca);color:#fff;font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
/* Also support the original dashboard's 4-child character rows. */
.name-colors .color-row {grid-template-columns:minmax(0,1fr) 135px 80px 124px}
.name-colors .color-row > input[type="color"] {justify-self:center}
.sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.color-settings-footnote {margin-top:25px;padding-top:17px;border-top:1px solid #273e54;color:#9caec3;font-size:13px;line-height:1.75}

@media(max-width:980px){
 .dashboard .member-sidebar {flex-basis:190px}
 .name-colors .color-row {grid-template-columns:minmax(0,1fr) 100px 60px 112px;gap:10px}
 .name-colors .color-row small {white-space:normal}
 .name-colors .color-row .color-save {width:112px}
}
@media(max-width:680px){
 .password-page {padding:32px 13px 55px}
 .password-card {padding:23px 18px}
 .password-card-heading h2 {font-size:21px}
 .dashboard .member-sidebar {width:100%;flex:0 0 auto}
 .dashboard .color-settings-main {padding:20px 14px}
 .color-settings-main .panel {padding:20px 17px}
 .name-colors .color-row {grid-template-columns:minmax(0,1fr) 56px;gap:9px 12px;padding:15px}
 .name-colors .color-row .name-preview {grid-column:1;grid-row:1}
 .name-colors .color-row small {grid-column:1;grid-row:2}
 .name-colors .color-row .color-picker-label, .name-colors .color-row input[type="color"] {grid-column:2;grid-row:1;margin:0}
 .name-colors .color-row .color-save {grid-column:1 / -1;grid-row:3;width:100%;max-width:none;margin-top:5px}
 .name-colors .color-picker-caption {font-size:11px}
 .account-security {align-items:stretch;flex-direction:column}
 .account-security .primary {align-self:flex-start}
}
@media(max-width:600px){
 .dashboard .member-sidebar {display:flex;flex-wrap:nowrap;align-items:center;gap:7px;width:100%;height:auto;min-height:0;padding:10px 12px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin}
 .dashboard .member-sidebar .dashlogo,.dashboard .member-sidebar hr {display:none}
 .dashboard .member-sidebar a,.dashboard .member-sidebar a.security-menu {display:block;flex:0 0 auto;width:auto;margin:0;padding:9px 12px;white-space:nowrap;word-break:normal;font-size:13px}
}