:root {
  --cream: #fff7ee;
  --paper: #fffdf9;
  --soft: #fff3e2;
  --ink: #2d251c;
  --muted: #766b5c;
  --line: rgba(80, 52, 26, .14);
  --shadow: 0 14px 42px rgba(92, 54, 18, .10);
  --radius: 24px;
  --accent: #ed923c;
  --accent-dark: #8b4212;
  --accent-soft: rgba(237,146,60,.14);
  --good: #127c55;
  --warn: #b7791f;
  --danger: #931b2a;
  --blue: #245bc7;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: linear-gradient(180deg, var(--cream), #fffaf3 45%, #f5fbfb 100%); font-size: 14px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--accent-dark); text-decoration: none; font-weight: 800; } a:hover { text-decoration: underline; }
.app-shell { width: min(980px, calc(100% - 26px)); margin: 0 auto; padding: 12px 0 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 8px 0 18px; position: sticky; top:0; z-index:30; background: linear-gradient(180deg, rgba(255,247,238,.96), rgba(255,247,238,.86)); backdrop-filter: blur(12px); }
.brand { display:flex; align-items:center; gap:10px; min-width:max-content; }
.brand-mark { width:42px; height:42px; border-radius:15px; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:1000; background: var(--accent); box-shadow: 0 12px 24px rgba(237,146,60,.28); letter-spacing:.02em; }
.brand h1 { margin:0; font-size:20px; line-height:1; letter-spacing:-.03em; }
.brand p { margin:2px 0 0; color:var(--accent-dark); font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.nav-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.nav-pills a, .pill { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px; padding:8px 13px; color:var(--ink); background: rgba(255,255,255,.78); font-size:12px; font-weight:900; box-shadow:0 4px 12px rgba(0,0,0,.03); }
.nav-pills a:hover { text-decoration:none; transform: translateY(-1px); }
.nav-visitor { background:#f2994a!important; color:#fff!important; border-color:#f2994a!important; }
.nav-host { background:#e9f0ff!important; color:#17418e!important; }
.nav-noc { background:#f3edf9!important; color:#5b287b!important; }
.nav-mh { background:#fff8ea!important; color:#7d4f00!important; }
.version-pill { background: var(--accent)!important; color:#fff!important; border-color: var(--accent)!important; }
.grid { display:grid; gap:16px; } .grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card, .boot-card, .modal-card, .hero-card { background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding:20px; } .inner-card { margin-top:16px; } .boot-card { width:min(620px, calc(100% - 32px)); margin:80px auto; padding:28px; }
.hero, .hero-card { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; align-items:stretch; padding:24px; }
.hero-card { display:block; position:relative; overflow:hidden; border-color: rgba(237,146,60,.20); background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,247,238,.86)); }
.hero-card::before { content:""; position:absolute; inset:0 0 auto 0; height:7px; background: var(--accent); }
.hero h2, .hero-card h2, .card h2 { margin:0 0 8px; font-size: clamp(25px, 5vw, 42px); line-height:1.05; letter-spacing:-.04em; color:var(--ink); }
.card h3, .hero-card h3 { margin:0 0 10px; font-size:20px; letter-spacing:-.02em; }
.card p, .hero-card p { color:var(--muted); line-height:1.55; }
.kicker { color:var(--accent-dark); font-size:11px; font-weight:1000; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px; }
.float-ready { position:absolute; top:16px; right:18px; }
.status-panel { padding:16px; border-radius:22px; background:rgba(255,255,255,.65); border:1px dashed var(--line); }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.quick-actions .btn { min-width:190px; }
.btn { border:1px solid var(--line); border-radius:16px; padding:12px 16px; font-weight:950; background:rgba(255,255,255,.86); color:var(--ink); min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.btn.primary { background: var(--accent); border-color: var(--accent); color:#fff; box-shadow: 0 10px 22px rgba(237,146,60,.22); }
.btn.danger { background: #fff1f2; border-color: rgba(147,27,42,.35); color: var(--danger); }
.btn.warn { background:#fff8e7; border-color: rgba(183,121,31,.35); color: var(--warn); }
.btn.good, .btn.success { background:#effaf5; border-color:rgba(18,124,85,.25); color: var(--good); }
.btn.ghost { background:#fff; border-color:var(--line); }
.btn.full { width:100%; }
.form-row { display:grid; gap:7px; margin:14px 0; }
.form-row label { color:var(--ink); font-size:12px; font-weight:900; }
.input, textarea { width:100%; border-radius:16px; border:1px solid rgba(80,52,26,.16); background:#fff; color:var(--ink); padding:13px 14px; outline:none; }
textarea { resize:vertical; min-height:86px; }
.input:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.status-strip { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.82); color:var(--ink); font-size:12px; font-weight:1000; }
.badge.ready { background: var(--accent); color:#fff; border-color:var(--accent); }
.badge.good { border-color:rgba(18,124,85,.35); color:var(--good); background:#eefaf4; }
.badge.warn { border-color:rgba(183,121,31,.35); color:var(--warn); background:#fff8e8; }
.badge.danger { border-color:rgba(147,27,42,.38); color:var(--danger); background:#fff1f2; }
.badge.blue { border-color:rgba(36,91,199,.30); color:var(--blue); background:#eef4ff; }
.metric-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:14px 0; }
.metric { background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:18px; padding:14px; }
.metric .label { color:var(--muted); font-size:12px; margin-bottom:4px; font-weight:900; }
.metric .value { font-size:clamp(20px, 3vw, 30px); font-weight:1000; line-height:1.05; color:var(--ink); }
.metric .hint { color:var(--muted); font-size:12px; margin-top:5px; }
.copy-box { border:1px dashed var(--accent); background:var(--accent-soft); padding:12px; border-radius:18px; word-break:break-all; color:var(--accent-dark); font-size:13px; }
.visitor-card { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:20px; padding:14px; box-shadow:var(--shadow); }
.visitor-card h3 { margin:0 0 6px; } .visitor-card p { margin:4px 0; color:var(--muted); }
.card-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.notice { padding:13px 14px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.76); color:var(--muted); margin:12px 0; }
.notice.danger { border-color:rgba(147,27,42,.45); background:#fff1f2; color:var(--danger); }
.notice.warn { border-color:rgba(183,121,31,.42); background:#fff8e8; color:#81550d; }
.notice.good { border-color:rgba(18,124,85,.32); background:#effaf5; color:#0d6a49; }
.overlay { position:fixed; inset:0; background:rgba(40,17,9,.55); display:grid; place-items:center; padding:16px; z-index:99; backdrop-filter:blur(8px); }
.modal-card { width:min(620px,100%); padding:24px; background:#fff; }
.modal-card h2 { margin-top:0; color:var(--danger); }
.pulse-danger { animation:dangerPulse 1s infinite; border-color:rgba(147,27,42,.75)!important; }
@keyframes dangerPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(147,27,42,.35); } 50%{ box-shadow:0 0 0 14px rgba(147,27,42,0); } }
.footer { margin-top:28px; color:var(--muted); font-size:12px; text-align:center; } .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* Role colours */
.role-visitor { --accent:#f2994a; --accent-dark:#8b4212; --accent-soft:rgba(242,153,74,.14); }
.role-host { --accent:#2f6de0; --accent-dark:#173f8f; --accent-soft:rgba(47,109,224,.12); --cream:#f3f7ff; --soft:#eaf1ff; }
.role-noc { --accent:#6c4aa5; --accent-dark:#44236c; --accent-soft:rgba(108,74,165,.13); --cream:#faf6ff; --soft:#f1eaf8; }
.role-landing { --accent:#d8792f; --accent-dark:#7c3b10; --accent-soft:rgba(216,121,47,.13); }
.role-host .brand-mark { background:linear-gradient(135deg,#2f6de0,#6aa4ff); }
.role-visitor .brand-mark { background:linear-gradient(135deg,#f2994a,#e87924); }
.role-noc .brand-mark { background:linear-gradient(135deg,#6c4aa5,#b574d8); }
@media (max-width: 820px) { .topbar{align-items:flex-start; flex-direction:column;} .nav-pills{justify-content:flex-start;} .hero, .grid.two, .grid.three{grid-template-columns:1fr;} .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .visitor-card{grid-template-columns:1fr;} .card-actions{justify-content:flex-start;} }
@media (max-width: 520px) { body{font-size:13px;} .app-shell{width:min(100% - 16px,980px); padding-top:8px;} .topbar{position:static;} .brand h1{font-size:18px;} .brand-mark{width:38px;height:38px;} .nav-pills{gap:6px;} .nav-pills a,.pill{padding:7px 10px;font-size:11px;} .card,.hero-card{padding:16px;border-radius:20px;} .hero h2,.hero-card h2,.card h2{font-size:26px;} .metric-grid{grid-template-columns:1fr;} .actions{flex-direction:column;} .btn{width:100%;} .float-ready{position:static; margin-bottom:8px;} }

/* v032 map destination picker */
.map-section { margin: 18px 0; padding: 15px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.68); }
.map-section h3 { margin-bottom: 6px; }
.map-picker { width: 100%; height: 310px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(80,52,26,.16); background: #eef3f2; margin: 12px 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.host-map-panel { background: rgba(255,255,255,.76); }
.compact-actions { margin-top: 8px; }
.compact-actions .btn { min-height: 40px; padding: 10px 13px; }
.leaflet-container { font-family: var(--font); }
.role-host .map-section { border-color: rgba(47,109,224,.18); }
.role-visitor .map-section { border-color: rgba(242,153,74,.22); }
@media (max-width: 520px) { .map-picker { height: 250px; } }