:root{
  --bg: #EEF1F6;
  --surface: #FFFFFF;
  --ink: #16233F;
  --ink-soft: #5B6B8C;
  --ink-faint: #93A0BC;
  --border: #D7DCE6;
  --brand: #3454D1;
  --brand-ink: #1E3399;
  --accent-active: #1E8F73;
  --accent-active-bg: #E4F4EE;
  --accent-warning: #C97613;
  --accent-warning-bg: #FBF0DC;
  --accent-expired: #B94436;
  --accent-expired-bg: #F9E7E4;
  --radius-lg: 18px;
  --radius-sm: 10px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(circle at 18% 0%, rgba(52,84,209,0.06), transparent 45%), var(--bg);
  color:var(--ink); font-family:var(--font-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; padding:40px 20px 80px;
}
a{ color:inherit; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.wrap{ max-width:880px; margin:0 auto; }

/* ---- top nav ---- */
.topnav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; color:var(--ink-soft); }
.topnav a{ text-decoration:underline; text-underline-offset:3px; }
.topnav a:hover{ color:var(--ink); }

/* ---- header ---- */
.header{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.header__title-block .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px; }
.header__title-block h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,38px); margin:0; letter-spacing:-0.01em; }
.header__title-block p{ margin:6px 0 0; color:var(--ink-soft); font-size:14.5px; max-width:46ch; }
.stats{ display:flex; background:var(--ink); border-radius:var(--radius-sm); overflow:hidden; box-shadow:0 8px 24px -12px rgba(22,35,63,0.45); }
.stats__item{ padding:12px 18px; min-width:108px; border-right:1px solid rgba(255,255,255,0.12); }
.stats__item:last-child{ border-right:none; }
.stats__num{ font-family:var(--font-mono); font-weight:600; font-size:19px; color:#fff; display:block; }
.stats__label{ font-size:10.5px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:.08em; }

/* ---- toolbar / buttons ---- */
.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.btn{ font-family:var(--font-body); font-weight:600; font-size:14px; border-radius:999px; border:1px solid transparent; padding:11px 20px; cursor:pointer; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 6px 16px -6px rgba(52,84,209,0.6); }
.btn-primary:hover{ background:var(--brand-ink); }
.btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--ink-faint); color:var(--ink); }
.btn-small{ padding:7px 14px; font-size:12.5px; }

/* ---- banner ---- */
.banner{ display:flex; gap:12px; align-items:flex-start; background:var(--accent-warning-bg); border:1px solid #F0D6A6; color:#7A4E10; border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:20px; font-size:13.5px; }
.banner__dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-warning); margin-top:6px; flex:none; }
.flash{ padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:13.5px; }
.flash-error{ background:var(--accent-expired-bg); color:#7A2A20; border:1px solid #E9B9AF; }
.flash-ok{ background:var(--accent-active-bg); color:#125C48; border:1px solid #A9DDCB; }

/* ---- ticket card ---- */
.ticket{ display:grid; grid-template-columns:1fr 156px; background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); position:relative; margin-bottom:16px; box-shadow:0 10px 28px -18px rgba(22,35,63,0.35); }
.ticket::before, .ticket::after{ content:""; position:absolute; width:22px; height:22px; border-radius:50%; background:var(--bg); border:1px solid var(--border); left:calc(100% - 156px); transform:translateX(-50%); z-index:1; }
.ticket::before{ top:-11px; }
.ticket::after{ bottom:-11px; }
.ticket__main{ padding:20px 22px; min-width:0; }
.ticket__stub{ padding:20px 16px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border-left:2px dashed var(--border); position:relative; }
.ticket__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.ticket__name{ font-family:var(--font-display); font-weight:600; font-size:18px; margin:0; word-break:break-word; }
.ticket__actions{ display:flex; gap:6px; flex:none; }
.icon-btn{ width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; text-decoration:none; }
.icon-btn:hover{ background:var(--bg); color:var(--ink); }
.ticket__dates{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin:4px 0 14px; }
.price-grid{ display:flex; gap:22px; flex-wrap:wrap; }
.price-grid__item .amount{ font-family:var(--font-mono); font-weight:600; font-size:16px; display:block; }
.price-grid__item .label{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.ticket__notify{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.stub__days{ font-family:var(--font-mono); font-weight:700; font-size:32px; line-height:1; }
.stub__unit{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }
.stub__status{ margin-top:10px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.stub__bar{ width:100%; height:5px; border-radius:3px; background:var(--border); margin-top:14px; overflow:hidden; }
.stub__bar-fill{ height:100%; border-radius:3px; }
.status-active .stub__days, .status-active .stub__unit{ color:var(--accent-active); }
.status-active .stub__status{ background:var(--accent-active-bg); color:var(--accent-active); }
.status-active .stub__bar-fill{ background:var(--accent-active); }
.status-warning .stub__days, .status-warning .stub__unit{ color:var(--accent-warning); }
.status-warning .stub__status{ background:var(--accent-warning-bg); color:var(--accent-warning); }
.status-warning .stub__bar-fill{ background:var(--accent-warning); }
.status-expired .stub__days, .status-expired .stub__unit{ color:var(--accent-expired); }
.status-expired .stub__status{ background:var(--accent-expired-bg); color:var(--accent-expired); }
.status-expired .stub__bar-fill{ background:var(--accent-expired); }

/* ---- add/edit form (native <details>, no JS needed) ---- */
.add-details{ margin-bottom:16px; }
.add-details > summary{ list-style:none; cursor:pointer; }
.add-details > summary::-webkit-details-marker{ display:none; }
.form-ticket{ display:grid; grid-template-columns:1fr 156px; background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); margin-top:12px; }
.form-ticket .ticket__main{ padding:22px 24px; }
.form-ticket .ticket__stub{ align-items:stretch; justify-content:flex-start; text-align:left; padding:22px 18px; border-left:2px dashed var(--border); }
.form-title{ font-family:var(--font-display); font-weight:600; font-size:16px; margin:0 0 16px; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:12px; color:var(--ink-soft); font-weight:500; }
.field input, .field select{ font-family:var(--font-mono); font-size:14px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:#fbfcfe; color:var(--ink); width:100%; }
.field input:focus, .field select:focus{ border-color:var(--brand); }
.field-money{ display:flex; gap:6px; }
.field-money input{ flex:1; }
.field-money select{ width:70px; }
.form-actions{ display:flex; gap:10px; margin-top:4px; }
.stub-hint strong{ display:block; color:var(--ink); font-family:var(--font-display); font-size:15px; margin-bottom:4px; }
.stub-hint{ font-size:12.5px; color:var(--ink-soft); }

/* ---- empty state ---- */
.empty{ text-align:center; padding:60px 20px; border:1px dashed var(--border); border-radius:var(--radius-lg); color:var(--ink-soft); }
.empty strong{ display:block; color:var(--ink); font-family:var(--font-display); font-size:18px; margin-bottom:6px; }

.footnote{ margin-top:32px; font-size:12.5px; color:var(--ink-faint); }
.footnote summary{ cursor:pointer; color:var(--ink-soft); font-weight:500; }
.footnote p{ margin:10px 0 0; line-height:1.6; }

/* ---- auth pages ---- */
.auth-wrap{ max-width:380px; margin:80px auto; }
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 26px; box-shadow:0 10px 28px -18px rgba(22,35,63,0.35); }
.auth-card h1{ font-family:var(--font-display); font-size:22px; margin:0 0 4px; }
.auth-card p.hint{ color:var(--ink-soft); font-size:13px; margin:0 0 20px; }
.auth-card .field{ margin-bottom:14px; }
.auth-card .field input{ font-family:var(--font-mono); font-size:14px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; width:100%; }
.auth-card .btn{ width:100%; text-align:center; }
.auth-card .switch{ text-align:center; margin-top:16px; font-size:13px; color:var(--ink-soft); }
.auth-card .switch a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .ticket, .form-ticket{ grid-template-columns:1fr; }
  .ticket::before, .ticket::after{ display:none; }
  .ticket__stub{ border-left:none; border-top:2px dashed var(--border); flex-direction:row; justify-content:space-between; text-align:left; }
  .form-ticket .ticket__stub{ border-left:none; border-top:2px dashed var(--border); }
  .stub__bar{ display:none; }
  .field-grid{ grid-template-columns:1fr; }
  .header{ align-items:flex-start; }
}