@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');:root{--bg:#05090f;--panel:#0a111b;--line:#203044;--text:#edf5ff;--muted:#91a0b2;--blue:#176df0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Kanit,Arial,sans-serif}a{text-decoration:none;color:inherit}.nav{height:72px;background:#05090e;border-bottom:1px solid #1a2837;display:flex;align-items:center;padding:0 4%;gap:35px;position:sticky;top:0;z-index:10}.logo{font-weight:700;font-size:22px;color:#60bfff;letter-spacing:2px}.nav nav{display:flex;gap:25px;flex:1;justify-content:center}.nav nav a{font-size:14px;color:#aab6c5}.navbtn{display:flex;gap:10px}.navbtn a,.primary,.light{padding:12px 20px;border:1px solid #29405a;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);font-weight:600}.primary{background:linear-gradient(135deg,#1680ff,#1652c5);border-color:#328fff}.light{background:#fff;color:#10213b}.hero{min-height:770px;position:relative;background:radial-gradient(circle at 75% 35%,#1764a8 0,transparent 30%),linear-gradient(110deg,#edf8ff,#eaf4ff 36%,#164a7b 66%,#03070c);overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.65) 35%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.7))}.heroText{position:relative;z-index:2;width:min(1180px,90%);margin:auto;padding:125px 0;color:#122b4c}.eyebrow{font-size:12px;letter-spacing:4px;color:#2581ea;font-weight:600;margin-bottom:20px}.hero h1{font:700 76px/.95 'Playfair Display',serif;margin:0 0 25px}.hero h1 span,.authbox h1 span{color:#2363d6}.heroText>p{font-size:18px;line-height:1.8;color:#344c6b}.chips{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0}.chips b{background:#ffffffbf;border:1px solid #9bbbea;border-radius:20px;padding:6px 13px;font-size:13px}.chips .online{color:#198c55;border-color:#91d9b4}.actions{display:flex;gap:12px;margin-top:25px}.big{padding:15px 27px}.features{width:min(1100px,90%);margin:-65px auto 70px;position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.features article,.panel,.member,.table{background:var(--panel);border:1px solid var(--line);padding:27px;box-shadow:0 15px 50px #0004}.features strong{color:#3ea9ff}.features p,.muted{color:var(--muted);line-height:1.7}.features a{color:#56baff}.auth{min-height:calc(100vh - 72px);display:grid;place-items:center;background:radial-gradient(circle at 72% 40%,#174b82,transparent 34%),linear-gradient(130deg,#07101c,#0c2747,#05080d);padding:50px 20px}.authbox{width:min(500px,100%);background:#fafcffF7;color:#10233e;padding:42px;border-radius:20px;box-shadow:0 30px 100px #0008}.authbox h1{font:700 39px 'Playfair Display',serif;margin:0 0 8px}.authbox p{color:#65758b}.authbox label{display:block;font-weight:600;margin:16px 0 7px}.authbox input:not([type=checkbox]){width:100%;padding:14px;border:1px solid #b9cbe3;border-radius:9px;font:inherit}.remember{display:flex;justify-content:space-between;align-items:center;color:#245acb}.remember label{font-weight:400}.full{width:100%;margin-top:12px}.below{text-align:center;margin-top:20px;color:#64758d}.below a{color:#1e5fd2;font-weight:600}.page{width:min(1100px,90%);margin:auto;padding:70px 0}.page h1{font-size:46px;margin:0 0 10px}.table{overflow:auto}.table table{width:100%;border-collapse:collapse}.table th,.table td{padding:14px;border-bottom:1px solid #1d2a39;text-align:left}.table th{color:#64adff}.dashboard{display:flex;min-height:calc(100vh - 72px)}.dashboard aside{width:230px;background:#070b11;border-right:1px solid #1b2735;padding:25px 15px}.dashboard aside a{display:block;padding:13px 15px;color:#a7b2c1}.dashboard aside .active{background:#09213b;color:#55c4ff;border:1px solid #155b9a}.dashboard aside hr{border-color:#18222e;margin:20px 0}.dashmain{flex:1;padding:45px;max-width:1250px}.member{display:flex;align-items:center;gap:35px;justify-content:space-between}.member h1{margin:4px 0}.member small{color:#3b9eff;letter-spacing:4px}.member p{color:#8b9aaa}.stats{display:flex;gap:35px}.stats span{color:#7f8fa4}.stats strong{display:block;font-size:24px;color:#42baff}.panel{margin-top:28px}footer{padding:35px;text-align:center;color:#657487;border-top:1px solid #172333}@media(max-width:900px){.nav nav{display:none}.features{grid-template-columns:1fr;margin-top:20px}.hero h1{font-size:55px}.dashboard aside{width:190px}.member{flex-wrap:wrap}.stats{width:100%;justify-content:space-around}}@media(max-width:600px){.navbtn a:first-child{display:none}.heroText{padding:85px 0}.hero h1{font-size:46px}.actions{flex-direction:column}.actions a{width:100%;text-align:center}.dashboard{display:block}.dashboard aside{width:100%;display:flex;overflow:auto}.dashboard aside hr{display:none}.dashmain{padding:20px}}
.alert{padding:12px 14px;border-radius:9px;margin:15px 0;font-size:14px}.alert.bad{background:#ffe8ea;color:#9b1c2c;border:1px solid #ffb9c1}.alert.warn{background:#fff6db;color:#7c5a00;border:1px solid #efd27b}
.alert.ok{background:#e4fff1;color:#087443;border:1px solid #9ce0bd}.accountgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.accountgrid>div{background:#07101a;border:1px solid #1c2b3d;padding:18px}.accountgrid small{display:block;color:#7890a8;margin-bottom:6px}.accountgrid b{font-size:16px;color:#e8f2ff}@media(max-width:800px){.accountgrid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.accountgrid{grid-template-columns:1fr}}

.download-page{background:#eef5ff;color:#12233f;min-height:calc(100vh - 72px)}
.download-hero{padding:75px 20px 65px;text-align:center;background:linear-gradient(180deg,#f7fbff,#edf5ff);border-bottom:1px solid #d9e4f2}
.download-hero .eyebrow{margin-bottom:12px}.download-hero h1{font-size:52px;margin:0 0 10px}.download-hero p{color:#5e7391;font-size:17px;margin:0 auto 28px}.download-actions{display:flex;justify-content:center;gap:12px}.download-content{width:min(1100px,90%);margin:auto;padding:52px 0 90px}.section-title h2{font-size:34px;margin:0 0 2px}.section-title p{margin-top:4px;color:#71839b}.download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}.download-card{background:#fff;border:1px solid #d5e2f2;border-radius:16px;padding:22px;box-shadow:0 12px 35px rgba(30,70,120,.08);color:#172a46}.download-card-head{display:flex;gap:15px;align-items:center}.download-icon{width:50px;height:50px;border-radius:12px;background:linear-gradient(145deg,#3e8cff,#1555d5);color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 7px 15px rgba(33,95,215,.25)}.download-card h3{font-family:'Playfair Display',serif;margin:0;font-size:20px}.download-card-head span{color:#6b7e99;font-size:13px}.download-meta{display:grid;grid-template-columns:1fr 1fr;margin:22px 0 15px;border:1px solid #d4e1f1;border-radius:12px;overflow:hidden;background:#eef5ff}.download-meta div{padding:13px;border-right:1px solid #d4e1f1;border-bottom:1px solid #d4e1f1}.download-meta div:nth-child(2n){border-right:0}.download-meta div:nth-last-child(-n+2){border-bottom:0}.download-meta small{display:block;color:#6d809b;margin-bottom:4px}.download-meta b{font-size:14px}.download-button{display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#3985ff,#1555d6);color:#fff;border-radius:10px;padding:12px;font-weight:600;box-shadow:0 7px 15px rgba(33,95,215,.2)}.system-card{margin-top:35px;background:#fff;border:1px solid #d5e2f2;border-radius:16px;padding:28px;box-shadow:0 12px 35px rgba(30,70,120,.06)}.system-card h2{margin:0}.system-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.system-grid div{background:#eef5ff;border:1px solid #d4e1f1;border-radius:10px;padding:14px}.system-grid small{display:block;color:#6d809b;margin-bottom:5px}.system-grid b{font-size:13px}@media(max-width:800px){.download-grid,.system-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.download-hero h1{font-size:40px}.download-actions{flex-direction:column;align-items:stretch}.download-grid,.system-grid{grid-template-columns:1fr}.download-content{width:92%}}

.nav-light{background:#fff;border-bottom-color:#dbe6f3}.nav-light .logo{color:#1557c9}.nav-light nav a,.nav-light .navbtn a:first-child{color:#1b3151}.download-link{background:#fff;color:#17345d;border:1px solid #b9cce5;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);font-weight:600;padding:15px 27px}
@media(max-width:600px){.download-link{width:100%;text-align:center}}
.name-colors h2{margin:0}.color-list{display:grid;gap:10px;margin-top:20px}.color-row{display:grid;grid-template-columns:minmax(140px,1fr) 140px 46px auto;align-items:center;gap:14px;padding:14px 16px;background:#07101a;border:1px solid #1c2b3d}.color-row small{color:#7890a8}.name-preview{font-weight:700;font-size:17px;text-shadow:0 1px 4px #000}.color-row input[type=color]{width:42px;height:34px;border:0;background:transparent;cursor:pointer}.color-save{padding:9px 14px;font:inherit;cursor:pointer;color:#fff}@media(max-width:620px){.color-row{grid-template-columns:1fr 46px;gap:8px}.color-row small{grid-column:1}.color-save{grid-column:2;grid-row:1 / span 2}}

/* CABAL EP33 member password change */
.security-menu{border:1px solid #1d466e!important;background:#10243b!important;color:#7dd3fc!important;border-radius:5px}
.account-security{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:22px;padding-top:19px;border-top:1px solid #203044;color:#a3b8cc}
.account-security .primary{color:white;font-size:13px;padding:10px 15px}
.password-page{min-height:calc(100vh - 72px);padding:64px 20px 100px;background:radial-gradient(ellipse at 65% 0%,#143b65 0%,transparent 38%),linear-gradient(145deg,#080d14,#0b1828 55%,#070c14)}
.password-container{width:min(560px,100%);margin:0 auto}
.password-head{text-align:center;margin-bottom:25px}.password-head .eyebrow{margin-bottom:12px}
.password-head h1{font-size:35px;margin:0 0 7px;color:#f4f8ff}.password-head p{color:#9daec4;margin:0 0 11px}
.password-back{color:#66bcff;font-size:14px}.password-back:hover{text-decoration:underline}
.password-card{background:#0b1523;border:1px solid #264260;border-radius:15px;box-shadow:0 25px 75px #0006;padding:35px}
.password-card-heading{display:flex;align-items:center;gap:16px;margin-bottom:20px}.password-card-heading .eyebrow{margin:0;font-size:11px}
.password-card-heading h2{font-size:22px;margin:4px 0 0;color:#eef7ff}
.password-lock{background:#123456;border:1px solid #2d669f;width:54px;height:54px;display:grid;place-items:center;border-radius:13px;font-size:24px}
.password-current-user{padding:12px 15px;background:#0d2237;border:1px solid #214261;border-radius:8px;color:#a9c4e0;font-size:14px;margin-bottom:15px}
.password-current-user strong{float:right;color:#fff;overflow-wrap:anywhere;max-width:58%;text-align:right}
.password-form label{display:block;margin:18px 0 8px;color:#d8e5f4;font-weight:600}
.password-form input[type=password]{width:100%;background:#080f19;border:1px solid #2d435b;color:#fff;border-radius:8px;padding:13px 14px;outline:none;font:inherit;transition:border-color .2s,box-shadow .2s}
.password-form input[type=password]:focus{border-color:#3b96ee;box-shadow:0 0 0 3px #1570c733}
.password-form input[type=password]::placeholder{color:#657c98}
.password-help{color:#86a0b9;display:block;line-height:1.6;margin-top:7px}
.password-submit{width:100%;font:inherit;cursor:pointer;margin-top:28px;clip-path:none;border-radius:8px;padding:14px}
.password-notice{border-radius:8px;padding:12px 15px;font-size:14px;line-height:1.6;margin-bottom:18px}
.password-success{background:#123b31;border:1px solid #267d5b;color:#a0f6cd}
.password-error{background:#452326;border:1px solid #a14555;color:#ffd0d7}
.password-tip{border-top:1px solid #223247;padding-top:19px;margin-top:24px;color:#93a8be;font-size:13px;line-height:1.8}
@media(max-width:600px){.password-page{padding:35px 12px 60px}.password-card{padding:24px 19px}.password-head h1{font-size:30px}.account-security{align-items:flex-start;flex-direction:column}}

/* EP33 character-name color settings navigation */
.dashboard aside .color-menu {margin-top:7px;white-space:normal;overflow-wrap:anywhere}
.dashboard aside .color-menu-active {border-color:#2b80b7!important;background:#123956!important;color:#e2f5ff!important}
.color-settings-main {min-width:0;width:100%}
.color-settings-intro {margin-top:0;border-color:#24415c;background:linear-gradient(110deg,#0a1525,#0b1e32)}
.color-settings-intro h1 {margin:10px 0;font-size:28px}
.color-settings-intro p {margin:6px 0}
.color-settings-intro strong {color:#b7ddff}
.color-settings-panel {max-width:950px}
.color-settings-panel .color-row {grid-template-columns:minmax(140px,1fr) 140px 55px 110px}
.color-settings-panel .color-save {border:0;border-radius:5px;white-space:nowrap}
.color-settings-panel .name-preview {overflow-wrap:anywhere}
.color-picker-label {display:flex;align-items:center;justify-content:center}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.color-settings-footnote {margin-top:23px;padding-top:16px;border-top:1px solid #203044;font-size:13px;color:#97aabf;line-height:1.8}
@media(max-width:700px){.color-settings-main{padding:20px}.color-settings-panel .color-row{grid-template-columns:minmax(110px,1fr) 50px;gap:8px}.color-settings-panel .color-row small{grid-column:1;grid-row:2}.color-settings-panel .color-save{grid-column:2;grid-row:2;padding:7px 6px;font-size:12px;white-space:normal}.color-settings-panel .color-picker-label{grid-column:2;grid-row:1}}