/* AriiM Resources — dark "war-room" theme. Tokens first; everything else reads from them. */
:root{
 --bg:#0d171b;--bg-2:#111f24;--surface:#162629;--surface-2:#1c3035;--inset:#0f1d21;
 --line:#28403f;--line-2:#3b5a5c;
 --text:#e9efed;--muted:#9db1ae;--faint:#6f8784;
 --gold:#edc47c;--gold-2:#f6d9a3;--gold-ink:#2c2213;
 --green:#72dab8;--green-bg:#1d4239;--red:#ff9f8c;--red-bg:#4a2723;--blue:#a9c4f5;--blue-bg:#25365a;--amber-bg:#3d3424;
 --food:#e9a26b;--stone:#b9c3c7;--wood:#b58a5a;--ore:#8fb7e8;--goldres:#f2cf6e;
 --radius:14px;--radius-sm:9px;--shadow:0 18px 40px -22px #000c;
 font-family:"Leelawadee UI","Noto Sans Thai","Sukhumvit Set","Thonburi",Tahoma,Arial,sans-serif;
 color:var(--text);background:var(--bg);font-size:15px;line-height:1.65;color-scheme:dark;
}
*{box-sizing:border-box}
.payment-panel{border-color:#497a68;background:linear-gradient(145deg,#1c302d,#162528)}
.payment-pending:empty{display:none}
.payment-order{padding:24px!important;border-color:#598b78!important;background:#112124!important}
.payment-order h3{font-size:clamp(21px,3vw,27px)}
.payment-hint{color:var(--green);font-weight:700}
.payment-details{padding:20px;border:1px solid #45675d;border-radius:14px;background:#192e2b;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.payment-field{min-width:0}
.payment-field:last-child{grid-column:1/-1}
.payment-eyebrow{grid-column:1/-1;color:var(--gold);font-size:13px;font-weight:800;letter-spacing:1px}
.payment-label{display:block;font-size:14px;color:var(--muted);margin-bottom:5px}
.payment-copy-row{display:flex;align-items:center;gap:12px;min-width:0}
.payment-value{flex:1;min-width:0;width:100%;padding:3px 0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--text)!important;font-size:clamp(18px,2.5vw,25px)!important;font-weight:700;box-shadow:none!important;overflow-wrap:anywhere;user-select:all}
.payment-value.payment-account{font-size:clamp(27px,4vw,38px)!important;letter-spacing:1px;font-variant-numeric:tabular-nums;color:var(--gold)!important}
.payment-copy{flex-shrink:0;border-color:#52776b!important;color:var(--green);min-height:44px}
.payment-total{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 0 4px}
.payment-total span{color:var(--muted)}
.payment-total strong{font-size:clamp(27px,4vw,38px);color:var(--gold);font-variant-numeric:tabular-nums}
.payment-deadline{color:var(--gold)}
.payment-cancel{border-top:1px solid var(--line);padding-top:18px;margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.payment-cancel small{color:var(--muted);flex:1;min-width:180px}
.payment-history{border-top:1px solid var(--line);padding-top:18px;margin-top:16px}
.payment-history summary{cursor:pointer;color:var(--gold);font-weight:700;margin-bottom:16px}
@media(max-width:600px){.payment-order{padding:16px!important}.payment-details{padding:14px;grid-template-columns:1fr}.payment-copy-row{gap:8px}.payment-copy{padding:8px 10px;font-size:13px}.payment-cancel button{width:100%}.payment-value.payment-account{font-size:27px!important}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(1200px 500px at 85% -10%,#1f3b3366,transparent 70%),var(--bg)}
button,input,select,textarea{font:inherit}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:#edc47c55}

/* Buttons */
button,.link-button{cursor:pointer;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:10px 18px;background:var(--surface-2);color:var(--text);font-weight:700;min-height:44px;transition:border-color .15s,background .15s,transform .05s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center}
button:hover,.link-button:hover{border-color:var(--gold)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.42;cursor:not-allowed;transform:none}
button[aria-busy=true]{cursor:progress}
button.primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
button.primary:hover:not(:disabled){background:var(--gold-2)}
button.ghost{background:transparent;border-color:var(--line)}
button.ghost:hover{background:var(--surface)}
button.danger{background:#d9705e;border-color:#d9705e;color:#2a0f0a}
button.danger-outline{background:transparent;border-color:#7b4239;color:var(--red)}
button.danger-outline:hover{border-color:var(--red);background:var(--red-bg)}
button.small{min-height:38px;padding:7px 14px;font-size:13px}
button.active{background:var(--green-bg);border-color:var(--green);color:var(--green)}

/* Header */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px max(24px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line);background:#0f1c20}
header nav{display:flex;gap:6px;flex:1}
header nav button{background:transparent;border-color:transparent;font-weight:600;color:var(--muted)}
header nav button:hover{color:var(--text);background:var(--surface);border-color:var(--line)}
header nav button.active{background:var(--green-bg);border-color:#3c7a68;color:var(--green)}
.brand{display:flex;align-items:center;gap:10px;font-size:28px;text-decoration:none;color:var(--gold);line-height:1.05}
.brand span{font-size:22px;color:#f1f1e9;font-weight:800}
.brand small{display:block;font-size:9px;letter-spacing:2.6px;color:var(--gold);margin-top:5px;font-weight:700}
#identity{display:flex;gap:8px;align-items:center;font-size:13px}
#identity .who{color:var(--muted);max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.balance-chip{min-height:36px;padding:5px 12px;border-radius:999px;background:#2b2618;border-color:#6f5a33;color:var(--gold);font-variant-numeric:tabular-nums}

/* Layout */
main{width:100%;max-width:1180px;flex:1;margin:0 auto;padding:36px 24px 72px}
h1{font-size:clamp(28px,4.4vw,50px);line-height:1.18;margin:10px 0 14px;letter-spacing:-.5px}
h2{font-size:22px;margin:0 0 12px;line-height:1.3}
h3{font-size:17px;margin:0 0 10px;line-height:1.35}
p{margin:6px 0 16px;color:var(--muted)}
.page-head{margin-bottom:24px}
.page-head h1{font-size:clamp(26px,3.4vw,38px);margin:0 0 6px}
.page-head p{margin:0}
.page-head.center{text-align:center}
.eyebrow{color:var(--gold);font-size:11px;letter-spacing:2.4px;font-weight:700}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.mono{font-family:Consolas,"SFMono-Regular",monospace;word-break:break-all}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stack{display:grid;gap:16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.wide{grid-column:1/-1}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 16px;gap:16px}
.section-head h2,.section-head p{margin:0}
[hidden]{display:none!important}
pre{white-space:pre-wrap}

/* Hero */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;padding:8px 0 30px;align-items:center}
.hero-copy{max-width:600px}
.hero h1 .accent{color:var(--gold)}
.hero .lead{font-size:16px;max-width:46ch}
.steps{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:22px 0 0}
.steps li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;color:#c5d3d0}
.steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--amber-bg);color:var(--gold);font-size:11px}
.hero-art{border:1px solid #4a6a63;background:radial-gradient(ellipse at 50% 0%,#3a6352,#172a2e 68%);border-radius:20px;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero-art::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#0d171b66)}
.hero-art .castle{font-size:78px;color:var(--gold);text-shadow:0 12px 50px #f5d18b55;line-height:1.1}
.hero-art strong{font-size:26px;letter-spacing:5px}
.hero-art span{font-size:11px;color:#aebfb7;letter-spacing:1.5px}

/* Cards / panels */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.panel{margin-bottom:18px}
.stack>.panel{margin-bottom:0}
.banner{padding:13px 16px;border:1px solid #816c46;border-radius:var(--radius-sm);background:var(--amber-bg);color:#ebd7ae;margin:0 0 20px;font-size:14px}
.empty{text-align:center;padding:42px 20px;border:1px dashed var(--line-2);border-radius:var(--radius);color:var(--muted);display:grid;justify-items:center;gap:8px}
.empty p{margin:0}

/* Product */
.product{display:flex;flex-direction:column;border-top:3px solid var(--gold);transition:transform .15s,box-shadow .15s}
.product:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.product.soldout{border-top-color:var(--line-2);opacity:.8}
.product-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.product-top h3{margin:0}
.tag{font-size:11px;color:var(--green);border:1px solid #3d6a5d;background:#183631;border-radius:999px;padding:3px 10px;white-space:nowrap}
.tag.low{color:var(--gold);border-color:#6f5a33;background:#2b2618}
.tag.out{color:var(--red);border-color:#7b4239;background:var(--red-bg)}
.pack{font-size:34px;font-weight:800;letter-spacing:1px;color:var(--gold-2);margin:10px 0 14px;font-variant-numeric:tabular-nums}
.pack.small-pack{font-size:24px;margin:0 0 10px}
.resources{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:0 0 20px}
.res{position:relative;text-align:center;background:var(--inset);padding:12px 2px 10px;border-radius:8px;font-size:11px;color:var(--muted);border-top:2px solid var(--c,var(--line))}
.res strong{display:block;font-size:18px;color:#e2eade;font-variant-numeric:tabular-nums}
.res.food{--c:var(--food)}.res.stone{--c:var(--stone)}.res.wood{--c:var(--wood)}.res.ore{--c:var(--ore)}.res.gold{--c:var(--goldres)}
.res.empty{opacity:.4;border-top-color:var(--line)}
.res.empty strong{color:var(--faint)}
.product-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.price{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.price small{font-size:13px;font-weight:400;color:var(--muted)}

/* Checkout */
.checkout-summary{background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 14px 2px}
.checkout-summary .resources{margin-bottom:12px}
.balance-line{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:10px 14px;border-radius:var(--radius-sm);background:var(--green-bg);color:#cfeee3;font-size:14px}
.balance-line strong{margin-left:auto}
.balance-line.short{background:var(--red-bg);color:#ffd5cb}

/* Forms */
label{display:grid;gap:6px;font-size:13px;color:#b8cac8;font-weight:600}
input,select,textarea{width:100%;background:var(--inset);border:1px solid #3e5a60;border-radius:8px;padding:11px 12px;color:#f1f5f4;min-width:0;font-weight:400;transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:#56777c}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #edc47c26}
input:user-invalid,textarea:user-invalid{border-color:#c46a5a}
input[readonly]{opacity:.85}
textarea{min-height:90px;resize:vertical}
label.check{display:flex;align-items:flex-start;gap:10px;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--inset);cursor:pointer}
input[type=checkbox]{width:19px;height:19px;flex:none;accent-color:var(--gold);margin-top:2px}
input[type=file]{padding:8px}
.auth{max-width:440px;margin:6px auto 0}

/* Orders */
.order{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.order-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.order-top h3{margin:0}
.order-actions{display:flex;flex-direction:column;gap:8px}
.status{font-size:12px;font-weight:700;color:var(--gold);background:var(--amber-bg);padding:3px 10px;border-radius:999px;display:inline-block}
.status.delivered{color:var(--green);background:var(--green-bg)}
.status.review{color:var(--red);background:var(--red-bg)}
.status.refunded,.status.cancelled{color:var(--blue);background:var(--blue-bg)}
.progress{display:flex;list-style:none;padding:0;margin:0 0 14px}
.progress li{flex:1;position:relative;font-size:11px;color:var(--faint);padding-top:20px;text-align:center}
.progress li::before{content:"";position:absolute;top:4px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--line-2);z-index:1}
.progress li::after{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--line-2)}
.progress li:first-child::after{display:none}
.progress li.done{color:var(--green)}
.progress li.done::before,.progress li.done::after,.progress li.now::after{background:var(--green)}
.progress li.now{color:var(--text);font-weight:700}
.progress li.now::before{background:var(--gold);box-shadow:0 0 0 4px #edc47c33}
.progress.paused li.now::before{background:var(--red);box-shadow:0 0 0 4px #ff9f8c33}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 18px;margin:0 0 6px}
.facts div{min-width:0}
.facts dt{font-size:11px;color:var(--faint)}
.facts dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.note{margin:8px 0 0}
.details{white-space:pre-line}

/* Wallet */
.wallet{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:22px 24px;margin-bottom:18px;border:1px solid #6f5a33;border-radius:var(--radius);background:linear-gradient(120deg,#2b2618,#1a2a2b)}
.wallet span{color:var(--muted);font-size:14px;width:100%}
.wallet strong{font-size:46px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.wallet small{color:var(--gold-2);font-size:16px}
.wallet.wallet-compact{padding:14px 20px;align-items:center;gap:10px}
.wallet.wallet-compact span{width:auto;margin-right:auto}
.wallet.wallet-compact strong{font-size:32px}
.ledger{list-style:none;padding:0;margin:14px 0 0;display:grid}
.ledger li{display:grid;grid-template-columns:170px 1fr auto auto;gap:4px 16px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.ledger .plus{color:var(--green)}.ledger .minus{color:var(--red)}
.qr{width:220px;background:#fff;border-radius:9px;display:block;margin:18px 0}

/* Admin */
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.stat{padding:16px 18px;display:grid;gap:2px}
.stat strong{font-size:28px;line-height:1.2}
.stat span{color:var(--muted);font-size:13px}
.stat.warn{border-color:#7b4239}.stat.warn strong{color:var(--red)}
.stat.ok strong{color:var(--green)}
.pack-list{display:grid;gap:8px}
.pack-list h3{margin:8px 0 0;font-size:14px;color:var(--muted)}
.pack-row{display:grid;grid-template-columns:1.5fr 1fr auto auto;gap:12px;text-align:left;justify-content:stretch;font-weight:400;background:var(--inset)}
.pack-row span:first-child{font-weight:700}
summary{cursor:pointer;color:var(--gold);font-weight:700;padding:2px 0}
details[open]>summary{margin-bottom:14px}

/* Dialog + toast */
dialog{background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:18px;width:min(640px,94vw);padding:24px;max-height:90vh;overflow:auto;box-shadow:0 30px 80px -20px #000}
dialog::backdrop{background:#000b}
dialog h2{margin-bottom:14px}
.dialog-body{display:grid;gap:12px}
.dialog-body>p{margin:0}
.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:20px;position:sticky;bottom:-24px;background:var(--surface);padding:12px 0 0}
#notice{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:min(520px,92vw);background:#eff1df;color:#162724;border-radius:12px;padding:13px 20px;box-shadow:0 10px 30px #0008;z-index:100;font-weight:600;text-align:center}

footer{width:100%;max-width:1180px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}

/* Sales tables (shared with manual.js) */
.sales-summary{margin:24px 0}
.sales-summary>.row{justify-content:space-between;margin-bottom:16px}
.sales-summary h2{margin:0}
.sales-summary .cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.sales-summary .card{padding:16px;background:var(--inset)}
.sales-value{display:block;font-size:24px;color:var(--green);font-variant-numeric:tabular-nums}
.sales-summary .card span{color:var(--muted);font-size:13px}
.sales-summary>.muted{margin-top:16px}
.sales-table-wrap{overflow-x:auto}
.sales-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sales-table th,.sales-table td{padding:12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.sales-table th{color:var(--muted);font-size:12px}
.sales-table th:first-child,.sales-table td:first-child{text-align:left}
.sales-table tbody tr:hover{background:var(--surface-2)}

@media(max-width:720px){
 header{padding:12px 16px;gap:10px;flex-wrap:wrap}
 .brand{flex:1;font-size:24px}.brand span{font-size:19px}
 header nav{order:3;width:100%;overflow-x:auto;flex-basis:100%;gap:4px;scrollbar-width:none}
 header nav button{font-size:13px;white-space:nowrap;padding:7px 12px;min-height:40px}
 #identity{font-size:12px;gap:6px}#identity .who{display:none}
 main{padding:22px 16px 60px}
 .hero{grid-template-columns:1fr;gap:20px;padding-bottom:16px}
 .hero-art{min-height:170px}.hero-art .castle{font-size:54px}.hero-art strong{font-size:21px}
 .grid{grid-template-columns:1fr}
 .order{grid-template-columns:1fr}
 .order-actions button{width:100%}
 .section-head{flex-direction:column;align-items:flex-start;gap:4px}
 .panel,.card{padding:18px}
 .pack{font-size:28px}
 .product-bottom{flex-wrap:wrap}.product-bottom button{flex:1}
 .facts{grid-template-columns:1fr 1fr}
 .ledger li{grid-template-columns:1fr auto}
 .pack-row{grid-template-columns:1fr auto}
 .wallet strong{font-size:38px}
 footer{flex-direction:column;padding:20px 16px}
 dialog{padding:20px;width:96vw;max-height:94vh}
 .dialog-actions{bottom:-20px}
 .dialog-actions button{flex:1}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Bulk sets */
.bulk{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.bulk-title{grid-column:1/-1;font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.3px}
.bulk-option{display:grid;justify-items:start;gap:0;text-align:left;padding:10px 12px;background:var(--inset);border-color:var(--line);font-weight:400;min-height:0}
.bulk-option strong{font-size:16px;color:var(--text)}
.bulk-option span{color:var(--gold-2);font-weight:700;font-variant-numeric:tabular-nums}
.bulk-option small{color:var(--green);font-size:11px}
.credit-line{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--green-bg);color:#cfeee3;font-size:14px}
.credit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.credit-row div{display:grid}
.credit-count{font-size:24px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.slip-status{margin:0;padding:10px 14px;border-radius:var(--radius-sm);font-size:14px}
.slip-status.bad{background:var(--red-bg);color:#ffd5cb;border:1px solid #7b4239}
.slip-status.ok{background:var(--green-bg);color:#cfeee3}

.panel>details+button,details.panel>button{margin:16px 0 4px}

.hero-art .kingdom-range{position:relative;z-index:1;margin:16px 12px 8px;padding:8px 16px;border:1px solid #ecc47e66;border-radius:999px;color:var(--gold);font-size:15px;font-weight:700;text-align:center;line-height:1.5}

/* Admin categories keep payment approvals one click away. */
.admin-categories{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.admin-category{display:flex;align-items:center;justify-content:center;gap:8px}
.admin-category[aria-pressed="true"]{background:var(--accent,#66d5b5);color:#10251f;border-color:transparent}
.admin-category-panel[hidden]{display:none!important}
.admin-count{min-width:24px;padding:2px 7px;border-radius:20px;background:var(--inset);color:var(--text);font-size:12px}
.admin-count.pending{background:#af382e;color:#fff}
.topup-history{margin-top:16px}.topup-history summary{cursor:pointer;padding:12px 0}.topup-history article{margin-top:12px}
@media(max-width:600px){.admin-categories{display:grid;grid-template-columns:1fr 1fr;padding:10px;gap:6px}.admin-category{padding:12px 8px;font-size:13px}}

/* Confirmed customer top-ups: shared thank-you treatment. */
.topup-thank-you{display:flex;align-items:flex-start;gap:18px;padding:24px;margin:18px 0;border:1px solid #428c78;border-radius:20px;background:linear-gradient(125deg,#173e36,#142c30);color:#edf9f4;box-shadow:0 8px 28px #0002}
.topup-thank-you-icon{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:#73dfbc;color:#103c2e;font-size:28px;font-weight:800}
.topup-thank-you h3{margin:0 0 8px;color:#edf9f4;font-size:19px}.topup-thank-you-amount{display:block;color:#8ff0cd;font-size:clamp(28px,5vw,38px);line-height:1.3;margin-bottom:12px}
.topup-thank-you p{margin:6px 0;color:#d6eae2;line-height:1.7}.topup-thank-you small{display:block;margin-top:12px;color:#adc9bf;font-size:12px}
@media(max-width:520px){.topup-thank-you{padding:18px;gap:12px}.topup-thank-you-icon{flex-basis:36px;height:36px;font-size:22px}.topup-thank-you h3{font-size:17px}}




.services-menu{position:relative;flex-shrink:0;margin:0;font-size:13px}
.services-menu>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:10px 12px;min-height:44px;border:1px solid var(--line);border-radius:10px;color:var(--muted);white-space:nowrap}
.services-menu>summary::-webkit-details-marker{display:none}.services-menu[open]>summary,.services-menu>summary:hover{color:var(--text);background:var(--surface)}
.services-menu>summary:focus-visible,.services-links a:focus-visible{outline:3px solid var(--gold,#e6c77c);outline-offset:3px}
.services-links{position:absolute;right:0;top:calc(100% + 8px);width:260px;max-width:calc(100vw - 32px);padding:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 32px #0006}
.services-links a{display:block;padding:12px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:600}.services-links a:hover{background:var(--surface-2)}.services-links small{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--muted)}
@media(max-width:720px){.services-menu>summary{padding:8px 10px;font-size:12px}}
/* Keep the shared navigation readable with the additional Gems tab. */
header nav button,#identity button{white-space:nowrap}
@media(max-width:1100px){header{flex-wrap:wrap;gap:12px}header nav{order:3;flex-basis:100%;width:100%;overflow-x:auto}header nav button{flex-shrink:0}#identity{margin-left:auto}}
.gems-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,380px);gap:24px;margin-top:20px}.gems-summary{align-self:start}.gems-item{display:grid;grid-template-columns:1fr auto 110px;gap:12px;align-items:center;border-bottom:1px solid #39505a;padding:10px 0}.gems-item input{width:100%}.gems-photo{display:block;max-width:100%;max-height:360px;object-fit:contain;border-radius:12px}.gems-item label{font-size:12px}@media(max-width:800px){.gems-layout{grid-template-columns:1fr}.gems-item{grid-template-columns:1fr 100px}.gems-item small{grid-column:1}.gems-item label{grid-column:2;grid-row:1/3}}
.gems-layout>.stack>.stack{max-height:560px;overflow:auto;padding-right:8px}.gems-summary>h2{color:#e5bf72}.gems-summary .price{font-size:28px}.gems-item{grid-template-columns:minmax(100px,1fr) 110px}.gems-item small{grid-column:1}.gems-item label{grid-column:2;grid-row:1/3}.gems-layout pre,.panel pre{white-space:pre-wrap;overflow-wrap:anywhere}
.gems-item{grid-template-columns:40px minmax(90px,1fr) 90px;column-gap:12px}.gems-item>.gems-item-icon{grid-column:1;grid-row:1/3}.gems-item>span{grid-column:2;grid-row:1}.gems-item>small{grid-column:2;grid-row:2}.gems-item>label{grid-column:3;grid-row:1/3}.gems-item-icon{width:40px;height:40px;object-fit:contain;border-radius:6px;flex:none}.gems-line{display:flex;gap:10px;align-items:center;margin:8px 0}.gems-line .gems-item-icon{width:32px;height:32px}.gems-line>span{min-width:0;overflow-wrap:anywhere}
.seller-dashboard{max-width:940px;margin:0 auto;background:#171613;padding:24px;border-radius:18px;color:#eee6d6}.seller-dashboard .seller-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.seller-dashboard h2{margin:0}.seller-dashboard h3,.seller-dashboard summary{color:#e7b54e}.seller-dashboard .muted{color:#a99f8b;font-size:14px}.seller-dashboard .toolbar{gap:8px}.seller-dashboard button{padding:9px 14px;border:1px solid #665132;background:transparent;color:#e7b54e;border-radius:9px}.seller-dashboard button.primary{background:#e3b656;color:#211b10}.seller-section{margin-top:28px}.seller-empty{border:1px dashed #615034;background:#211f1a;border-radius:12px;padding:28px;text-align:center;color:#a99f8b}.seller-job{background:#211f1a;border:1px solid #50432e;border-radius:12px;padding:18px;margin-top:12px}.seller-payout{color:#ebc576;font-weight:600}.seller-dashboard details{margin-top:12px}.seller-dashboard .gems-line{margin:12px 0}@media(max-width:600px){.seller-dashboard{padding:16px}.seller-dashboard .toolbar{width:100%}.seller-dashboard button{font-size:13px}}
.rate-editor{width:min(1100px,95vw);max-width:1100px}.rate-table{display:grid;gap:16px}.rate-row{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:12px;padding:16px;border:1px solid #495747;border-radius:12px}.rate-row label{font-size:13px;margin:0}.rate-row input,.rate-row select{min-width:0;width:100%;padding:10px}.seller-rate-summary{width:100%;border-collapse:collapse;font-size:14px}.seller-rate-summary th,.seller-rate-summary td{text-align:left;padding:12px 8px;border-bottom:1px solid #50432e}.seller-rate-summary th{color:#e7b54e}@media(max-width:600px){.rate-row{grid-template-columns:repeat(2,minmax(0,1fr))}.seller-rate-summary{font-size:12px}.seller-rate-summary th,.seller-rate-summary td{padding:10px 4px}}
.seller-job .seller-recipient-details{margin-top:18px;padding:0;border:1px solid #615034;border-radius:10px;background:#29261e}.seller-recipient-details>summary{display:list-item;cursor:pointer;padding:16px 18px;min-height:48px;list-style-position:inside}.seller-recipient-details[open]{padding-bottom:14px}.seller-recipient-details>p,.seller-recipient-details>.gems-line,.seller-recipient-details>.gems-photo{margin-left:18px;margin-right:18px}.seller-job .seller-job-actions{margin-top:28px;padding-top:20px;border-top:1px solid #615034;gap:14px;align-items:center}.seller-actions-label{flex-basis:100%;font-size:12px;color:#afa48f}.seller-job-actions button{min-height:46px;min-width:120px}
/* AriiM partner workspace: violet gems, blue actions, compact stage navigation. */
.seller-dashboard{background:linear-gradient(145deg,#f6f3ff,#eef5ff);color:#26314a;max-width:1120px;padding:28px;border:1px solid #dddff1;border-radius:24px;box-shadow:0 14px 45px #0002;gap:20px}.seller-dashboard>.seller-top{padding-bottom:22px;border-bottom:1px solid #daddef}.seller-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:2px;color:#7955ba;margin-bottom:8px}.seller-dashboard h2{color:#302853;font-size:25px}.seller-dashboard h3,.seller-dashboard summary{color:#4b3e75}.seller-dashboard .muted{color:#68748a}.seller-availability{display:inline-block;background:#dcf4eb;color:#17664f;border-radius:20px;padding:5px 12px;font-size:12px}.seller-dashboard button{background:#fff;color:#574481;border:1px solid #d6cee8;border-radius:10px;padding:10px 15px}.seller-dashboard button:hover{background:#ede6ff}.seller-dashboard button.primary{background:#7150bf;color:#fff;border-color:#7150bf}.seller-stage-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}.seller-dashboard .seller-stage{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;padding:18px;background:#fff}.seller-stage span{font-size:13px}.seller-stage strong{font-size:28px}.seller-dashboard .seller-stage.selected{background:#7251bd;color:#fff;border-color:#7251bd;box-shadow:0 6px 16px #7251bd30}.seller-section{margin-top:20px}.seller-workspace{min-height:230px}.seller-job{background:#fff;border:1px solid #dfe3ef;border-radius:16px;padding:22px;box-shadow:0 4px 14px #354f7910}.seller-job>.seller-top>strong{font-size:22px;color:#2b3858}.seller-job small{color:#748096}.seller-payout{color:#5f4597;font-size:17px}.seller-empty{background:#f9faff;border:1px solid #e0e4f0;color:#7a849a;border-radius:14px;padding:30px}.seller-job .seller-recipient-details{background:#f0f5ff;border:1px solid #cfdcf3}.seller-recipient-details>summary{color:#365d99}.seller-job .seller-job-actions{border-color:#e1e5ef}.seller-actions-label{color:#7a8191}.seller-dashboard button.seller-complete{background:#e0f4ed;color:#176e53;border-color:#a3d8c6}.seller-dashboard button.seller-problem{background:#fff3f0;color:#9e4c36;border-color:#ebc6b9}.seller-rate-summary th,.seller-rate-summary td{border-color:#dde2ed}.seller-rate-summary th{color:#675184}.seller-rates{padding:16px;background:#fff;border:1px solid #dfe3ef;border-radius:14px}.seller-dashboard>.banner{background:#eeebfa;color:#665781;border-color:#dcd5ee;font-size:13px}@media(max-width:700px){.seller-dashboard{padding:16px}.seller-stage-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.seller-dashboard .seller-stage{padding:14px}.seller-dashboard .toolbar{width:auto}.seller-dashboard h2{font-size:21px}.seller-job{padding:16px}}
body:has(.seller-dashboard){background:#edf0f8;color:#29334c}body:has(.seller-dashboard)>header{background:#fff;border-color:#dce0ee}body:has(.seller-dashboard)>header .brand{color:#66509d}body:has(.seller-dashboard)>header button{background:#f4f0fc;color:#614993;border-color:#ded5ef}body:has(.seller-dashboard)>main>h1,body:has(.seller-dashboard) .page-head h1{color:#342a56}body:has(.seller-dashboard)>main>p,body:has(.seller-dashboard) .page-head p{color:#748098}body:has(.seller-dashboard)>.banner{background:#e8e4f5;color:#635083;border-color:#dcd3ee}body:has(.seller-dashboard) dialog{background:#f8f7fc;color:#303952;border-color:#d6cdea}body:has(.seller-dashboard) dialog h2{color:#60458d}body:has(.seller-dashboard) dialog input,body:has(.seller-dashboard) dialog select,body:has(.seller-dashboard) dialog textarea{background:#fff;color:#303952;border-color:#cbd1e2}body:has(.seller-dashboard) dialog button.primary{background:#7150bf;color:white;border-color:#7150bf}
.seller-dashboard>.panel{background:#fff;border:1px solid #dde2ed;color:#303952;box-shadow:none}.seller-dashboard>.panel summary{color:#604c88}

.customer-order>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;cursor:pointer;padding:4px 0}.customer-order>summary small{grid-column:1/-1;color:var(--muted,#adc5d1)}.customer-order[open]>summary{padding-bottom:16px;border-bottom:1px solid #39505a}.customer-order[hidden]{display:none!important}@media(max-width:600px){.customer-order>summary{grid-template-columns:1fr}.customer-order>summary small{grid-column:1}}

/* Read-only admin customer balances. */
.customer-search{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.customer-search>label{flex:1;min-width:180px}.customer-search>button{margin-bottom:0}
.customer-balance-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}.customer-balance-card{min-width:0;padding:20px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);overflow-wrap:anywhere}.customer-identity h3{margin:0 0 4px}.customer-identity p{margin:0 0 16px}.customer-balance-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.customer-balance-metrics>div{padding:12px;background:var(--inset);border-radius:10px}.customer-balance-metrics dt{font-size:13px;color:var(--muted)}.customer-balance-metrics dd{margin:6px 0 0;font-size:22px;font-weight:700;color:var(--gold)}.customer-set-list{margin:14px 0 0;padding-left:20px}.customer-set-list li{margin:7px 0;font-size:14px}.customer-directory .section-head{flex-wrap:wrap;gap:12px}

/* SunKeepSet app recommendation. Scoped, in normal page flow. */
.sunkeep-promo{box-sizing:border-box;display:flex;align-items:center;gap:20px;padding:22px 26px;margin:0 0 22px;border:1px solid #6085ee66;border-radius:20px;background:radial-gradient(ellipse at 90% 10%,#549aff35,transparent 58%),linear-gradient(115deg,#172944,#22234d);color:#f5f8ff;box-shadow:0 10px 32px #060c1920;text-align:left;line-height:1.55}
.sunkeep-promo__icon{position:relative;display:grid;place-items:center;flex:0 0 68px;width:68px;height:68px;border-radius:19px;background:linear-gradient(145deg,#568fff,#7457df);border:1px solid #ffffff40;color:#fff;font:800 25px/1 Arial,sans-serif;box-shadow:0 7px 20px #0a102a55}
.sunkeep-promo__icon>span{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#ffcf77;color:#42300b;font:19px/1 Arial,sans-serif;border:3px solid #1b2947}
.sunkeep-promo__copy{flex:1;min-width:0}.sunkeep-promo__eyebrow{display:block;color:#b8ccff;font-size:12px;font-weight:700;letter-spacing:.35px}.sunkeep-promo .sunkeep-promo__copy h2{margin:3px 0 2px;padding:0;color:#fff;font-size:26px;line-height:1.3;font-weight:800;letter-spacing:-.4px}.sunkeep-promo .sunkeep-promo__copy p{margin:0 0 5px;color:#e8eeff;font-size:16px}.sunkeep-promo__features{color:#b6c2df;font-size:12px}
.sunkeep-promo a.sunkeep-promo__download{display:flex;flex-direction:column;justify-content:center;gap:0;flex:0 0 auto;min-height:60px;padding:10px 22px;border:1px solid #ffffff38;border-radius:13px;background:#0d1527;color:#fff;text-decoration:none;line-height:1.35;box-shadow:0 4px 10px #060b1726;transition:background .15s,transform .15s}.sunkeep-promo__download>span{font-size:12px;color:#c8d7f6}.sunkeep-promo__download>strong{font-size:20px;font-weight:750;white-space:nowrap}.sunkeep-promo a.sunkeep-promo__download:hover{background:#1b3156;transform:translateY(-1px)}.sunkeep-promo a.sunkeep-promo__download:focus-visible{outline:3px solid #a8c9ff;outline-offset:4px}
.sunkeep-promo--auth{gap:14px;padding:18px;margin:24px 0 0;flex-wrap:wrap;border-radius:16px}.sunkeep-promo--auth .sunkeep-promo__icon{flex-basis:48px;width:48px;height:48px;border-radius:14px;font-size:20px}.sunkeep-promo--auth .sunkeep-promo__copy h2{font-size:23px}.sunkeep-promo--auth .sunkeep-promo__copy p{font-size:14px}.sunkeep-promo--auth .sunkeep-promo__download{width:100%;align-items:center;min-height:54px;flex-direction:row!important;gap:7px!important}.sunkeep-promo--auth .sunkeep-promo__features{font-size:11px}
.sunkeep-promo--rss{width:calc(100% - 48px);max-width:1200px;margin:24px auto 0}
@media(max-width:700px){.sunkeep-promo{flex-wrap:wrap;gap:14px;padding:18px;border-radius:16px}.sunkeep-promo__icon{flex-basis:54px;width:54px;height:54px;border-radius:16px;font-size:22px}.sunkeep-promo .sunkeep-promo__copy h2{font-size:23px}.sunkeep-promo .sunkeep-promo__copy p{font-size:14px}.sunkeep-promo__features{font-size:11px}.sunkeep-promo a.sunkeep-promo__download{width:100%;align-items:center;flex-direction:row;gap:7px;min-height:54px}.sunkeep-promo--rss{width:calc(100% - 32px);margin:18px auto 0}}

/* Official SunKeepSet icon, unmodified image from Google Play. */
.sunkeep-promo__icon{background:transparent;border:0;box-shadow:none}.sunkeep-promo__icon>img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* Explicit amount selection: never prefill a payment amount. */
.topup-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;counter-reset:topup;padding:0;margin:0 0 24px}
.topup-steps li{counter-increment:topup;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;line-height:1.5}
.topup-steps li::before{content:counter(topup);display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);color:var(--gold);font-weight:800}
.topup-composer{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.topup-choose h3{font-size:20px;margin:0}.topup-choose>p{margin:6px 0 18px}
.topup-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}
.topup-preset{display:flex;flex-direction:column;gap:0;padding:12px 8px;background:var(--inset);border-color:var(--line-2);min-height:76px}
.topup-preset strong{font-size:25px;line-height:1.25;font-variant-numeric:tabular-nums}.topup-preset span{font-size:12px;color:var(--muted)}
.topup-preset[aria-pressed="true"]{background:#29493e;border-color:var(--green);box-shadow:0 0 0 1px var(--green);color:#a5f4d8}.topup-preset[aria-pressed="true"] span{color:#c7eddf}
.topup-choose label{font-size:16px;font-weight:700}.topup-amount{width:100%;min-height:86px!important;font-size:clamp(32px,5vw,42px)!important;font-weight:800!important;line-height:1.2;letter-spacing:.5px;color:var(--gold)!important;border:2px solid #78988c!important;padding:16px 20px!important;font-variant-numeric:tabular-nums}
.topup-amount::placeholder{color:#8fa39e;font-size:26px;letter-spacing:0}.topup-choose>small{display:block;margin-top:7px}
.topup-preview{border:1px solid #796339;border-radius:16px;padding:24px;background:linear-gradient(145deg,#302a1d,#192b29);min-width:0}
.topup-preview-number,.topup-confirm-number{display:block;font-size:clamp(32px,4vw,44px);font-weight:800;line-height:1.35;color:var(--gold);margin:12px 0 2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.topup-preview-baht{font-size:20px;font-weight:700;margin:4px 0 16px}.topup-preview-note{color:#d5e0d8;font-size:14px;border-top:1px solid #6c6246;padding-top:16px;line-height:1.8}.topup-create{width:100%;margin-top:10px;min-height:54px;font-size:17px}
.topup-confirm{text-align:center}.topup-confirm>p{line-height:1.8}.topup-confirm-number{font-size:44px}.payment-total{padding:12px 0 18px}
@media(max-width:700px){.topup-composer{grid-template-columns:1fr;gap:22px}.topup-steps{gap:8px;margin-bottom:20px}.topup-steps li{flex-direction:column;align-items:flex-start;font-size:12px;gap:6px}.topup-preview{padding:18px}.topup-presets{gap:8px}.topup-preset{min-height:72px}.topup-confirm-number{font-size:36px}}

/* RSS VIP */
.vip-badge{border:1px solid #8b7442;border-radius:999px;color:#efcf84;background:#29271d;padding:.5rem 1rem;font-weight:800}.vip-badge.is-vip{background:linear-gradient(135deg,#ebd59b,#bd9342);color:#211b0b;box-shadow:0 0 0 3px #b8944333}.vip-name{border-bottom:2px solid #d6b86c;padding:.25rem}.vip-banner{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding:1.25rem;margin:1.5rem 0;background:#2b291c;border:1px solid #8b7442;border-radius:16px;color:#efcf84}.vip-banner strong{font-size:1.2rem}.vip-banner span{flex:1}.price del{display:block;font-size:1rem;color:#9ab0b2}.vip-price{display:block;color:#eacb84}.vip-checkout{display:grid;gap:.6rem;background:#253d35;border:1px solid #76ba9f;padding:1rem;border-radius:14px;margin:1rem 0}.vip-checkout strong,.vip-total{font-size:1.4rem;color:#efcf84}dialog progress{width:100%;height:1.2rem;accent-color:#e8c47b}dialog li{margin:.8rem 0}@media(max-width:600px){.vip-banner{display:grid}.vip-checkout strong{font-size:1.3rem}.vip-badge{font-size:.95rem;padding:.45rem .7rem}}

.approval-slip{display:block;max-width:100%;max-height:55vh;object-fit:contain;border-radius:12px;background:#102125;margin:auto}dialog textarea{min-height:90px}

/* Reseller recruitment announcement */
.reseller-recruitment{box-sizing:border-box;max-width:1440px;margin:18px auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #b8974f;border-radius:16px;background:linear-gradient(110deg,#302919,#1b3430);color:#f5dfaa}.reseller-recruitment__copy{display:grid;gap:5px}.reseller-recruitment__copy strong{font-size:clamp(22px,2.5vw,30px);line-height:1.35}.reseller-recruitment__copy span{color:#e1d9c6;font-size:16px}.reseller-recruitment a{display:flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0;min-height:52px;padding:10px 22px;border-radius:12px;background:#e9c77f;color:#1b231e;text-decoration:none;font-weight:700;box-shadow:0 3px 12px #0002}.reseller-recruitment a b{font-size:22px}.reseller-recruitment a:hover{background:#f5dca5}.reseller-recruitment a:focus-visible{outline:3px solid #91efc7;outline-offset:4px}@media(max-width:1480px){.reseller-recruitment{margin:16px 20px}}@media(max-width:600px){.reseller-recruitment{margin:12px;padding:18px;display:grid;gap:14px}.reseller-recruitment__copy span{font-size:15px}.reseller-recruitment a{width:100%;box-sizing:border-box}}