:root{color-scheme:dark;--bg:#101114;--surface:#181a20;--line:#2a2d35;--muted:#9296a3;--text:#edf0f6;--gold:#edba75;--green:#85d6ab;--red:#ef8993}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;font-size:14px;line-height:1.65}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:wait}
a{color:var(--gold);text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
[hidden]{display:none!important}
h1,h2,p{margin-top:0}
h1{line-height:1.3;font-size:32px;margin-bottom:12px;letter-spacing:-.7px}
h2{line-height:1.45;font-size:21px;margin-bottom:12px}
strong{font-weight:600}
.muted{color:var(--muted)}
.brand{color:var(--text);font-size:24px;letter-spacing:2px;font-weight:800;line-height:1.2;display:inline-block}
.brand b{color:var(--gold)}
.brand small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:7px;font-weight:500}
.eyebrow{color:var(--gold);font-size:10px;font-weight:600;letter-spacing:2.5px;margin-bottom:12px}
.initial{min-height:100vh;display:grid;place-content:center;text-align:center}
.initial p{color:var(--muted);margin-top:22px}
.login-screen{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-story{position:relative;overflow:hidden;padding:44px 55px;background:linear-gradient(145deg,#24211d,#14161b 60%);display:flex;flex-direction:column;min-height:740px}
.login-story:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,17,20,.18),rgba(16,17,20,.1)),url('/assets/cabal-blader.png') right -80px bottom -60px/auto 84% no-repeat;opacity:.26;pointer-events:none}
.login-story>*{position:relative}
.story-copy{margin:auto 0;max-width:460px}
.story-copy h1{font-size:clamp(42px,4.5vw,66px);line-height:1.3;letter-spacing:-2px}
.story-copy h1 span{color:var(--gold)}
.story-copy>p:not(.eyebrow){font-size:16px;color:#c2bcb2}
.story-tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.story-tags span{border:1px solid #5e4b35;border-radius:4px;padding:6px 10px;font-size:10px;letter-spacing:1px;color:#d6b88c}
.story-foot{font-size:9px;letter-spacing:3px;color:#85817b;margin-bottom:0}
.login-form-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 32px}
.login-card{width:100%;max-width:365px}
.login-card h2{font-size:28px;margin-bottom:10px}
.login-card>.muted{margin-bottom:30px}
label{display:block;font-size:12px;color:#c5c8d2;margin:18px 0 8px}
input,select{width:100%;border:1px solid #383b45;background:#111318;color:var(--text);padding:13px 15px;min-height:47px;border-radius:6px}
input::placeholder{color:#606572}
input:focus,select:focus{border-color:var(--gold)}
.primary,.outline,.quiet,.text-button{border-radius:6px;padding:11px 17px;min-height:42px;font-weight:600;transition:background .15s}
.primary{border:1px solid var(--gold);background:var(--gold);color:#201b14}
.primary:hover{background:#ffce8f}
.primary span{float:right}
.primary.small{font-size:12px;padding:9px 15px;min-height:38px}
.outline{border:1px solid #4a4033;background:transparent;color:var(--gold)}
.outline:hover{background:#29241d}
.quiet,.text-button{color:#b7bdc9;background:transparent;border:1px solid #343842;font-size:12px}
.text-button{border:0;color:var(--gold);padding:3px 0;min-height:32px}
.quiet:hover{background:#222630}
.login-card form .primary,#verifyForm .primary{margin-top:24px;width:100%}
.message{min-height:0;color:var(--red);font-size:12px;margin:16px 0 0}
.message:empty{display:none}
.message.success{color:var(--green)}
.signup{text-align:center;color:var(--muted);font-size:12px;margin:28px 0 16px}
.back-link{display:block;text-align:center;color:#777d89;font-size:12px}
.login-foot{color:#555b67;font-size:9px;letter-spacing:2px;margin:54px 0 0}
.panel-screen{display:grid;grid-template-columns:235px minmax(0,1fr);min-height:100vh}
.sidebar{background:#14161b;border-right:1px solid var(--line);padding:35px 24px;display:flex;flex-direction:column}
.sidebar .brand{margin-bottom:45px}
.nav-label{font-size:10px;color:#646b78;letter-spacing:1px;margin:0 10px 12px}
.sidebar nav{display:grid;gap:7px}
.sidebar nav button{background:none;color:#939aa8;border:0;border-radius:6px;min-height:48px;text-align:left;font-size:12px;padding:10px 12px;white-space:nowrap}
.sidebar nav button span{font-size:18px;margin-right:12px;vertical-align:middle;color:#687180}
.sidebar nav button.active{color:var(--gold);background:#2b251e}
.sidebar nav button.active span{color:var(--gold)}
.sidebar-bottom{margin-top:auto;padding-top:70px;display:grid;gap:14px}
.sidebar-bottom a{font-size:11px;color:#8a919f;padding-left:10px}
.sidebar-bottom p{border-top:1px solid var(--line);padding:25px 10px 0;margin:8px 0 0;font-size:10px;letter-spacing:1.7px;color:#79818f}
.sidebar-bottom p span{font-size:8px;color:#535b68;letter-spacing:1px}
.workspace{min-width:0}
.topbar{height:79px;border-bottom:1px solid var(--line);padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.topbar>p{font-size:10px;letter-spacing:1.5px;color:#8d95a3;margin:0}
.topbar>p span{margin:0 10px;color:#444b58}
.topbar>div{display:flex;align-items:center;gap:18px}
.session-badge{color:#7f8998;font-size:10px}
.dashboard{padding:40px;max-width:1400px;margin:auto}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}
.page-heading .muted{font-size:12px;margin:0}
.page-heading .eyebrow{margin-bottom:9px}
.page-heading .outline{white-space:nowrap;font-size:11px}
.page-heading strong{color:#c8ceda;overflow-wrap:anywhere}
.dashboard>.message{margin-bottom:25px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px}
.stat{border:1px solid var(--line);background:var(--surface);padding:22px 24px;border-radius:9px;display:flex;flex-direction:column}
.stat>span{font-size:12px;color:#aab0bd}
.stat strong{font-size:36px;font-weight:500;line-height:1.4;margin:8px 0;color:#f0d0a2}
.stat strong.status-word{font-size:22px;margin:13px 0}
.stat small{color:#737d8e;font-size:10px}
.adventure-banner{border:1px solid #453929;border-radius:9px;position:relative;overflow:hidden;background:linear-gradient(115deg,#30271c,#17191e 75%);padding:30px 33px;margin-bottom:24px;min-height:258px}
.adventure-banner h2{font-size:26px;margin-bottom:9px;position:relative}
.adventure-banner>div:first-child{position:relative;z-index:1}
.adventure-banner p:not(.eyebrow){font-size:12px;color:#b4ac9f;margin-bottom:20px;max-width:75%}
.banner-mark{position:absolute;right:35px;top:0;font-size:200px;line-height:1.35;font-family:Georgia,serif;color:#c8a263;opacity:.065;font-weight:800;letter-spacing:-18px}
.overview-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.content-card{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:26px}
.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.card-heading .eyebrow{font-size:8px;margin-bottom:6px}
.card-heading h2{font-size:18px;margin:0}
.character-mini{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding:18px 0}
.character-mini:last-child{padding-bottom:0}
.character-mini>div:nth-child(2){flex:1;min-width:0}
.character-mini strong{display:block;font-size:13px;overflow-wrap:anywhere}
.character-mini small{font-size:10px;color:#838e9f}
.class-mark{height:44px;width:44px;border:1px solid #62503a;background:#28231d;border-radius:9px;color:var(--gold);display:grid;place-content:center;flex-shrink:0;font-size:11px;letter-spacing:1px}
.pill{border:1px solid #384e42;background:#1b2a22;color:var(--green);font-size:9px;padding:3px 8px;border-radius:20px;white-space:nowrap}
.pill.neutral{background:#222630;border-color:#343b48;color:#9da6b5}
.pill.capella{color:#90a8ff;background:#202940;border-color:#3c4b71}
.pill.procyon{color:#ffbe86;background:#372a21;border-color:#654935}
.community-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.community-symbol{font-size:40px;color:var(--gold);line-height:1;margin-bottom:25px}
.community-card>.eyebrow{font-size:8px}
.community-card h2{font-size:22px}
.community-card .muted{font-size:12px;margin-bottom:24px}
.empty-state{padding:25px 0;color:#7e8797;font-size:12px}
.empty-state strong{display:block;color:#bac1cd;font-size:14px;margin-bottom:6px}
.section-intro{margin-bottom:22px}
.section-intro h2{font-size:18px;margin-bottom:5px}
.section-intro p{font-size:12px}
.character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.character-card{padding:26px;border-radius:9px;border:1px solid var(--line);background:var(--surface)}
.character-top{display:flex;gap:14px;align-items:center;margin-bottom:23px}
.character-top>div:nth-child(2){min-width:0;flex:1}
.character-top h2{font-size:18px;margin:0;overflow-wrap:anywhere}
.character-top p{font-size:11px;color:#8d97a8;margin:4px 0 0}
.character-details{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.character-details dt{font-size:10px;color:#707b8f;margin-bottom:5px}
.character-details dd{margin:0;font-size:12px;overflow-wrap:anywhere}
.character-card>button{width:100%;font-size:11px}
.connection-row{border-top:1px solid var(--line);padding:18px 0}
.connection-row strong{display:block;margin-bottom:9px;font-size:13px;overflow-wrap:anywhere}
.connection-row p{font-size:10px;color:#778296;margin:9px 0 0}
.discord-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start}
.discord-layout h2{font-size:21px}
.steps{list-style:none;padding:0;margin:25px 0 30px;display:grid;gap:22px}
.steps li{display:flex;align-items:flex-start;gap:15px}
.steps li>span{font-size:10px;border:1px solid #4b4033;border-radius:50%;width:29px;height:29px;display:grid;place-content:center;color:var(--gold);flex-shrink:0}
.steps strong{font-size:12px}
.steps p{font-size:11px;color:#838fa1;margin:3px 0 0}
.command-row{display:flex;align-items:center;gap:12px;justify-content:space-between;background:#101216;border:1px solid var(--line);border-radius:6px;padding:12px;margin-top:12px}
.command-row code{color:#c5aa83;font-size:11px;overflow-wrap:anywhere;min-width:0}
.command-row button{flex-shrink:0;font-size:10px;padding:7px 11px;min-height:34px}
.note{background:#111318;border-left:2px solid #705732;padding:17px;margin-top:20px}
.note strong{font-size:11px;color:#b9bdc7}
.note p{font-size:10px;color:#7e8999;margin:8px 0 0}
.dashboard-foot{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#596475;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);letter-spacing:.5px}

@media(min-width:1600px){.login-story{padding-left:90px}
.dashboard{padding:50px}
.panel-screen{grid-template-columns:265px minmax(0,1fr)}
}
@media(max-width:1100px){.dashboard{padding:28px}
.topbar{padding:0 28px}
.overview-grid,.discord-layout{grid-template-columns:1fr}
.stats{gap:12px}
.stat{padding:19px}
.login-story{padding:35px}
.story-copy h1{font-size:45px}
.login-form-wrap{padding:35px 28px}
}
@media(max-width:800px){.panel-screen{grid-template-columns:1fr}
.sidebar{padding:20px;border-right:0;border-bottom:1px solid var(--line)}
.sidebar .brand{margin-bottom:20px;font-size:20px}
.sidebar .brand small{font-size:8px}
.nav-label,.sidebar-bottom{display:none}
.sidebar nav{display:flex;gap:5px}
.sidebar nav button{font-size:11px;padding:9px 12px;min-height:41px;flex:1;text-align:center}
.sidebar nav button span{display:none}
.topbar{height:64px;padding:0 22px}
.topbar>p{font-size:8px}
.topbar>div{gap:10px}
.dashboard{padding:28px 22px}
.page-heading{align-items:flex-start}
.page-heading h1{font-size:27px}
.page-heading .muted{font-size:11px}
.page-heading .outline{padding:8px 12px;min-height:36px;font-size:10px}
.eyebrow{font-size:8px;letter-spacing:2px}
.login-screen{grid-template-columns:1fr}
.login-story{min-height:270px;padding:25px 28px}
.login-story:before{background-position:right -10px top -30px;background-size:auto 145%}
.story-copy{margin:32px 0 0}
.story-copy h1{font-size:34px;letter-spacing:-1px;margin-bottom:12px}
.story-copy>p:not(.eyebrow),.story-tags,.story-foot{display:none}
.login-story .brand{font-size:21px}
.login-story .eyebrow{font-size:8px;margin-bottom:12px}
.login-form-wrap{padding:36px 28px}
.login-card h2{font-size:24px}
.login-foot{margin-top:35px}
}
@media(max-width:480px){.stats{grid-template-columns:1fr 1fr}
.stat:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.stat:last-child strong{grid-row:1/3;grid-column:2;text-align:right;margin:0}
.stat strong{font-size:30px}
.stat{padding:17px}
.stat>span{font-size:11px}
.stat small{font-size:9px}
.session-badge{display:none}
.topbar .quiet{min-height:34px;padding:7px 11px;font-size:10px}
.page-heading{gap:12px}
.page-heading>.outline{font-size:0;width:35px;padding:0}
.page-heading>.outline:before{content:"↻";font-size:21px}
.dashboard{padding:24px 18px}
.adventure-banner{padding:25px;min-height:240px}
.adventure-banner h2{font-size:23px}
.adventure-banner p:not(.eyebrow){max-width:100%;font-size:11px}
.banner-mark{right:0;font-size:165px;top:40px}
.content-card,.character-card{padding:22px}
.character-grid{grid-template-columns:1fr}
.character-mini .pill{font-size:8px;padding:3px 6px}
.character-mini{gap:10px}
.dashboard-foot{flex-direction:column;gap:7px}
.sidebar{padding:18px}
.sidebar nav button{font-size:10px;padding:8px 5px}
.command-row{gap:8px}
.card-heading .text-button{font-size:11px}
}

.danger{color:#ffc0b5;background:#38231f;border:1px solid #774439;border-radius:6px;padding:12px 18px;min-height:44px}
.danger:hover:not(:disabled){background:#4a2b25}
.danger:disabled{opacity:.4;cursor:not-allowed}
.alz-hint{font-size:10px;color:#8a94a5;margin:8px 0 18px}
.alz-dialog{color:var(--text);background:var(--surface);border:1px solid #774439;border-radius:12px;padding:28px;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.alz-dialog::backdrop{background:#000b}
.alz-dialog h2{font-size:23px}
.alz-dialog p{overflow-wrap:anywhere}
.alz-balance{color:#f0d0a2;font-size:17px}
.alz-dialog .muted{font-size:12px}
.dialog-actions{display:flex;gap:12px;margin-top:22px;justify-content:flex-end}
.dialog-actions button{font-size:12px}
@media(max-width:480px){.alz-dialog{padding:22px}
.dialog-actions{flex-direction:column-reverse}
.dialog-actions button{width:100%}
}

.nation-dialog{border-color:#526777}
.nation-route{display:flex;align-items:center;gap:18px;padding:18px 0;font-size:20px;flex-wrap:wrap}
.nation-route strong{color:var(--accent,#efba77)}

#supportContent{display:grid;gap:18px}

.shop-nav-label{margin-top:26px;color:var(--gold)}
#topupContent,#medalContent{display:grid;gap:20px}
.shop-card{min-width:0}
.shop-card p{overflow-wrap:anywhere}
.shop-balance{font-size:38px;color:var(--gold)}
.shop-test{padding:12px 16px;background:#302719;border-left:3px solid var(--gold);color:#f0cc96}
.shop-packages{margin:18px 0;max-width:400px}
.shop-order{padding:20px 0;border-bottom:1px solid var(--line)}
.shop-reference{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.shop-qr{display:block;width:240px;max-width:100%;height:auto;background:white;padding:14px;border-radius:8px;margin:20px 0}
.shop-history-row{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:15px 0;border-bottom:1px solid var(--line)}
.shop-history-row small{grid-column:1/-1;color:var(--muted);overflow-wrap:anywhere}
.medal-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}
.medal-group{border:1px solid var(--line);border-radius:8px;min-width:0;padding:15px}
.medal-group legend{color:var(--gold);padding:0 8px;font-size:16px}
.medal-group label{margin:9px 0;font-size:11px}
.medal-group select{margin-top:5px;min-height:42px;font-size:12px;padding:8px}
.shop-review{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:8px}
.shop-review:empty{display:none}
.shop-review p{font-size:12px;margin:8px 0}
.shop-card h3{margin-top:24px}
@media(max-width:800px){.shop-nav-label{display:block;margin:16px 4px 8px}
.sidebar nav{flex-wrap:wrap}
.sidebar nav button{flex:1 1 auto}
.sidebar nav[aria-label="ร้านค้า"] button{text-align:left;flex:1}
.medal-groups{grid-template-columns:1fr}
.shop-card{padding:20px}
.shop-history-row{font-size:12px}
}

#supportContent>.content-card{margin:0}

.support-card p{margin:12px 0;color:var(--muted,#b0b4be);line-height:1.7;overflow-wrap:anywhere}

.support-card select{margin:12px 0}

.support-actions{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 18px}

.support-card a.primary{display:inline-block;text-decoration:none;margin-top:12px}


.stripe-pay-link{display:inline-block;text-decoration:none;margin:12px 0}
.shop-order .message:empty{display:none}
.shop-reference{overflow-wrap:anywhere}


.topup-announcement{width:100%;max-width:680px;margin:0 auto 24px}
.topup-announcement img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}

/* Player Portal, October 2026. Shared tokens retain compatibility with service views. */
:root {
  --bg: #0e1116;
  --surface: #171c24;
  --surface-raised: #1d242e;
  --line: #303844;
  --muted: #a6afbe;
  --text: #f2f3f7;
  --gold: #e9bf7a;
  --green: #87dcaf;
  --red: #ffa2aa;
  --accent: var(--gold);
  --radius: 14px;
}
body { font-size: 15px; background: var(--bg); }
button, a, input, select { touch-action: manipulation; }
button { transition: background-color .18s, border-color .18s, color .18s; }
button:disabled { cursor: not-allowed; }
a:hover { color: #ffe1af; }
h1, h2, h3 { text-wrap: balance; }
input, select { background: #10151c; border-color: #526073; border-radius: 8px; font-size: 15px; min-height: 48px; }
input::placeholder { color: #929dae; }
label { font-size: 14px; color: #d1d7e2; }
.ui-icon { width: 21px; height: 21px; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 20; padding: 12px 20px; background: var(--gold); color: #16181b; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); color: #16181b; }
.primary, .outline, .quiet, .text-button, .danger { min-height: 44px; border-radius: 8px; font-size: 13px; }
.primary { background: var(--gold); border-color: var(--gold); color: #211b12; padding: 12px 20px; }
.primary:hover:not(:disabled) { background: #ffda9c; border-color: #ffda9c; }
.primary .ui-icon, .outline .ui-icon { margin-left: 12px; width: 18px; height: 18px; }
.outline { background: #191e26; border-color: #69604e; color: var(--gold); }
.outline:hover:not(:disabled) { background: #302a21; border-color: var(--gold); }
.quiet { border-color: #526073; color: #d2d8e3; }
.quiet:hover { background: var(--surface-raised); }
.text-button { font-size: 13px; }
.eyebrow { font-size: 10px; letter-spacing: 2.2px; }
.message { font-size: 14px; line-height: 1.8; }
.brand { font-size: 27px; letter-spacing: 1px; }
.brand small { font-size: 9px; letter-spacing: 2px; color: var(--muted); }
.panel-screen { grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 32px 20px 24px; background: #12161d; border-color: #272e39; }
.sidebar-head { padding: 0 12px; }
.sidebar .brand { margin-bottom: 38px; }
.menu-toggle { display: none; }
.sidebar-navigation { display: flex; flex-direction: column; flex: 1; }
.nav-label { color: #97a2b4; font-size: 9px; font-weight: 600; letter-spacing: 1.8px; margin: 0 14px 12px; }
.sidebar nav { gap: 5px; }
.sidebar nav button { display: flex; align-items: center; gap: 13px; padding: 12px 14px; font-size: 13px; min-height: 48px; color: #b0b9c8; border: 1px solid transparent; border-radius: 8px; white-space: normal; }
.sidebar nav button span { color: inherit; font-size: inherit; margin: 0; display: inline; }
.sidebar nav button .ui-icon { color: #96a2b5; width: 19px; height: 19px; }
.sidebar nav button:hover { background: #1d232d; color: var(--text); }
.sidebar nav button.active { background: #30291f; border-color: #51422e; color: #f1ce96; }
.sidebar nav button.active .ui-icon { color: var(--gold); }
.shop-nav-label { margin-top: 30px; color: #97a2b4; }
.sidebar-bottom { gap: 0; padding: 40px 14px 0; margin-top: auto; }
.sidebar-bottom a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; min-height: 44px; color: #b0b9c8; font-size: 12px; }
.sidebar-bottom a:hover { color: var(--gold); }
.sidebar-edition { display: flex; gap: 11px; align-items: center; margin-top: 22px; padding-top: 23px; border-top: 1px solid var(--line); color: #bec6d3; font-size: 10px; letter-spacing: 1.8px; }
.sidebar-edition small { display: block; font-size: 8px; letter-spacing: 1px; color: var(--muted); margin-top: 4px; }
.edition-dot { width: 7px; height: 7px; background: var(--gold); box-shadow: 0 0 0 4px #e9bf7a10; border-radius: 50%; }
.workspace { background: radial-gradient(ellipse at 90% 0, #26303a40, transparent 48%), var(--bg); }
.topbar { height: 74px; padding: 0 40px; border-color: #272e39; background: #10151bc9; }
.topbar>p { font-size: 10px; color: #b5bfce; }
.topbar>p span { color: #8491a4; }
.session-badge { font-size: 11px; color: #b0bbcc; }
.dashboard { padding: 34px 40px; max-width: 1440px; }
.dashboard:focus, #pageTitle:focus { outline: none; }
.page-heading { margin-bottom: 26px; align-items: center; }
.page-heading h1 { font-size: 29px; margin-bottom: 9px; letter-spacing: -.6px; }
.page-heading .muted { font-size: 13px; }
.page-heading .outline { font-size: 12px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; }
.page-heading .outline .ui-icon { margin: 0; }
.adventure-banner { position: relative; isolation: isolate; min-height: 252px; padding: 30px 34px; margin: 0 0 24px; border: 1px solid #655338; border-radius: var(--radius); overflow: hidden; background: linear-gradient(110deg,#2b2824 0%,#20242a 56%,#161e27 100%); }
.adventure-banner:before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#242526 5%,#20242a55 65%),url('/assets/cabal-blader.png') right 8% top 23%/auto 170% no-repeat; opacity: .75; }
.adventure-banner:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,transparent 50%,#b38e4320); pointer-events: none; }
.adventure-banner .eyebrow { font-size: 9px; margin-bottom: 12px; }
.adventure-banner h2 { font-size: 35px; line-height: 1.32; margin-bottom: 12px; letter-spacing: -.7px; }
.adventure-banner h2 span { color: #f0c98b; }
.adventure-banner p:not(.eyebrow) { font-size: 13px; color: #c1c5cd; margin-bottom: 19px; max-width: 65%; }
.adventure-banner .primary { font-size: 12px; min-height: 44px; }
.banner-edition { position: absolute; right: 28px; bottom: 25px; text-align: right; color: #e9c687; }
.banner-edition span { display: block; font-size: 9px; letter-spacing: 4px; color: #e3d0ad; }
.banner-edition strong { font-size: 25px; letter-spacing: 1px; }
.stats { gap: 16px; margin-bottom: 22px; }
.stat { position: relative; border-radius: 12px; padding: 22px 24px; background: linear-gradient(120deg,#1b222b,#171c24); }
.stat>.ui-icon { position: absolute; right: 22px; top: 23px; color: #bba37d; width: 20px; height: 20px; }
.stat>span { font-size: 12px; padding-right: 28px; color: #bfc7d3; }
.stat strong { color: var(--text); font-size: 34px; font-weight: 600; margin: 5px 0 2px; font-variant-numeric: tabular-nums; }
.stat strong.status-word { color: var(--green); font-size: 23px; margin: 10px 0 7px; }
.stat strong.status-word[data-status="offline"] { color: var(--red); }
.stat strong.status-word[data-status="unknown"] { color: var(--gold); }
.stat small { font-size: 11px; color: var(--muted); }
.quick-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 26px; }
.quick-action { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #161c24; color: var(--text); padding: 17px 18px; min-width: 0; }
.quick-action:hover { border-color: #9b8056; background: #222731; }
.quick-icon { display: grid; place-items: center; width: 38px; height: 40px; flex-shrink: 0; border-radius: 8px; color: var(--gold); background: #e9bf7a0c; }
.quick-action>span:nth-child(2) { flex: 1; min-width: 0; }
.quick-action strong { display: block; font-size: 13px; font-weight: 600; }
.quick-action small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.quick-action>.ui-icon { width: 16px; height: 16px; color: #c5b493; }
.overview-grid { gap: 22px; grid-template-columns: 1.2fr 1fr; }
.content-card, .character-card { border-radius: var(--radius); background: var(--surface); padding: 26px; }
.card-heading { margin-bottom: 12px; }
.card-heading .eyebrow { font-size: 9px; }
.card-heading h2 { font-size: 19px; }
.character-mini { padding: 18px 0; }
.character-mini strong { font-size: 14px; }
.character-mini small { font-size: 12px; color: var(--muted); }
.class-mark { background: linear-gradient(135deg,#373124,#20242c); border-color: #6b593e; border-radius: 10px; font-size: 12px; width: 46px; height: 46px; }
.pill { font-size: 11px; padding: 4px 10px; }
.pill.neutral { color: #b2bccb; border-color: #4a5669; background: #222a35; }
.community-card { background: radial-gradient(ellipse at top right,#bc96531a,transparent 70%),var(--surface); }
.community-symbol { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #665436; background: #3e33234d; border-radius: 12px; margin-bottom: 18px; }
.community-symbol .ui-icon { width: 24px; height: 24px; }
.community-card>.eyebrow { font-size: 9px; }
.community-card h2 { font-size: 24px; }
.community-card .muted { font-size: 13px; line-height: 1.8; }
.community-card .outline { font-size: 12px; }
.section-intro h2 { font-size: 20px; }
.section-intro p { font-size: 14px; }
.character-top h2 { font-size: 20px; }
.character-top p, .character-details dd { font-size: 14px; }
.character-top p, .character-details dt, .alz-hint { color: var(--muted); }
.character-details { gap: 18px; }
.character-details dt { font-size: 12px; }
.character-details>div:last-child { grid-column: 1/-1; padding-top: 14px; border-top: 1px solid var(--line); }
.character-details dd { font-variant-numeric: tabular-nums; }
.character-card>button { font-size: 13px; }
.alz-hint { font-size: 11px; line-height: 1.8; }
.character-danger-zone { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.character-danger-zone summary { min-height: 44px; color: #ffb8b2; font-size: 12px; cursor: pointer; padding: 10px 0; }
.character-danger-zone .danger { width: 100%; }
.empty-state { color: var(--muted); font-size: 14px; }
.empty-state strong { font-size: 16px; }
.steps strong { font-size: 14px; }
.steps p, .note p, .connection-row p { font-size: 12px; color: var(--muted); }
.steps li>span { width: 32px; height: 32px; font-size: 11px; }
.note strong { font-size: 13px; }
.command-row code { font-size: 13px; }
.command-row button { min-height: 44px; font-size: 12px; }
.dashboard-foot { font-size: 10px; color: #a0acbc; padding-top: 24px; margin-top: 32px; }
.alz-dialog { border-radius: 16px; padding: 30px; }
.alz-dialog .muted { font-size: 14px; }
.alz-dialog::backdrop { background: #05080ed9; }
.shop-card h2 { font-size: 22px; }
.shop-card p, .shop-review p { font-size: 14px; }
.shop-reference, .shop-history-row small { font-size: 12px; }
.shop-card [data-wallet-currency] { color: var(--gold); font-size: 26px; font-variant-numeric: tabular-nums; margin-left: 8px; }
.medal-group { border-radius: 10px; }
.medal-group select { min-height: 44px; font-size: 13px; }
.medal-group label { font-size: 13px; }
.login-screen { grid-template-columns: 1.1fr 1fr; }
.login-story { min-height: 100dvh; background: radial-gradient(ellipse at 20% 20%,#6d563a40,transparent 70%),#14191f; padding: 44px 56px; }
.login-story:before { opacity: .45; background-position: right -50px bottom -40px; }
.story-copy { max-width: 540px; }
.story-copy h1 { font-size: clamp(44px,4.8vw,74px); }
.story-copy>p:not(.eyebrow) { color: #c2c6ce; line-height: 1.9; }
.story-foot { color: #b3b8c3; }
.story-tags span { color: #edcfa0; font-size: 11px; }
.login-form-wrap { background: radial-gradient(ellipse at top right,#c1a16d0c,transparent 60%); }
.login-card { max-width: 380px; }
.login-card h2 { font-size: 29px; }
.login-card>.muted { font-size: 14px; }
.password-field { position: relative; }
.password-field input { padding-right: 74px; }
.password-toggle { position: absolute; right: 4px; top: 4px; bottom: 4px; border: 0; background: transparent; color: var(--gold); min-width: 60px; font-size: 12px; border-radius: 6px; }
.password-toggle:hover { background: #e9bf7a12; }
.signup, .back-link { font-size: 13px; }
.back-link { color: #b2bbca; min-height: 44px; padding: 10px; }
.login-foot { color: var(--muted); font-size: 9px; }
@media (min-width: 1600px) {
  .panel-screen { grid-template-columns: 270px minmax(0,1fr); }
  .dashboard { padding: 42px 52px; }
}
@media (max-width: 1180px) {
  .panel-screen { grid-template-columns: 230px minmax(0,1fr); }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .dashboard { padding: 28px; }
  .topbar { padding: 0 28px; }
  .quick-actions { gap: 10px; }
  .quick-action { padding: 14px; gap: 10px; }
  .quick-action small, .quick-action>.ui-icon { display: none; }
  .overview-grid { grid-template-columns: 1fr; }
  .community-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 0 16px; align-items: center; }
  .community-symbol { grid-column: 1; grid-row: 1/4; margin: 0; }
  .community-card>.eyebrow, .community-card h2, .community-card .muted { grid-column: 2; }
  .community-card h2 { font-size: 20px; margin-bottom: 8px; }
  .community-card h2 br { display: none; }
  .community-card .muted { margin-bottom: 0; }
  .community-card .outline { grid-column: 3; grid-row: 1/4; }
}
@media (max-width: 800px) {
  .panel-screen { display: block; }
  .sidebar { position: relative; height: auto; overflow: visible; padding: 18px 22px; border-bottom: 1px solid var(--line); }
  .sidebar-head { padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .sidebar .brand { margin: 0; font-size: 23px; }
  .sidebar .brand small { font-size: 8px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; padding: 8px 13px; min-height: 44px; }
  .menu-toggle .ui-icon { margin: 0; }
  .sidebar-navigation { display: none; padding-top: 26px; }
  .sidebar.menu-open .sidebar-navigation { display: flex; }
  .sidebar .nav-label { display: block; margin-left: 12px; }
  .sidebar nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .sidebar nav button { padding: 12px; text-align: left; font-size: 13px; }
  .sidebar nav[aria-label="ร้านค้า"] button { flex: initial; }
  .sidebar-bottom { display: grid; padding: 20px 12px 0; }
  .sidebar-edition { display: none; }
  .topbar { height: 62px; padding: 0 22px; }
  .topbar>p { font-size: 9px; }
  .topbar>div { gap: 10px; }
  .topbar .quiet { min-height: 44px; font-size: 12px; }
  .session-badge { display: inline; font-size: 10px; }
  .dashboard { padding: 26px 22px; }
  .page-heading h1 { font-size: 27px; }
  .page-heading .muted { font-size: 12px; }
  .adventure-banner { min-height: 236px; padding: 28px; }
  .adventure-banner:before { background-position: right -30px top 25%; }
  .adventure-banner h2 { font-size: 32px; }
  .stats { gap: 12px; }
  .stat { padding: 18px; }
  .stat>.ui-icon { right: 16px; top: 18px; }
  .character-grid { grid-template-columns: 1fr; }
  .login-story { min-height: 290px; padding: 28px; }
  .login-screen { grid-template-columns: 1fr; }
  .story-copy { margin: 34px 0 0; }
  .story-copy h1 { font-size: 39px; }
  .login-story:before { background-size: auto 170%; background-position: right -10px top -70px; }
}
@media (max-width: 560px) {
  .sidebar { padding: 16px 18px; }
  .sidebar nav { grid-template-columns: 1fr; }
  .topbar { padding: 0 18px; }
  .topbar>p { letter-spacing: 1px; }
  .topbar>p span { margin: 0 5px; }
  .session-badge { display: none; }
  .dashboard { padding: 24px 18px; }
  .page-heading { gap: 12px; margin-bottom: 24px; }
  .page-heading .eyebrow { font-size: 9px; }
  .page-heading h1 { font-size: 26px; }
  .page-heading .outline { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .page-heading .outline:before { content: none; }
  .page-heading .outline span { display: none; }
  .page-heading .muted { line-height: 1.85; }
  .adventure-banner { padding: 24px; min-height: 254px; }
  .adventure-banner h2 { font-size: 30px; }
  .adventure-banner p:not(.eyebrow) { max-width: 78%; font-size: 12px; }
  .adventure-banner:before { background-position: right -95px top 20%; opacity: .45; }
  .banner-edition { right: 14px; bottom: 17px; opacity: .7; }
  .banner-edition strong { font-size: 17px; }
  .banner-edition span { font-size: 7px; letter-spacing: 2px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 17px; }
  .stat>span { padding-right: 0; font-size: 11px; }
  .stat>.ui-icon { display: none; }
  .stat strong { font-size: 30px; }
  .stat small { font-size: 10px; }
  .stat:last-child { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .stat:last-child strong { grid-row: 1/3; grid-column: 2; text-align: right; margin: 0; font-size: 22px; }
  .quick-actions { grid-template-columns: 1fr; gap: 10px; }
  .quick-action { padding: 14px 16px; }
  .quick-action strong { font-size: 14px; }
  .quick-action small { display: block; font-size: 11px; }
  .quick-action>.ui-icon { display: block; }
  .content-card, .character-card { padding: 22px; }
  .community-card { display: flex; }
  .community-symbol { margin-bottom: 18px; }
  .community-card .muted { margin-bottom: 20px; }
  .card-heading h2 { font-size: 18px; }
  .card-heading .text-button { font-size: 12px; }
  .character-mini { gap: 10px; }
  .character-mini .pill { font-size: 10px; padding: 4px 7px; }
  .character-mini strong { font-size: 13px; }
  .character-mini small { font-size: 11px; }
  .class-mark { width: 40px; height: 44px; }
  .character-top { gap: 10px; }
  .character-top h2 { font-size: 18px; }
  .character-top .pill { font-size: 10px; padding: 4px 7px; }
  .dashboard-foot { flex-direction: column; gap: 8px; font-size: 9px; }
  .login-form-wrap { padding: 32px 24px; }
  .login-card h2 { font-size: 26px; }
  .login-story { min-height: 260px; }
  .story-copy h1 { font-size: 35px; }
}
/* Shared service spacing: controls, editors, balances and review states. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --card-padding: var(--space-6);
  --section-gap: var(--space-5);
}
.content-card, .character-card { padding: var(--card-padding); }
.stats, .quick-actions, .overview-grid, .character-grid, .discord-layout { gap: var(--section-gap); }
.stats, .quick-actions, .adventure-banner { margin-bottom: var(--section-gap); }
#supportContent, #topupContent, #medalContent, #questsContent, #petContent, #platinumContent,
.service-stack { display: grid; gap: var(--section-gap); min-width: 0; align-items: start; }
.service-stack:empty { display: none; }
.service-stack>* { min-width: 0; }
#supportContent>p:not(:empty), #topupContent>p:not(:empty), #medalContent>p:not(:empty),
#questsContent>p:not(:empty), #petContent>p:not(:empty), #platinumContent>p:not(:empty) {
  padding: var(--space-4) var(--space-5); margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow-wrap: anywhere;
}
.support-card>h2, .shop-card>h2 { margin: 0 0 var(--space-2); line-height: 1.5; }
.support-card>h3, .shop-card>h3 { margin: var(--space-5) 0 var(--space-3); font-size: 17px; line-height: 1.6; }
.support-card>h3:first-child, .shop-card>h3:first-child { margin-top: 0; }
.support-card>h2+h3 { margin-top: var(--space-2); color: var(--gold); }
.support-card p, .shop-card>p { margin: var(--space-3) 0; font-size: 14px; line-height: 1.8; }
.support-card>:last-child, .shop-card>:last-child { margin-bottom: 0; }
.support-card p:empty, .shop-card p:empty { display: none; }
.support-card label, .service-field, .currency-field label { margin: 0; font-size: 13px; color: #cbd3df; line-height: 1.6; }
.support-card label select, .service-field select, .currency-field select { display: block; margin: var(--space-2) 0 0; }
.support-card select { margin: 0; }
.support-card label+label { margin-top: var(--space-4); }
.service-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: var(--space-3); margin: var(--space-5) 0; max-width: 800px; }
.service-controls select { min-width: 0; width: 100%; }
.service-controls>button { min-height: 48px; margin: 0; }
.currency-field { display: grid; gap: var(--space-2); margin: var(--space-5) 0; max-width: 800px; }
.currency-field p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.wallet-balances { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); max-width: 600px; margin: var(--space-4) 0; }
.wallet-balance { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: 10px; background: #111720; min-width: 0; }
.wallet-balance>span { color: var(--muted); font-size: 12px; }
.wallet-balance>[data-wallet-currency] { margin: 0; color: var(--gold); font-size: 25px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.medal-editor { border-top: 1px solid var(--line); margin-top: var(--space-6); padding-top: var(--space-6); gap: var(--space-4); }
.medal-editor>h3, .medal-editor>p, .medal-editor>.wallet-balances, .medal-editor>.currency-field { margin: 0; }
.medal-editor>button { justify-self: start; max-width: 100%; }
.medal-editor .medal-groups { grid-template-columns: 1fr; gap: var(--section-gap); margin: var(--space-2) 0; }
.medal-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: var(--space-4); padding: var(--space-5); margin: 0; }
.medal-group legend { padding: 0 var(--space-2); font-size: 15px; }
.medal-group label { margin: 0; min-width: 0; font-size: 12px; }
.medal-group select { margin: var(--space-2) 0 0; min-height: 44px; font-size: 13px; padding: 9px 12px; }
.option-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); align-items: start; }
.option-grid>.support-card { padding: var(--space-5); }
.option-grid>.support-card>h3 { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.service-actions>p, .service-actions>.shop-review { flex-basis: 100%; margin: 0; }
.service-actions>.shop-review:empty { display: none; }
.shop-review { margin-top: var(--space-4); padding: var(--space-5); background: #11171e; border: 1px solid #67563d; }
.shop-review h3 { margin: 0 0 var(--space-3); font-size: 17px; }
.shop-review p { margin: var(--space-2) 0; line-height: 1.8; }
.shop-review ul { padding-left: var(--space-5); margin: var(--space-3) 0; }
.shop-review>button { margin-top: var(--space-4); }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.review-actions>button { margin: 0; }
#supportContent>.outline { justify-self: start; }
.shop-packages { margin: var(--space-4) 0; max-width: 100%; }
.topup-announcement { max-width: 560px; margin: 0 auto; }
.shop-order { padding: var(--space-4) 0; }
.shop-history-row { padding: var(--space-4) 0; gap: var(--space-2) var(--space-4); }
.steps { gap: var(--space-4); margin: var(--space-6) 0; }
.steps p { margin-bottom: 0; }
.command-row { margin-top: var(--space-3); padding: var(--space-3); }
.note { padding: var(--space-4); margin-top: var(--space-5); }
.connection-row { padding: var(--space-4) 0; }
.connection-row:last-of-type { padding-bottom: 0; }
.section-intro { margin-bottom: var(--space-5); }
.character-top { margin-bottom: var(--space-5); }
.character-details { margin: 0 0 var(--space-5); }
.dialog-actions { gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 1280px) {
  .medal-group { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #topupContent { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #topupContent>.wallet-card { grid-column: 1/-1; }
  #topupContent>.topup-announcement { width: 100%; }
}
@media (max-width: 800px) {
  :root { --card-padding: 20px; --section-gap: 16px; }
  .page-heading { margin-bottom: var(--space-6); }
  .overview-grid { gap: var(--section-gap); }
}
@media (max-width: 560px) {
  .service-controls { grid-template-columns: minmax(0,1fr); }
  .service-controls>button { justify-self: start; max-width: 100%; }
  .medal-group { grid-template-columns: minmax(0,1fr); padding: var(--space-4); }
  .option-grid { grid-template-columns: minmax(0,1fr); }
  .review-actions { flex-direction: column; align-items: stretch; }
  .review-actions>button { width: 100%; }
  .shop-review { padding: var(--space-4); }
  .wallet-balances { gap: var(--space-2); }
  .wallet-balance { padding: var(--space-3); }
  .wallet-balance>[data-wallet-currency] { font-size: 23px; }
  .service-actions { align-items: stretch; }
  .service-actions>button { flex-grow: 1; }
  .shop-history-row { grid-template-columns: minmax(0,1fr); }
  .shop-history-row small { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* Accessory material package: existing portal spacing and palette. */
.package-price{font-size:1.6rem;font-weight:700;margin:0}.package-items{margin:0;display:grid;gap:0}.package-items>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}.package-items dt{min-width:0;overflow-wrap:anywhere}.package-items dd{margin:0;font-weight:600}.package-scope{font-weight:600}.package-review:empty{display:none}.package-review:not(:empty){display:grid;gap:16px;padding-top:16px}.package-review h3,.package-review p{margin:0}#packagesContent{display:grid;gap:24px}#packagesContent button{min-height:44px}

.package-card{gap:16px}.package-card>h2,.package-card>p{margin:0}.package-card>.package-price{color:var(--gold)}
.package-offer{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}.package-poster{margin:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#090c12}.package-poster img{display:block;width:100%;height:auto;aspect-ratio:1}.package-offer>.package-card{min-width:0}
@media(min-width:1200px){.package-offer{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.package-poster{position:sticky;top:24px}}
.iron-vanguard-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;color:var(--gold)}.iron-vanguard-tier{font-weight:600;color:var(--gold)}.iron-vanguard-wallets{margin:0;padding:0;border:0;display:grid;gap:12px;min-width:0}.iron-vanguard-wallets legend{font-weight:600;margin-bottom:12px}.iron-vanguard-wallet{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:10px;min-height:64px;cursor:pointer}.iron-vanguard-wallet:has(input:checked){border-color:var(--gold);background:rgba(225,180,88,.07)}.iron-vanguard-wallet input{width:20px;height:20px;flex:none;accent-color:var(--gold)}.iron-vanguard-wallet span{display:grid;gap:4px;min-width:0}.iron-vanguard-wallet small{color:var(--muted)}.iron-vanguard-wallets:disabled{opacity:.65}.iron-vanguard-offer figcaption{font-size:.8rem;padding:12px 16px;line-height:1.5}.iron-vanguard-offer .package-card h2{line-height:1.4}.iron-vanguard-offer .package-items>div{padding:9px 0}

.store-breadcrumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 24px;color:var(--muted);font-size:13px}.store-breadcrumb button{min-height:44px;color:var(--gold);padding:8px 0}.store-breadcrumb>span:last-child{overflow-wrap:anywhere}
#shopHomeContent{display:grid;gap:24px}.store-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;background:linear-gradient(120deg,var(--surface),var(--bg));border-color:var(--line)}.store-intro h2{font-size:24px;line-height:1.5;margin:0 0 8px;max-width:25ch}.store-intro .eyebrow{margin:0 0 10px}.store-intro p:last-child{margin:0}.store-intro>button{flex:none;min-height:44px}.store-wallet h2{font-size:18px}.store-tools{display:grid;gap:16px}.store-search{display:grid;gap:8px;font-weight:600;max-width:560px}.store-search input{width:100%;min-width:0;min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}.store-search input::placeholder{color:var(--muted);font-weight:400}.store-filters{display:flex;flex-wrap:wrap;gap:8px}.store-filter{min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted)}.store-filter:hover{color:var(--text);border-color:var(--gold)}.store-filter[aria-pressed="true"]{color:var(--gold);border-color:var(--gold);background:var(--bg)}.store-results{font-size:13px;margin:0}.store-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}.store-product{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.store-product-art{display:grid;place-items:center;aspect-ratio:1.6;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,var(--line),var(--bg) 75%);border-bottom:1px solid var(--line);color:var(--gold)}.store-product-art>svg{width:64px;height:64px;opacity:.85}.store-product-art.has-image{background:var(--bg)}.store-product-art>img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}.store-product-body{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1}.store-product-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px}.store-category{color:var(--gold);font-weight:600;letter-spacing:.02em}.store-closed{color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 6px}.store-product h3{font-size:20px;line-height:1.45;margin:0;overflow-wrap:anywhere}.store-product-body>p{font-size:14px;line-height:1.7;margin:0}.store-product-prices{display:grid;gap:4px;margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--gold)}.store-product-prices .muted{font-size:12px;font-weight:400}.store-product-body>button{min-height:44px;width:100%;margin-top:4px}.store-empty{grid-column:1/-1;padding:32px 0;text-align:center}
@media(max-width:1199px){.store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.store-grid{grid-template-columns:minmax(0,1fr)}.store-intro{align-items:stretch;flex-direction:column;padding:22px}.store-intro h2{font-size:22px}.store-intro>button{width:100%}.store-product-art{aspect-ratio:1.5}.store-product-body{padding:20px}.store-filters{gap:8px}.store-filter{font-size:13px;padding:9px 12px}}
.store-overview{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}.store-overview .content-card{margin:0;padding:22px}.store-overview .store-intro{align-items:flex-start;flex-direction:column;justify-content:center;gap:16px}.store-overview .store-intro h2{font-size:21px;max-width:none}.store-overview .store-intro .eyebrow{margin-bottom:8px}.store-overview .store-intro>button{padding:8px 16px}.store-overview .store-wallet{display:flex;flex-direction:column;justify-content:center}.store-overview .wallet-balances{margin:8px 0 0}.store-overview .wallet-card h2{margin-bottom:8px}
@media(min-width:1200px){.store-tools{grid-template-columns:minmax(240px,1fr) auto;align-items:end;gap:20px}.store-search{max-width:420px}.store-filters{justify-content:flex-end}}
@media(max-width:800px){.store-overview{grid-template-columns:minmax(0,1fr)}}
.store-product-art.image-portrait{background:radial-gradient(ellipse at 50% 40%,var(--line),var(--bg) 80%)}.store-product-art.image-portrait>img{object-fit:cover;object-position:50% 18%}.store-product-art.image-cover>img{object-fit:cover}.store-product-art.image-model>img{width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}.store-product-art.image-emblem{background:radial-gradient(ellipse at center,rgba(75,137,151,.22),var(--bg) 75%)}.store-product-art.image-emblem>img{width:120px;height:119px;max-width:65%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(92,202,205,.15))}.store-product-art.image-map>img{object-fit:contain}.store-medal-strip{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:16px}.store-medal-strip>img{display:block;width:calc((100% - 36px)/5);max-width:48px;height:auto;filter:drop-shadow(0 4px 7px rgba(0,0,0,.55))}.store-product-art.image-unavailable>svg{grid-area:1/1}
.store-product-art.image-portrait>img{object-position:50% 0}
/* Selected inventory salvage; matches the existing service-card layout. */
.salvage-items{display:grid;gap:12px}.salvage-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:8px}.salvage-item input,.salvage-confirm input{width:24px;height:24px;accent-color:var(--gold)}.salvage-item>span{display:grid;gap:5px;overflow-wrap:anywhere}.salvage-item>strong{color:var(--gold);font-size:14px}.salvage-confirm{display:flex;align-items:center;gap:12px;padding:12px 0;line-height:1.7}@media(max-width:600px){.salvage-item{grid-template-columns:32px minmax(0,1fr);gap:8px}.salvage-item>strong{grid-column:2}.salvage-item>span{font-size:14px}}
.salvage-review-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Top-up artwork 2026-10-29: full image, no crop, no payment behavior changes. */
.topup-announcement>img,.topup-package-preview>img{display:block;width:100%;height:auto;object-fit:contain}
.topup-artwork-note{padding:12px 14px;margin:14px 0;color:var(--gold);border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14px;line-height:1.7}
.topup-artwork-gallery{margin:14px 0;border:1px solid var(--line);border-radius:8px;padding:12px}
.topup-artwork-gallery summary{cursor:pointer;min-height:44px;display:list-item;font-size:14px;font-weight:600}
.topup-artwork-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.topup-artwork-grid a{display:block;min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.topup-artwork-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.topup-artwork-grid span{display:block;padding:10px;font-size:13px;text-align:center}
.topup-package-preview{width:100%;max-width:360px;margin:18px auto}
.topup-package-preview img{border:1px solid var(--line);border-radius:8px}
.topup-package-preview figcaption{margin-top:10px;color:var(--gold);text-align:center;font-size:14px;line-height:1.7}
@media(max-width:480px){.topup-artwork-grid{gap:8px}.topup-artwork-grid span{padding:8px;font-size:12px}}

.store-product-art.image-seal{aspect-ratio:1}.store-product-art.image-seal canvas{display:block;width:100%;height:auto}

.slip-topup{min-width:0;display:grid;gap:16px;align-content:start}
.topup-payment-layout,.topup-history{grid-column:1/-1;min-width:0;display:grid;gap:20px}
.topup-payment-layout{align-items:start}
.topup-channels{display:grid;gap:16px;min-width:0}
.topup-channel-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.topup-channel-controls button{min-height:76px;white-space:normal;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 6px}
.topup-method-logo{display:block;width:min(84px,100%);height:36px;object-fit:contain;flex-shrink:0}
.topup-channel-controls button[aria-pressed=true]{color:var(--gold);border-color:var(--gold);background:var(--surface)}
.topup-payment-layout>.topup-announcement{margin:0 auto}
.topup-payment-method[hidden]{display:none}
@media(min-width:1280px){
  .topup-payment-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topup-history{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.slip-topup h2,.slip-topup h3,.slip-topup p{margin:0}
.slip-order{display:grid;gap:12px;min-width:0}
.slip-topup label{display:grid;gap:8px;min-width:0}
.slip-topup input,.slip-topup select,.slip-topup button{min-height:44px;max-width:100%}
.slip-topup input[type=file]{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;color:var(--text)}
.slip-topup input[type=file]::file-selector-button{min-height:44px;margin-right:12px;padding:8px 12px;cursor:pointer}
.slip-topup .message:empty,.slip-order:empty{display:none}
.slip-bank{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--surface);margin:16px 0}
.slip-bank p{overflow-wrap:anywhere}
.slip-account{font-size:22px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.slip-payment-qr{display:block;width:100%;max-width:290px;height:auto;margin:16px auto;border-radius:8px}
.slip-qr-card{display:grid;gap:12px;text-align:center}
.slip-qr-card>strong{font-size:28px;color:var(--gold)}
.slip-qr-card>a{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:10px 16px;text-decoration:none}
.slip-topup .shop-order{display:grid;gap:12px;min-width:0}
.slip-topup summary{cursor:pointer;min-height:44px;padding:12px 0}
.slip-topup button:focus-visible,.slip-topup input:focus-visible,.slip-topup select:focus-visible,.slip-topup summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:600px){.slip-topup button{width:100%}.slip-account{font-size:20px}}

.store-product-art.image-seal{aspect-ratio:1}

.blended-workspace{container-type:inline-size}
.blended-workspace button{min-height:44px}
.blended-hero{display:grid;grid-template-columns:clamp(72px,16%,132px) minmax(0,1fr);gap:12px 16px;align-items:center}
.blended-pack-art{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.blended-hero-copy :is(h2,p){margin:0}
.blended-hero-copy .eyebrow{margin-bottom:3px;letter-spacing:1px}
.blended-hero-copy .package-scope{margin-top:6px}
.blended-hero>div:last-child{grid-column:1/-1}
.blended-character{display:flex;flex-wrap:wrap;align-items:end;gap:10px 12px}
.blended-character .service-field{flex:1 1 160px}
.blended-workspace .service-field{margin:0;min-width:0}
.blended-editor{display:grid;min-width:0;margin:0;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px}
.blended-editor legend{padding-inline:6px;font-size:1.05rem;font-weight:700}
.blended-meter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:10px 12px;border-radius:8px;background:var(--bg)}
.blended-count{color:var(--gold);font-size:1.12rem;font-variant-numeric:tabular-nums}
.blended-capacity{grid-row:2;grid-column:1/-1;width:100%;height:7px;accent-color:var(--gold)}
.blended-changes{grid-row:1;grid-column:2;margin:0;color:var(--muted);font-size:.82rem;text-align:right}
.blended-tools{display:grid;gap:10px;align-items:end}
.blended-presets,.blended-footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.blended-presets button{padding-inline:11px}
.blended-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(108px,.65fr);gap:8px}
.blended-filters :is(input,select){padding-inline:8px}
.blended-selection-note{margin:0;color:var(--gold);font-size:.85rem}
.blended-selection-note:empty{display:none}
.blended-grid{display:grid;gap:10px}
.blended-family{display:grid;align-content:start;gap:8px;padding:9px;border:1px solid var(--line);border-radius:8px}
.blended-family-title{display:flex;align-items:center;justify-content:space-between;gap:6px}
.blended-target{flex:none;padding:1px 7px;border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:.76rem}
.blended-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.blended-tier{display:grid;align-content:start;gap:2px;min-width:0;min-height:70px;margin:0;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg);cursor:pointer}
.blended-tier:has(input:checked){border-color:var(--gold);background:rgba(237,186,117,.09)}
.blended-tier:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.blended-tier-head{display:flex;align-items:center;justify-content:space-between;gap:4px;color:var(--text)}
.blended-tier input[type="checkbox"]{flex:none;width:16px;height:16px;min-height:0;margin:0;padding:0;accent-color:var(--gold)}
.blended-tier-value{color:var(--text);font-size:.92rem;font-variant-numeric:tabular-nums}
.blended-tier:has(input:checked) .blended-tier-value{color:var(--gold)}
.blended-tier-stat{color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.blended-empty,.blended-footer p{margin:0}
.blended-footer{justify-content:space-between;padding-top:4px}
.blended-workspace .shop-message:empty,.blended-workspace .package-review:empty{display:none}
@container (min-width:740px){
  .blended-hero{grid-template-columns:132px minmax(0,1fr) minmax(210px,30%);gap:18px}
  .blended-hero>div:last-child{grid-column:auto}
  .blended-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .blended-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:360px){
  .blended-editor,.blended-family{padding:7px}
  .blended-tier{padding-inline:5px}
  .blended-footer button{width:100%}
}

.store-product-art.blended-shop-art canvas{display:block;width:100%;height:100%;min-height:0;object-fit:contain}

.essence-hero{display:grid;grid-template-columns:clamp(70px,19%,138px) minmax(0,1fr);gap:14px;align-items:center}
.essence-pack-art{display:block;width:100%;height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:10px}
.essence-hero :is(h2,p){margin:0 0 5px}