:root {  } * { box-sizing:border-box; }
  body { font-family:-apple-system,"Segoe UI",system-ui,sans-serif; background:var(--c-0e1014); color:var(--c-e6e6e6); margin:0; padding:18px; }
  .panel { max-width:460px; margin:8vh auto 0; background:var(--c-161a21); border:1px solid var(--c-222731); border-radius:16px; padding:22px 22px 20px; }
  .panel.wide { max-width:760px; margin-top:24px; }
  h1 { font-size:1.35em; margin:0 0 4px; } h2 { font-size:1.05em; margin:22px 0 8px; color:var(--c-cdd3dc); }
  p.hint { color:var(--c-7b8391); font-size:0.85em; line-height:1.45; margin:4px 0 14px; }
  label { display:block; font-size:0.78em; letter-spacing:0.06em; text-transform:uppercase; color:var(--c-8b93a1); margin:14px 0 5px; }
  input, textarea { width:100%; font:inherit; color:var(--c-e6e6e6); background:var(--c-0e1014); border:1px solid var(--c-2a303b); border-radius:9px; padding:10px 12px; }
  input:focus, textarea:focus, select:focus { outline:none; border-color:var(--c-4b8bd6); }
  select { width:100%; font:inherit; color:var(--c-e6e6e6); background-color:var(--c-0e1014); border:1px solid var(--c-2a303b); border-radius:9px; padding:10px 40px 10px 12px; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b93a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:11px 8px; cursor:pointer; background-position:right 14px center; }   /* one drawn chevron, inset like the text (2026-10-06) */
  button:disabled { opacity:0.35; cursor:not-allowed; background:var(--c-e6e6e6); }
  textarea { min-height:84px; resize:vertical; }
  button, .btn { font:inherit; font-weight:600; color:var(--c-0e1014); background:var(--c-e6e6e6); border:0; border-radius:9px; padding:10px 18px; cursor:pointer; text-decoration:none; display:inline-block; }
  button:hover, .btn:hover { background:var(--c-fff); } .actions { margin-top:18px; display:flex; gap:10px; align-items:center; }
  .msg { padding:9px 12px; border-radius:9px; font-size:0.88em; margin:10px 0 0; } .msg.err { background:var(--c-3a1b1d); color:var(--c-ff8a80); } .msg.ok { background:var(--c-15301f); color:var(--c-5be08b); }
  table { width:100%; border-collapse:collapse; font-size:0.86em; } th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--c-222731); vertical-align:top; }
  th { color:var(--c-8b93a1); font-weight:600; font-size:0.85em; } td.n { white-space:nowrap; } summary { cursor:pointer; color:var(--c-7fd1ff); } code { word-break:break-all; }
  .pill { font-size:0.8em; padding:2px 9px; border-radius:999px; background:var(--c-1b2029); } .pill.pending { color:var(--c-f1c40f); } .pill.actioned { color:var(--c-2ecc71); } .pill.dismissed { color:var(--c-7b8391); }
  a { color:var(--c-7fd1ff); }

  html { scrollbar-gutter:stable; }   /* one page frame for every page with the nav (dashboard, settings, forms, every bot page): the bot pages had 16px, */
  body { padding:18px; }              /* Settings 18px, the dashboard 12px on phones - the top bar jumped between them (2026-10-07); a short page no longer */
  @media (max-width:560px) { body { padding:12px; } }   /* loses the desktop scrollbar's width either */
  .nav { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:0.88em; }
  .nav .hamb { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; background:var(--c-12151b); border:1px solid var(--c-222731); color:var(--c-aab2bf); cursor:pointer; padding:0; transition:color .15s,border-color .15s; }
  .nav .hamb:hover { color:var(--c-fff); border-color:var(--c-3a4150); } .nav .hamb svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
  .nav .brand { display:inline-flex; align-items:center; gap:9px; color:var(--c-e6e6e6); text-decoration:none; font-weight:650; letter-spacing:-0.005em; white-space:nowrap; } .nav .brand img { width:22px; height:22px; }
  .nav .who { margin-left:auto; display:inline-flex; align-items:center; gap:2px; background:var(--c-12151b); border:1px solid var(--c-222731); border-radius:13px; padding:3px; }
  .nav .user { display:inline-flex; align-items:center; gap:9px; padding:2px 12px 2px 3px; min-width:0; }
  .nav .av { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; font-style:normal; font-weight:700; font-size:0.85em; color:var(--c-07120c); background:linear-gradient(135deg,var(--c-3ddc84),var(--c-1aa365)); text-transform:uppercase; }
  .nav .user b { color:var(--c-e6e6e6); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:14ch; }
  .nav .user em { font-style:normal; font-size:0.66em; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; padding:3px 7px; border-radius:6px; background:var(--c-1b2029); color:var(--c-8b93a1); }
  .nav .user em.admin { background:var(--c-15301f); color:var(--c-4be08b); } .nav .user em.client { background:var(--c-3a2410); color:var(--c-ffb454); }
  .drawer a.dquiet { color:var(--c-7b8391); font-size:0.9em; } .drawer .dmuted { color:var(--c-5f6672); font-size:0.85em; padding:6px 16px; display:block; }
  .nav .ibtn { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:10px; color:var(--c-8b93a1); transition:background .15s,color .15s; }
  form.lo { display:inline; margin:0; } .nav button.ibtn { background:none; border:0; padding:0; cursor:pointer; font:inherit; }   /* logout is a POST (audit LOW) */
  .nav .ibtn:hover { background:var(--c-1b2029); color:var(--c-fff); } .nav .ibtn.out:hover { background:var(--c-3a1b1d); color:var(--c-ff6b5e); }
  .nav .ibtn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s; }
  .nav .sep { width:1px; height:18px; background:var(--c-222731); margin:0 3px; }
  /* "Try out the new look" hint under the gear (2026-10-12): until closed, for anyone not on Control Room yet */
  .nav .gw { position:relative; display:inline-flex; }
  .lhint { position:absolute; top:calc(100% + 12px); right:-46px; z-index:50; display:flex; align-items:center; gap:6px; padding:10px 8px 10px 15px; white-space:nowrap;
           background:rgb(255,204,64); border:0; border-radius:11px; color:rgb(28,22,6); font-size:1em; font-weight:600;
           box-shadow:0 0 0 3px rgba(255,204,64,0.25), 0 10px 28px rgba(0,0,0,0.45); animation:lhpulse 2.4s ease-in-out infinite; }   /* rgb(): one yellow in both themes */
  .lhint[hidden] { display:none; }
  .lhint::before { content:""; position:absolute; top:-6px; right:57px; width:12px; height:12px; background:rgb(255,204,64); transform:rotate(45deg); }
  .lhint a { color:inherit; text-decoration:none; cursor:pointer; } .lhint a b { font-weight:800; }
  .lhint button { width:26px; height:26px; border:0; border-radius:8px; background:rgba(0,0,0,0.08); color:rgb(28,22,6); font-size:1.2em; line-height:1; cursor:pointer; padding:0; }
  .lhint button:hover { background:rgba(0,0,0,0.18); }
  @keyframes lhpulse { 0%,100% { box-shadow:0 0 0 3px rgba(255,204,64,0.25), 0 10px 28px rgba(0,0,0,0.45); } 50% { box-shadow:0 0 0 7px rgba(255,204,64,0.12), 0 10px 28px rgba(0,0,0,0.45); } }
  @media (prefers-reduced-motion: reduce) { .lhint { animation:none; } }
  @media (max-width:560px) { .nav .user b, .nav .user em { display:none; } .nav .user { padding-right:6px; } .nav .brand span { display:none; } }
  .scrim { position:fixed; inset:0; background:rgba(4,6,9,0.62); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40; }
  .drawer { position:fixed; top:0; bottom:0; left:0; width:min(300px,86vw); background:var(--c-12151b); border-right:1px solid var(--c-222731); transform:translateX(-104%); transition:transform .22s ease; z-index:50; display:flex; flex-direction:column; padding:14px 12px; overflow-y:auto; box-shadow:10px 0 34px rgba(0,0,0,0.45); font-size:0.9em; }
  body.menu-open .drawer { transform:none; } body.menu-open .scrim { opacity:1; pointer-events:auto; } body.menu-open { overflow:hidden; }
  .drawer .dhead { display:flex; align-items:center; gap:10px; padding:6px 8px 14px; font-weight:700; font-size:1.05em; color:var(--c-e6e6e6); } .drawer .dhead img { width:26px; height:26px; }
  .drawer a { display:block; padding:9px 12px; border-radius:9px; color:var(--c-aab2bf); text-decoration:none; font-weight:550; transition:background .15s,color .15s; }
  .drawer a:hover { background:var(--c-1b2029); color:var(--c-fff); }
  .drawer .dsec { font-size:0.68em; letter-spacing:0.12em; text-transform:uppercase; color:var(--c-6b7280); padding:18px 12px 6px; }
  .drawer .bl a { font-weight:500; color:var(--c-8b93a1); padding:7px 12px; }
  .star { background:none; border:0; padding:2px; margin:0 7px 0 0; cursor:pointer; color:var(--c-4a4f5a); display:inline-flex; vertical-align:middle; border-radius:6px; transition:color .15s,transform .1s; }
  .star svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
  .star:hover, .star.on { color:var(--c-f5c451); } .star.on svg { fill:currentColor; } .star:active { transform:scale(0.86); }
  h1 .star { margin:0 0 0 12px; } h1 .star svg { width:22px; height:22px; }
  #av-confirm { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(5,7,10,0.72); padding:16px; }
  #av-confirm .acm { width:100%; max-width:360px; background:var(--c-161a21); border:1px solid var(--c-2b3240); border-radius:14px; padding:18px 20px; box-shadow:0 20px 50px rgba(0,0,0,0.6); }
  #av-confirm .acm p { margin:0 0 16px; color:var(--c-e2e5ea); font-size:0.95em; line-height:1.45; }
  #av-confirm .acm-row { display:flex; justify-content:flex-end; gap:8px; }
  #av-confirm button { font:inherit; font-size:0.85em; font-weight:650; padding:7px 14px; border-radius:8px; cursor:pointer; border:1px solid var(--c-2b3240); background:var(--c-12151b); color:var(--c-9aa2b1); }
  #av-confirm button:hover { background:var(--c-1b2029); }
  #av-confirm .acm-yes { color:var(--c-7fd1ff); border-color:var(--c-275a75); background:var(--c-16303f); }
  #av-confirm .acm-yes:hover { background:var(--c-1b3b4e); }
  #av-confirm .acm-yes.danger { color:var(--c-ff8a7a); border-color:var(--c-7a2f27); background:var(--c-3a1a16); }
  #av-confirm .acm-yes.danger:hover { background:var(--c-4a221c); }
  #av-confirm .acm-lbl { display:block; font-size:0.8em; color:var(--c-8b93a1); margin:4px 0 6px; }
  #av-confirm .acm-code { display:block; width:100%; box-sizing:border-box; margin:0 0 14px; padding:10px 12px; font-size:1.3em; letter-spacing:0.3em; text-align:center;
      font-variant-numeric:tabular-nums; background:var(--c-0f1217); color:var(--c-e6e6e6); border:1px solid var(--c-3a4352); border-radius:10px; }
  #av-confirm .acm-code:focus { outline:none; border-color:var(--c-7fd1ff); } #av-confirm .acm-code.bad { border-color:var(--c-ff8a80); }