:root{
  --bg1:#0b2f26;
  --bg2:#2f7d57;
  --bg3:#c9f7d4;
  --card:rgba(255,255,255,.10);
  --card2:rgba(255,255,255,.14);
  --stroke:rgba(255,255,255,.16);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --shadow:0 18px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 900px at 15% 10%, rgba(201,247,212,.22), transparent 55%),
              radial-gradient(1100px 900px at 90% 15%, rgba(62,180,122,.30), transparent 55%),
              linear-gradient(135deg, var(--bg1), #114335 35%, var(--bg2) 70%, var(--bg3));
  min-height:100vh;
}

.screen{
  width:min(520px, 100%);
  margin:0 auto;
  padding:28px 18px 34px;
}

.top{padding:10px 2px 18px}
.icon{
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  margin-bottom:16px;
  font-size:18px;
}

h1{
  margin:0;
  font-size:46px;
  letter-spacing:-.02em;
  line-height:1.05;
}
.sub{
  margin:10px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.4;
}

.card{
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:18px;
  margin:14px 0;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.section-title{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.75);
  margin-bottom:12px;
}

.row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid rgba(255,255,255,.10)}
.row:first-child{border-top:0;padding-top:0}
.label{color:var(--muted);font-size:14px}
.value{font-size:15px}

.h2{margin:0 0 10px;font-size:18px}
.small{margin:10px 0 0;font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}
.center{text-align:center}

.seg{display:flex;gap:10px}
.seg-btn{
  flex:1;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px 12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.seg-btn.active{background:rgba(201,247,212,.20);border-color:rgba(201,247,212,.35)}
.seg-top{font-size:14px}
.seg-bottom{font-size:12px;color:var(--muted)}

.notice{
  margin-top:12px;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.86);
}
.notice.success{background:rgba(25,120,84,.22);border-color:rgba(201,247,212,.28)}
.notice-actions{margin-top:8px;display:flex;gap:14px}
.link{color:rgba(201,247,212,.95);text-decoration:none}
.link:hover{text-decoration:underline}

.slot-list{display:flex;flex-direction:column;gap:14px}
.slot{
  position:relative;
  border-radius:18px;
  padding:16px 46px 16px 16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.slot.disabled{opacity:.45}
.slot-time{font-size:28px;letter-spacing:-.01em}
.slot-meta{color:var(--muted);font-size:13px}
.slot input{position:absolute;opacity:0;pointer-events:none}
.radio{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:transparent;
}
.slot input:checked + .radio{border-color:rgba(201,247,212,.9);box-shadow:0 0 0 6px rgba(201,247,212,.14) inset}

.btns{display:flex;gap:12px;flex-direction:column}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:18px;
  padding:14px 16px;
  font-weight:600;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(201,247,212,.22);
  color:rgba(0,0,0,.75);
}
.btn:hover{filter:brightness(1.03)}
.btn:disabled{opacity:.5}
.btn-ghost{background:rgba(255,255,255,.08);color:var(--text)}
.wide{width:100%}

.qr{width:240px;height:240px;border-radius:18px;border:10px solid rgba(255,255,255,.10);background:#fff;display:inline-block}

.footer{margin-top:18px;color:rgba(255,255,255,.60);font-size:12px;text-align:center}
code{background:rgba(0,0,0,.18);padding:2px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.10)}

.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:12px;color:rgba(255,255,255,.70);letter-spacing:.08em;text-transform:uppercase}
select{
  width:100%;
  border-radius:16px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:var(--text);
  outline:none;
}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);padding:14px}
.stat-num{font-size:28px;letter-spacing:-.02em}
.stat-label{font-size:12px;color:var(--muted);margin-top:2px}

.slot{display:flex;flex-direction:row;justify-content:space-between;align-items:center}
.slot-left{display:flex;flex-direction:column;gap:4px}
.slot-sub{font-size:12px;color:var(--muted)}
.slot-right{display:flex;flex-direction:column;align-items:flex-end}
.slot-num{font-size:22px;letter-spacing:-.01em}
.slot-label{font-size:11px;color:var(--muted)}
.slot-full .slot-num{opacity:.55}

.passenger{display:flex;justify-content:space-between;align-items:center;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);padding:14px;margin-top:10px}
.p-title{font-size:16px}
.p-sub{font-size:12px;color:var(--muted);margin-top:4px}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18);font-size:12px;color:rgba(255,255,255,.86)}

.disabled{opacity:.5;pointer-events:none}