:root { --ink:#1c2430; --soft:#5d6978; --line:#dfe3e8; --bg:#f5f6f8; --card:#fff; --accent:#1f5fbf; --warn:#9a5b00; --warnbg:#fff6e0; --ok:#1c7c45; --bad:#b3261e; }
  * { box-sizing:border-box; }
  body { margin:0; font:15px/1.45 -apple-system, "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--bg); }
  .banner { background:var(--warnbg); color:var(--warn); padding:8px 16px; font-size:13px; border-bottom:1px solid #ecd9a8; }
  .layout { display:flex; min-height:calc(100vh - 36px); }
  nav { width:230px; flex:none; background:var(--card); border-right:1px solid var(--line); padding:16px 10px; }
  nav h2 { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin:16px 10px 6px; }
  nav .calname { margin:10px 10px 2px; font-weight:700; font-size:15px; display:flex; gap:8px; align-items:center; }
  nav button { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:none; padding:9px 10px; border-radius:7px; font:inherit; color:inherit; cursor:pointer; }
  nav button:hover { background:var(--bg); }
  nav button.on { background:#e7effb; color:var(--accent); font-weight:600; }
  nav button.back { color:var(--soft); font-size:13.5px; }
  .dot { width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
  main { flex:1; padding:24px 28px 80px; max-width:1040px; min-width:0; }
  h1 { font-size:22px; margin:0 0 4px; }
  .sub { color:var(--soft); margin:0 0 20px; }
  section { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:18px; }
  section > h3 { margin:0 0 4px; font-size:16px; }
  p.help { margin:0 0 14px; color:var(--soft); font-size:13.5px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px 16px; }
  .two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
  label { display:block; font-size:12.5px; color:var(--soft); margin-bottom:4px; }
  input[type=text], input[type=number], input[type=time], input[type=date], select, textarea { width:100%; padding:8px 9px; border:1px solid #c9cfd8; border-radius:6px; font:inherit; color:inherit; background:#fff; }
  textarea { min-height:110px; resize:vertical; line-height:1.4; }
  textarea.code { font-family:ui-monospace, Menlo, monospace; font-size:13px; }
  input:focus, select:focus, textarea:focus { outline:2px solid #a9c6f2; border-color:var(--accent); }
  .pair { display:flex; gap:8px; } .pair > :first-child { width:90px; flex:none; }
  .btn { border:1px solid #c9cfd8; background:#fff; border-radius:6px; padding:7px 12px; font:inherit; cursor:pointer; color:inherit; }
  .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
  .btn.small { padding:4px 9px; font-size:12.5px; }
  .btn.danger { color:var(--bad); }
  .btn.add { border-style:dashed; width:100%; margin-top:10px; color:var(--accent); }
  .status { display:inline-block; font-size:12px; padding:2px 9px; border-radius:20px; background:#eceff3; color:var(--soft); }
  .status.ok { background:#e2f4e9; color:var(--ok); }
  .status.warn { background:#fff1cf; color:#7a4a00; } .status.bad { background:#fde7e5; color:#8c1d16; }
  .alert { border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:14px; }
  .alert.soon { background:#fff6e0; color:#7a4a00; } .alert.overdue { background:#fde7e5; color:#8c1d16; }
  .keybox { border:1px solid var(--line); background:#fafbfc; border-radius:8px; padding:12px 14px; margin-top:10px; }
  [data-armkey].armed { background:var(--bad) !important; color:#fff !important; border-color:var(--bad) !important; }
  a.btn { display:inline-block; text-decoration:none; }
  .linkline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:3px 0 4px; }
  .url { font-family:ui-monospace, Menlo, monospace; font-size:12.5px; color:var(--accent); word-break:break-all; }
  .slugrow { display:flex; align-items:center; border:1px solid #c9cfd8; border-radius:6px; background:#fff; overflow:hidden; max-width:560px; }
  .slugrow .slugbase { padding:8px 0 8px 10px; color:var(--soft); white-space:nowrap; font-size:14px; }
  .slugrow input { border:0 !important; border-radius:0; outline:none !important; padding-left:2px; }
  .slugrow:focus-within { outline:2px solid #a9c6f2; border-color:var(--accent); }
  .login-card { max-width:400px; margin:70px auto 0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:32px 30px; text-align:center; }
  .login-card h1 { font-size:22px; margin:14px 0 6px; }
  .gbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px; border:1px solid #c9cfd8; border-radius:8px; background:#fff; font:inherit; font-weight:600; cursor:pointer; margin-top:20px; }
  .gbtn:hover { background:#f6f8fb; }
  .layout.login nav { display:none; }
  .swatches { display:flex; flex-wrap:wrap; gap:14px; }
  .swb { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11.5px; color:var(--soft); }
  .sw { width:34px; height:34px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #c9cfd8; cursor:pointer; }
  .sw.on { box-shadow:0 0 0 3px var(--ink); }
  .conn { border:1px solid var(--line); border-radius:9px; padding:14px 16px; margin-top:12px; }
  .conn-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
  .note { font-size:12.5px; color:var(--soft); margin-top:8px; }
  .note.warn { color:var(--warn); }
  .row { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); }
  .row:last-of-type { border-bottom:0; }
  .row .grow { flex:1; min-width:0; }
  .row small { color:var(--soft); }
  .group-title { font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--soft); margin:18px 0 6px; font-weight:700; }
  .group-title:first-of-type { margin-top:4px; }
  details.n { border:1px solid var(--line); border-radius:8px; margin-top:8px; background:#fff; }
  details.n > summary { list-style:none; cursor:pointer; padding:10px 12px; display:flex; gap:10px; align-items:center; }
  details.n > summary::-webkit-details-marker { display:none; }
  details.n > summary::before { content:"\25B8"; color:var(--soft); width:10px; }
  details.n[open] > summary::before { content:"\25BE"; }
  details.n[open] > summary { border-bottom:1px solid var(--line); background:#fafbfc; border-radius:8px 8px 0 0; }
  summary .title { font-weight:600; }
  summary .snip { color:var(--soft); font-size:13px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .n-body { padding:12px; }
  .n-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
  .n-controls select, .n-controls input { width:auto; padding:6px 8px; }
  .n-controls input[type=number] { width:70px; }
  .n-controls .spacer { flex:1; }
  .chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
  .chip { font-size:11.5px; border:1px solid #c9cfd8; background:#fff; border-radius:20px; padding:2px 8px; cursor:pointer; color:var(--soft); }
  .chip:hover { border-color:var(--accent); color:var(--accent); }
  .preview { background:#f3f5f8; border-radius:8px; padding:10px 12px; font-size:13.5px; white-space:pre-wrap; word-break:break-word; min-height:60px; }
  .preview.sms { background:#e3f0ff; border-radius:14px 14px 14px 4px; }
  .preview .subj { font-weight:600; border-bottom:1px solid #d9dee5; padding-bottom:6px; margin-bottom:8px; }
  .count { font-size:11.5px; color:var(--soft); margin-top:5px; }
  .err { color:var(--bad); font-size:12.5px; margin-top:5px; }
  .toggle { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink); margin:0; cursor:pointer; }
  .hours { display:grid; grid-template-columns:90px 70px 1fr 1fr; gap:8px 10px; align-items:center; max-width:480px; }
  .tag { font-size:11.5px; padding:1px 8px; border-radius:20px; background:#eceff3; flex:none; }
  .tag.sms { background:#e3f0ff; } .tag.email { background:#efe7fb; }
  table.sched { width:100%; border-collapse:collapse; font-size:13.5px; margin-top:12px; }
  table.sched td, table.sched th { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
  table.sched th { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--soft); }
  tr.skipped td { color:#9aa3ae; }
  .q { border:1px solid var(--line); border-radius:8px; padding:10px; margin-top:8px; display:grid; grid-template-columns:1fr 130px; gap:8px; }
  .q .q-foot { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; }
  .color { display:flex; gap:8px; } .color input[type=color] { width:42px; height:36px; padding:2px; border:1px solid #c9cfd8; border-radius:6px; background:#fff; flex:none; }
  /* mock of the public booking page */
  .bp { border:1px solid var(--line); border-radius:10px; padding:22px 16px; }
  .bp-card { background:#fff; border-radius:10px; padding:20px; max-width:380px; margin:0 auto; box-shadow:0 1px 6px rgba(0,0,0,.08); }
  .bp-logo { height:44px; max-width:200px; object-fit:contain; display:block; margin-bottom:14px; }
  .bp-nologo { height:44px; width:150px; border:1px dashed #b9c0ca; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--soft); margin-bottom:14px; }
  .bp h4 { margin:0 0 6px; font-size:19px; }
  .bp p { margin:0 0 14px; font-size:13.5px; color:#4a5563; white-space:pre-wrap; }
  .bp .slots { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px; }
  .bp .slot { border:1.5px solid; border-radius:6px; padding:5px 10px; font-size:13px; font-weight:600; }
  .bp .f { margin-bottom:9px; } .bp .f span { display:block; font-size:12px; color:#4a5563; margin-bottom:3px; }
  .bp .f div { border:1px solid #c9cfd8; border-radius:6px; height:34px; background:#fff; } .bp .f div.long { height:64px; }
  .bp .consent { font-size:12px; color:#4a5563; display:flex; gap:6px; margin:10px 0 14px; }
  .bp .cta { border:0; border-radius:7px; padding:11px; width:100%; font:inherit; font-weight:700; }
  @media (max-width:860px) { .layout { flex-direction:column; } nav { width:auto; border-right:0; border-bottom:1px solid var(--line); } .two { grid-template-columns:1fr; } main { padding:16px; } }
  .savestatus { position:absolute; bottom:14px; left:20px; font-size:12px; color:var(--soft); }
  nav { position:relative; }
  .checklist { margin:0 0 14px; padding-left:20px; color:#8c1d16; font-size:14px; }
  .btn:disabled { opacity:.45; cursor:not-allowed; }