.my-tickets-page { min-height:100vh; padding-bottom:92px; color:#553546; background:linear-gradient(180deg,#ffedf4 0,#fff8fb 280px,#fff9fb 100%); }
.ticket-topbar { position:sticky; z-index:10; top:0; display:flex; align-items:center; gap:14px; min-height:68px; padding:10px clamp(14px,3vw,38px); border-bottom:1px solid #f3dce6; background:#fffafcf2; backdrop-filter:blur(14px); }
.ticket-topbar .lumi-brand { flex:1; }
.ticket-back { display:grid; width:40px; height:40px; flex:none; place-items:center; border:0; border-radius:50%; background:#fff0f5; color:#a3476d; font-size:30px; line-height:1; text-decoration:none; cursor:pointer; }
.ticket-header-title { color:#553546; font-weight:850; white-space:nowrap; }
.my-tickets-main { width:min(100% - 28px,860px); margin:0 auto; }
.ticket-page-heading { padding:24px 4px 18px; }
.ticket-page-heading p { margin:0 0 4px; color:#d65b87; font-size:11px; font-weight:850; letter-spacing:.16em; }
.ticket-page-heading h1 { margin:0; color:#503243; font-size:clamp(25px,6vw,33px); }
.ticket-page-heading>span { display:block; margin-top:6px; color:#957b89; font-size:13px; }
.ticket-balance-card { display:flex; align-items:center; gap:13px; margin-bottom:15px; padding:15px; border:1px solid #f8d8e4; border-radius:19px; background:linear-gradient(115deg,#ffe0ec,#fff5f8 65%,#ffd6e5); box-shadow:0 8px 21px #a4416812; }
.ticket-balance-icon { display:grid; width:44px; height:44px; flex:none; place-items:center; border-radius:15px; background:#fffafc; color:#ef5d91; font-size:25px; box-shadow:0 4px 12px #db6d951d; }
.ticket-balance-card>div { display:grid; gap:3px; flex:1; }
.ticket-balance-card small { color:#a67f91; font-size:11px; }
.ticket-balance-card strong { color:#753e58; font-size:15px; }
.ticket-balance-card>a { padding:9px 12px; border:1px solid #f5cada; border-radius:999px; background:#fffafc; color:#c34e7b; font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; }
.ticket-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:6px; border:1px solid #f4dce6; border-radius:17px; background:#fff; box-shadow:0 5px 18px #a4416810; }
.ticket-tabs button { min-height:42px; padding:8px 5px; border:0; border-radius:13px; background:transparent; color:#937784; font:inherit; font-size:13px; font-weight:750; cursor:pointer; }
.ticket-tabs button span { display:inline-grid; min-width:20px; height:20px; margin-left:3px; place-items:center; border-radius:999px; background:#fff0f5; color:#c44d7a; font-size:11px; }
.ticket-tabs button.selected { background:linear-gradient(110deg,#ff6898,#f34b83); color:#fff; box-shadow:0 4px 10px #ef60903f; }
.ticket-tabs button.selected span { background:#ffffff3d; color:#fff; }
.ticket-note { min-height:10px; margin:8px 2px 0; color:#a34c70; font-size:12px; }
.ticket-list { display:grid; grid-template-columns:minmax(0,1fr); gap:13px; margin-top:7px; }
.ticket-card { overflow:hidden; border:1px solid #f2dfe7; border-radius:19px; background:#fff; box-shadow:0 8px 22px #8e4c6610; }
.ticket-card-content { padding:12px; }
.ticket-card-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.ticket-card-content h2 { margin:0; color:#563849; font-size:15px; line-height:1.4; }
.ticket-card-offer { margin:4px 0 8px; color:#d55281; font-size:13px; font-weight:800; }
.ticket-meta { display:grid; gap:5px; margin:0; color:#927988; font-size:11px; line-height:1.5; }
.ticket-meta strong { color:#755565; font-weight:750; }
.ticket-source { display:inline-block; margin-top:8px; padding:4px 7px; border-radius:999px; background:#fff1f6; color:#ab6682; font-size:9px; font-weight:800; }
.ticket-view { display:flex; width:100%; min-height:39px; align-items:center; justify-content:center; margin-top:10px; border:0; border-radius:999px; background:linear-gradient(110deg,#ff6898,#f34b83); color:#fff; font:inherit; font-size:12px; font-weight:850; cursor:pointer; }
.ticket-card.used .ticket-view,.ticket-card.closed .ticket-view { border:1px solid #f0dce5; background:#fff7fa; color:#a47f90; }
.ticket-package-group { overflow:hidden; border:1px solid #f2dfe7; border-radius:19px; background:#fff; box-shadow:0 8px 22px #8e4c6610; }
.ticket-package-group summary { display:flex; min-height:68px; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; color:#5a3b4b; cursor:pointer; list-style:none; }
.ticket-package-group summary::-webkit-details-marker { display:none; }
.ticket-package-group summary span { display:grid; gap:4px; min-width:0; }
.ticket-package-group summary strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.ticket-package-group summary small { color:#c5537e; font-size:12px; font-weight:800; }
.ticket-package-group summary b { flex:none; color:#a55373; font-size:12px; }
.ticket-package-group-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; padding:0 10px 10px; border-top:1px solid #f3e5eb; }
.ticket-package-group-list .ticket-card { margin-top:10px; box-shadow:none; }
.ticket-empty-state { display:grid; justify-items:center; grid-column:1/-1; padding:32px 20px; border:1px solid #f4e1e8; border-radius:22px; background:linear-gradient(155deg,#fff 0,#fff5f8 100%); text-align:center; }
.ticket-empty-icon { display:grid; width:64px; height:64px; place-items:center; border-radius:22px; background:linear-gradient(145deg,#fff0f6,#ffd5e4); color:#ee6795; font-size:38px; box-shadow:0 7px 18px #dc6d951b; }
.ticket-empty-state h2 { margin:14px 0 4px; color:#563849; font-size:17px; }
.ticket-empty-state p { max-width:300px; margin:0 0 16px; color:#927c87; font-size:13px; line-height:1.6; }
.ticket-primary { display:inline-flex; min-height:41px; align-items:center; justify-content:center; padding:0 18px; border:0; border-radius:999px; background:linear-gradient(110deg,#ff6898,#f34b83); color:white; font-size:12px; font-weight:850; text-decoration:none; box-shadow:0 5px 14px #ef60903f; }
.ticket-dialog { width:min(100% - 26px,480px); max-width:480px; max-height:min(86dvh,780px); padding:0; border:1px solid #f0dce5; border-radius:24px; background:#fffafb; color:#553546; box-shadow:0 24px 80px #45213355; }
.ticket-dialog::backdrop { background:#3a2433a1; backdrop-filter:blur(3px); }
.ticket-dialog-inner { position:relative; overflow:auto; max-height:min(86dvh,780px); padding:22px; }
.ticket-dialog-close { position:absolute; z-index:2; top:10px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:#fff8fbeb; color:#765668; font-size:25px; cursor:pointer; }
.ticket-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 42px 8px 0; }
.ticket-detail-heading h2 { margin:0; color:#513545; font-size:19px; }
.ticket-status { flex:none; padding:6px 9px; border-radius:999px; background:#fff0f5; color:#c34e7b; font-size:11px; font-weight:850; }
.ticket-status.used { background:#eef9f4; color:#4d8c6e; }
.ticket-status.closed { background:#f5f1f3; color:#897b83; }
.ticket-detail-offer { margin:0; color:#d55281; font-weight:800; }
.ticket-detail-list { display:grid; gap:0; margin:14px 0; }
.ticket-detail-list>div { display:grid; grid-template-columns:90px 1fr; gap:9px; padding:10px 0; border-bottom:1px solid #f3e4ea; font-size:13px; }
.ticket-detail-list dt { color:#a18492; }
.ticket-detail-list dd { margin:0; color:#5f4654; font-weight:650; }
.ticket-detail-note { margin:12px 0 0; padding:11px 12px; border-radius:13px; background:#fff1f6; color:#906f7e; font-size:12px; line-height:1.6; }
@media(min-width:760px) { .ticket-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .ticket-card-content { padding:15px; } }
@media(max-width:430px) { .my-tickets-main { width:min(100% - 22px,860px); } .ticket-topbar { gap:8px; } .ticket-topbar .lumi-brand { gap:6px; } .ticket-topbar .lumi-brand>span { font-size:14px; } .ticket-header-title { font-size:14px; } .ticket-balance-card { gap:9px; padding:12px; } .ticket-balance-card>a { padding:8px 9px; font-size:10px; } .ticket-list { gap:9px; } .ticket-card { border-radius:16px; } .ticket-card-content { padding:9px; } .ticket-card-content h2 { font-size:13px; } .ticket-card-offer { font-size:11px; } .ticket-meta { font-size:10px; } .ticket-view { min-height:36px; font-size:11px; } }
.ticket-detail-page { padding-bottom:100px; }
.ticket-detail-page .ticket-page-heading { padding-bottom:13px; }
.ticket-detail-card { overflow:hidden; margin:0 0 22px; border:1px solid #f2dfe7; border-radius:23px; background:#fff; box-shadow:0 10px 30px #8e4c6612; }
.ticket-detail-kind { display:inline-block; margin-bottom:10px; padding:7px 11px; border-radius:999px; background:#fff1f6; color:#b74876; font-size:11px; font-weight:850; }
.ticket-detail-summary,.ticket-qr-panel,.ticket-usage-history { padding:18px clamp(15px,4vw,24px); }
.ticket-detail-summary { border-bottom:1px solid #f4e6eb; }
.ticket-package-balance { margin:14px 0 0; padding:12px 14px; border-radius:14px; background:linear-gradient(110deg,#ffeff5,#fff8fb); color:#9e5a78; font-size:15px; font-weight:800; }
.ticket-package-balance strong { color:#d94c82; font-size:25px; }
.ticket-package-uses { padding:18px clamp(15px,4vw,24px); border-bottom:1px solid #f4e6eb; background:#fffafc; }
.ticket-package-uses .ticket-section-title strong { color:#d94c82; font-size:15px; white-space:nowrap; }
.ticket-package-uses>p { margin:10px 0 12px; color:#927988; font-size:12px; line-height:1.6; }
.ticket-use-group { margin-top:8px; border:1px solid #f2dfe7; border-radius:14px; background:#fff; overflow:hidden; }
.ticket-use-group summary { display:flex; align-items:center; justify-content:space-between; min-height:47px; padding:0 13px; color:#654a59; font-size:13px; font-weight:850; cursor:pointer; }
.ticket-use-group summary span { color:#c65680; font-size:11px; }
.ticket-use-group ol { display:grid; gap:7px; margin:0; padding:0 11px 11px; list-style:none; }
.ticket-use-unit { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:39px; padding:0 10px; border-radius:10px; font-size:12px; }
.ticket-use-unit strong { color:#654a59; }
.ticket-use-unit span { color:#8d7782; text-align:right; }
.ticket-use-unit.used { background:#eff9f3; }
.ticket-use-unit.used span { color:#4d8c6e; }
.ticket-use-unit.reserved { background:#fff7e7; }
.ticket-use-unit.reserved span { color:#a57218; }
.ticket-use-unit.available { background:#fff0f5; }
.ticket-use-unit.available span { color:#cc4f7d; font-weight:800; }
.ticket-detail-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ticket-detail-title-row h2 { margin:0; color:#533547; font-size:20px; line-height:1.4; }
.ticket-detail-title-row p { margin:5px 0 0; color:#d34f80; font-size:15px; font-weight:800; line-height:1.5; }
.ticket-detail-rules { display:grid; gap:0; margin:13px 0; }
.ticket-detail-rules>div { display:grid; grid-template-columns:minmax(105px,34%) 1fr; gap:10px; padding:10px 0; border-bottom:1px solid #f3e7eb; font-size:13px; line-height:1.5; }
.ticket-detail-rules dt { color:#987e8a; }
.ticket-detail-rules dd { margin:0; color:#654a59; font-weight:650; overflow-wrap:anywhere; }
.ticket-store-link { display:flex; min-height:42px; align-items:center; justify-content:center; margin:14px 0; border:1px solid #f4c6d6; border-radius:999px; background:#fff7fa; color:#b34c75; font-size:13px; font-weight:850; text-decoration:none; }
.ticket-terms { margin-top:12px; padding:14px; border-radius:15px; background:#fff5f8; }
.ticket-terms h3 { margin:0 0 6px; color:#70495d; font-size:13px; }
.ticket-terms p { margin:0; color:#927988; font-size:12px; line-height:1.75; white-space:pre-line; }
.ticket-section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ticket-section-title small { color:#cc5a83; font-size:9px; font-weight:850; letter-spacing:.12em; }
.ticket-section-title h2 { margin:2px 0 0; color:#563849; font-size:17px; }
.ticket-section-title>span { color:#8a9b8e; font-size:11px; font-weight:800; }
.ticket-qr-panel { border-bottom:1px solid #f4e6eb; background:linear-gradient(180deg,#fffafd,#fff5f9); }
.ticket-qr-code { display:grid; width:min(100%,238px); justify-items:center; gap:9px; margin:16px auto 0; padding:15px; border:1px solid #f2e4ea; border-radius:18px; background:#fff; box-shadow:0 6px 20px #6e43500c; }
.ticket-qr-code img { display:block; width:min(100%,190px); aspect-ratio:1; image-rendering:pixelated; }
.ticket-qr-code strong { color:#59394c; font-size:17px; letter-spacing:.12em; }
.ticket-qr-prompt { margin:13px 0 4px; color:#ca4e7c; font-size:13px; font-weight:850; text-align:center; }
.ticket-qr-security { display:block; max-width:390px; margin:0 auto; color:#9a8290; font-size:11px; line-height:1.6; text-align:center; }
.ticket-qr-unavailable { margin-top:15px; padding:18px 14px; border:1px dashed #edcbd7; border-radius:15px; background:#fff; color:#927988; font-size:13px; text-align:center; }
.ticket-refresh-button { display:block; min-height:38px; margin:8px auto 0; padding:0 14px; border:1px solid #f0d6e0; border-radius:999px; background:#fff; color:#a25475; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.ticket-usage-history { display:grid; gap:10px; }
.ticket-usage-history article { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px; border:1px solid #f2e4ea; border-radius:14px; background:#fff; }
.ticket-usage-history article strong { color:#634558; font-size:13px; }
.ticket-usage-history article span { color:#927988; font-size:11px; text-align:right; }
.ticket-usage-history article small { grid-column:1/-1; color:#9a8290; font-size:11px; }
.ticket-no-history { margin:0; padding:13px; border-radius:13px; background:#fff5f8; color:#927988; font-size:12px; line-height:1.6; }
@media(min-width:760px) { .ticket-detail-page .my-tickets-main { max-width:680px; } .ticket-detail-card { border-radius:25px; } }
@media(max-width:430px) { .ticket-detail-summary,.ticket-qr-panel,.ticket-usage-history { padding:15px 13px; } .ticket-detail-title-row h2 { font-size:17px; } .ticket-detail-rules>div { grid-template-columns:minmax(94px,36%) 1fr; gap:7px; font-size:12px; } }