:root{
    --bg:#161A21;
    --bg-elevated:#1E232C;
    --bg-card:#20262F;
    --paper:#F6F4EF;
    --ink:#EDEBE4;
    --muted:#939AAE;
    --muted-2:#6B7286;
    --amber:#FFB238;
    --amber-dim:#8a611f;
    --aqua:#56E1C7;
    --rose:#FF4D8D;
    --line:rgba(255,255,255,0.09);
    --line-strong:rgba(255,255,255,0.16);
    --radius:14px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Atkinson Hyperlegible', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--aqua); outline-offset:2px;}
  h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-0.01em;}
  p{margin:0;}
  .app{max-width:1180px;margin:0 auto;padding:0 24px;}
  @media (max-width:720px){.app{padding:0 16px;}}

  /* ---------- Nav ---------- */
  .nav{
    position:sticky; top:0; z-index:40;
    background:rgba(22,26,33,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
  .logo{display:flex; align-items:center; gap:10px; cursor:pointer; background:none; border:none; color:var(--ink); padding:0; flex-shrink:0;}
  .logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--amber),#ffd27a);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .logo-image{max-height:36px;max-width:200px;width:auto;height:auto;object-fit:contain;}
  .logo-mark svg{width:19px;height:19px;}
  .logo-text{font-family:var(--font-display); font-weight:700; font-size:19px;}
  .logo-text sub-tag{display:block;}
  .nav-links{display:flex; align-items:center; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0;}
  .nav-links::-webkit-scrollbar{display:none;}
  .nav-link{background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:14.5px;padding:9px 14px;border-radius:20px;cursor:pointer;transition:.15s;flex-shrink:0;}
  .nav-link:hover{color:var(--ink); background:rgba(255,255,255,0.06);}
  .nav-link.active{color:var(--bg); background:var(--amber); font-weight:700;}
  .nav-cta{background:var(--aqua); color:#0B2621; border:none; padding:9px 16px; border-radius:20px; font-weight:700; font-size:14.5px; cursor:pointer; flex-shrink:0; white-space:nowrap;}
  .hamburger-btn{display:none; background:none; border:none; color:var(--ink); padding:8px; cursor:pointer; border-radius:8px; flex-shrink:0;}
  .hamburger-btn:hover{background:rgba(255,255,255,0.06);}
  .nav-mobile-extra{display:none;}
  @media (max-width:820px){ .nav-links span.label{display:none;} }
  @media (max-width:600px){
    .nav-inner{padding:14px 18px; gap:10px;}
    .logo-text{font-size:17px;}
    .nav-link{padding:8px 10px;}
  }

  /* Below 700px, replace the horizontal nav row with a hamburger menu that
     opens a full-width vertical dropdown — the horizontal row (even with its
     own scroll-safety-net above) gets cramped once several items are logged
     in state, so this is a real menu instead of a squeeze. */
  @media (max-width:700px){
    .hamburger-btn{display:flex; align-items:center; justify-content:center;}
    .nav-links{
      display:none; position:absolute; top:100%; left:0; right:0;
      flex-direction:column; align-items:stretch; gap:2px;
      background:#12151B; border-bottom:1px solid var(--line-strong);
      padding:10px 16px 16px; overflow-x:visible; box-shadow:0 12px 24px rgba(0,0,0,0.35);
    }
    .nav-links.mobile-open{display:flex;}
    .nav-links span.label{display:inline !important;}
    .nav-link{width:100%; text-align:left; padding:12px 10px; border-radius:8px;}
    .nav-cta{width:100%; text-align:center; margin-top:6px;}
    .nav-mobile-extra{display:block; margin-top:14px; padding-top:10px; border-top:1px solid var(--line);}
    .nav-mobile-extra .nav-link{color:var(--muted-2); font-size:13.5px; padding:10px;}
    .nav-mobile-divider{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:0 10px 6px;}
  }
  @media (max-width:700px){ .footer-links{display:none !important;} }

  /* ---------- Live caption strip (signature element) ---------- */
  .caption-strip{
    background:#0E1116; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:9px 24px; overflow:hidden; white-space:nowrap; position:relative; text-align:center;
  }
  .caption-strip .dot{
    display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; color:var(--amber);
    background:rgba(255,178,56,0.1); border:1px solid rgba(255,178,56,0.35); padding:3px 10px 3px 8px; border-radius:20px;
    vertical-align:middle;
  }
  .dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulse 1.4s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
  .caption-strip .txt{font-family:var(--font-mono); font-size:13.5px; color:var(--aqua); vertical-align:middle; margin-left:10px;}
  @media (max-width:1024px){.caption-strip{display:none;}}

  /* ---------- Hero ---------- */
  .hero{padding:64px 0 40px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
  @media (max-width:900px){.hero{grid-template-columns:1fr; padding:40px 0 28px;}}
  .eyebrow{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--aqua); margin-bottom:14px; display:block;}
  .hero h1{font-size:52px; line-height:1.04; font-weight:700;}
  @media (max-width:720px){.hero h1{font-size:34px;}}
  .hero h1 em{font-style:normal; color:var(--amber);}
  .hero p.sub{margin-top:18px; font-size:17px; color:var(--muted); max-width:46ch;}
  .hero-actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}
  .btn{border:none; cursor:pointer; font-weight:700; border-radius:11px; padding:13px 22px; font-size:15px; font-family:var(--font-body); transition:.15s;}
  .btn-primary{background:var(--amber); color:#241705;}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line-strong);}
  .btn-ghost:hover{background:rgba(255,255,255,0.06);}
  .btn-aqua{background:var(--aqua); color:#0B2621;}
  .btn-danger{background:rgba(255,107,107,0.15); color:var(--rose); border:1px solid rgba(255,107,107,0.4);}
  .btn-small{padding:8px 14px; font-size:13.5px; border-radius:9px;}

  .invite-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
  .invite-card h3{font-size:16px; margin-bottom:6px;}
  .invite-card p{color:var(--muted); font-size:13.5px; margin-bottom:14px;}
  .invite-row{display:flex; gap:8px;}
  .input{flex:1; background:#12151B; border:1px solid var(--line-strong); color:var(--ink); border-radius:9px; padding:11px 13px; font-size:14.5px; font-family:var(--font-mono);}
  .input::placeholder{color:var(--muted-2); font-family:var(--font-body);}

  /* ---------- Sections / cards ---------- */
  .section{padding:40px 0;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
  .section-head h2{font-size:26px;}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
  .chip{background:var(--bg-card); border:1px solid var(--line); color:var(--muted); font-size:13px; padding:7px 13px; border-radius:20px; cursor:pointer; display:flex; align-items:center; gap:6px;}
  .chip.on{background:rgba(86,225,199,0.12); border-color:var(--aqua); color:var(--aqua); font-weight:700;}
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;}
  .card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:.15s; display:flex; flex-direction:column;}
  .card:hover{border-color:var(--line-strong); transform:translateY(-2px);}
  .card-top{height:8px; background:linear-gradient(90deg,var(--amber),var(--aqua));}
  .card-body{padding:18px;}
  .card-type{font-family:var(--font-mono); font-size:11.5px; color:var(--aqua); text-transform:uppercase; letter-spacing:.06em;}
  .card h3{font-size:18px; margin-top:8px;}
  .card .meta{color:var(--muted); font-size:13.5px; margin-top:6px;}
  .card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
  .tag{font-size:11px; background:rgba(255,255,255,0.06); color:var(--muted); padding:4px 8px; border-radius:6px;}
  .tag.hi{background:rgba(255,178,56,0.14); color:var(--amber);}
  .empty{color:var(--muted); font-size:14.5px; padding:40px 0; text-align:center; border:1px dashed var(--line-strong); border-radius:var(--radius);}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line); padding:36px 0; margin-top:40px; color:var(--muted-2); font-size:13.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

  /* ---------- Auth / modal ---------- */
  .overlay{position:fixed; inset:0; background:rgba(8,10,13,0.72); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
  .modal{background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:16px; width:100%; max-width:420px; padding:28px; max-height:90vh; overflow:auto;}
  .modal.wide{max-width:720px;}
  .modal-close{float:right; background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer;}
  .tabbar{display:flex; gap:4px; background:#12151B; border-radius:10px; padding:4px; margin-bottom:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
  .tabbar button{flex:0 0 auto; white-space:nowrap; background:none; border:none; color:var(--muted); padding:9px 14px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:600;}
  .tabbar button.on{background:var(--bg-card); color:var(--ink);}
  label{display:block; font-size:12.5px; color:var(--muted); margin:14px 0 5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
  label:first-of-type{margin-top:0;}
  input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],textarea,select{
    width:100%; background:#12151B; border:1px solid var(--line-strong); color:var(--ink); border-radius:9px; padding:11px 13px; font-size:14.5px; font-family:var(--font-body);
  }
  textarea{resize:vertical; min-height:70px;}
  .msg{font-size:13.5px; padding:10px 12px; border-radius:8px; margin-bottom:14px;}
  .msg.err{background:rgba(255,107,107,0.12); color:var(--rose); border:1px solid rgba(255,107,107,0.3);}
  .msg.ok{background:rgba(86,225,199,0.12); color:var(--aqua); border:1px solid rgba(86,225,199,0.3);}
  .hint{font-size:12px; color:var(--muted-2); margin-top:4px;}

  /* ---------- Dashboard ---------- */
  .dash-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
  .stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px;}
  .stat{background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:16px;}
  .stat .num{font-family:var(--font-display); font-size:28px; font-weight:700;}
  .stat .lbl{color:var(--muted); font-size:12.5px; margin-top:2px;}
  table{width:100%; border-collapse:collapse; font-size:14px;}
  th{text-align:left; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:8px 10px; border-bottom:1px solid var(--line-strong);}
  td{padding:11px 10px; border-bottom:1px solid var(--line);}
  .pill{font-size:11px; padding:3px 9px; border-radius:20px; font-weight:700;}
  .pill.green{background:rgba(86,225,199,0.15); color:var(--aqua);}
  .pill.amber{background:rgba(255,178,56,0.15); color:var(--amber);}
  .pill.red{background:rgba(255,107,107,0.15); color:var(--rose);}
  .row-actions{display:flex; gap:6px; flex-wrap:wrap;}
  .fieldgrid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
  @media (max-width:600px){.fieldgrid{grid-template-columns:1fr;}}
  .access-group{background:#12151B; border:1px solid var(--line); border-radius:10px; padding:14px; margin-top:16px;}
  .access-group h4{font-size:13px; color:var(--aqua); margin-bottom:10px;}
  .check-row{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14px;}
  .check-row input{width:auto;}

  /* ---------- Event detail ---------- */
  .event-hero{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start; margin-bottom:22px;}
  .event-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
  .event-tabs button{flex:0 0 auto; white-space:nowrap; background:none; border:none; color:var(--muted); padding:10px 4px; margin-right:22px; cursor:pointer; font-size:14.5px; font-weight:600; border-bottom:2px solid transparent;}
  .event-tabs button.on{color:var(--ink); border-bottom-color:var(--amber);}
  .access-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px;}
  .access-item{display:flex; gap:10px; background:var(--bg-card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; align-items:flex-start;}
  .access-item svg{flex-shrink:0; margin-top:2px; color:var(--aqua);}
  .access-item.off{opacity:.35;}
  .access-item .t{font-size:14px; font-weight:700;}
  .access-item .d{font-size:12.5px; color:var(--muted); margin-top:2px;}

  .caption-box{background:#0E1116; border:1px solid var(--line-strong); border-radius:12px; padding:20px; min-height:160px;}
  .caption-live-line{font-size:17px; font-family:var(--font-mono); color:var(--aqua); line-height:1.6;}
  .caption-history{color:var(--muted); font-size:14px; font-family:var(--font-mono); margin-top:8px; line-height:1.7;}
  .cap-status{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--bg-elevated); border:1px solid var(--line-strong); padding:13px 20px; border-radius:10px; font-size:14px; z-index:200; box-shadow:0 8px 30px rgba(0,0,0,0.4);}
  .badge-role{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; background:rgba(255,255,255,0.08); padding:2px 7px; border-radius:5px; color:var(--muted);}

  /* ---------- Accessibility profile effects ---------- */
  body.pref-high-contrast{ --bg:#000000; --bg-elevated:#0A0A0A; --bg-card:#0F0F0F; --ink:#FFFFFF; --muted:#E8E8E8; --line:rgba(255,255,255,0.3); --line-strong:rgba(255,255,255,0.55); --amber:#FFD24D; --aqua:#7CFFE8; }
  body.pref-large-text{ font-size:18px; }
  body.pref-reduced-motion *{ animation:none !important; transition:none !important; }
  body.pref-cb-protanopia{ filter: url(#cb-protanopia); }
  body.pref-cb-deuteranopia{ filter: url(#cb-deuteranopia); }
  body.pref-cb-tritanopia{ filter: url(#cb-tritanopia); }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--amber); color:#241705; padding:10px 16px; border-radius:0 0 8px 0; z-index:999; font-weight:700;}
  .skip-link:focus{left:0;}

  /* ---------- Prefs / account panel ---------- */
  .pref-panel{background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px;}
  .pref-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); gap:12px;}
  .pref-row:last-child{border-bottom:none;}
  .pref-row .t{font-size:14px;}
  .pref-row .d{font-size:12px; color:var(--muted); margin-top:2px;}
  .switch{position:relative; width:42px; height:24px; flex-shrink:0;}
  .switch input{opacity:0; width:0; height:0;}
  .switch .track{position:absolute; inset:0; background:var(--line-strong); border-radius:20px; cursor:pointer; transition:.15s;}
  .switch .track::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s;}
  .switch input:checked + .track{background:var(--aqua);}
  .switch input:checked + .track::before{transform:translateX(18px);}

  /* ---------- Facility map ---------- */
  .facility-map-wrap{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line-strong); background:#0E1116;}
  .facility-map-wrap img{width:100%; display:block;}
  .map-pin{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:var(--amber); border:2px solid #241705; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,0.4);}
  .map-pin.type-quietSpace{background:var(--aqua);}
  .map-pin.type-helpDesk{background:var(--rose);}
  .map-legend{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--muted);}
  .map-legend span{display:flex; align-items:center; gap:5px;}
  .legend-dot{width:10px; height:10px; border-radius:50%; display:inline-block;}
  .pin-editor-hint{font-size:12.5px; color:var(--muted); margin:8px 0 12px;}

  /* ---------- Know before you go ---------- */
  .kbyg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
  .kbyg-card{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-card);}
  .kbyg-card img{width:100%; height:140px; object-fit:cover; display:block; background:#0E1116;}
  .kbyg-card .cap{padding:10px 12px; font-size:13px; color:var(--muted);}

  /* ---------- Help / incident / buddy panels ---------- */
  .assist-row{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0;}
  .queue-item{background:var(--bg-card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px;}
  .queue-item .meta-row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
  .queue-item .name{font-weight:700; font-size:14px;}
  .queue-item .when{font-size:11.5px; color:var(--muted-2);}
  .queue-item .body{font-size:13.5px; color:var(--muted); margin-top:6px;}
  .dynrow{display:flex; gap:8px; margin-bottom:8px; align-items:center; flex-wrap:wrap;}
  .dynrow input, .dynrow select{min-width:0; flex:1 1 100px;}
  .dynrow input, .dynrow select{flex:1; min-width:0;}
  .pin-highlighted{outline:3px solid var(--amber); outline-offset:2px; z-index:5; animation:pin-pulse 1.4s infinite;}
  @keyframes pin-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,178,56,0.6);}50%{box-shadow:0 0 0 10px rgba(255,178,56,0);}}
  .compass-wrap{display:flex; align-items:center; gap:16px; background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:14px 0;}
  .compass-arrow{font-size:40px; color:var(--amber); transition:transform 0.3s ease; display:inline-block;}
  .flag-assist{display:inline-flex; align-items:center; gap:4px; font-size:11px; background:rgba(255,178,56,0.15); color:var(--amber); padding:2px 8px; border-radius:20px; margin-left:8px;}

  /* ---------- Emergency alert overlay ---------- */
  .emergency-overlay{position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;}
  .emergency-overlay.severity-critical{background:rgba(200,20,20,0.96); animation:flashCritical 0.5s infinite;}
  .emergency-overlay.severity-warning{background:rgba(180,120,10,0.96);}
  .emergency-overlay.severity-info{background:rgba(20,60,140,0.96);}
  @keyframes flashCritical{ 0%,100%{ background-color:rgba(200,20,20,0.96); } 50%{ background-color:rgba(90,5,5,0.96); } }
  .emergency-box{max-width:560px;}
  .emergency-box h2{color:#fff; font-size:30px; margin-bottom:14px;}
  .emergency-box p{color:#fff; font-size:18px; line-height:1.5;}
  .emergency-box button{margin-top:24px;}

  /* ---------- Interpreter feed ---------- */
  .interpreter-frame{width:100%; aspect-ratio:16/9; border:1px solid var(--line-strong); border-radius:12px; background:#000; margin-top:14px;}

  /* ---------- Support chat widget ---------- */
  #support-widget{position:fixed; bottom:20px; right:20px; z-index:150;}
  #support-toggle-btn{width:56px; height:56px; border-radius:50%; background:var(--amber); color:#241705; border:none; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;}
  #support-toggle-btn:hover{filter:brightness(1.08);}
  #support-panel{position:absolute; bottom:68px; right:0; width:min(340px, 90vw); max-height:70vh; background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,0.5); flex-direction:column; overflow:hidden;}
  .support-panel-header{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px;}
  .support-panel-header button{background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer;}
  #support-messages{flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; max-height:320px;}
  .support-msg{padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; max-width:85%; white-space:pre-wrap;}
  .support-msg-user{align-self:flex-end; background:var(--amber); color:#241705;}
  .support-msg-bot{align-self:flex-start; background:var(--bg-card); color:var(--ink); border:1px solid var(--line);}
  .support-msg-typing{color:var(--muted-2); font-style:italic;}
  #support-form{display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line);}
  #support-form input{flex:1; background:#12151B; border:1px solid var(--line-strong); color:var(--ink); border-radius:9px; padding:9px 11px; font-size:13.5px;}
  #support-form button{background:var(--aqua); color:#0B2621; border:none; border-radius:9px; width:38px; font-size:15px; cursor:pointer;}