:root{
  --blue:#315a8d;
  --blue-dark:#23456f;
  --blue-soft:#eef4fa;
  --text:#1f2933;
  --muted:#66717f;
  --border:#cfd7e2;
  --bg:#f7f9fb;
  --white:#fff;
  --success:#2f6d47;
  --danger:#8a3d3d;
  --occupied:#dfe3e8;
  --longterm:#d9e8f5;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
a{color:inherit}
.site-header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.header-inner{max-width:1180px;margin:0 auto;min-height:72px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{font-size:1.5rem;font-weight:700;color:var(--blue-dark);text-decoration:none}
.main-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.main-nav a{text-decoration:none;padding:9px 12px;border-radius:6px;color:#344252}
.main-nav a:hover,.main-nav a.active{background:var(--blue-soft);color:var(--blue-dark)}
.main-nav a.active{outline:1px solid #aec2d8}
.page{max-width:1180px;margin:0 auto;padding:40px 24px 64px}
.page-narrow{max-width:900px}
h1{margin:0 0 8px;font-size:2rem;line-height:1.2}
.lead{color:var(--muted);margin-top:0;max-width:760px}
.card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:24px}
.status-card{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--white);border:1px solid var(--border);border-left:4px solid var(--blue);padding:20px 22px;margin:28px 0 22px}
.status-label{font-weight:700;margin-bottom:3px}
.status-text{color:var(--muted)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.actions.spread{justify-content:space-between}
.btn{display:inline-block;border:1px solid var(--blue);background:var(--blue);color:#fff;padding:11px 18px;border-radius:7px;text-decoration:none;font-weight:700;cursor:pointer;font-size:.98rem}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.secondary{color:var(--blue-dark);background:var(--white);border-color:#9db4cc}
.btn.secondary:hover{background:var(--blue-soft)}
.btn.danger{color:var(--danger);background:#fff;border-color:#caa7a7}
.btn.disabled{pointer-events:none;color:#87919e;background:#f0f2f4;border-color:#d6dbe1}
.note{border:1px solid #c9d7e6;background:#f4f8fc;padding:15px 17px;border-radius:8px;color:#384d62}
.rule-list{margin:16px 0 0;padding-left:22px}
.rule-list li{padding:9px 0;border-bottom:1px solid #edf0f3}
.rule-list li:last-child{border-bottom:0}
.question{padding:20px 0;border-bottom:1px solid #e5e9ee}
.question:last-child{border-bottom:0}
.question-title{font-weight:700;margin-bottom:10px}
.option{display:block;margin:8px 0}
.result{text-align:center;padding:56px 24px}
.result-symbol{width:92px;height:92px;margin:0 auto 22px;display:grid;place-items:center;border-radius:50%;font-size:3rem;font-weight:700;border:3px solid}
.result.success .result-symbol{color:var(--success);border-color:var(--success)}
.result.fail .result-symbol{color:var(--danger);border-color:var(--danger)}
.toolbar{display:flex;gap:16px;flex-wrap:wrap;align-items:end;margin:22px 0}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field-label{font-weight:700;font-size:.93rem}
input[type="date"],input[type="time"],input[type="text"]{border:1px solid #aeb8c4;border-radius:6px;padding:10px 11px;font:inherit;background:#fff}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.93rem;color:var(--muted)}
.legend-item{display:flex;align-items:center;gap:7px}
.swatch{width:17px;height:17px;border:1px solid #9099a4;background:#fff}
.swatch.occupied{background:var(--occupied)}
.swatch.longterm{background:var(--longterm)}
.rooms{display:grid;grid-template-columns:repeat(2,minmax(300px,1fr));gap:22px;margin-top:22px}
.room{border:1px solid var(--border);background:#fff;border-radius:10px;padding:14px}
.room-title{font-weight:700;margin:0 0 12px;color:#445364}
.seat-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #aeb8c4}
.seat{min-height:88px;border-right:1px solid #aeb8c4;border-bottom:1px solid #aeb8c4;display:flex;align-items:center;justify-content:center;position:relative;text-decoration:none;font-size:1.12rem;font-weight:700;background:#fff}
.seat:nth-child(3n){border-right:0}
.seat:nth-last-child(-n+3){border-bottom:0}
.seat:hover{background:#f5f8fb}
.seat.occupied{background:var(--occupied);color:#5d6670}
.seat.longterm{background:var(--longterm)}
.seat.selected{outline:3px solid var(--blue);outline-offset:-3px;background:#f2f6fb}
.seat small{position:absolute;right:7px;top:5px;font-size:.7rem;font-weight:400;color:#65707b}
.info-grid{display:grid;grid-template-columns:190px 1fr;gap:12px 22px;margin:24px 0}
.info-grid dt{font-weight:700;color:#43505e}
.info-grid dd{margin:0}
.radio-row{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.summary{width:100%;border-collapse:collapse;margin-top:18px}
.summary th,.summary td{text-align:left;padding:13px 12px;border-bottom:1px solid #e4e8ed}
.summary th{width:34%;color:#4b5866;background:#f7f9fb}
.reservation-list{display:grid;gap:14px}
.reservation-item{background:#fff;border:1px solid var(--border);border-radius:9px;padding:18px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.reservation-meta{color:var(--muted);margin-top:4px}
.footer{max-width:1180px;margin:0 auto;padding:0 24px 36px;color:#7a8490;font-size:.88rem}
@media(max-width:760px){
  .header-inner{align-items:flex-start;flex-direction:column;padding-top:16px;padding-bottom:14px}
  .main-nav{justify-content:flex-start}
  .rooms{grid-template-columns:1fr}
  .status-card,.reservation-item{align-items:flex-start;flex-direction:column}
  .info-grid{grid-template-columns:1fr;gap:4px}
  h1{font-size:1.7rem}
}