:root { --ink:#17202a; --muted:#687585; --line:#e5eaf0; --brand:#3d5afe; --brand-dark:#283bba; --bg:#f5f7fb; --green:#16845b; --red:#bd3d52; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { height:64px; padding:0 max(20px,calc((100vw - 1080px)/2)); display:flex; align-items:center; justify-content:space-between; background:white; border-bottom:1px solid var(--line); }
.brand { color:var(--brand); font-weight:800; letter-spacing:.03em; }.text-link { color:var(--muted); font-size:14px; }.admin-label { color:var(--muted); font-size:14px; }
.shell { width:min(100% - 32px, 1080px); margin:40px auto 72px; }.narrow { max-width:680px; margin-left:auto; margin-right:auto; }
.eyebrow { color:var(--brand); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.hero h1 { margin:8px 0; font-size:clamp(28px,5vw,48px); line-height:1.15; }.lead { color:var(--muted); }
.card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 12px 32px rgba(27,42,73,.06); }.ticket-card { display:grid; grid-template-columns:1fr 230px; gap:28px; margin-top:28px; }.ticket-card h2 { margin-top:0; }.ticket-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:24px 0; }.meta-label { display:block; color:var(--muted); font-size:12px; margin-bottom:5px; }.meta-value { font-weight:700; }
.qr-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f8f9fc; border-radius:16px; padding:16px; }.qr { display:block; width:180px; height:180px; padding:0; background:white; }.qr-unavailable { display:grid; place-items:center; padding:18px; color:var(--muted); text-align:center; font-size:13px; }.qr-corner { display:none; }
.status { display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:6px 11px; font-size:12px; font-weight:800; }.status-valid { color:var(--green); background:#e6f7ef; }.status-used { color:var(--red); background:#fdecef; }.status-pending { color:#936c05; background:#fff6d9; }
.btn { border:0; border-radius:10px; padding:12px 16px; cursor:pointer; font-weight:700; font-size:14px; background:var(--brand); color:white; }.btn:hover { background:var(--brand-dark); }.btn-secondary { color:var(--ink); background:#eef1f6; }.btn-danger { background:#fff0f2; color:var(--red); }.actions { display:flex; gap:10px; flex-wrap:wrap; }
.dashboard-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }.dashboard-head h1 { margin:6px 0 0; }.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }.stat-number { font-size:30px; font-weight:800; margin-top:8px; }.table-card { padding:0; overflow:hidden; }.table-scroll { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:680px; } th,td { padding:16px 20px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; white-space:nowrap; } th { color:var(--muted); background:#fafbfc; font-size:12px; } tr:last-child td { border-bottom:0; }
.toolbar { display:flex; gap:10px; margin-bottom:16px; }.input { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font:inherit; background:white; }.notice { margin-top:20px; padding:14px 16px; border-radius:12px; background:#eef3ff; color:#344c9e; font-size:13px; }.empty { text-align:center; color:var(--muted); padding:48px 20px; }
.mode-select { min-width:230px; margin:0; }.mode-select .input { margin-top:6px; }
.user-nav { display:flex; gap:8px; margin:28px 0 20px; border-bottom:1px solid var(--line); }.user-nav a { color:var(--muted); padding:10px 14px; font-size:14px; font-weight:700; border-bottom:2px solid transparent; }.user-nav a.active { color:var(--brand); border-color:var(--brand); }.event-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.event-card { display:flex; flex-direction:column; }.event-card h2 { margin:12px 0 8px; font-size:20px; }.event-card-top,.event-card-bottom,.event-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; }.remaining { color:var(--green); font-size:12px; font-weight:700; }.event-description { min-height:42px; color:var(--muted); font-size:14px; line-height:1.5; }.event-meta { justify-content:flex-start; flex-direction:column; align-items:flex-start; color:var(--muted); font-size:13px; margin:12px 0 20px; }.event-card-bottom { border-top:1px solid var(--line); padding-top:16px; margin-top:auto; }.event-card-bottom strong { font-size:20px; }.event-card-bottom small { color:var(--muted); font-size:11px; font-weight:400; }.success { background:#e6f7ef; color:var(--green); padding:14px 16px; border-radius:12px; margin:20px 0; font-size:14px; }.ticket-list { display:grid; gap:18px; }.full { width:100%; margin-top:8px; }.field-label { display:grid; gap:7px; margin:18px 0; font-size:13px; font-weight:700; }.modal-backdrop { position:fixed; inset:0; background:rgba(20,30,48,.48); display:grid; place-items:center; padding:16px; z-index:10; }.modal { width:min(100%,480px); position:relative; }.modal h2 { margin-bottom:6px; }.modal-close { position:absolute; top:14px; right:16px; border:0; background:transparent; font-size:28px; color:var(--muted); cursor:pointer; }.checkout-summary { display:flex; justify-content:space-between; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:15px; }.muted { color:var(--muted); }
@media (max-width:900px) { .event-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .topbar { height:52px; padding:0 16px; }.brand { font-size:15px; }.text-link,.admin-label { font-size:12px; }.shell { width:calc(100% - 24px); margin-top:24px; }.hero h1 { font-size:26px; margin:6px 0; }.hero .lead { font-size:13px; line-height:1.55; }.ticket-card { grid-template-columns:1fr; }.qr-wrap { order:-1; }.stats { grid-template-columns:1fr; }.dashboard-head { align-items:start; flex-direction:column; }.ticket-meta { gap:12px; }.event-grid { grid-template-columns:1fr; }.user-nav { overflow:auto; white-space:nowrap; } }