/* Consolidated page patterns migrated from Blade views. Global tokens remain in sholid-tokens.css. */

/* resources/views/member/dashboard.blade.php */
.dash-hero { margin-bottom: 40px; }
    .dash-hero h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
    .dash-hero p { color: var(--text-secondary); margin: 0; }

    .dash-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 32px; }
    .dash-summary__card {
        border: 1px solid var(--color-border); border-radius: 12px; padding: 16px;
        background: var(--bg-card, var(--color-surface-1));
    }
    .dash-summary__card .num { font-size: 28px; font-weight: 800; }
    .dash-summary__card .lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

    .dash-section { margin-bottom: 40px; }
    .dash-section__title { font-size: 18px; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
    .dash-section__title small { font-size: 12px; color: var(--text-muted); font-weight: 400; }

    .vm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
    .vm-card {
        border: 1px solid var(--color-border); border-radius: 14px; padding: 20px;
        background: var(--bg-card, var(--color-surface-1));
        display: flex; flex-direction: column; gap: 12px;
        transition: border-color .15s ease, transform .15s ease;
    }
    .vm-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
    .vm-card__head { display: flex; justify-content: space-between; align-items: start; }
    .vm-card__title { font-weight: 700; font-size: 15px; }
    .vm-card__sub { font-size: 12px; color: var(--text-muted); font-family: monospace; }
    .vm-card__body { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
    .vm-card__spec { font-family: monospace; color: var(--text-primary); }
    .vm-card__bar { height: 5px; background: var(--color-surface-3); border-radius: 3px; overflow: hidden; }
    .vm-card__bar-fill { height: 100%; border-radius: 3px; }
    .vm-card__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px dashed var(--color-border); }
    .preview-banner {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
        margin-bottom: 24px; padding: 16px 18px; border: 1px solid var(--color-blue-400);
        border-radius: 12px; background: hsla(215, 90%, 60%, .12);
    }
    .preview-banner strong, .preview-banner span { display: block; }
    .preview-banner span { margin-top: 3px; color: var(--text-secondary); font-size: 13px; }
    .preview-banner__badge { white-space: nowrap; color: var(--color-blue-400); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
    .preview-action { opacity: .65; cursor: not-allowed; }
    @media (max-width: 560px) { .preview-banner { flex-direction: column; } }

/* resources/views/member/order/renew.blade.php */
.renew-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
    @media (max-width: 900px) { .renew-grid { grid-template-columns: 1fr; } }
    .duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
    .duration-opt {
        border: 2px solid var(--color-border); border-radius: 12px; padding: 16px; cursor: pointer;
        background: var(--bg-card); text-align: center; transition: border-color .15s, transform .15s;
    }
    .duration-opt:hover { border-color: var(--color-primary); transform: translateY(-2px); }
    .duration-opt input { display: none; }
    .duration-opt.selected { border-color: var(--color-primary); background: hsla(215,90%,60%,0.08); }
    .duration-opt__d { font-size: 22px; font-weight: 800; }
    .duration-opt__lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
    .duration-opt__p { font-size: 14px; font-weight: 600; color: var(--color-primary); margin-top: 6px; }

/* resources/views/member/order/show.blade.php */
.vm-page { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
    @media (max-width: 900px) { .vm-page { grid-template-columns: 1fr; } }
    .vm-card { border: 1px solid var(--color-border); background: var(--bg-card); border-radius: 14px; padding: 24px; margin-bottom: 16px; }
    .vm-card h3 { margin: 0 0 16px; font-size: 16px; }
    .info-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px 16px; margin-bottom: 8px; font-size: 14px; }
    .info-row .k { color: var(--text-muted); }
    .info-row .v { font-weight: 600; word-break: break-all; }
    .rdp-box { border: 1px dashed var(--color-primary); background: var(--color-surface-2); border-radius: 12px; padding: 20px; }
    .actions { display: grid; gap: 8px; }
    .actions button, .actions a { width: 100%; justify-content: center; }

/* resources/views/member/order/show.blade.php */
@keyframes spin { 100% { transform: rotate(360deg); } }

/* resources/views/orders/show.blade.php */
@keyframes spin {
                    100% {
                        transform: rotate(360deg);
                    }
                }

/* resources/views/public/checkout.blade.php */
.co-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
    @media (max-width: 900px) { .co-grid { grid-template-columns: 1fr; } }
    .co-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
    .co-card { border: 1px solid var(--color-border); background: var(--bg-card, var(--color-surface-1)); border-radius: 14px; padding: 24px; }
    .co-card h2 { margin: 0 0 16px; font-size: 18px; }
    .co-spec { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--color-border); }
    .co-spec:last-child { border: none; }
    .co-spec__k { color: var(--text-secondary); }
    .co-spec__v { font-weight: 600; }
    .co-total { font-size: 32px; font-weight: 800; }
    .co-discount { color: var(--color-green-500); }
    .voucher-input { display: flex; gap: 8px; }
    .voucher-input input { flex: 1; text-transform: uppercase; }
    .voucher-msg { margin-top: 8px; font-size: 13px; }
    .voucher-msg--ok { color: var(--color-green-500); }
    .voucher-msg--fail { color: var(--color-red-400); }
    .node-help { margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
    .checkout-help { color: var(--text-secondary); }
    .node-picker { min-width: 0; margin: 0; }
    .node-picker__legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; color: var(--text-primary); font-size: 18px; font-weight: 700; }
    .node-picker__intro { clear: both; margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
    .node-choice-grid { display: grid; gap: 12px; }
    .node-choice { position: relative; }
    .node-choice input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
    .node-choice label { display: block; min-height: 96px; padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-1); cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
    .node-choice label:hover { border-color: var(--color-primary); }
    .node-choice input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--color-primary) 32%, transparent); outline-offset: 2px; }
    .node-choice input:checked + label { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface-1)); box-shadow: 0 0 0 1px var(--color-primary); }
    .node-choice__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .node-choice__head strong, .node-choice__head small { display: block; }
    .node-choice__head small { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
    .node-choice__head b { flex: 0 0 auto; color: var(--color-primary); font-size: 15px; }
    .node-choice__resources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
    .node-choice__resources span { padding: 4px 8px; border-radius: 999px; background: var(--color-surface-2); color: var(--text-secondary); font-size: 12px; }
    .node-choice__selected { display: none; margin-top: 10px; color: var(--color-primary); font-size: 12px; font-weight: 700; }
    .node-choice input:checked + label .node-choice__selected { display: block; }
    @media (max-width: 520px) {
        .co-card { padding: 18px; }
        .node-choice__head { display: grid; gap: 8px; }
    }

/* resources/views/public/order-status.blade.php */
.os-card { border: 1px solid var(--color-border); background: var(--bg-card); border-radius: 14px; padding: 28px; margin-bottom: 20px; }
    .os-status {
        padding: 20px; border-radius: 12px; text-align: center; margin-bottom: 24px;
        border: 2px solid transparent;
    }
    .os-status--unpaid { border-color: var(--color-blue-400); background: hsla(215,90%,60%,0.1); }
    .os-status--pending { border-color: var(--color-amber-400); background: hsla(40,90%,55%,0.1); }
    .os-status--paid { border-color: var(--color-green-500); background: hsla(140,60%,45%,0.1); }
    .os-status--failed { border-color: var(--color-red-400); background: hsla(0,85%,60%,0.1); }
    .os-status h2 { margin: 0 0 8px; font-size: 24px; }
    .os-status p { margin: 0; color: var(--text-secondary); }
    .os-info { display: grid; grid-template-columns: 140px 1fr; gap: 12px 16px; margin-top: 20px; }
    .os-info .k { color: var(--text-muted); }
    .os-info .v { font-weight: 600; word-break: break-all; }
    .os-rdp { border-radius: 12px; background: var(--color-surface-2); padding: 20px; border: 1px dashed var(--color-primary); }
    .os-rdp .mono { font-family: monospace; font-size: 16px; }

.ui-s-00c0a9b574 { border: 1px solid var(--color-border); background: var(--bg-card); border-radius: 14px; padding: 24px; }
.ui-s-00dae009a8 { width:100%; justify-content:center; color:var(--color-magenta-400); border-color:var(--color-magenta-400); }
.ui-s-0220b52058 { text-align:right;color:var(--color-magenta-400); }
.ui-s-0481e05964 { border: 1px solid var(--color-border); background: var(--bg-card); border-radius: 14px; padding: 24px; position: sticky; top: 88px; }
.ui-s-074583ed74 { background:hsla(38,100%,60%,.15); }
.ui-s-078fdccd75 { width:180px; background:transparent; }
.ui-s-07d670de91 { background:hsla(310,100%,65%,0.15); }
.ui-s-08f903285e { color:var(--text-muted); font-size:14px; }
.ui-s-092c6eb54a { padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--bg-card); color:var(--color-text-primary); margin:auto; width:100%; max-width:420px; box-shadow:var(--card-shadow); }
.ui-s-0b87e9e0af { font-weight:600; }
.ui-s-0d75823b20 { color:#fff; }
.ui-s-0e09fa8710 { font-size: 1.5rem; color: var(--color-emerald-400); }
.ui-s-0e42856cf0 { color:var(--text-secondary); }
.ui-s-10406f868f { color:var(--status-failed); }
.ui-s-12e23956b1 { border-top:1px solid var(--color-border); }
.ui-s-137c79fcca { margin-bottom:.2rem; }
.ui-s-170ad56d6e { font-size:var(--text-lg); color:var(--color-primary); }
.ui-s-17a33ea2ba { font-size:.7rem; color:var(--accent-cyan); }
.ui-s-1c09f0c006 { margin-bottom: 0.5rem; }
.ui-s-1cc09be7df { height: 8px; background:var(--color-surface-3); border-radius:4px; overflow:hidden; }
.ui-s-1d609fd6a5 { text-align:right;font-weight:600;color:var(--color-emerald-400); }
.ui-s-1f175e8de1 { list-style:none; }
.ui-s-26d8e4c1a6 { border:none; padding-top:16px; }
.ui-s-2870de1717 { color:var(--color-text-muted);text-align:center;padding:2rem; }
.ui-s-291b7bbb01 { margin-top:0; }
.ui-s-29cd8c40c8 { max-width:560px; }
.ui-s-2a01802927 { margin-top:1.5rem; }
.ui-s-2a97df0ce0 { font-size:12px; color:var(--text-muted); margin-top:6px; }
.ui-s-2c4d914ee0 { background:var(--color-primary-glow); color: var(--color-primary); }
.ui-s-2cf403f387 { font-size:var(--text-lg); margin-bottom:var(--space-2); color: var(--color-red-500); }
.ui-s-31aa4c119c { font-size:.75rem;color:var(--color-text-muted); }
.ui-s-35be7a6a7a { flex:1; justify-content:center; border: 1px solid var(--color-border); }
.ui-s-36cfb1a16a { text-align:center; font-size:12px; color:var(--text-muted); margin-top:12px; }
.ui-s-3be99c42ca { width:100%; color:var(--color-amber-400); border-color:var(--color-amber-400); }
.ui-s-3ce6096bd9 { font-size:.8rem;color:var(--text-muted); }
.ui-s-3ef1fa1aa1 { margin-bottom:12px; }
.ui-s-40b3665096 { width:20px; height:20px; accent-color: var(--color-red-500); }
.ui-s-4321bce092 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.ui-s-4337054599 { font-size:var(--text-md); }
.ui-s-435dfa647e { text-align:right;font-weight:700;color:var(--color-emerald-400); }
.ui-s-44173d129f { font-size:13px; color:var(--text-secondary); margin:0 0 16px; }
.ui-s-441b2e54d3 { color:var(--text-secondary); margin:0 0 16px; }
.ui-s-441f890728 { height:6px; background:var(--color-surface-3); border-radius:3px; overflow:hidden; margin-bottom:8px; }
.ui-s-456fe937d9 { font-size:22px; font-weight:800; }
.ui-s-4828b99ebd { margin: 18px 0 0; color: var(--mk-muted); font-size: 12px; }
.ui-s-489e16440b { margin:0 0 16px; }
.ui-s-492ac7fcfa { font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem; }
.ui-s-495c738042 { color:var(--color-blue-400); }
.ui-s-50a11ccebf { padding: 2px 8px; font-size: 12px; color: var(--color-green-500); border-color: var(--color-green-500); }
.ui-s-512ed17c15 { padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--bg-card); color:var(--color-text-primary); margin:auto; width:100%; max-width:400px; box-shadow:var(--card-shadow); }
.ui-s-54293a7bf8 { width:120px; background:transparent; }
.ui-s-55289dc131 { color:var(--text-primary); }
.ui-s-55e69c93d2 { padding:40px; }
.ui-s-5850ec1208 { text-align:left; color:#bbb; }
.ui-s-5901e9ce46 { color:#aaa; font-size: 0.9em; margin-left:10px; }
.ui-s-59caaa8fdd { margin-top: 28px; }
.ui-s-5b6ee0c559 { background: var(--color-surface-2); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.ui-s-5f15c16d08 { font-size:12px; color:var(--text-muted); font-weight:400; }
.ui-s-5fa693f3d4 { margin-top: 20px; }
.ui-s-63e6bb201a { position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:var(--text-sm);pointer-events:none; }
.ui-s-64599fc27a { color:var(--color-amber-400); }
.ui-s-65e50a3a4b { background:var(--color-surface-2); padding:var(--space-3); border-radius:var(--radius-md); border:1px solid var(--color-border); }
.ui-s-6b56763f7e { color:var(--text-muted); font-family:monospace; min-width:80px; }
.ui-s-6c4a42427c { background: hsla(215, 90%, 60%, 0.15); color: var(--color-blue-400); border: 1px solid var(--color-blue-400); padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.ui-s-6d5d8950c3 { text-align:center;color:var(--color-text-muted);padding:2rem; }
.ui-s-6ed2442cb2 { height: 6px; background:var(--color-surface-3); border-radius:3px; overflow:hidden; margin-bottom:var(--space-2); }
.ui-s-6fcb47fd91 { color:var(--color-green-500); }
.ui-s-700547830b { width:100%; color:var(--color-blue-400); border-color:var(--color-blue-400); }
.ui-s-730a08c475 { flex:1; color:var(--text-secondary); }
.ui-s-73d3a30b8f { border: 1px solid var(--color-red-400); }
.ui-s-76084ee4e5 { margin-bottom:0; }
.ui-s-7623f05545 { flex:1; }
.ui-s-768de7d47f { font-size:16px; color:var(--color-primary); }
.ui-s-776c96d9fa { color:var(--text-muted); font-size:12px; margin-top:12px; }
.ui-s-7a1ab98a4e { width:140px; }
.ui-s-7a3c05a55c { font-size: var(--text-sm); }
.ui-s-7a9228ba10 { color:var(--color-emerald-400); }
.ui-s-7cbe5ecfa6 { width:160px; }
.ui-s-7fbb43be8c { color:var(--color-magenta-400); }
.ui-s-80abb1a545 { flex:1; justify-content:center; }
.ui-s-80ed4165e7 { grid-template-columns: 1fr 1fr; }
.ui-s-8161ca575c { background:transparent; }
.ui-s-82bdbd5bfb { color:#ccc; }
.ui-s-83033572e6 { background:hsla(0,85%,60%,0.15); }
.ui-s-8313e90956 { background: var(--color-surface-2); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); margin-bottom: var(--space-6); }
.ui-s-83a08d7797 { background: var(--color-green-500); border-color: var(--color-green-500); }
.ui-s-83e3fbf607 { color: var(--color-warning); }
.ui-s-85b92b4bb6 { font-size: 1.5rem; color: var(--color-cyan-400); }
.ui-s-869b746a8f { background-color: hsla(0, 85%, 60%, 0.1); border-bottom: 1px solid var(--color-red-400); }
.ui-s-8767d79744 { color:#00aaff; }
.ui-s-87db227580 { position:relative; }
.ui-s-8b2c7ebcca { font-weight:600; font-size:1rem; }
.ui-s-8b46ce58fb { padding:.75rem 1.25rem; }
.ui-s-8c4f130ffe { max-height: 400px; overflow-y:auto; }
.ui-s-8ca9bdcd37 { background:hsla(152,80%,50%,0.15); }
.ui-s-8de823b1dc { font-size:.8rem; color:var(--text-muted); }
.ui-s-8fa46872c2 { color: var(--color-green-500); border-color: var(--color-green-500); }
.ui-s-9089a81796 { border-color: var(--color-blue-400); background: hsla(215,90%,60%,0.05); }
.ui-s-94a6ee526a { position:absolute; right:6px; top:50%; transform:translateY(-50%); }
.ui-s-94e54433ee { background:var(--color-cyan-glow); }
.ui-s-95493d4da6 { background:var(--color-magenta-glow); }
.ui-s-9a72f411cb { font-size: 1.5rem; color: var(--color-amber-400); }
.ui-s-9cfa7c21c6 { width:100%; justify-content:center; }
.ui-s-a0612bbb59 { margin:0 0 12px; }
.ui-s-a0a5b2dde9 { color:#ff5555; margin-top:0; }
.ui-s-a125dd904d { width:52px; height:52px; font-size:1.25rem; flex-shrink:0; }
.ui-s-a22961f024 { margin-right:2px; }
.ui-s-a2e94d72eb { padding:0; }
.ui-s-a377d694c3 { color:var(--color-red-400); }
.ui-s-a527bac1ee { text-align:right; }
.ui-s-a7d8dedd23 { font-size:.7rem;color:var(--text-muted); }
.ui-s-a845bb684c { background:var(--color-surface-3); }
.ui-s-a8be156920 { margin:0 0 4px; }
.ui-s-aa51ca3293 { font-size:var(--text-lg); margin-bottom:var(--space-2); color: var(--color-green-500); }
.ui-s-ad54e396fa { margin:0 0 8px; }
.ui-s-ade14c686b { text-align:center;padding:2rem;color:var(--color-text-muted); }
.ui-s-ae4cb54cc0 { width:100%; justify-content:center; color:var(--color-blue-400); border-color:var(--color-blue-400); }
.ui-s-af1d164402 { width:100px; }
.ui-s-b0189620c8 { border-color: var(--color-amber-400); background: hsla(40,90%,55%,0.05); }
.ui-s-b1ecc496e0 { margin-top:8px; }
.ui-s-b46f29a23c { font-size:12px; color:var(--text-muted); text-transform:uppercase; }
.ui-s-b4fc5e2af2 { text-align:right;font-weight:700;color:var(--color-magenta-400); }
.ui-s-b6a2c799be { border-color:var(--border); margin:1.5rem 0; }
.ui-s-b6a888fb8e { width:100%; justify-content:center; color:var(--color-green-500); border-color:var(--color-green-500); }
.ui-s-b8e0b1fa55 { color:var(--text-muted); }
.ui-s-bc5a4e08b2 { background:hsla(38,100%,60%,0.15); }
.ui-s-bc68aaaba7 { font-size:var(--text-xl); }
.ui-s-bdcc6e55bb { margin-top:.4rem;font-size:.7rem;color:var(--text-muted);border-top:1px solid var(--color-border);padding-top:.3rem; }
.ui-s-bea42852ff { font-size:20px; font-weight:700; }
.ui-s-bece355826 { margin-bottom:1.5rem; }
.ui-s-bf3aeda29f { color:var(--text-muted); width: 40%; }
.ui-s-c04fdcc96d { max-width:600px; }
.ui-s-c0b625745e { color: var(--text-secondary); font-size: var(--text-sm); }
.ui-s-c28bd948da { text-align:left; }
.ui-s-c3bad72011 { margin:0; font-size:13px; color:var(--text-secondary); }
.ui-s-c787b6e7e8 { width:32px; height:32px; font-size:.75rem; flex-shrink:0; }
.ui-s-c9618a7e13 { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.5rem; }
.ui-s-ca547fa7aa { text-align:center; color:var(--text-muted); padding:2rem; }
.ui-s-cad980f4b7 { width:100%; }
.ui-s-cb3f4691e4 { color:var(--text-secondary); font-size:14px; margin:0; }
.ui-s-cc0f150f54 { font-size: 1.5rem; color: var(--color-magenta-400); }
.ui-s-ced23c7ec1 { color:var(--text-muted); font-size:12px; text-align:center; margin:12px 0 0; }
.ui-s-d1c175e0c7 { color:var(--text-muted); width: 35%; }
.ui-s-d4f7536fd4 { margin-top: 1.5rem; }
.ui-s-d727450a3e { font-size:var(--text-lg); margin-bottom:var(--space-4); }
.ui-s-d7870ed795 { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--color-blue-400); border-radius: 50%; animation: spin 1s linear infinite; }
.ui-s-d7c45d6aef { background:var(--color-surface-2); }
.ui-s-d86c119451 { width:24px; height:24px; border:3px solid rgba(255,255,255,0.1); border-top-color:var(--color-blue-400); border-radius:50%; animation:spin 1s linear infinite; }
.ui-s-d8f0834cfb { color: var(--color-amber-400); border-color: var(--color-amber-400); }
.ui-s-dd4b943cb9 { text-align:right;font-weight:700;color:var(--color-cyan-400); }
.ui-s-dfa20d2c87 { margin: 0; font-size: var(--text-sm); color:var(--text-secondary); }
.ui-s-e0216f682b { text-align:center; margin-bottom: 24px; }
.ui-s-e73f608e30 { background:hsla(152,80%,50%,.15); }
.ui-s-ec5ff3a839 { padding:var(--space-6); border:1px solid var(--color-red-500); border-radius:var(--radius-lg); background:var(--bg-card); color:var(--color-text-primary); margin:auto; width:100%; max-width:500px; box-shadow:var(--card-shadow); }
.ui-s-ecc1652e22 { font-size:13px; color:var(--text-secondary); margin:0 0 12px; }
.ui-s-ede2d5bce2 { padding-left:2.5rem; }
.ui-s-ef11eb6728 { position:sticky; top:88px; }
.ui-s-ef7142f76c { padding: 1rem; }
.ui-s-ef7a9dfbd9 { margin-top: 24px; }
.ui-s-eff7028e5e { padding: 2rem; text-align: center; color: var(--color-text-muted); }
.ui-s-f1cce9a4d2 { font-size:.85rem; color:var(--text-muted); margin-bottom:1rem; }
.ui-s-f2d23ad94d { text-align:center; margin-top:24px; color:var(--text-muted); font-size:13px; }
.ui-s-f608c86cea { background:#330000; border:1px solid #ff0000; padding:20px; max-width:500px; text-align:center; border-radius:8px; }
.ui-s-f7eda48d9c { color: var(--color-red-500); }
.ui-s-f822ed06d6 { color:var(--color-cyan-400); }
.ui-s-f8d354e012 { padding: 20px; }
.ui-s-fa1d5b4cd7 { opacity:0; width:0; height:0; }
.ui-s-fb65d48fab { font-size:11px; color:var(--text-muted); text-align:center; margin:12px 0 0; }
.ui-s-fd31200c8c { width:28px;height:28px;font-size:.7rem;flex-shrink:0; }
.ui-s-fe4dbf42f0 { font-size:12px; color:var(--text-muted); }
.ui-s-ff62e47bb7 { padding:var(--space-6); border:1px solid var(--color-green-500); border-radius:var(--radius-lg); background:var(--bg-card); color:var(--color-text-primary); margin:auto; width:100%; max-width:420px; box-shadow:var(--card-shadow); }
.ui-s-ffa461f99f { margin-top: 24px; padding: 16px; background: var(--color-surface-2); border-radius: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.settings-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.settings-pricing-card { grid-column: 1 / -1; }
.settings-pricing-title { margin: 0 0 var(--space-4); color: var(--text-primary); font-size: var(--text-base); font-weight: 750; }
.settings-pricing-title:not(:first-child) { margin-top: var(--space-6); }
.settings-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.settings-pricing-grid--custom { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.settings-price-input { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.settings-price-input > span { padding: 0 var(--space-3); color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; }
.settings-price-input .form-input { border: 0; border-left: 1px solid var(--color-border); border-radius: 0; }
.settings-price-input:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.settings-price-input:focus-within .form-input { box-shadow: none; }
.settings-pricing-note { margin-top: var(--space-5); margin-bottom: 0; }
@media (max-width: 960px) { .settings-pricing-grid, .settings-pricing-grid--custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .settings-pricing-grid, .settings-pricing-grid--custom { grid-template-columns: 1fr; } }

/* Pakasir API QRIS payment */
.qris-payment {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr);
    gap: var(--space-6, 24px);
    width: min(1120px, 100%);
    margin: 24px auto 48px;
    align-items: start;
}

.qris-payment .ui-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl, 20px);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.qris-payment__main {
    padding: clamp(24px, 4vw, 44px);
    text-align: center;
}

.qris-payment__heading h1 {
    margin: 8px 0 10px;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.12;
}

.qris-payment__heading p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--color-text-muted);
}

.qris-payment__code {
    display: inline-grid;
    place-items: center;
    max-width: 100%;
    margin: 28px auto 18px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
}

.qris-payment__code canvas {
    display: block;
    width: min(320px, 70vw) !important;
    height: auto !important;
    aspect-ratio: 1;
}

.qris-payment__amount {
    color: var(--color-success, #15803d);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.qris-payment__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 10px;
    color: var(--color-text-muted);
}

.qris-payment__meta code {
    color: var(--color-primary);
}

.qris-payment__meta strong,
.qris-payment__amount,
.qris-payment__total strong {
    font-variant-numeric: tabular-nums;
}

.qris-payment__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.qris-payment__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 16px;
    border: 1px solid var(--color-warning-border, #fcd34d);
    border-radius: 12px;
    color: var(--color-warning-text, #92400e);
    background: var(--color-warning-soft, #fffbeb);
    font-weight: 700;
}

.qris-payment__status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
}

.qris-payment__status[data-status="paid"] {
    border-color: #86efac;
    color: #166534;
    background: #f0fdf4;
}

.qris-payment__status[data-status="failed"],
.qris-payment__status[data-status="expired"],
.qris-payment__status[data-status="error"] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.qris-payment__retry { margin-top: 18px; }

.qris-payment__empty {
    margin: 28px 0 4px;
    padding: 24px;
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-subtle);
}

.qris-payment__empty p { margin: 6px 0 0; color: var(--color-text-muted); }

.qris-payment__summary { padding: clamp(22px, 3vw, 32px); }
.qris-payment__summary h2 { margin: 0 0 18px; font-size: 1.25rem; }

.qris-payment__details { margin: 0; }
.qris-payment__details > div {
    display: grid;
    grid-template-columns: minmax(100px, .8fr) minmax(0, 1.4fr);
    gap: 18px;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
}

.qris-payment__details dt { color: var(--color-text-muted); }
.qris-payment__details dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }

.qris-payment__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
    padding-top: 18px;
    font-weight: 750;
}

.qris-payment__total strong { color: var(--color-success, #15803d); font-size: 1.5rem; }

.qris-payment__notice {
    margin-top: 24px;
    padding: 16px;
    border-radius: 12px;
    background: var(--color-primary-soft, #eff6ff);
    text-align: left;
}

.qris-payment__notice p { margin: 5px 0 0; color: var(--color-text-muted); font-size: .925rem; }

@media (max-width: 820px) {
    .qris-payment { grid-template-columns: 1fr; margin-top: 12px; }
    .qris-payment__summary { order: 2; }
}

@media (max-width: 480px) {
    .qris-payment__main, .qris-payment__summary { padding: 20px 16px; }
    .qris-payment__actions .btn { width: 100%; }
    .qris-payment__details > div { grid-template-columns: 1fr; gap: 3px; }
    .qris-payment__details dd { text-align: left; }
    .qris-payment__total { align-items: flex-start; flex-direction: column; gap: 4px; }
}