.payment-dialog { color:#f8f4ff; background:#171932; border:1px solid #8c78c6; border-radius:24px; width:min(1080px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; box-sizing:border-box; }
.payment-dialog::backdrop { background:#05081bcc; }
.payment-panel, .admin-payments { padding:clamp(16px,4vw,32px); font-family:Anuphan,sans-serif; overflow-wrap:anywhere; }
.payment-panel header { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.payment-panel h2,.admin-payments h1 { margin-top:0; }
.payment-panel button,.admin-payments button,.payment-panel .download-list a { min-height:44px; border-radius:14px; padding:10px 16px; border:1px solid #aca0ca; background:#ffe17a; color:#181934; font:inherit; cursor:pointer; }
.payment-panel button:disabled,.admin-payments button:disabled { opacity:.55; cursor:wait; }
.payment-panel a,.admin-payments a { color:#e1d0ff; }
.payment-panel section,.admin-payments section { border-top:1px solid #77718c; margin-top:20px; padding-top:16px; }
.payment-panel input,.admin-payments input,.admin-payments textarea { box-sizing:border-box; max-width:100%; padding:12px; font:inherit; background:#101229; color:#fff; border:1px solid #c4b9d9; border-radius:10px; }
.payment-panel form,.admin-payments form { display:grid; gap:12px; margin-block:18px; }
.payment-panel label,.admin-payments label { display:grid; gap:6px; }
.payment-panel .payment-check,.admin-payments .payment-check { display:flex; gap:12px; align-items:start; margin-block:14px; }
.payment-check input { width:24px; height:24px; flex:0 0 24px; accent-color:#ffe17a; }
.payment-panel .order-row { display:grid; gap:6px; width:100%; text-align:left; margin-top:12px; background:#242341; color:#f8f4ff; }
.payment-notice { min-height:1.5em; color:#ffe17a; }
.payment-notice:empty { display:none; }
.payment-warning { background:#483341; padding:14px; border-radius:12px; }
.merchant-qr { display:block; width:min(100%,330px); height:auto; margin:16px auto; }
.download-list { display:grid; gap:10px; margin-block:16px; }
.admin-payments { max-width:900px; margin:auto; }
.admin-payments .receipt-image { max-width:100%; max-height:65dvh; object-fit:contain; background:#fff; }
.admin-payments dl { display:grid; grid-template-columns:auto 1fr; gap:8px 20px; }
.admin-payments dd { margin:0; }
.payment-panel :focus-visible,.admin-payments :focus-visible { outline:3px solid #ffe17a; outline-offset:4px; }
@media (max-width:480px) { .payment-panel h2 { font-size:1.3rem; } .topbar { flex-wrap:wrap; } .topbar-actions { flex-wrap:wrap; } }

.checkout-eyebrow { color:#d7bb7a; letter-spacing:.06em; }
.checkout-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0; margin:24px 0; }
.checkout-steps li { display:flex; align-items:center; gap:8px; color:#b5abc9; font-size:.9rem; }
.checkout-steps li span { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border:1px solid #84729f; border-radius:50%; }
.checkout-steps .is-current,.checkout-steps .is-done { color:#ffe17a; }
.checkout-steps .is-current span { background:#ffe17a; color:#181934; }
.checkout-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:start; }
.payment-panel .checkout-box { margin:0; padding:22px; border:1px solid #6e607d; border-radius:18px; background:linear-gradient(145deg,#25213f,#16192e); min-width:0; }
.checkout-box h3 { margin-top:0; }
.checkout-card-list { list-style:none; padding:0; display:grid; gap:12px; }
.checkout-card-list li { display:flex; gap:14px; align-items:center; border:1px solid #716079; border-radius:12px; padding:12px; }
.checkout-card-list img { width:64px; height:80px; object-fit:cover; border-radius:9px; flex:0 0 64px; }
.checkout-card-list div { flex:1; min-width:0; }
.checkout-card-list strong,.checkout-card-list span { display:block; }
.checkout-card-list span { color:#c0b9d2; font-size:.8rem; margin-top:6px; }
.checkout-card-list b { color:#ffe17a; white-space:nowrap; }
.checkout-summary dl { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; }
.checkout-summary dd { margin:0; }
.checkout-total { font-size:clamp(1.6rem,4vw,2.2rem); color:#ffe17a; }
.checkout-primary { width:100%; }
.checkout-transfer { margin:20px 0; }
.payment-panel .receipt-image { max-width:100%; max-height:360px; display:block; object-fit:contain; background:#fff; }
.checkout-qr-link { display:block; text-align:center; }
.checkout-waiting { text-align:center; margin-block:20px !important; }
.checkout-waiting > span { font-size:2rem; color:#ffe17a; }
.purchase-totals,.admin-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.purchase-totals span,.admin-summary span { border:1px solid #766187; padding:16px; border-radius:14px; color:#d1c8de; }
.purchase-totals b,.admin-summary b { display:block; font-size:1.4rem; color:#ffe17a; }
.purchase-status { border-radius:12px; padding:12px; background:#30294a; }
.status-paid { background:#24453d; color:#b9f5d5; }
.status-pending_review { background:#55432a; color:#ffe7a4; }
.checkout-support { margin-top:24px; color:#c9bfd8; }
@media(max-width:700px) { .checkout-grid { grid-template-columns:1fr; } .checkout-steps { gap:8px; } .checkout-steps li { flex-direction:column; text-align:center; font-size:.8rem; } .payment-panel .checkout-box { padding:16px; } }
@media(max-width:380px) { .checkout-card-list li { flex-wrap:wrap; } .checkout-card-list b { margin-left:auto; } .purchase-totals { grid-template-columns:1fr; } }

.checkout-star-product { text-align:center; }
.checkout-star-product img { display:block; width:96px; height:96px; object-fit:contain; margin:0 auto 12px; }
.my-star-sky { position:relative; overflow:hidden; height:180px; background:radial-gradient(ellipse at bottom,#423866,#10152c); border-radius:16px; margin:16px 0; }
.my-star-sky span { position:absolute; color:#ffe08a; text-shadow:0 0 14px #ffd564; font-size:26px; }
.my-star-sky p { text-align:center; padding-top:56px; color:#d2c3e3; }

/* Sky studio: free preview and explicit paid placement, keyboard + touch. */
.sky-dialog { width: min(1080px, 96vw); }
.sky-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.25rem; }
.sky-workspace > * { min-width: 0; }
.sky-canvas { width: 100%; height: auto; border-radius: 1.25rem; border: 1px solid #9a83be; cursor: crosshair; }
.sky-controls { display: grid; align-content: start; gap: .8rem; }
.sky-controls label { display: grid; gap: .4rem; }
.sky-controls select, .sky-controls input, .sky-controls button, .sky-shop button { min-height: 44px; max-width: 100%; }
.sky-controls select { padding: .6rem; color: #f5edff; background: #24213e; border: 1px solid #9b89bd; border-radius: .65rem; }
.sky-controls p, .sky-controls small { line-height: 1.6; margin: .2rem 0; overflow-wrap: anywhere; }
.sky-shop { margin-top: 1.5rem; padding: 1rem; border: 1px solid #8b78a5; border-radius: 1rem; }
.sky-shop summary { cursor: pointer; min-height: 44px; }
.sky-packages { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .7rem; }
@media(max-width:700px) { .sky-workspace { grid-template-columns: 1fr; } .sky-canvas { max-height: none; } }