:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#11243a;
  --muted:#52627a;
  --primary:#1f4d8f;
  --primary-2:#2f6dbf;
  --ok:#156f3a;
  --warn:#8a4b12;
  --bad:#9b1d1d;
  --ring:#0f62fe;
  --border:#d6deea;
  --input-bg:#ffffff;
  --soft-bg:#e9f0fb;
  --soft-text:#163a66;
  --toast-bg:#132840;
}

:root[data-theme='dark']{
  --bg:#0f1724;
  --card:#162133;
  --text:#e6edf7;
  --muted:#9eb0c9;
  --primary:#4d8fe8;
  --primary-2:#76aaf3;
  --ok:#62c28c;
  --warn:#d29b62;
  --bad:#ff8e8e;
  --ring:#76aaf3;
  --border:#2a3a53;
  --input-bg:#101a29;
  --soft-bg:#1d2c44;
  --soft-text:#d6e5ff;
  --toast-bg:#0b1320;
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);transition:background-color .2s ease,color .2s ease}
.app{max-width:900px;margin:0 auto;padding:16px 14px 90px}
.hero,.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.12);margin-bottom:14px}
h1{font-size:1.4rem;margin:.2rem 0}.sub{color:var(--muted);margin:.2rem 0 0}
.grid{display:grid;gap:10px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label{font-weight:600;font-size:.92rem}input,select,button{font:inherit}
input,select{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--input-bg);color:var(--text)}
button{border:0;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:active{transform:translateY(1px)}
.btn-soft{background:var(--soft-bg);color:var(--soft-text)}.btn-danger{background:#fde9e9;color:#7f1919}
.btn-theme{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:var(--soft-bg);color:var(--soft-text);padding:0;border:1px solid var(--border)}
.status{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-weight:700}
.pending{background:#eef3fa;color:#27466f}.confirmed{background:#e9f7ef;color:var(--ok)}.missed{background:#fdeeee;color:var(--bad)}
:root[data-theme='dark'] .pending{background:#22324a;color:#c6d8f4}
:root[data-theme='dark'] .confirmed{background:#1d3a2a;color:#a7e3bf}
:root[data-theme='dark'] .missed{background:#3e2327;color:#ffc5c5}
.big{width:100%;padding:16px;font-size:1.02rem}
.hint{color:var(--muted);font-size:.9rem}.steps li{margin:.4rem 0}
.history li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.history li:last-child{border-bottom:0}
.toast{position:fixed;left:12px;right:12px;bottom:14px;background:var(--toast-bg);color:#fff;padding:12px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.small{font-size:.86rem}.hold{height:8px;background:var(--soft-bg);border-radius:999px;overflow:hidden}.hold>span{display:block;height:100%;background:var(--primary-2);width:0}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
@media(min-width:720px){.app{padding:24px}.grid.two{grid-template-columns:1fr 1fr}}