/* public/css/pages.css — Flujos públicos compartidos */

/* ===== Shared utilities ===== */
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.68rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--chip-bg);
    color: var(--chip-text);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.pill--ok {
    background: color-mix(in srgb, var(--wine) 10%, transparent);
    border-color: color-mix(in srgb, var(--wine) 25%, var(--border));
}

.pill--warn {
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    border-color: color-mix(in srgb, #f59e0b 28%, var(--border));
    color: color-mix(in srgb, #b45309 70%, var(--text));
}

.pill--bad {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    border-color: color-mix(in srgb, #ef4444 28%, var(--border));
    color: color-mix(in srgb, #991b1b 70%, var(--text));
}

.pill .ico,
.btn-xs .ico,
.note-title .ico {
    vertical-align: -0.2em;
}

.btn-xs {
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
    font-weight: 650;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.1;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-xs:active { transform: scale(0.98); }

.btn-ghost {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
}

.btn-ghost:hover {
    border-color: color-mix(in srgb, var(--wine) 40%, var(--border));
    background: color-mix(in srgb, var(--card) 70%, transparent);
    color: var(--text);
}

.btn-wine {
    border: 1px solid color-mix(in srgb, var(--wine) 55%, var(--border));
    background: var(--wine);
    color: #fff;
}

.btn-wine:hover {
    background: var(--wine-2);
    border-color: var(--wine-2);
    color: #fff;
}

.btn-wa {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.22);
}

.btn-wa:hover {
    background: #1fb85a;
    border-color: #1fb85a;
    color: #fff;
    box-shadow: 0 12px 26px rgba(37, 211, 102, 0.3);
    transform: translateY(-1px);
}

.btn-wa:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.22);
}

.btn-wa:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.35);
    outline-offset: 2px;
}

.btn-pdf {
    border: 1px solid color-mix(in srgb, var(--wine) 40%, var(--border));
    background: color-mix(in srgb, var(--wine) 12%, transparent);
    color: var(--text);
}

.btn-pdf:hover {
    border-color: var(--wine);
    background: color-mix(in srgb, var(--wine) 18%, transparent);
}

.btn-solid {
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--card) 88%, transparent);
    color: var(--text);
}

.btn-solid:hover {
    border-color: color-mix(in srgb, var(--wine) 40%, var(--border));
    background: color-mix(in srgb, var(--card) 72%, transparent);
    color: var(--text);
}

.btn-primary {
    border: 1px solid color-mix(in srgb, var(--wine) 55%, var(--border));
    background: var(--wine);
    color: #fff;
}

.btn-primary:hover {
    background: var(--wine-2);
    color: #fff;
}

.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.note {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 82%, transparent);
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.45;
}

.note strong { color: var(--text); }

.note.danger,
.danger {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.06);
    color: color-mix(in srgb, #ef4444 55%, var(--text));
}

.page-wrap { max-width: 1120px; }

.page-pay main.container,
.page-checkout main.container,
.page-ticket main.container {
    padding-top: 0.85rem !important;
    padding-bottom: 1rem !important;
}

.page-pay .btn-group-top,
.page-checkout .actions,
.page-ticket .actions {
    max-width: 100%;
}

.copy-toast {
    display: none;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--wine) 78%, var(--text));
    font-weight: 600;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ===== Pay ===== */
.page-pay .card-soft {
            background: var(--card);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            border-radius: 22px;
            overflow: hidden;
        }

.page-pay .top {
            padding: 18px 18px 14px;
            background: radial-gradient(1000px 520px at 10% 0%, rgba(106, 15, 31, .18), transparent 55%),
            radial-gradient(800px 420px at 90% 10%, rgba(106, 15, 31, .08), transparent 60%);
            border-bottom: 1px solid var(--border);
        }

.page-pay .body { padding: 18px; }

.page-pay .title {
            letter-spacing: -.02em;
            font-weight: 650;
            margin: 0;
        }

.page-pay .meta {
            color: var(--muted);
            font-size: .95rem;
            font-weight: 500;
            line-height: 1.35;
        }

.page-pay .pills {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }

.page-pay .pill {
            display:inline-flex; align-items:center; gap:.5rem;
            padding: .42rem .68rem;
            border-radius: 999px;
            border:1px solid var(--border);
            background: var(--chip-bg);
            color: var(--chip-text);
            font-weight: 600;
            font-size: .9rem;
            white-space:nowrap;
        }

.page-pay .pill--ok {
            background: color-mix(in srgb, var(--wine) 10%, transparent);
            border-color: color-mix(in srgb, var(--wine) 25%, var(--border));
        }

.page-pay .pill--warn {
            background: color-mix(in srgb, #f59e0b 14%, transparent);
            border-color: color-mix(in srgb, #f59e0b 28%, var(--border));
            color: color-mix(in srgb, #b45309 70%, var(--text));
        }

.page-pay .pill--bad {
            background: color-mix(in srgb, #ef4444 12%, transparent);
            border-color: color-mix(in srgb, #ef4444 28%, var(--border));
            color: color-mix(in srgb, #991b1b 70%, var(--text));
        }

.page-pay .header-row {
            display:flex;
            gap: 14px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }

.page-pay .header-left {
            min-width: 260px;
        }

.page-pay .btn-xs {
            padding:.55rem .85rem;
            border-radius:14px;
            font-weight: 650;
            font-size:.95rem;
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            line-height:1.1;
            white-space:nowrap;
        }

.page-pay .btn-group-top {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-end;
        }

.page-pay .btn-ghost {
            border:1px solid var(--border);
            background:transparent;
            color: var(--text);
        }

.page-pay .btn-ghost:hover {
            border-color: color-mix(in srgb, var(--wine) 40%, var(--border));
            background: color-mix(in srgb, var(--card) 70%, transparent);
            color: var(--text);
        }

.page-pay .btn-wine {
            border: 1px solid color-mix(in srgb, var(--wine) 55%, var(--border));
            background: var(--wine);
            color: #fff;
        }

.page-pay .btn-wine:hover {
            background: color-mix(in srgb, var(--wine) 92%, #000 8%);
            color: #fff;
        }

.page-pay .btn-wa {
            background:#25D366;
            border-color:#25D366;
            color:#fff;

            box-shadow: 0 10px 24px rgba(37, 211, 102, .28);
            transform: translateY(0);
        }

.page-pay .btn-wa:hover {
            background:#1fb85a;
            border-color:#1fb85a;
            color:#fff;

            box-shadow: 0 14px 30px rgba(37, 211, 102, .34);
            transform: translateY(-1px);
        }

.page-pay .btn-wa:active {
            transform: translateY(0);
            box-shadow: 0 8px 18px rgba(37, 211, 102, .22);
        }

.page-pay .btn-wa:focus-visible {
            outline: 3px solid rgba(37, 211, 102, .35);
            outline-offset: 2px;
        }

.page-pay .btn-pdf {
            border:1px solid color-mix(in srgb, var(--wine) 40%, var(--border));
            background:color-mix(in srgb, var(--wine) 12%, transparent);
            color:var(--text);
        }

.page-pay .btn-pdf:hover {
            border-color:var(--wine);
            background:color-mix(in srgb, var(--wine) 18%, transparent);
            color:var(--text);
        }

.page-pay .divider {
            height: 1px;
            background: var(--border);
            margin: 12px 0;
        }

.page-pay .folio-wrap {
            display:flex;
            align-items: stretch;
            gap:10px;
            flex-wrap:wrap;
            margin-top: 12px;
        }

.page-pay .folio-box {
            flex: 1 1 320px;
            border: 1px solid color-mix(in srgb, var(--wine) 26%, var(--border));
            background: color-mix(in srgb, var(--wine) 7%, var(--card));
            border-radius: 16px;
            padding: 12px 14px;
            min-width: 240px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }

.page-pay .folio-left {
            min-width: 0;
        }

.page-pay .folio-label {
            color: var(--muted);
            font-size: .92rem;
            margin-bottom: 4px;
            font-weight: 500;
        }

.page-pay .mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 1.02rem;
            font-weight: 700;
            letter-spacing: .02em;
            color: var(--text);
            word-break: break-word;
        }

.page-pay .copy-toast {
            display: none;
            align-items: center;
            gap: 0.35rem;
            font-size: .9rem;
            color: color-mix(in srgb, var(--wine) 78%, var(--text));
            font-weight: 600;
        }

.page-pay .summary {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }

.page-pay .note {
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 82%, transparent);
            border-radius: 16px;
            padding: 12px 14px;
            color: var(--muted);
            font-weight: 500;
        }

.page-pay .note-strong {
            border: 1px solid color-mix(in srgb, var(--wine) 32%, var(--border));
            background: color-mix(in srgb, var(--wine) 6%, var(--card));
            border-radius: 16px;
            padding: 12px 14px;
            color: var(--text);
        }

.page-pay .note-title {
            font-weight: 650;
            letter-spacing: -.01em;
        }

.page-pay .bottom-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

.page-pay .details-card {
            border-radius: 18px;
            background: color-mix(in srgb, var(--card) 90%, transparent);
            padding: 12px;
        }

.page-pay .details-title {
            margin: 0 0 10px 0;
            font-weight: 650;
            letter-spacing: -.01em;
            color: var(--text);
        }

.page-pay .kv {
            list-style:none; padding:0; margin:0;
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:.65rem;
        }

.page-pay .kv li {
            display:flex;
            gap:12px;
            padding: .72rem .85rem;
            border:1px solid var(--border);
            border-radius:14px;
            background: color-mix(in srgb, var(--card) 86%, transparent);
            align-items:flex-start;
        }

.page-pay .kv .k {
            color: var(--muted);
            font-weight: 550;
            font-size:.92rem;
            min-width: 120px;
        }

.page-pay .kv .v {
            color: var(--text);
            font-weight: 600;
            text-align:right;
            flex:1;
            word-break: break-word;
        }

.page-pay .sub-actions {
            display:flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 10px;
        }

@media (max-width: 576px) {
.page-pay .top { padding: 14px 14px 12px; }

.page-pay .body { padding: 14px; }

.page-pay .title { font-size: 1.35rem; }

.page-pay .btn-group-top {
                width:100%;
                justify-content:flex-start;
            }

.page-pay .btn-xs {
                width:100%;
                justify-content:center;
                padding:.68rem .9rem;
                border-radius: 16px;
            }

.page-pay .folio-box {
                flex: 1 1 100%;
                align-items: flex-start;
                flex-direction: column;
            }

.page-pay .kv { grid-template-columns: 1fr; }

.page-pay .kv li {
                flex-direction: column;
                gap: 6px;
            }

.page-pay .kv .k { min-width: 0; }

.page-pay .kv .v { text-align:left; }

.page-pay .bottom-actions .btn-xs { width:100%; }
}

/* ===== Checkout ===== */
.page-checkout .page-wrap {
            max-width: 1120px;
        }

.page-checkout .hero {
            background: radial-gradient(900px 420px at 12% 0%, rgba(106, 15, 31, .20), transparent 55%),
            radial-gradient(700px 360px at 88% 10%, rgba(106, 15, 31, .10), transparent 60%);
            border: 1px solid var(--border);
            border-radius: 22px;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 14px;
        }

.page-checkout .hero-inner {
            padding: 18px 18px 14px;
        }

.page-checkout .hero-title {
            margin: 0;
            font-weight: 850;
            letter-spacing: -.02em;
        }

.page-checkout .hero-sub {
            color: var(--muted);
            font-size: .95rem;
            margin-top: 6px;
            max-width: 72ch;
        }

.page-checkout .pill {
            display:inline-flex; align-items:center; gap:.5rem;
            padding: .42rem .72rem;
            border-radius: 999px;
            border:1px solid var(--border);
            background: var(--chip-bg);
            color: var(--chip-text);
            font-weight: 750;
            font-size: .9rem;
            white-space:nowrap;
        }

.page-checkout .steps {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
            padding: 0 18px 16px;
        }

.page-checkout .step {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--muted);
            font-weight: 650;
            font-size: .92rem;
        }

.page-checkout .dot {
            width: 26px;
            height: 26px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 86%, transparent);
            color: var(--muted);
            font-weight: 850;
            font-size: .85rem;
        }

.page-checkout .step.active {
            color: var(--text);
        }

.page-checkout .step.active .dot {
            background: var(--wine);
            border-color: color-mix(in srgb, var(--wine) 55%, var(--border));
            color: #fff;
        }

.page-checkout .chev {
            color: var(--muted);
            opacity: .65;
        }

.page-checkout .grid {
            display: grid;
            grid-template-columns: 1fr 360px;
            gap: 14px;
            align-items: start;
        }

@media (max-width: 992px) {
.page-checkout .grid {
                grid-template-columns: 1fr;
            }
}

.page-checkout .card-soft {
            background: var(--card);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            border-radius: 22px;
            overflow: hidden;
        }

.page-checkout .card-head {
            padding: 16px 16px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }

.page-checkout .card-title {
            margin: 0;
            font-weight: 850;
            letter-spacing: -.01em;
            font-size: 1.05rem;
        }

.page-checkout .card-sub {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: .92rem;
        }

.page-checkout .card-body {
            padding: 16px;
        }

.page-checkout .kv {
            display: grid;
            gap: .55rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }

.page-checkout .kv li {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: .65rem .75rem;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: color-mix(in srgb, var(--card) 86%, transparent);
        }

.page-checkout .kv .k {
            color: var(--muted);
            font-weight: 650;
        }

.page-checkout .kv .v {
            color: var(--text);
            font-weight: 750;
            text-align: right;
        }

.page-checkout .mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: .95rem;
            word-break: break-word;
        }

.page-checkout .note {
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 82%, transparent);
            border-radius: 18px;
            padding: 12px 14px;
            color: var(--muted);
        }

.page-checkout .note strong {
            color: var(--text);
        }

.page-checkout .danger {
            border-color: rgba(239, 68, 68, .35);
            background: rgba(239, 68, 68, .06);
            color: color-mix(in srgb, #ef4444 55%, var(--text));
        }

.page-checkout .total-box {
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 90%, transparent);
            border-radius: 18px;
            padding: 12px 14px;
            display: grid;
            gap: 8px;
        }

.page-checkout .rowline {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: var(--muted);
            font-weight: 650;
            font-size: .95rem;
        }

.page-checkout .rowline strong {
            color: var(--text);
        }

.page-checkout .rowline.big {
            font-size: 1.18rem;
            color: var(--text);
            font-weight: 900;
            padding-top: 6px;
            border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
            margin-top: 2px;
        }

.page-checkout .btn-xs {
            padding: .62rem .95rem;
            border-radius: 14px;
            font-weight: 800;
            font-size: .96rem;
        }

.page-checkout .btn-solid {
            border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
            background: color-mix(in srgb, var(--card) 88%, transparent);
            color: var(--text);
        }

.page-checkout .btn-solid:hover {
            border-color: color-mix(in srgb, var(--wine) 40%, var(--border));
            background: color-mix(in srgb, var(--card) 72%, transparent);
            color: var(--text);
        }

.page-checkout .btn-primary {
            border: 1px solid color-mix(in srgb, var(--wine) 55%, var(--border));
            background: var(--wine);
            color: #fff;
        }

.page-checkout .btn-primary:hover {
            background: color-mix(in srgb, var(--wine) 92%, #000 8%);
            color: #fff;
        }

.page-checkout .btn-primary:disabled {
            opacity: .55;
            cursor: not-allowed;
        }

.page-checkout .pay-cta {
            display: grid;
            gap: 12px;
        }

.page-checkout .pay-cta .hint {
            color: var(--muted);
            font-size: .92rem;
            margin: 0;
            line-height: 1.25;
        }

.page-checkout .actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 14px;
        }

@media (max-width: 576px) {
.page-checkout .actions a {
                width: 100%;
                text-align: center;
            }
}

.page-checkout .drawer {
            position: fixed;
            inset: 0;
            z-index: 200;
            pointer-events: none;
        }

.page-checkout .drawer .backdrop {
            position: absolute;
            inset: 0;
            background: rgba(2, 6, 23, .55);
            opacity: 0;
            transition: opacity .18s ease;
        }

.page-checkout .drawer .panel {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: min(560px, 100%);
            background: var(--card);
            border-left: 1px solid var(--border);
            box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
            transform: translateX(105%);
            transition: transform .22s ease;
            display: flex;
            flex-direction: column;
        }

.page-checkout .drawer.open {
            pointer-events: auto;
        }

.page-checkout .drawer.open .backdrop {
            opacity: 1;
        }

.page-checkout .drawer.open .panel {
            transform: translateX(0);
        }

@media (max-width: 768px) {
.page-checkout .drawer .panel {
                top: auto;
                bottom: 0;
                right: 0;
                left: 0;
                width: 100%;
                height: min(92vh, 720px);
                border-left: none;
                border-top: 1px solid var(--border);
                border-radius: 22px 22px 0 0;
                transform: translateY(105%);
            }

.page-checkout .drawer.open .panel {
                transform: translateY(0);
            }
}

.page-checkout .drawer-head {
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            background: color-mix(in srgb, var(--card) 92%, transparent);
            backdrop-filter: blur(10px);
        }

.page-checkout .drawer-title {
            margin: 0;
            font-weight: 900;
            letter-spacing: -.01em;
            font-size: 1.08rem;
            line-height: 1.15;
        }

.page-checkout .drawer-sub {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: .92rem;
        }

.page-checkout .close-btn {
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 88%, transparent);
            color: var(--text);
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            font-weight: 900;
            line-height: 1;
            padding: 0;
        }

.page-checkout .note-with-ico {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

.page-checkout .note-ico {
            flex: 0 0 auto;
            margin-top: 1px;
        }

.page-checkout .close-btn:hover {
            border-color: color-mix(in srgb, var(--wine) 40%, var(--border));
        }

.page-checkout .drawer-body {
            padding: 14px 16px 16px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            display: grid;
            gap: 12px;
        }

.page-checkout .embed-shell {
            position: relative;
            background: color-mix(in srgb, var(--card) 92%, transparent);
            border-radius: 18px;
            padding: 10px;
        }

.page-checkout .embed-mount {
            border-radius: 14px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            background: var(--card);
            border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
            min-height: 380px;
            max-height: 62vh;
        }

@media (max-width: 768px) {
.page-checkout .embed-mount {
                min-height: 380px;
                max-height: 58vh;
            }
}

.page-checkout .embed-loading {
            position: absolute;
            inset: 10px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px;
            color: var(--muted);
            font-weight: 800;
            background: color-mix(in srgb, var(--card) 86%, transparent);
            border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
            backdrop-filter: blur(8px);
        }

.page-checkout .mini-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid color-mix(in srgb, var(--muted) 35%, transparent);
            border-top-color: var(--muted);
            border-radius:999px;
            animation: spin .8s linear infinite;
        }

@keyframes spin { to { transform: rotate(360deg); } }

body.page-checkout.drawer-open {
            overflow: hidden;
            touch-action: none;
        }

/* ===== Ticket (screen) ===== */
.page-ticket .ticket-shell {
            max-width: 980px;
            margin: 0 auto;
        }

.page-ticket .ticket-card {
            background: var(--card);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            border-radius: 22px;
            overflow: hidden;
        }

.page-ticket .ticket-top {
            padding: 18px 18px 14px;
            background: radial-gradient(1000px 520px at 10% 0%, rgba(106, 15, 31, .18), transparent 55%),
            radial-gradient(800px 420px at 90% 10%, rgba(106, 15, 31, .10), transparent 60%);
            border-bottom: 1px solid var(--border);
        }

.page-ticket .ticket-body {
            padding: 18px;
        }

.page-ticket .ticket-head {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            align-items: flex-start;
        }

.page-ticket .head-left {
            min-width: 260px;
        }

.page-ticket .pill {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .42rem .72rem;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--chip-bg);
            color: var(--chip-text);
            font-weight: 600;
            font-size: .88rem;
            white-space: nowrap;
        }

.page-ticket .title {
            letter-spacing: -.02em;
            font-weight: 650;
            margin: .55rem 0 .2rem;
            line-height: 1.1;
        }

.page-ticket .accent {
            color: var(--wine);
            font-weight: 650;
        }

.page-ticket .meta {
            color: var(--muted);
            font-size: .94rem;
            font-weight: 500;
        }

.page-ticket .meta .code {
            color: var(--text);
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: .92em;
        }

.page-ticket .actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }

.page-ticket .btn-xs {
            padding: .48rem .75rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: .92rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            gap: .45rem;
        }

.page-ticket .btn-ghost {
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text);
        }

.page-ticket .btn-ghost:hover {
            border-color: color-mix(in srgb, var(--wine) 40%, var(--border));
            background: color-mix(in srgb, var(--card) 70%, transparent);
            color: var(--text);
        }

.page-ticket .btn-wine {
            border: 1px solid color-mix(in srgb, var(--wine) 55%, var(--border));
            background: linear-gradient(180deg,
            color-mix(in srgb, var(--wine) 88%, white 0%) 0%,
            color-mix(in srgb, var(--wine) 74%, white 0%) 100%);
            color: #fff;
        }

.page-ticket .btn-wine:hover {
            filter: brightness(.98);
        }

.page-ticket .divider {
            height: 1px;
            background: var(--border);
            margin: 14px 0 0;
        }

.page-ticket .details {
            display: grid;
            grid-template-columns:1.25fr .85fr;
            gap: 16px;
            align-items: start;
        }

@media (max-width: 992px) {
.page-ticket .details {
                grid-template-columns:1fr;
            }
}

.page-ticket .kv {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: .6rem;
        }

.page-ticket .kv li {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: .62rem .75rem;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: color-mix(in srgb, var(--card) 88%, transparent);
            transition: transform .12s ease, border-color .12s ease, background .12s ease;
        }

.page-ticket .kv li:hover {
            border-color: color-mix(in srgb, var(--wine) 25%, var(--border));
            background: color-mix(in srgb, var(--card) 94%, transparent);
            transform: translateY(-1px);
        }

.page-ticket .kv .k {
            color: var(--muted);
            font-weight: 550;
            font-size: .95rem;
        }

.page-ticket .kv .v {
            font-weight: 550;
            color: var(--text);
            text-align: right;
            max-width: 60%;
            word-break: break-word;
        }

.page-ticket .qr-card {
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 90%, transparent);
            border-radius: 18px;
            padding: 14px;
            text-align: center;
        }

.page-ticket .qr-wrap {
            display: inline-block;
            padding: 12px;
            border-radius: 18px;
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 84%, transparent);
            position: relative;
        }

.page-ticket .qr-wrap img {
            display: block;
            width: min(260px, 68vw);
            height: auto;
        }

.page-ticket .qr-badge {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: color-mix(in srgb, var(--card) 90%, transparent);
            border: 1px solid var(--border);
            box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
            font-size: 20px;
            user-select: none;
        }

.page-ticket .qr-hint {
            margin-top: 10px;
            color: var(--muted);
            font-size: .92rem;
            font-weight: 500;
        }

.page-ticket .url-box {
            margin-top: 16px;
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 90%, transparent);
            border-radius: 16px;
            padding: 12px;
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: space-between;
        }

.page-ticket .url-left {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

.page-ticket .mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: .92rem;
            color: var(--muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.page-ticket .copy-toast {
            display: none;
            align-items: center;
            gap: 0.35rem;
            margin-left: 8px;
            font-size: .9rem;
            color: color-mix(in srgb, var(--wine) 78%, var(--text));
            font-weight: 600;
        }

@media (max-width: 576px) {
.page-ticket .ticket-top {
                padding: 16px 16px 12px;
            }

.page-ticket .ticket-body {
                padding: 16px;
            }

.page-ticket .actions {
                width: 100%;
            }

.page-ticket .url-box {
                flex-direction: column;
                align-items: stretch;
            }

.page-ticket .mono {
                white-space: normal;
                word-break: break-word;
            }
}

/* ===== Maintenance ===== */
.page-maintenance .maint-wrap {
            min-height: calc(100dvh - 64px);
            display: grid;
            place-items: center;
            padding: 22px 12px;
        }

.page-maintenance .maint-card {
            width: min(820px, 100%);
            background: var(--card);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            border-radius: 22px;
            overflow: hidden;
        }

.page-maintenance .maint-top {
            padding: 18px 18px 14px;
            background: radial-gradient(1000px 520px at 10% 0%, rgba(106, 15, 31, .20), transparent 55%),
            radial-gradient(800px 420px at 90% 10%, rgba(106, 15, 31, .10), transparent 60%);
            border-bottom: 1px solid var(--border);
        }

.page-maintenance .maint-body {
            padding: 18px;
        }

.page-maintenance .pill {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .44rem .72rem;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--chip-bg);
            color: var(--chip-text);
            font-weight: 600;
            font-size: .9rem;
            white-space: nowrap;
        }

.page-maintenance .title {
            margin: 10px 0 0;
            letter-spacing: -.02em;
            font-weight: 750;
        }

.page-maintenance .sub {
            margin: 8px 0 0;
            color: var(--muted);
            font-size: .98rem;
            line-height: 1.45;
            max-width: 70ch;
        }

.page-maintenance .tips {
            margin-top: 14px;
            display: grid;
            gap: 10px;
        }

.page-maintenance .tip {
            border: 1px solid var(--border);
            border-radius: 16px;
            background: color-mix(in srgb, var(--card) 88%, transparent);
            padding: 12px 14px;
            color: var(--muted);
            font-size: .94rem;
        }

.page-maintenance .actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 14px;
        }

.page-maintenance .btn-soft {
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--card) 92%, transparent);
            color: var(--text);
            padding: .62rem .95rem;
            border-radius: 14px;
            font-weight: 650;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            white-space: nowrap;
        }

.page-maintenance .btn-soft:hover {
            border-color: color-mix(in srgb, var(--wine) 40%, var(--border));
            background: color-mix(in srgb, var(--card) 78%, transparent);
            color: var(--text);
            text-decoration: none;
        }

.page-maintenance .btn-wine {
            border: 1px solid color-mix(in srgb, var(--wine) 55%, var(--border));
            background: var(--wine);
            color: #fff;
            padding: .62rem .95rem;
            border-radius: 14px;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            white-space: nowrap;
        }

.page-maintenance .btn-wine:hover {
            background: color-mix(in srgb, var(--wine) 92%, #000 8%);
            color: #fff;
            text-decoration: none;
        }

.page-maintenance .tiny {
            margin-top: 10px;
            color: var(--muted);
            font-size: .9rem;
        }

@media (max-width: 576px) {
.page-maintenance .maint-top {
                padding: 14px 14px 12px;
            }

.page-maintenance .maint-body {
                padding: 14px;
            }

.page-maintenance .actions a {
                width: 100%;
                justify-content: center;
            }
}