/* Anything marked hidden stays hidden, whatever its display rule. */
[hidden] { display: none !important; }
:root {
  --bg: #f6f4ef; --panel: #ffffff; --ink: #1c2430; --muted: #5d6673; --line: #e2ded5;
  --accent: #125e8a; --accent-ink: #ffffff; --ok: #1f7a4d; --warn: #9a5b00; --bad: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14181d; --panel: #1c2229; --ink: #e8ebef; --muted: #9aa4b0; --line: #2c343d;
    --accent: #5aa9d6; --accent-ink: #0b1116; --ok: #5cc28e; --warn: #e0a54a; --bad: #ef7b73; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { font-weight: 700; } .brand span { font-weight: 400; color: var(--muted); }
.headright { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.langswitch { display: inline-flex; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; }
.langswitch button.lang { border: 0; border-radius: 0; background: transparent; color: var(--accent); padding: .3rem .6rem; min-height: 36px; font-size: .85rem; font-weight: 600; }
.langswitch button.lang.active { background: var(--accent); color: var(--accent-ink); }
.who { font-size: .9rem; color: var(--muted); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: .25rem; padding: .5rem 1rem 0; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--panel); }
.tabs a { padding: .5rem .75rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--ink); border-color: var(--accent); }
main { max-width: 52rem; margin: 0 auto; padding: 1rem; }
main.wide { max-width: none; padding: 1rem 1.5rem; }
h1 { font-size: 1.35rem; margin: .5rem 0 1rem; } h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.muted { color: var(--muted); } .small { font-size: .875rem; }
.badge { display: inline-block; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid currentColor; margin-left: .5rem; vertical-align: middle; }
.badge.ok { color: var(--ok); } .badge.warn { color: var(--warn); } .badge.bad { color: var(--bad); }
label { display: block; font-size: .875rem; margin: .75rem 0 .25rem; }
input[type=password], input[type=text], input[type=date], input[type=search], textarea, select { width: 100%; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; align-items: center; }
button { font: inherit; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); }
button:disabled { opacity: .55; cursor: default; }
.result { margin-top: .5rem; font-size: .9rem; } .result.ok { color: var(--ok); } .result.bad { color: var(--bad); }
.center { text-align: center; padding: 3rem 1rem; }
.transcript { min-height: 1.5em; padding: .5rem .6rem; border: 1px dashed var(--line); border-radius: 8px; margin: .25rem 0; }
h2.spaced { margin-top: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 .75rem; }
audio { width: 100%; margin-top: .5rem; }
.chatlog { min-height: 16rem; max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; margin-top: .75rem; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.bubble { max-width: 85%; padding: .45rem .7rem; border-radius: 12px; white-space: pre-wrap; }
.bubble.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.bubble.them { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.bubble.streaming { opacity: .75; }
.note { align-self: center; font-size: .8rem; color: var(--muted); }
.chatinput input { flex: 1; }
label.inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.voicebar select { width: auto; }
.langtag { display: inline-block; font-size: .7rem; padding: 0 .35rem; margin-left: .3rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: middle; }

/* Requests board and notices: phone first, large touch targets. */
.segbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.segbar button { min-height: 44px; }
button.seg { background: transparent; color: var(--accent); flex: 1; }
button.seg.active { background: var(--accent); color: var(--accent-ink); }
button.big { min-height: 48px; padding: .6rem 1.4rem; font-size: 1.05rem; font-weight: 600; }
button.danger { border-color: var(--bad); color: var(--bad); background: transparent; min-height: 44px; }
button.danger:hover { background: var(--bad); color: #fff; }
.req.urgent { border-left: 4px solid var(--bad); }
.reqhead { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.reqhead .badge { margin-left: .4rem; }
.reqhead .when { margin-left: auto; }
.reqwho { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; margin-top: .4rem; font-size: 1.05rem; }
a.tel { display: inline-block; padding: .45rem .8rem; min-height: 44px; line-height: 1.9; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); text-decoration: none; font-weight: 600; }
.summary { margin: .5rem 0 .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
details { margin-top: .25rem; font-size: .9rem; }
details summary { cursor: pointer; color: var(--muted); padding: .25rem 0; }
dl.details { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; margin: .25rem 0 0; }
dl.details dt { color: var(--muted); } dl.details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  main { padding: .75rem; }
  .req .row button.big { width: 100%; }
}

/* Bookings */
.booksum { gap: .25rem; margin: .5rem 0; }
.booksum .badge { margin-left: 0; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.books { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.books th, table.books td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line, rgba(127,127,127,.25)); white-space: nowrap; vertical-align: top; }
table.books th { position: sticky; top: 0; background: var(--bg, inherit); font-weight: 600; }
table.books td.num { text-align: right; }
table.books tr.stay-past td { opacity: .6; }
table.books tr.stay-inhouse td:first-child, table.books tr.stay-arriving td:first-child { font-weight: 600; }
table.books .badge { margin-left: .4rem; }

/* Bookings page */
.bookhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.bookhead h1 { margin-bottom: .25rem; }
.viewswitch { margin: 0; min-width: 240px; }
.bookbar { margin-top: .5rem; }
.bookbar .booksearch { flex: 1 1 260px; margin: 0; }
.bookbar select { width: auto; }
.bookstatus { justify-content: space-between; margin-top: .5rem; }
.bookstatus p { margin: 0; }
table.books.clickable tbody tr { cursor: pointer; transition: background .15s; }
table.books.clickable tbody tr:hover { background: rgba(127,127,127,.08); }

/* Bookings: room-plan calendar */
.plantools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.plantools[hidden] { display: none; }
.plantools input[type=date] { width: auto; }
.plantools label.inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.planbox { margin-top: .5rem; }
.iconbtn { width: 40px; height: 40px; padding: 0; font-size: 1.25rem; line-height: 1; }
.planbox { position: relative; }
.plan { overflow: auto; height: calc(100vh - 290px); min-height: 420px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; outline: none; cursor: grab; }
.plan.dragging { cursor: grabbing; user-select: none; }
.plan.dragging .planbar { cursor: grabbing; }
.plan:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.plangrid { position: relative; }
.plan.zooming .plangrid { animation: planzoom .25s ease-out; }
@keyframes planzoom { from { opacity: .55; } to { opacity: 1; } }
.planhead { position: sticky; top: 0; z-index: 6; display: flex; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.planheadright { position: relative; }
.planmonths { position: relative; height: 24px; }
.planmonth { position: absolute; top: 0; height: 24px; border-left: 1px solid var(--line); box-sizing: border-box; }
.planmonth span { position: sticky; left: 158px; display: inline-block; padding: 4px 8px; font-size: .8rem; font-weight: 700; white-space: nowrap; color: var(--ink); text-transform: capitalize; }
.plandays { position: relative; height: 34px; }
.planday { position: absolute; top: 0; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .7rem; line-height: 1.15; color: var(--muted); transition: background .15s; }
.planday b { color: var(--ink); font-weight: 600; }
.planday.weekend { background: rgba(127,127,127,.07); }
.planday.today b { color: #fff; background: var(--bad); border-radius: 999px; padding: 0 .35rem; }
.planocc { position: relative; height: 8px; margin-bottom: 2px; }
.occ { position: absolute; bottom: 0; height: 8px; display: flex; align-items: flex-end; justify-content: center; }
.occ i { display: block; width: calc(100% - 2px); min-height: 1px; border-radius: 2px 2px 0 0; background: var(--ok); opacity: .55; }
.occ.mid i { background: var(--warn); } .occ.high i { background: var(--bad); }
.planlabel { position: sticky; left: 0; z-index: 4; flex: none; box-sizing: border-box; padding: 4px 8px; background: var(--panel); border-right: 1px solid var(--line); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.planlabel.corner { z-index: 7; align-items: flex-end; font-weight: 600; color: var(--muted); padding-bottom: 12px; }
.planbody { position: relative; }
.planbg { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.planweekend { position: absolute; top: 0; bottom: 0; background: rgba(127,127,127,.06); }
.planmonthline { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line); }
.plantoday { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--bad); box-shadow: 0 0 8px var(--bad); opacity: .75; }
.planhovercol { position: absolute; top: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--accent) 10%, transparent); opacity: 0; transition: opacity .12s; will-change: transform; }
.plantype { display: flex; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.plantype .planlabel { background: transparent; border-right: 0; overflow: visible; font-weight: 700; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.planrow { display: flex; border-bottom: 1px solid rgba(127,127,127,.1); transition: background .12s; }
.planrow:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.planrow:hover .planlabel { color: var(--accent); }
.plantrack { position: relative; flex: none; z-index: 1; }
.planbar { position: absolute; margin: 0; min-height: 0; padding: 0 8px; border: 0; border-radius: 8px; display: flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: #fff; font-size: .74rem; font-weight: 500; text-align: left; overflow: hidden; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease, opacity .2s, filter .15s; }
.planbar:not(.direct) { background: linear-gradient(135deg, #8b5cc4, #5f3a91); }
.planbar:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.22); z-index: 3; filter: brightness(1.08); }
.planbar .barname { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.planbar .barnights { margin-left: auto; opacity: .75; font-size: .68rem; pointer-events: none; }
.planbar.stay-past { opacity: .42; filter: saturate(.6); }
.planbar.stay-inhouse { box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent); }
.planbar.stay-arriving::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #7CFFB2; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(124,255,178,.7); } 70% { box-shadow: 0 0 0 6px rgba(124,255,178,0); } 100% { box-shadow: 0 0 0 0 rgba(124,255,178,0); } }
.planbar.cutstart { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.planbar.cutend { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.planbar.dim { opacity: .12; filter: grayscale(1); }
.planbar.hit { box-shadow: 0 0 0 2px var(--warn), 0 4px 12px rgba(0,0,0,.2); }
.planbar.selected { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); z-index: 4; }
.planbar.enter { animation: barin .35s ease-out both; }
@keyframes barin { from { opacity: 0; transform: scaleX(.6); transform-origin: left center; } to { opacity: 1; transform: none; } }
.planbar:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.plantip { position: absolute; top: 0; left: 0; z-index: 20; max-width: 240px; padding: .55rem .7rem; border-radius: 10px; background: var(--ink); color: var(--panel); font-size: .8rem; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: none; opacity: 0; transition: opacity .12s; }
.plantip.show { opacity: .96; }
.plantip .muted { color: inherit; opacity: .75; }
.planloader { position: absolute; top: 1px; bottom: 1px; width: 140px; z-index: 8; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.planloader.left { left: 150px; border-radius: 0; } .planloader.right { right: 1px; border-radius: 0 14px 14px 0; }
.planloader span { background: var(--panel); color: var(--accent); font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.planloader.show { opacity: 1; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.planstart { position: absolute; left: 170px; top: 90px; z-index: 8; max-width: 260px; padding: .75rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.12); font-size: .85rem; display: none; }
.planstart.show { display: block; }
.planstart button { margin-top: .5rem; }
.todayfab { position: absolute; right: 18px; bottom: 18px; z-index: 9; border-radius: 999px; padding: .55rem 1rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; transform: translateY(10px) scale(.95); pointer-events: none; transition: opacity .2s, transform .2s; }
.todayfab.show { opacity: 1; transform: none; pointer-events: auto; }
.planskeleton { padding: 64px 12px 12px; }
.skrow { display: flex; gap: 12px; align-items: center; height: 30px; }
.skrow i { width: 110px; height: 12px; border-radius: 6px; }
.skrow b { flex: 1; height: 18px; border-radius: 8px; max-width: 70%; }
.skrow:nth-child(2n) b { max-width: 45%; margin-left: 15%; } .skrow:nth-child(3n) b { max-width: 60%; margin-left: 30%; }
.skrow i, .skrow b { background: linear-gradient(90deg, rgba(127,127,127,.12), rgba(127,127,127,.24), rgba(127,127,127,.12)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.planlegend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; align-items: center; }
.planlegend span { display: inline-flex; align-items: center; gap: .35rem; }
.planlegend i.planbar { position: static; display: inline-block; width: 22px; height: 12px; padding: 0; box-shadow: none; cursor: default; }
.planlegend i.planbar:hover { transform: none; }
.planlegend i.plantodaykey { display: inline-block; width: 0; height: 14px; border-left: 2px solid var(--bad); }
.planhint { margin-left: auto; }

/* Details drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 50; background: var(--panel); color: var(--ink); box-shadow: -12px 0 40px rgba(0,0,0,.18);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); overflow-y: auto; padding: 1.25rem; box-sizing: border-box; }
.drawer.open { transform: none; }
.drawerclose { position: absolute; top: .75rem; right: .75rem; width: 36px; height: 36px; padding: 0; border-radius: 999px; font-size: 1.3rem; line-height: 1; }
.drawerhead { display: flex; gap: .8rem; align-items: center; margin: .5rem 2.5rem 1rem 0; }
.avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cc4, #5f3a91); }
.avatar.direct { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); }
.drawername { font-size: 1.15rem; font-weight: 700; }
.drawerhead .badge { margin: .3rem 0 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; }
.facts dt { color: var(--muted); font-size: .85rem; } .facts dd { margin: 0; font-weight: 500; }
.drawer h3 { font-size: .9rem; margin: 1.25rem 0 .5rem; color: var(--muted); }
.otherstay { display: block; width: 100%; text-align: left; margin-bottom: .4rem; }
@media (max-width: 600px) {
  .drawer { top: auto; left: 0; width: auto; max-height: 70vh; border-radius: 18px 18px 0 0; transform: translateY(105%); box-shadow: 0 -12px 40px rgba(0,0,0,.2); }
  .drawer.open { transform: none; }
  .plan { height: calc(100vh - 300px); }
  .planmonth span { left: 70px; }
  .planloader.left { left: 64px; }
  .planstart { left: 74px; }
  .planhint { display: none; }
  .viewswitch { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .planbar, .planbar.enter, .drawer, .todayfab, .planloader, .skrow i, .skrow b, .planbar.stay-arriving::before { animation: none; transition: none; } }

/* Calendar: AI requests, new bookings, refresh */
.planbar.request { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 22%, var(--panel)), color-mix(in srgb, var(--warn) 22%, var(--panel)) 6px, color-mix(in srgb, var(--warn) 34%, var(--panel)) 6px, color-mix(in srgb, var(--warn) 34%, var(--panel)) 12px);
  color: var(--ink); border: 1.5px dashed var(--warn); box-shadow: none; }
.plantype.requests .planlabel { color: var(--warn); }
.planrow.reqrow { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.planbar.fresh { animation: freshglow 1.8s ease-in-out infinite; }
@keyframes freshglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,196,0,.0), 0 1px 2px rgba(0,0,0,.18); } 50% { box-shadow: 0 0 0 3px rgba(255,196,0,.75), 0 1px 2px rgba(0,0,0,.18); } }
.planlegend i.planbar.fresh { animation: freshglow 1.8s ease-in-out infinite; }
.iconbtn.spinning { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.updated { white-space: nowrap; }
.avatar.request { background: linear-gradient(135deg, var(--warn), color-mix(in srgb, var(--warn) 65%, #000)); }
.reqactions { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.reqactions p { margin: .3rem 0; }
a.button { display: inline-flex; align-items: center; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--accent); text-decoration: none; }
a.button.secondary { color: var(--accent); background: transparent; }

/* Print: just the content (lists, boards) */
@media print {
  header.top, #tabs, .bookbar, .viewswitch, .bookctl, .segbar, .plantools, .drawer, .todayfab, .planlegend, .noprint { display: none !important; }
  main, main.wide { max-width: none; padding: 0; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 0; padding: 0; }
  table.books th, table.books td { white-space: normal; border-bottom: 1px solid #999; }
  .plan { height: auto; overflow: visible; border: 0; box-shadow: none; }
}

/* Today */
.todayhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.todayhead h1 { margin-bottom: .1rem; font-size: 1.8rem; }
.todaydate { margin: 0; text-transform: capitalize; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin: 1rem 0; }
.kpi { position: relative; overflow: hidden; display: block; padding: 1rem 1.1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s; animation: rise .4s ease-out both; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.kpi::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--accent); opacity: .08; }
.kpi.ok::after { background: var(--ok); } .kpi.warn::after { background: var(--warn); } .kpi.bad::after { background: var(--bad); } .kpi.free::after { background: #8b5cc4; }
.kpinum { font-size: 2.3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi.ok .kpinum { color: var(--ok); } .kpi.warn .kpinum { color: var(--warn); } .kpi.accent .kpinum { color: var(--accent); } .kpi.bad .kpinum { color: var(--bad); } .kpi.free .kpinum { color: #7a4fa8; }
.kpilabel { font-weight: 600; margin-top: .15rem; }
.kpisub { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.kpi.skeleton b, .kpi.skeleton i { display: block; border-radius: 6px; background: linear-gradient(90deg, rgba(127,127,127,.12), rgba(127,127,127,.24), rgba(127,127,127,.12)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.kpi.skeleton b { width: 50%; height: 34px; } .kpi.skeleton i { width: 80%; height: 12px; margin-top: .6rem; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .9rem; }
.tcard { margin: 0; animation: rise .45s ease-out both; }
.tcard.wide { grid-column: 1 / -1; }
.tcard h2 { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; margin: 0 0 .6rem; }
.tcard h2 .count { min-width: 1.8rem; text-align: center; padding: .1rem .5rem; border-radius: 999px; background: var(--bg); font-size: .85rem; }
.tcard h3 { font-size: .85rem; color: var(--muted); margin: 1rem 0 .4rem; }
.guestrow { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .4rem; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; animation: rise .35s ease-out both; transition: background .12s; }
.guestrow:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.guestrow .gtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.guestrow .gname { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guestrow .gmeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomchip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; padding: .15rem .45rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; }
.roomchip.none { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.roomchip.free { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); margin: 0 .3rem .3rem 0; }
.freerooms { margin-top: .75rem; display: flex; flex-wrap: wrap; }
.typerow { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.typerow .meter { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.typerow .meter i { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width .6s ease-out; }
.typerow.full .typenum { color: var(--bad); }
.typename { font-size: .9rem; } .typenum { font-weight: 700; font-variant-numeric: tabular-nums; }
.reqline { display: flex; gap: .5rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.reqline .badge { margin-left: 0; } .reqline .gname { flex: 1; }
.notice { padding: .4rem .6rem; border-radius: 8px; background: color-mix(in srgb, var(--warn) 10%, transparent); }
.occchart { width: 100%; height: auto; max-height: 230px; display: block; }
.occchart .grid { stroke: var(--line); stroke-dasharray: 4 4; }
.occchart .bar { fill: var(--ok); transform-box: fill-box; transform-origin: bottom; animation: grow .6s cubic-bezier(.2,.8,.2,1) both; }
.occchart .bar.mid { fill: var(--warn); } .occchart .bar.high { fill: var(--bad); }
.occchart .bar.today { stroke: var(--ink); stroke-width: 2; }
.occchart .col:hover .bar { filter: brightness(1.1); }
.occchart text { fill: var(--muted); font-size: 12px; text-anchor: middle; font-family: inherit; }
.occchart text.pct { fill: var(--ink); font-weight: 600; font-size: 11px; }
.occchart text.day { fill: var(--ink); font-weight: 600; }
.occchart text.day.today { fill: var(--bad); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .kpi, .tcard, .guestrow, .occchart .bar { animation: none; } }

/* Housekeeping */
.hknav { align-items: center; margin-top: 0; }
.hkdate { min-width: 12rem; text-align: center; font-weight: 600; text-transform: capitalize; }
.hksummary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .5rem; }
.hkchip { display: inline-flex; align-items: baseline; gap: .35rem; padding: .35rem .75rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .85rem; animation: rise .35s ease-out both; }
.hkchip b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.hkchip.dirty b { color: var(--bad); } .hkchip.clean b { color: var(--ok); } .hkchip.inspected b { color: var(--accent); } .hkchip.ooo b { color: var(--muted); }
.hkchip.mv { background: var(--bg); }
.hksep { width: 1px; height: 1.5rem; background: var(--line); margin: 0 .25rem; }
.hkfilters { max-width: 640px; }
.hkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; margin-top: .5rem; }
.hktype { grid-column: 1 / -1; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .75rem 0 0; }
.hkcard { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: .85rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05); animation: rise .35s ease-out both; transition: border-color .2s, box-shadow .2s, transform .15s; }
.hkcard:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.hkcard.st-dirty { border-left-color: var(--bad); } .hkcard.st-clean { border-left-color: var(--ok); } .hkcard.st-inspected { border-left-color: var(--accent); }
.hkcard.st-out-of-order { border-left-color: var(--muted); background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 10px, color-mix(in srgb, var(--muted) 7%, var(--panel)) 10px, color-mix(in srgb, var(--muted) 7%, var(--panel)) 20px); }
.hkcard.saving { opacity: .75; }
.hkhead { display: flex; align-items: center; gap: .5rem; }
.hkroom { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hkocc { font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: var(--bg); color: var(--muted); }
.hkocc.occ-arriving { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.hkocc.occ-departing { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.hkocc.occ-turnover { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.hkocc.occ-stayover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.hkwho { margin-left: auto; }
.hklines { font-size: .88rem; min-height: 1.4rem; }
.hkline { display: flex; gap: .4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hkline .arrow { min-width: 2.6rem; flex: none; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.hkline.out .arrow { color: var(--warn); } .hkline.in .arrow { color: var(--ok); } .hkline.stay .arrow { color: var(--accent); font-size: .7rem; line-height: 1.6; }
.hkbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.hkbtn { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .2rem; min-height: 48px; border-radius: 10px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); font-size: .68rem; line-height: 1.1; transition: transform .1s, background .15s, color .15s; }
.hkbtn .dot { width: 10px; height: 10px; }
.hkbtn:active { transform: scale(.95); }
.hkbtn.on.dirty { background: var(--bad); border-color: var(--bad); color: #fff; }
.hkbtn.on.clean { background: var(--ok); border-color: var(--ok); color: #fff; }
.hkbtn.on.inspected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hkbtn.on.out-of-order { background: var(--muted); border-color: var(--muted); color: #fff; }
.hknotebtn { align-self: flex-start; font-size: .8rem; padding: .25rem .6rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hknote { margin-top: 0; } .hknote input { flex: 1; }
@media (max-width: 600px) { .hkdate { min-width: 0; flex: 1; } .hkgrid { grid-template-columns: 1fr; } }
@media print { .hkbtns, .hknotebtn { display: none; } .hkcard { break-inside: avoid; box-shadow: none; } .hkgrid { grid-template-columns: repeat(3, 1fr); } }
/* Housekeeping: cleaning list (table like Pegasus's "Καθαρισμοί Ημέρας"), sheets per housekeeper, header */
.hkpage .printonly { display: none; }
.hkprogress { display: flex; align-items: center; gap: .6rem; flex: 1 1 260px; min-width: 220px; }
.hkbar { display: inline-block; flex: 1; min-width: 60px; height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; vertical-align: middle; }
.hkbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 70%, var(--accent))); transition: width .4s ease-out; }
.hkchip.t-departure b { color: var(--bad); } .hkchip.t-arrival b { color: var(--ok); } .hkchip.t-linen b { color: #7a4fa8; } .hkchip.t-stayover b { color: var(--accent); } .hkchip.t-towels b { color: var(--warn); }
.hkchip.early { border-color: var(--warn); } .hkchip.early b { color: var(--warn); }
.hksource { margin: .1rem 0 .4rem; color: var(--muted); } .hksource::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; vertical-align: .05em; background: var(--muted); } .hksource.ok::before { background: var(--ok); } .hksource.warn::before { background: var(--warn); }
.hkstaff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; margin: .4rem 0; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.hkstafflist { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hkstafftools, .hkstaffform { margin-top: 0; } .hkstaffform input { flex: 1; min-width: 220px; }
button.hkperson { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; min-height: 40px; border-radius: 999px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-size: .85rem; }
button.hkperson small { color: var(--muted); font-variant-numeric: tabular-nums; } button.hkperson .hkbar { width: 48px; flex: none; height: 6px; }
button.hkperson.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
button.hkperson.none { color: var(--warn); border-style: dashed; }
button.small { padding: .3rem .65rem; font-size: .85rem; min-height: 36px; }
.hkbar2 { justify-content: space-between; align-items: flex-start; margin-top: .25rem; } .hkviews { flex: 1 1 380px; max-width: 560px; margin-bottom: 0; }
.hksettings { font-size: .9rem; } .hksettings summary { cursor: pointer; color: var(--accent); padding: .5rem 0; min-height: 44px; list-style-position: inside; }
.hksettings[open] { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); max-width: 420px; }
.hkfield { display: flex; flex-direction: column; gap: .2rem; margin: .4rem 0; } .hknum { width: 6rem; }
.hktools { margin: .5rem 0; } .hktools .hkfilters { max-width: none; margin-bottom: 0; }
.hkselects { margin-top: .5rem; } .hkselects select, .hksearch { min-height: 40px; width: auto; max-width: 100%; } .hkpage input.hksearch { width: 8rem; }
.hkpage table.hktable select { width: auto; padding: .3rem .4rem; }
.hktablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
table.hktable { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.hktable th { position: sticky; top: 0; z-index: 1; background: var(--bg); text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: .5rem .45rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.hktable th.sortable { cursor: pointer; } table.hktable th.sortable::after { content: ''; display: inline-block; margin-left: .35rem; border: 4px solid transparent; border-top-color: currentColor; vertical-align: -.1em; opacity: .3; } table.hktable th.sorted { color: var(--accent); } table.hktable th.sorted::after { opacity: 1; }
table.hktable td { padding: .45rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.hktable tbody tr { animation: rise .3s ease-out both; border-left: 4px solid transparent; transition: background .15s; }
table.hktable tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
table.hktable tr.st-dirty td.c-room { box-shadow: inset 4px 0 0 var(--bad); } table.hktable tr.st-clean td.c-room { box-shadow: inset 4px 0 0 var(--ok); }
table.hktable tr.st-inspected td.c-room { box-shadow: inset 4px 0 0 var(--accent); } table.hktable tr.st-out-of-order td.c-room { box-shadow: inset 4px 0 0 var(--muted); }
table.hktable tr.idle { color: var(--muted); } table.hktable tr.saving { opacity: .7; }
.hkroomno { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hkprio { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 700; font-size: .8rem; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.hkprio.p1 { background: var(--bad); color: #fff; border-color: var(--bad); } .hkprio.p2 { background: var(--ok); color: #fff; border-color: var(--ok); }
.hkprio.p3 { color: var(--bad); border-color: var(--bad); } .hkprio.p4 { color: var(--accent); border-color: var(--accent); }
.hktask { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--bg); color: var(--muted); }
.hktask .dot { width: 7px; height: 7px; } .hktask.manual { outline: 1px dashed currentColor; outline-offset: 1px; }
.hktask.t-departure { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.hktask.t-arrival { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.hktask.t-linen { background: color-mix(in srgb, #8b5cc4 15%, transparent); color: #7a4fa8; }
.hktask.t-stayover { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.hktask.t-towels { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.hktaskbox { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; } .hkreason { font-size: .74rem; }
table.hktable td.c-guests { min-width: 10rem; } table.hktable td.c-type { min-width: 7rem; }
.hkwhosel, .hkstatus { font-size: .8rem; min-height: 36px; } .hkpage select.hkstatus { min-width: 8.5rem; } .hkpage select.hkwhosel { min-width: 6.5rem; }
.hkpage select.hktasksel { font-size: .8rem; font-weight: 600; min-height: 34px; border-radius: 999px; padding: .2rem .5rem; max-width: 13rem; }
.hkpage select.hktasksel.manual { border-style: dashed; }
.hkpage select.hktasksel.t-departure { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 8%, var(--bg)); }
.hkpage select.hktasksel.t-arrival { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--bg)); }
.hkpage select.hktasksel.t-linen { color: #7a4fa8; border-color: color-mix(in srgb, #8b5cc4 45%, var(--line)); background: color-mix(in srgb, #8b5cc4 8%, var(--bg)); }
.hkpage select.hktasksel.t-stayover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.hkpage select.hktasksel.t-towels { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--bg)); }
.hkpage select.hktasksel.t-none { color: var(--muted); }
.hkwhosel.none { color: var(--warn); }
.hkstatus.st-dirty { border-color: var(--bad); color: var(--bad); } .hkstatus.st-clean { border-color: var(--ok); color: var(--ok); } .hkstatus.st-inspected { border-color: var(--accent); color: var(--accent); }
.hktimes { font-variant-numeric: tabular-nums; white-space: nowrap; } .hktimes .arrow { display: inline-block; min-width: 2.6rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.hktimes .out .arrow { color: var(--warn); } .hktimes .in .arrow { color: var(--ok); }
.hkearly { margin-left: .3rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: #fff; background: var(--warn); border-radius: 4px; padding: 0 .3rem; animation: pulse 2s infinite; }
.hknotes { max-width: 16rem; font-size: .82rem; } .hknotes .peg { font-style: italic; color: var(--muted); } .hknotes .peg::before { content: 'P · '; font-style: normal; font-weight: 700; font-size: .7rem; }
button.linkbtn { background: transparent; border: 0; color: var(--accent); padding: .2rem 0; min-height: 32px; text-align: left; }
.hkmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .hkcardwho { margin-top: 0; }
.hkcard .hkprio { margin-left: auto; } .hkcard .hkwho { margin-left: .3rem; }
/* Sheets per housekeeper */
.hksheets { display: grid; gap: 1rem; }
.hksheet { padding: 1rem; } .hksheet.unassigned { border: 1px dashed var(--warn); }
.hksheethead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .hksheethead h2 { margin: .1rem 0 0; }
.hksheetprog { display: flex; align-items: center; gap: .5rem; min-width: 220px; }
.hksheetcounts { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.hkbox { display: inline-block; width: 1.1rem; height: 1.1rem; border: 1.5px solid #000; border-radius: 3px; }
.hksign { display: flex; gap: .5rem; margin-top: 1.2rem; align-items: flex-end; } .hksign .line { flex: 0 0 14rem; border-bottom: 1px solid #000; height: 1.2rem; }
/* Phones: table rows become cards */
@media (max-width: 760px) {
  .hktablewrap { border: 0; background: transparent; overflow: visible; }
  table.hktable thead { display: none; }
  table.hktable, table.hktable tbody { display: block; }
  table.hktable tbody tr { display: grid; grid-template-columns: 2rem 1fr 1fr auto; gap: .35rem .6rem; padding: .6rem .7rem; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  table.hktable td { display: block; border: 0; padding: 0; grid-column: 1 / -1; min-width: 0; }
  table.hktable td.c-type, table.hktable td.c-time { grid-column: 1 / 3; } table.hktable td.c-persons, table.hktable td.c-stay { grid-column: 3 / -1; }
  table.hktable td[data-label]:not(.c-prio):not(.c-room):not(.c-status)::before { content: attr(data-label); display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
  table.hktable td.c-prio { grid-column: 1; grid-row: 1; align-self: center; } table.hktable td.c-room { grid-column: 2; grid-row: 1; align-self: center; box-shadow: none !important; }
  table.hktable td.c-status { grid-column: 3 / -1; grid-row: 1; justify-self: end; }
  table.hktable.sheet td.c-room { grid-column: 1 / 3; }
  table.hktable td.c-task, table.hktable td.c-guests, table.hktable td.c-notes, table.hktable td.c-assignee { grid-column: 1 / -1; }
  table.hktable tr.st-dirty { border-left: 4px solid var(--bad); } table.hktable tr.st-clean { border-left: 4px solid var(--ok); } table.hktable tr.st-inspected { border-left: 4px solid var(--accent); }
  .hktaskbox { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hkbar2 { flex-direction: column; align-items: stretch; } .hkviews { flex: none; max-width: none; width: 100%; } .hksearch { flex: 1; }
  .hkprogress { min-width: 0; flex-basis: 100%; }
  .hksummary { gap: .3rem; } .hkchip { padding: .2rem .55rem; font-size: .76rem; } .hkchip b { font-size: .95rem; } .hkchip.mv, .hksep { display: none; }
  .hknav { width: 100%; } .hkdate { font-size: .92rem; }
  .hkstaff { padding: .5rem; } .hkstafftools { width: 100%; } .hkstafftools button { flex: 1; }
}
@media print {
  .hkpage div.printonly, .hkpage .hksign { display: flex; } .hkpage th.printonly, .hkpage td.printonly { display: table-cell; }
  .hkprinthead { margin-bottom: .3rem; }
  .hkpage select, .hkstaff, .hksettings, .hkviews, .hktools, .hksource, .hknotebtn, .hkearly { display: none !important; }
  .hkpage span.printonly { display: inline-flex; }
  .hktablewrap { border: 0; overflow: visible; }
  table.hktable { font-size: 9.5pt; } table.hktable th { position: static; background: none; color: #000; border-bottom: 1.5px solid #000; }
  table.hktable td { border-bottom: 1px solid #bbb; } table.hktable tbody tr { animation: none; break-inside: avoid; }
  table.hktable tr.idle { display: none; }
  .hktask { background: none !important; color: #000 !important; padding: 0; }
  .hkbody.view-staff ~ *, .hkbody.view-staff .hksheet { box-shadow: none; }
  .hkbody.view-staff .hksheet { break-after: page; border: 0; padding: 0; }
  .hkbody.view-staff .hksheet:last-child { break-after: auto; }
  .hkpage:has(.hkbody.view-staff) .hksummary, .hkpage:has(.hkbody.view-staff) .hkprinthead { display: none; }
  .hkbar { border-color: #999; } .hkbar i { background: #555; }
}

/* Statistics */
.statctl { align-items: center; margin-top: 0; } .statctl select { width: auto; }
.statctl label.inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.partial { display: inline-block; margin: .75rem 0 0; }
.delta { font-weight: 600; margin-left: .35rem; } .delta.up { color: var(--ok); } .delta.down { color: var(--bad); }
.kpisub .delta:first-child { margin-left: 0; }
.statcard { margin: .9rem 0 0; animation: rise .45s ease-out both; }
.statcard h2 { font-size: 1rem; margin: 0 0 .5rem; }
.skeletonblock { height: 260px; background: linear-gradient(90deg, rgba(127,127,127,.08), rgba(127,127,127,.18), rgba(127,127,127,.08)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.statchart { width: 100%; height: auto; max-height: 300px; display: block; }
.statchart .grid { stroke: var(--line); stroke-dasharray: 4 4; }
.statchart text { fill: var(--muted); font-size: 12px; font-family: inherit; }
.statchart text.axis { text-anchor: end; font-size: 11px; }
.statchart text.month { text-anchor: middle; text-transform: capitalize; }
.statchart text.val { text-anchor: middle; fill: var(--ink); font-size: 11px; font-weight: 600; }
.statchart .bar { transform-box: fill-box; transform-origin: bottom; animation: grow .7s cubic-bezier(.2,.8,.2,1) both; }
.statchart .bar.a { fill: var(--accent); } .statchart .bar.b { fill: color-mix(in srgb, var(--accent) 30%, var(--panel)); }
.statchart .col:hover .bar { filter: brightness(1.12); }
.statlegend { display: flex; gap: 1rem; margin-bottom: .25rem; } .statlegend span { display: inline-flex; align-items: center; gap: .35rem; }
.sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; } .sw.a { background: var(--accent); } .sw.b { background: color-mix(in srgb, var(--accent) 30%, var(--panel)); }
.typestat { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.hbar { position: relative; grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--bg); }
.hbar i.a { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #8b5cc4)); transform-origin: left; animation: growx .8s cubic-bezier(.2,.8,.2,1) both; }
.hbar .mark { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); opacity: .55; border-radius: 1px; }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.busyrow { display: flex; align-items: center; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.busyrow .rank { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); font-weight: 700; font-size: .8rem; }
.busyrow b { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .statchart .bar, .hbar i.a, .statcard { animation: none; } }

/* Free-rooms finder */
.availpanel { margin: .5rem 0 0; animation: rise .3s ease-out both; }
.availpanel[hidden] { display: none; }
.availform { margin-top: 0; align-items: center; } .availform select, .availform input[type=date] { width: auto; }
.availform label.inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.availhead { margin: .75rem 0 .5rem; } .availhead b { color: var(--ok); font-size: 1.05rem; } .availhead.none b { color: var(--bad); }
.availtypes { display: flex; flex-wrap: wrap; gap: .5rem; }
.availtype { display: flex; flex-direction: column; padding: .45rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--ok) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); font-size: .85rem; }
.availtype b { font-size: 1.1rem; color: var(--ok); } .availtype.full { background: var(--bg); border-color: var(--line); } .availtype.full b { color: var(--bad); }
.roomchip.gap { background: color-mix(in srgb, #8b5cc4 14%, transparent); color: #7a4fa8; margin: 0 .3rem .3rem 0; }
.planband { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ok) 13%, transparent); border-left: 2px solid var(--ok); border-right: 2px solid var(--ok); animation: rise .3s ease-out both; }
.planrow.freehl .planlabel { color: var(--ok); font-weight: 700; box-shadow: inset 4px 0 0 var(--ok); }
.planrow.busyhl .plantrack { opacity: .55; }

/* Conversation tester: simulated guests */
.simpanel { margin: .75rem 0; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.simpanel summary { cursor: pointer; font-weight: 600; }
.simpanel select { width: auto; max-width: 100%; }
.simhead { display: flex; gap: .75rem; align-items: center; margin-top: .75rem; }
.simhead .avatar { width: 40px; height: 40px; font-size: .85rem; }
.simchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.simchip { padding: .3rem .7rem; font-size: .85rem; border-radius: 999px; }

/* Feature switches */
.featcard { margin: .9rem 0 0; }
.featcard h2 { font-size: 1rem; margin: 0 0 .4rem; }
.featrow { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.featrow:last-child { border-bottom: 0; }
.feattext { flex: 1; }
.featname { display: flex; align-items: center; gap: .4rem; font-weight: 600; flex-wrap: wrap; }
.featname .badge { margin-left: 0; font-weight: 500; }
.featrow.locked .featname { color: var(--muted); }
.switch { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--muted) 35%, var(--panel)); transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.switch.on { background: var(--ok); }
.switch.on i { transform: translateX(22px); }
.switch:disabled { opacity: .45; }

/* Room blocks and booking pace */
.planbar.block { background: repeating-linear-gradient(135deg, #6b7280, #6b7280 6px, #4b5563 6px, #4b5563 12px); color: #fff; }
.pacegrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .4rem; align-items: end; margin-top: .5rem; }
.pacecol { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .75rem; }
.pacenum { font-weight: 700; font-variant-numeric: tabular-nums; }
.pacebar { position: relative; display: flex; gap: 2px; align-items: flex-end; width: 100%; height: 110px; }
.pacebar i { flex: 1; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: grow .6s cubic-bezier(.2,.8,.2,1) both; }
.pacebar i.a { background: var(--accent); } .pacebar i.b { background: color-mix(in srgb, var(--accent) 30%, var(--panel)); }
.pacemonth { color: var(--muted); text-transform: capitalize; }
@media (max-width: 600px) { .pacegrid { grid-template-columns: repeat(6, 1fr); } }
.avatar.block { background: repeating-linear-gradient(135deg, #6b7280, #6b7280 6px, #4b5563 6px, #4b5563 12px); }

/* Live transcript (conversation tester) */
.captions { margin: .75rem 0; padding: .7rem .8rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.caphead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.caphead b { font-size: .9rem; }
.cappill { font-size: .75rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.cappill.idle { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.cappill.hearing { color: #fff; background: var(--ok); border-color: var(--ok); animation: pulsepill 1.2s ease-in-out infinite; }
.cappill.waiting { color: #fff; background: var(--warn); border-color: var(--warn); }
.cappill.held { color: var(--warn); border-color: var(--warn); }
.cappill.sent { color: var(--ok); border-color: var(--ok); }
.cappill.speaking { color: #fff; background: #7a4fa8; border-color: #7a4fa8; }
@keyframes pulsepill { 50% { opacity: .75; } }
.caplang { margin-left: 0; }
.capmeter { margin-left: auto; width: 110px; height: 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.capmeter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), var(--warn), var(--bad)); background-size: 110px 100%; transition: width .08s linear; }
.capmeter.muted i { background: var(--muted); }
.caplines { margin-top: .5rem; min-height: 3.2rem; max-height: 9.5rem; overflow-y: auto; font-size: .95rem; line-height: 1.45; }
.capline { display: flex; gap: .45rem; align-items: baseline; padding: .1rem 0; }
.capline .capmark { flex: none; width: 1rem; text-align: center; color: var(--muted); }
.capline.sent { color: var(--muted); } .capline.sent .capmark { color: var(--ok); }
.capline.final { font-weight: 500; }
.capline.live { font-style: italic; color: var(--accent); }
.capline .langtag { margin-left: .35rem; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 2px; animation: blink 1s steps(1) infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }
.capcount { height: 3px; margin-top: .35rem; border-radius: 999px; background: transparent; overflow: hidden; }
.capcount.on { background: color-mix(in srgb, var(--warn) 20%, transparent); }
.capcount i { display: block; height: 100%; width: 0; background: var(--warn); }
.capcount:not(.on) i { animation: none !important; width: 0; }
@keyframes capcount { from { width: 0; } to { width: 100%; } }
.captions .small { margin: .35rem 0 0; }
.cappill.reconnecting { color: #fff; background: var(--bad); border-color: var(--bad); animation: pulsepill 1s ease-in-out infinite; }
.capstop { padding: .15rem .6rem; font-size: .8rem; min-height: 0; }

/* Icons and markers (no emoji) */
.icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
button .icon, .badge .icon, summary .icon { pointer-events: none; }
.withicon { display: inline-flex; align-items: center; gap: .45rem; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; }
.iconbtn .icon { width: 1.25rem; height: 1.25rem; }
.todayfab { display: inline-flex; align-items: center; gap: .45rem; }
.hksettings summary { display: inline-flex; align-items: center; gap: .45rem; }
.hknotebtn { display: inline-flex; align-items: center; gap: .35rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dotmark::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; vertical-align: .15em; }
.hkbtn.dirty .dot { color: var(--bad); } .hkbtn.clean .dot { color: var(--ok); } .hkbtn.inspected .dot { color: var(--accent); } .hkbtn.out-of-order .dot { color: var(--muted); }
.hkbtn.on .dot { color: currentColor; }
.capline .capmark .icon { width: .95rem; height: .95rem; }
.cappill.ending { color: var(--muted); border-color: var(--line); }

/* Pegasus sync status (housekeeping) */
.hkstatusbox { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.pegbox { display: flex; flex-direction: column; gap: .1rem; }
.pegline { font-size: .72rem; line-height: 1.25; color: var(--muted); }
.pegline::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: .3rem; vertical-align: .1em; background: currentColor; }
.pegline.ok { color: var(--ok); } .pegline.bad { color: var(--bad); }

/* New booking */
.nbchip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .35rem; height: 24px; padding: 0 .6rem; border-radius: 6px; font-size: .74rem; font-weight: 600;
  background: var(--panel); color: var(--accent); border: 1.5px dashed var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,.12); white-space: nowrap; min-height: 0; animation: rise .15s ease-out both; }
.nbchip:hover { background: var(--accent); color: var(--accent-ink); border-style: solid; }
.plantrack { cursor: cell; }
.plan.dragging .plantrack { cursor: grabbing; }
.nbform h2 { font-size: 1.15rem; margin: .25rem 2.5rem .25rem 0; }
.nbform .nbfield { display: flex; flex-direction: column; gap: .2rem; margin: .5rem 0 0; font-size: .82rem; color: var(--muted); }
.nbform .nbfield span { font-weight: 600; }
.nbform .nbfield input, .nbform .nbfield select, .nbform .nbfield textarea { color: var(--ink); }
.nbform input[type=number] { width: 100%; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: inherit; box-sizing: border-box; }
.nbrow { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.nbrow .narrow { max-width: 8rem; }
.nbavail { margin: .35rem 0 0; font-size: .82rem; } .nbavail.ok { color: var(--ok); } .nbavail.bad { color: var(--bad); } .nbavail.muted { color: var(--muted); }
.nbavail::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: .35rem; vertical-align: .1em; }
.nbform .row { margin-top: 1rem; }
.nbpreview { margin-top: .75rem; }
.nbpreview .nbhead { font-weight: 600; margin: .5rem 0; }
.nbwarn { color: var(--warn); }
.cancelbox .row { margin-top: .5rem; }
button.dangerfill { background: var(--bad); border-color: var(--bad); color: #fff; }

/* Gap filling */
.nbsuggest { margin-top: .6rem; padding: .6rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.optgroup + .optgroup { margin-top: .5rem; }
.opttitle { margin: 0 0 .3rem; font-size: .8rem; font-weight: 600; }
.optbtn { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; width: 100%; margin: .25rem 0 0; padding: .45rem .6rem; text-align: left; font-size: .82rem;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; min-height: 0; }
.optbtn:hover { border-color: var(--accent); }
.optpct { margin-left: auto; font-weight: 700; color: var(--ok); }
.nboffer { margin: .4rem 0 0; font-size: .8rem; font-weight: 600; color: var(--ok); }
.gaprules h3 { font-size: .85rem; margin: 1rem 0 .3rem; color: var(--muted); }
.grrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .35rem 0; font-size: .88rem; }
.grrow > span:first-child { min-width: 0; }
input.grnum { width: 5rem; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: inherit; }
input.grmd { width: 4.2rem; padding: .35rem .45rem; }
table.grtypes { border-collapse: collapse; font-size: .85rem; }
table.grtypes th, table.grtypes td { padding: .3rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.gaprules .ok { color: var(--ok); }

/* Stripe deposits (web/portal/pages/payments.js) */
.paybox { margin-top: 1rem; }
.paylinkbox { margin-top: .5rem; }
.paylinkbox input.paylink { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
a.button { display: inline-block; padding: .45rem .9rem; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: inherit; }
.payline { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .5rem; }
.paysetup { padding-left: 1.2rem; } .paysetup li { margin: .35rem 0; } .paysetup .badge { margin-left: 0; }
.paycheck { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.wrapanywhere { overflow-wrap: anywhere; }
.payform input[type=number], .payrules input[type=number], .payrules input[type=url] { width: 100%; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; box-sizing: border-box; }
.payform .nbfield, .payrules .nbfield { display: flex; flex-direction: column; gap: .25rem; margin: .4rem 0; flex: 1; }

/* Dynamic pricing (web/portal/pages/pricing.js). Diverging scale: blue lower, grey unchanged, red higher (dataviz reference
   palette: blue #2a78d6 / red #e34948, midpoint #f0efec; dark: #3987e5 / #e66767, midpoint #383835). Bars: slot 1 blue, slot 2 orange. */
:root { --dp-down: #2a78d6; --dp-up: #e34948; --dp-mid: #f0efec; --dp-s1: #2a78d6; --dp-s2: #eb6834; }
@media (prefers-color-scheme: dark) { :root { --dp-down: #3987e5; --dp-up: #e66767; --dp-mid: #383835; --dp-s1: #3987e5; --dp-s2: #d95926; } }
.dp-page .segbar button { min-height: 40px; }
.dp-note { display: inline-block; margin: .25rem 0 .5rem; }
.dp-skeleton { height: 260px; }
.dp-legend { flex-wrap: wrap; margin: .25rem 0 .5rem; }
.dp-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.dp-sw-down { background: color-mix(in srgb, var(--dp-down) 70%, var(--dp-mid)); } .dp-sw-mid { background: var(--dp-mid); border: 1px solid var(--line); }
.dp-sw-up { background: color-mix(in srgb, var(--dp-up) 70%, var(--dp-mid)); } .dp-s1 { background: var(--dp-s1); } .dp-s2 { background: var(--dp-s2); }
.dp-gridcard { padding: .5rem; }
table.dp-grid { border-collapse: separate; border-spacing: 2px; font-size: .78rem; font-variant-numeric: tabular-nums; }
table.dp-grid th { font-weight: 500; color: var(--muted); }
table.dp-grid th.dp-rowhead { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; padding: 0 .5rem 0 .2rem; white-space: nowrap; color: var(--ink); max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
table.dp-grid th.dp-date { min-width: 2.4rem; text-align: center; line-height: 1.15; padding: 0 0 .2rem; vertical-align: bottom; }
table.dp-grid th.dp-date b { display: block; color: var(--ink); font-weight: 600; }
table.dp-grid th.dp-weekend b { color: var(--accent); }
.dp-wd, .dp-mon { display: block; font-size: .66rem; }
.dp-mon { color: var(--ink); font-weight: 600; }
table.dp-grid th.dp-month { border-left: 2px solid var(--line); }
td.dp-occ { height: 22px; vertical-align: bottom; padding: 0; background: var(--bg); border-radius: 3px; }
.dp-occbar { display: block; width: 100%; background: color-mix(in srgb, var(--accent) 55%, var(--panel)); border-radius: 3px 3px 0 0; }
td.dp-cell { height: 30px; min-width: 2.4rem; text-align: center; border-radius: 4px; background: var(--dp-mid); color: var(--ink); cursor: pointer; transition: box-shadow .12s; }
td.dp-cell:hover, td.dp-cell:focus { outline: none; box-shadow: 0 0 0 2px var(--ink); }
td.dp-cell.dp-sel { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--panel); }
td.dp-cell.dp-clamped { font-weight: 700; }
td.dp-cell.dp-off { opacity: .55; }
td.dp-closed, .dp-sw.dp-closed { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 3px, var(--line) 3px, var(--line) 5px); color: var(--muted); }
.dp-details h2 { font-size: 1rem; margin: 0 0 .5rem; }
.dp-details h3 { font-size: .85rem; margin: .8rem 0 .3rem; color: var(--muted); }
.dp-reasons { margin: 0; padding-left: 1.1rem; font-size: .9rem; } .dp-reasons li { margin: .2rem 0; }
.dp-rules h3 { font-size: .95rem; font-weight: 700; margin: 1.2rem 0 .3rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.dp-rules select { width: auto; max-width: 100%; }
button.dp-rm { min-height: 0; padding: .3rem .6rem; font-size: .8rem; }
table.dp-edit input.grnum { width: 6rem; }
input.dp-date-in { width: 7.2rem; padding: .35rem .45rem; } input.dp-name-in { width: 14rem; max-width: 60vw; padding: .35rem .45rem; }
.dp-dow { display: flex; flex-wrap: wrap; gap: .5rem; }
.dp-dowcell { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; }
.dp-dowcell input.grnum { width: 4.5rem; }
.dp-chartwrap { width: 100%; overflow-x: auto; }
svg.dp-chart { width: 100%; max-width: 960px; min-width: 520px; height: auto; display: block; }
svg.dp-sens { max-width: 520px; min-width: 320px; }
.dp-chart .dp-axis { font-size: 11px; fill: var(--muted); }
.dp-chart .dp-val { font-size: 11px; fill: var(--ink); font-weight: 600; text-anchor: middle; }
.dp-chart .dp-grid-line { stroke: var(--line); stroke-width: 1; }
.dp-chart .dp-base-line { stroke: var(--muted); stroke-width: 1; }
.dp-chart .dp-bar1 { fill: var(--dp-s1); } .dp-chart .dp-bar2 { fill: var(--dp-s2); }
.dp-chart rect:hover { opacity: .85; }
table.dp-bttable td.num, table.dp-bttable th.num { text-align: right; }
table.dp-bttable tr.dp-total td { font-weight: 700; border-top: 2px solid var(--line); }
.dp-caveats { margin: 0; padding-left: 1.1rem; } .dp-caveats li { margin: .25rem 0; }
@media (max-width: 640px) { table.dp-grid th.dp-rowhead { max-width: 7rem; } }

/* Phone keypad (conversation tester) */
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: .45rem; justify-content: center; margin: .6rem auto .2rem; }
.kpdisplay { grid-column: 1 / -1; min-height: 1.8rem; padding: .3rem .5rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
  text-align: center; font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-x: auto; }
.kpdisplay.empty { font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--muted); line-height: 1.6; }
.kpkey { width: 64px; height: 48px; padding: 0; border-radius: 12px; font-size: 1.25rem; font-weight: 600; background: var(--panel); color: var(--ink); border: 1px solid var(--line); min-height: 0; }
.kpkey:active { transform: scale(.95); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.kpkey.send { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.capstop.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Call menu (web/portal/pages/ivr.js, ROADMAP 1.4b): top bar, language tabs, diagram, editor drawer, try it and assistant */
.ivr2 { --ivr-sub: #7a4fa8; --ivr-card: 300px; }
@media (prefers-color-scheme: dark) { .ivr2 { --ivr-sub: #b48ce0; } }
.ivr-head h1 { margin-bottom: .2rem; }
.ivr-head p { margin: 0 0 .75rem; max-width: 62rem; }
.ivr-mode { padding: .75rem 1rem; }
.ivr-moderow { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.ivr-moderow h2 { margin: 0; } .ivr-moderow p { margin: .1rem 0 0; }
.ivr-modebar { margin: 0; min-width: min(360px, 100%); }
.ivr-mode details { margin-top: .4rem; }

/* sticky top bar */
.ivr-bar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
  padding: .55rem .75rem; margin: 0 0 .5rem; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.ivr-barstate, .ivr-baractions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ivr-baractions button { min-height: 40px; }
.ivr-more { width: 40px; padding: 0; }
.ivr-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 500; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); min-height: 30px; white-space: nowrap; }
.ivr-chip.live .dot { color: var(--ok); }
.ivr-chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.ivr-chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.ivr-chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }
button.ivr-chip { cursor: pointer; }
button.ivr-chip:hover { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent); }
.ivr-barmsg { margin: -.1rem 0 .5rem; } .ivr-barmsg:empty { display: none; }
.ivr-pop { position: absolute; z-index: 40; min-width: 260px; max-width: min(460px, 92vw); max-height: 60vh; overflow: auto; padding: .4rem; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.ivr-problems p { margin: .25rem .5rem .4rem; }
.ivr-problem { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0;
  border-radius: 8px; padding: .45rem .55rem; font-size: .85rem; }
.ivr-problem:hover, .ivr-problem:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ivr-problem b { font-weight: 600; } .ivr-problem span { color: var(--bad); }
.ivr-menuitem { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0; padding: .55rem .65rem; border-radius: 8px; }
.ivr-menuitem:hover:not(:disabled), .ivr-menuitem:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ivr-warnline { color: var(--warn); } .ivr-okline { color: var(--ok); }

/* language tabs */
.ivr-langbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.ivr-langtabs { display: flex; gap: .3rem; overflow-x: auto; padding: 2px; max-width: 100%; }
.ivr-langtab { display: flex; flex-direction: column; align-items: flex-start; padding: .3rem .75rem; border-radius: 10px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); min-width: 7.2rem; line-height: 1.3; }
.ivr-langname { font-weight: 600; font-size: .9rem; }
.ivr-langstate { font-size: .74rem; color: var(--muted); }
.ivr-langtab.done .ivr-langstate { color: var(--ok); } .ivr-langtab.miss .ivr-langstate { color: var(--bad); } .ivr-langtab.mt .ivr-langstate { color: var(--warn); }
.ivr-langtab.on { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.ivr-translate { white-space: nowrap; }

/* work area: diagram and side panel */
.ivr-work { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: .75rem; align-items: start; }
.ivr-canvascard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ivr-canvas { overflow: auto; height: calc(100vh - 300px); min-height: 460px; background-color: var(--bg);
  background-image: radial-gradient(color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1px); background-size: 18px 18px; }
.ivr-flowwrap { position: relative; display: inline-block; min-width: 100%; vertical-align: top; }
.ivr-wires { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.ivr-wire { fill: none; stroke: color-mix(in srgb, var(--muted) 65%, transparent); stroke-width: 2; }
.ivr-wire.sub { stroke: var(--ivr-sub); }
.ivr-wiretip { fill: var(--ivr-sub); }
.ivr-flow { position: relative; padding: 24px; display: inline-flex; flex-direction: column; gap: 28px; }
.fl-branch { display: flex; align-items: flex-start; gap: 64px; }
.fl-kids { display: flex; flex-direction: column; gap: 22px; }
.fl-kids:empty { display: none; }
.fl-start { display: inline-flex; align-items: center; gap: .45rem; margin-top: 8px; padding: .5rem .85rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: .85rem; white-space: nowrap; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.fl-card { width: var(--ivr-card); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  transition: box-shadow .2s, border-color .2s; }
.fl-card.start { border-top: 3px solid var(--accent); }
.fl-card.lang { width: 220px; border-top: 3px solid var(--muted); }
.fl-card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.fl-card.sim-at { border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 28%, transparent), 0 10px 26px rgba(0,0,0,.12); }
.fl-card.as-added { outline: 2px dashed var(--ok); outline-offset: 3px; } .fl-card.as-changed { outline: 2px dashed var(--warn); outline-offset: 3px; }
.fl-head { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0;
  border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: .65rem .8rem .55rem; }
.fl-head:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.fl-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.fl-badges { display: flex; flex-wrap: wrap; gap: .25rem; } .fl-badges:empty { display: none; }
.fl-tag { font-size: .7rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.fl-tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.fl-tag.bad { color: #fff; background: var(--bad); border-color: var(--bad); }
.fl-tag.as { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.fl-intro { margin: 0; padding: .5rem .8rem 0; font-size: .8rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fl-opts { list-style: none; margin: 0; padding: .4rem; display: flex; flex-direction: column; gap: 2px; }
.fl-opt { position: relative; border-radius: 9px; }
.fl-optbtn { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 40px; padding: .3rem .45rem; text-align: left; background: transparent; color: var(--ink);
  border: 1px solid transparent; border-radius: 9px; font-size: .88rem; line-height: 1.3; }
button.fl-optbtn:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: var(--line); }
.fl-opt.sel .fl-optbtn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fl-opt.err .fl-optbtn { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 5%, transparent); }
.fl-opt.ending .fl-optbtn { font-size: .82rem; min-height: 34px; }
.fl-key { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--panel); font-weight: 700;
  font-size: .85rem; font-variant-numeric: tabular-nums; }
.fl-opt.ending .fl-key { width: 24px; height: 24px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.fl-optlabel { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .1rem .35rem; align-items: baseline; overflow-wrap: anywhere; }
.fl-miss { font-size: .68rem; font-weight: 700; color: var(--bad); }
.fl-mt { font-size: .66rem; color: var(--warn); border: 1px dashed var(--warn); border-radius: 4px; padding: 0 .25rem; }
.fl-chip { flex: none; display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; padding: .12rem .45rem; border-radius: 6px; background: var(--bg);
  color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.fl-chip .icon { width: 1em; height: 1em; }
.fl-chip.c-connect { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.fl-chip.c-submenu { color: var(--ivr-sub); border-color: color-mix(in srgb, var(--ivr-sub) 35%, var(--line)); background: color-mix(in srgb, var(--ivr-sub) 7%, var(--panel)); }
.fl-chip.c-callback { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
.fl-chip.c-info { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, var(--panel)); }
.fl-port { position: absolute; right: -12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ivr-sub); border: 2px solid var(--panel); }
.fl-opt.as-added .fl-optbtn { background: color-mix(in srgb, var(--ok) 12%, transparent); } .fl-opt.as-changed .fl-optbtn { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.fl-opt.flash .fl-optbtn { animation: ivrflash 1.5s ease-out; }
@keyframes ivrflash { from { background: color-mix(in srgb, var(--ok) 30%, transparent); } to { background: transparent; } }
.fl-opt.sim-pressed .fl-optbtn { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: var(--ok); }
.fl-opt.sim-pressed .fl-key { background: var(--ok); color: #fff; }
.fl-opt.dragging { opacity: .45; } .fl-opt.dropover { box-shadow: 0 -3px 0 var(--accent); }
.fl-addrow { display: flex; gap: .35rem; padding: 0 .4rem .5rem; }
.fl-add { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 34px; padding: .25rem .5rem; font-size: .8rem; background: transparent;
  color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 8px; }
.fl-add:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 7%, transparent); border-style: solid; }
.fl-orphans { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.fl-orphans > p { flex-basis: 100%; margin: 0; }
.ivr-banner { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .6rem .9rem;
  background: color-mix(in srgb, var(--ok) 10%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); }
.ivr-banner p { margin: 0; } .ivr-banner .row { margin: 0; }
.ivr-legend { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .9rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.ivr-legendrow { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.ivr-legenditem { display: inline-flex; align-items: center; gap: .35rem; }
.ivr-legend .ivr-hint { margin: 0; }

/* side panel: try it and assistant */
.ivr-side { position: sticky; top: 72px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; max-height: calc(100vh - 90px); overflow: auto; }
.ivr-sidehead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .5rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.ivr-sidetabs { display: flex; gap: .25rem; flex: 1; }
.ivr-sidetab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: transparent; color: var(--muted); border: 1px solid transparent; min-height: 38px; }
.ivr-sidetab.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); font-weight: 600; }
.ivr-sideclose { display: none; width: 36px; height: 36px; padding: 0; border-radius: 999px; }
.ivr-pane { padding: .75rem; }
.ivr-pane > .ivr-hint:first-child { margin-top: 0; }
.ivr-caption { padding: .75rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); min-height: 7.5rem; }
.ivr-capwhere { margin: 0 0 .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.ivr-captext { margin: 0; font-size: 1rem; line-height: 1.45; max-height: 11rem; overflow: auto; }
.ivr-captimer { display: block; margin-top: .35rem; font-size: .78rem; color: var(--warn); min-height: 1.1em; }
.ivr-simbtns { justify-content: center; margin-top: .4rem; }
.ivr-simpanel { margin-top: .6rem; padding: .6rem; border-radius: 10px; border: 1px solid var(--line); } .ivr-simpanel:empty { display: none; }
.ivr-simlogbox, .ivr-simset { margin-top: .6rem; }
.ivr-simlog { max-height: 14rem; overflow: auto; font-size: .8rem; }
.ivr-logline { margin: .15rem 0; } .ivr-logline.note { color: var(--muted); } .ivr-logline.me { font-weight: 600; color: var(--accent); }
.ivr-aschips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .6rem; }
.ivr-aschip { font-size: .8rem; padding: .3rem .65rem; border-radius: 999px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); text-align: left; }
.ivr-aschip:hover { border-color: var(--accent); color: var(--accent); }
.ivr-aslog { display: flex; flex-direction: column; gap: .45rem; min-height: 10rem; max-height: 48vh; overflow: auto; padding: .5rem; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.ivr-aslog > .ivr-hint { margin: auto; text-align: center; }
.ivr-aslog .bubble { max-width: 92%; font-size: .88rem; }
.ivr-asreply p { margin: 0; white-space: pre-wrap; }
.ivr-proposal { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); } .ivr-proposal.closed { opacity: .75; }
.ivr-proposal p { margin: .25rem 0; } .ivr-proposal .row { margin-top: .4rem; } .ivr-proposal button { padding: .35rem .7rem; font-size: .85rem; }
.ivr-changes { margin: .3rem 0; padding-left: 1.1rem; } .ivr-changes li { margin: .15rem 0; }
.ivr-thinking { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); }
.ivr-dots { display: inline-flex; gap: 3px; }
.ivr-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ivrdot 1.2s infinite ease-in-out; }
.ivr-dots i:nth-child(2) { animation-delay: .15s; } .ivr-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ivrdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ivr-asform { display: flex; gap: .4rem; align-items: flex-end; margin-top: .5rem; }
.ivr-asform textarea { flex: 1; resize: vertical; min-height: 2.8rem; }
.ivr-assend { width: 44px; height: 44px; padding: 0; flex: none; }

/* editor drawer */
.ivr-drawer { width: min(440px, 94vw); padding: 0; z-index: 60; }
.ivr-dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem .75rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.ivr-dtitle { flex: 1; margin: 0; font-size: 1.1rem; line-height: 1.3; }
.ivr-dclose { width: 36px; height: 36px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ivr-dbody { padding: .25rem 1rem 1.5rem; }
.ivr-dsec { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.ivr-drawer .ivr-dsec h3 { margin: 0 0 .2rem; font-size: .95rem; color: var(--ink); }
.ivr-dsummary { margin: .5rem 0; padding: .5rem .6rem; border-radius: 8px; background: color-mix(in srgb, var(--bad) 6%, var(--panel)); } .ivr-dsummary:empty { display: none; }
.ivr-dsummary p { margin: .1rem 0; }
.ivr-crumb { margin: .6rem 0 0; padding: .25rem .6rem; font-size: .82rem; }
.ivr-field { margin-top: .5rem; }
.ivr-field > label { margin: 0 0 .25rem; font-weight: 600; font-size: .85rem; }
.ivr-hint { margin: .15rem 0 .35rem; font-size: .8rem; color: var(--muted); }
.ivr-fieldfoot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .3rem; font-size: .78rem; color: var(--muted); } .ivr-fieldfoot:empty { display: none; }
.ivr-count { margin-left: auto; font-variant-numeric: tabular-nums; } .ivr-count.bad { color: var(--bad); font-weight: 600; }
.ivr-ref { flex-basis: 100%; order: 5; font-style: italic; }
.ivr-mttag { display: inline-flex; align-items: center; gap: .35rem; color: var(--warn); font-weight: 600; }
button.ivr-mini { padding: .15rem .55rem; font-size: .78rem; min-height: 0; }
.ivr-listen { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; font-size: .82rem; }
.ivr-spoken { margin-top: .6rem; padding: .65rem .75rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.ivr-spoken-head { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.ivr-spoken-text { margin: .3rem 0 0; font-size: .9rem; line-height: 1.5; }
.ivr-sentence { margin: .4rem 0 0; padding: .45rem .6rem; border-left: 3px solid var(--accent); background: var(--bg); border-radius: 0 8px 8px 0; font-size: .9rem; }
.ivr-sentence:empty { display: none; }
.ivr-check { display: flex; gap: .5rem; align-items: flex-start; margin: .6rem 0 0; font-size: .88rem; }
.ivr-check input { margin-top: .3rem; flex: none; }
.ivr-check + .ivr-hint { margin-left: 1.5rem; }
.ivr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
.ivr-olist { list-style: none; margin: .4rem 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ivr-olist li { display: flex; gap: .25rem; align-items: center; }
.ivr-orow { flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 0; text-align: left; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  padding: .3rem .5rem; border-radius: 9px; font-size: .88rem; }
.ivr-orow:hover { border-color: var(--accent); }
.ivr-orow .fl-key { width: 24px; height: 24px; font-size: .78rem; }
.ivr-oname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivr-owhat { font-size: .72rem; color: var(--muted); white-space: nowrap; }
button.iconbtn.ivr-mini { width: 32px; height: 32px; padding: 0; }
.ivr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .4rem; }
.ivr-tile { display: flex; align-items: center; gap: .5rem; text-align: left; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: .45rem .6rem; font-size: .84rem; min-height: 44px; }
.ivr-tile .icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--muted); }
.ivr-tile.c-connect .icon { color: var(--accent); } .ivr-tile.c-submenu .icon { color: var(--ivr-sub); } .ivr-tile.c-callback .icon { color: var(--warn); } .ivr-tile.c-info .icon { color: var(--ok); }
.ivr-tile:hover { border-color: var(--accent); }
.ivr-tile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.ivr-tiles.big { grid-template-columns: 1fr; }
.ivr-tiles.big .ivr-tile { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .6rem; padding: .65rem .8rem; }
.ivr-tiles.big .ivr-tile .icon { grid-row: 1 / 3; width: 1.5rem; height: 1.5rem; align-self: center; justify-self: center; }
.ivr-tiletitle { font-weight: 600; } .ivr-tilehelp { font-size: .78rem; color: var(--muted); }
.ivr-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; max-width: 300px; margin-top: .4rem; }
.ivr-keybtn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; padding: .2rem; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.ivr-keynum { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.ivr-keywho { font-size: .62rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: .8rem; }
.ivr-keybtn.used { background: color-mix(in srgb, var(--muted) 10%, var(--panel)); }
.ivr-keybtn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .ivr-keybtn.on .ivr-keywho { color: inherit; opacity: .85; }
.ivr-keybtn:disabled { opacity: .4; }
.ivr-conflict { margin-top: .5rem; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); font-size: .88rem; }
.ivr-conflict p { margin: 0; } .ivr-conflict .row { margin-top: .5rem; }
.ivr-state { font-size: .85rem; margin: .3rem 0 0; }
.ivr-dfoot { margin-top: 1rem; }
.ivr-steps { margin: .7rem 0 0; font-size: .72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.ivr-drawer h3.ivr-q { font-size: 1.05rem; margin: .3rem 0 .4rem; color: var(--ink); }
.ivr-langchecks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .5rem; }
.ivr-otherlangs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .2rem; }
.ivr-errs:empty { display: none; } .ivr-errs p { margin: .2rem 0 0; }
.ivr-hist { list-style: none; padding: 0; margin: .5rem 0; }
.ivr-hist li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.ivr-hist p { margin: .1rem 0 0; }

/* publish dialog */
.ivr-dialog { width: min(560px, 94vw); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; background: var(--panel); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.ivr-dialog::backdrop { background: rgba(10,15,20,.45); }
.ivr-dialog h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
.ivr-dialog .ivr-changes { max-height: 40vh; overflow: auto; }
.ivr-note.warn { padding: .5rem .65rem; border-radius: 8px; background: color-mix(in srgb, var(--warn) 9%, var(--panel)); color: var(--warn); font-size: .88rem; }
.ivr-dialogbtns { justify-content: flex-end; }

@media (max-width: 1150px) { .ivr-work { grid-template-columns: minmax(0, 1fr) 320px; } .ivr2 { --ivr-card: 280px; } }
@media (max-width: 880px) {
  .ivr-work { grid-template-columns: 1fr; }
  .ivr-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 55; max-height: 80vh; border-radius: 18px 18px 0 0; transform: translateY(105%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -12px 40px rgba(0,0,0,.2); }
  .ivr-side.open { transform: none; }
  .ivr-sideclose { display: inline-flex; align-items: center; justify-content: center; }
  .ivr-canvas { height: auto; min-height: 0; overflow: visible; background-image: none; }
  .ivr-flowwrap { display: block; }
  .ivr-wires { display: none; }
  .ivr-flow { display: flex; padding: 12px; gap: 12px; }
  .fl-branch { flex-direction: column; gap: 12px; }
  .fl-cell { width: 100%; }
  .fl-kids { width: 100%; gap: 12px; padding-left: 12px; margin-left: 6px; border-left: 2px solid color-mix(in srgb, var(--ivr-sub) 45%, var(--line)); box-sizing: border-box; }
  .fl-card, .fl-card.lang { width: 100%; }
  .fl-port { display: none; }
  .fl-start { margin-top: 0; }
  .ivr-baractions button.withicon:not(.ivr-pub) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ivr-baractions button.withicon:not(.ivr-pub) { width: 40px; padding: 0; justify-content: center; }
  .ivr-langtab { min-width: 6.2rem; }
  .ivr-langbar { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
  .ivr-drawer { width: auto; max-height: 88vh; }
  .ivr-grid2 { grid-template-columns: 1fr; }
  .ivr-bar { padding: .45rem .5rem; }
  .ivr-mode .ivr-modebar { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ivr-side, .fl-card, .fl-opt.flash .fl-optbtn, .ivr-dots i { animation: none; transition: none; } }
.fl-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fl-entry .fl-start { margin-top: 0; }
@media (max-width: 880px) {
  .ivr-barstate { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .ivr-translate { white-space: normal; text-align: left; }
  .ivr-langbar > * { max-width: 100%; }
}
@media (max-width: 880px) {
  .ivr-baractions { flex-wrap: nowrap; width: 100%; }
  .ivr-baractions button.withicon:not(.ivr-pub), .ivr-baractions .ivr-more { flex: none; width: 40px; }
  .ivr-baractions .ivr-pub { flex: 1; justify-content: center; padding: 0 .6rem; order: 5; }
  .ivr-baractions .ivr-more { order: 6; }
  .ivr-side { max-height: 72vh; }
}
.ivr-mode .result:empty { display: none; }

/* Portal assistant (web/portal/assistant.js, ROADMAP P.7a): header button, side panel (bottom sheet on phones), action cards */
.gbhas-btn { min-height: 36px; padding: .3rem .75rem; font-size: .9rem; font-weight: 600; }
.gbhas-btn .icon { width: 1.15rem; height: 1.15rem; }
.gbhas-btn.on { background: var(--accent); color: var(--accent-ink); }
.gbhas { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 60; display: flex; flex-direction: column; gap: .5rem;
  padding: .75rem .9rem .6rem; background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -14px 0 44px rgba(0,0,0,.18);
  transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.gbhas.open { transform: none; visibility: visible; transition: transform .22s ease; }
.gbhas-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.gbhas-title { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.05rem; }
.gbhas-title .icon { color: var(--accent); width: 1.3rem; height: 1.3rem; }
.gbhas-page { font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.gbhas-headbtns { display: flex; gap: .35rem; }
.gbhas-headbtns .iconbtn { width: 36px; height: 36px; }
.gbhas-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; padding: .25rem .1rem .5rem; overscroll-behavior: contain; }
.gbhas-log .bubble { max-width: 94%; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.gbhas-empty { margin: auto 0; padding: .5rem 0; }
.gbhas-intro { margin: 0 0 .75rem; color: var(--muted); font-size: .9rem; }
.gbhas-exlabel { margin: 0 0 .4rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.gbhas-chips { display: flex; flex-direction: column; gap: .4rem; }
.gbhas-chip { text-align: left; font-size: .88rem; padding: .5rem .75rem; border-radius: 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.gbhas-chip:hover, .gbhas-chip:focus-visible { border-color: var(--accent); color: var(--accent); }
.gbhas-reply { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.gbhas-sources { margin: -.2rem 0 0 .3rem; font-size: .75rem; color: var(--muted); }
.gbhas-divider { align-self: center; margin: .2rem 0; font-size: .75rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .35rem; }
.gbhas-error { margin: 0; }
.gbhas-thinking { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); }
.gbhas-dots { display: inline-flex; gap: 3px; }
.gbhas-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: gbhasdot 1.2s infinite ease-in-out; }
.gbhas-dots i:nth-child(2) { animation-delay: .15s; } .gbhas-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gbhasdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.gbhas-card { align-self: stretch; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: .6rem .75rem; background: var(--bg); font-size: .88rem; }
.gbhas-card.done, .gbhas-card.opened { border-left-color: var(--ok); }
.gbhas-card.cancelled { opacity: .6; border-left-color: var(--line); }
.gbhas-card.failed { border-left-color: var(--bad); }
.gbhas-cardtitle { display: flex; align-items: center; gap: .45rem; }
.gbhas-cardtitle .icon { color: var(--accent); }
.gbhas-details { margin: .4rem 0 0; padding-left: 1.1rem; }
.gbhas-details li { margin: .1rem 0; overflow-wrap: anywhere; }
.gbhas-details li:first-child { list-style: none; margin-left: -1.1rem; color: var(--muted); }
.gbhas-items { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.gbhas-item { font-size: .75rem; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.gbhas-cardbtns { margin-top: .6rem; }
.gbhas-cardbtns button { min-height: 40px; }
.gbhas-card .result { margin: .45rem 0 0; }
.gbhas-card > .withicon { margin-top: .4rem; min-height: 36px; padding: .3rem .7rem; font-size: .85rem; }
.gbhas-allrow { align-self: stretch; display: flex; justify-content: flex-end; }
.gbhas-all { min-height: 38px; padding: .35rem .85rem; font-size: .88rem; }
.gbhas-form { display: flex; gap: .45rem; align-items: flex-end; }
.gbhas-form textarea { flex: 1; resize: none; min-height: 2.9rem; max-height: 8rem; font-size: .95rem; }
.gbhas-send { flex: none; }
.gbhas-note { margin: 0; font-size: .72rem; color: var(--muted); text-align: center; }
@media (max-width: 700px) {
  .gbhas-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gbhas-btn { width: 40px; padding: 0; justify-content: center; }
  .gbhas { top: auto; left: 0; width: auto; height: 86vh; height: 86dvh; border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.22);
    transform: translateY(105%); padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
  .gbhas::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--line); margin: -.25rem auto .15rem; }
  .gbhas.open { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gbhas, .gbhas-dots i { transition: none; animation: none; } }
@media print { .gbhas, .gbhas-btn { display: none !important; } }

/* Extensions (pages/extensions.js) and improvements (pages/improve.js), ROADMAP P.7b / P.7c */
.extpage input.narrow, .exted input.narrow { width: 7.5rem; }
.exted input[type=number], .exted input[type=time], .impform input[type=number] { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.extsafety, .impnote { display: flex; gap: .5rem; align-items: flex-start; color: var(--muted); }
.extsafety .icon, .impnote .icon { flex: none; width: 18px; height: 18px; margin-top: .15rem; }
.extai { border-left: 4px solid var(--accent); }
.extai textarea { margin-top: .5rem; }
.extailog { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.extailog .bubble { max-width: 100%; }
.bubble.bad { color: var(--bad); }
.bubble.discarded { opacity: .5; }
.extchips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .4rem 0; }
button.chip { font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; background: transparent; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.extproposal { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); white-space: normal; }
.extproposal > b { font-size: 1.02rem; }
.extlisthead { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 .5rem; }
.extlisthead h2 { margin: 0; }
.extlisthead .row { margin: 0; }
.extkindhead { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1rem 0 .4rem; }
.extcard { border-left: 4px solid var(--line); }
.extcard.on { border-left-color: var(--ok); }
.extcardhead { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.extcardtitle h2 { display: inline; margin-right: .25rem; }
.extcardtitle .badge { margin-left: 0; margin-right: .3rem; }
.extcardswitch { display: flex; gap: .5rem; align-items: center; flex: none; }
.extsummary { margin: .4rem 0; color: var(--ink); }
.extres { margin-top: .5rem; }
.extmeta { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-top: .4rem; }
.extmeta .badge { margin-left: .25rem; }
.extbig { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.extnum { display: flex; flex-direction: column; }
.extnum b { font-size: 2.1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.extbars { display: flex; flex-direction: column; gap: .3rem; }
.extbar { display: grid; grid-template-columns: minmax(6rem, 30%) 1fr auto; gap: .5rem; align-items: center; font-size: .9rem; }
.extbarlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extbartrack { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.extbartrack i { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.extbarval { font-variant-numeric: tabular-nums; }
.extbarextra { grid-column: 2 / -1; margin-top: -.2rem; }
.extlinewrap { width: 100%; overflow-x: auto; }
svg.extline { width: 100%; min-width: 320px; max-width: 760px; height: auto; display: block; }
svg.extline .grid { stroke: var(--line); stroke-width: 1; }
svg.extline .axis { fill: var(--muted); font-size: 11px; }
svg.extline .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
svg.extline .pt { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
table.exttable { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .5rem; }
table.exttable th, table.exttable td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
table.exttable .num { text-align: right; font-variant-numeric: tabular-nums; }
table.exttable tr.exttotal td { font-weight: 700; border-bottom: 0; }
.extalert { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; border-radius: 8px; margin-top: .4rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.extalert .icon { flex: none; width: 20px; height: 20px; margin-top: .1rem; color: var(--accent); }
.extalert.lv-warn { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.extalert.lv-warn .icon { color: var(--warn); }
.extalert.lv-bad { background: color-mix(in srgb, var(--bad) 9%, var(--panel)); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.extalert.lv-bad .icon { color: var(--bad); }
.extalert.dismissed { opacity: .55; }
.extalerttext { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.extalert .iconbtn { width: 32px; height: 32px; flex: none; }
.drawer.extdrawer { width: min(640px, 100vw); }
.exted .drawerhead .badge { margin-left: .5rem; }
.extsec { margin: .9rem 0; }
.extsec h3, .extcheck h3 { margin: 0 0 .35rem; color: var(--ink); font-size: .95rem; }
.extcheck { margin: 1rem 0; padding: .75rem; border: 1px dashed var(--line); border-radius: 10px; }
.extpair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.extlang { display: flex; gap: .35rem; align-items: center; margin: 0; }
.extlang .langtag { margin: 0; flex: none; }
.extrule { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.extrule select, .extrule input[type=text] { width: auto; flex: 1 1 8rem; min-width: 0; }
.extrule input[type=number], .extrule input[type=date] { width: 9rem; }
.extchecks { display: flex; flex-wrap: wrap; gap: .25rem .9rem; flex: 1 1 100%; }
.extchecks label.inline { font-size: .875rem; }
.extgroup { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px; }
.extgroup.nested { margin: .4rem 0 .4rem 1rem; background: var(--bg); }
.extaction { padding: .6rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; }
.extaction .row { margin-top: 0; }
.extaction textarea { min-height: 3rem; }
.extcharts button.seg { min-height: 40px; }
label.extpin { margin: 1rem 0; }
.extedbar { position: sticky; bottom: -1.25rem; background: var(--panel); padding: .6rem 0; border-top: 1px solid var(--line); margin-top: 1rem; }
.extproblems { margin: .25rem 0 0 1.1rem; padding: 0; }
.extpreview { margin-top: .75rem; }
.exthist { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.extchecklist { display: flex; flex-direction: column; gap: .15rem; margin-top: .3rem; }
label.extcheckline { display: flex; gap: .6rem; align-items: center; margin: 0; padding: .35rem 0; font-size: 1rem; min-height: 40px; }
label.extcheckline input { width: 22px; height: 22px; flex: none; }
.exttoday { display: contents; }
.impform label { margin-top: .6rem; }
.impacc .extrule input { flex: 1 1 12rem; }
button.impitem { display: flex; gap: .9rem; align-items: center; width: 100%; text-align: left; color: var(--ink); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
button.impitem:hover { border-color: var(--accent); }
.impvotes { display: flex; flex-direction: column; align-items: center; min-width: 2.5rem; color: var(--accent); }
.impvotes .icon { width: 20px; height: 20px; }
.impmain { flex: 1; min-width: 0; }
.imptitle { font-weight: 600; overflow-wrap: anywhere; }
.impmeta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .25rem; }
.impmeta .badge { margin-left: 0; }
.impdetail .drawerhead .badge { margin-left: .4rem; }
.imptext { white-space: pre-wrap; overflow-wrap: anywhere; margin: .25rem 0; }
.impcomment { border-left: 3px solid var(--line); padding: .2rem .6rem; margin: .4rem 0; }
.impcomment p { margin: .1rem 0; white-space: pre-wrap; }
.imphist { padding-left: 1.1rem; }
.impqueue { border-left: 4px solid var(--accent); }
@media (max-width: 600px) {
  .extpair { grid-template-columns: 1fr; }
  .extbar { grid-template-columns: minmax(5rem, 38%) 1fr auto; }
  .extcardhead { flex-direction: column; }
  .extlisthead .row button { flex: 1; }
}

/* Housekeeping work sheets (printed from a separate block; hidden on screen) */
.hkprintsheets { display: none; }
@media print {
  body.hkprinting > *:not(.hkprintsheets) { display: none !important; }
  body.hkprinting .hkprintsheets { display: block; }
  @page { size: A4 portrait; margin: 12mm; }
  .hkps { break-after: page; font-size: 10.5pt; color: #000; }
  .hkps:last-child { break-after: auto; }
  .hkps-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 2mm; margin-bottom: 3mm; }
  .hkps-hotel { font-weight: 700; font-size: 13pt; } .hkps-date { text-transform: capitalize; }
  .hkps-who { text-align: right; } .hkps-name { font-weight: 700; font-size: 15pt; }
  table.hkps-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .hkps th.c-room { width: 15mm; } .hkps th.c-type { width: 32mm; } .hkps th.c-task { width: 28mm; } .hkps th.c-time { width: 30mm; }
  .hkps th.c-persons { width: 12mm; } .hkps th.c-done { width: 8mm; } .hkps th.c-doneAt { width: 15mm; } .hkps th.c-initials { width: 20mm; }
  table.hkps-table th { text-align: left; font-size: 9pt; border-bottom: 1.5px solid #000; padding: 1.5mm 1.5mm; }
  table.hkps-table td { border-bottom: 1px solid #999; padding: 2.5mm 1.5mm; vertical-align: top; }
  table.hkps-table tr { break-inside: avoid; }
  table.hkps-table tr.early td { font-weight: 600; }
  .hkps .c-room { font-weight: 700; font-size: 14pt; white-space: nowrap; }
  .hkps-box { display: inline-block; width: 5mm; height: 5mm; border: 1.5px solid #000; }
  .hkps .c-persons { text-align: center; }
  .hkps-foot { margin-top: 6mm; }
  .hkps-lines { min-height: 22mm; border-bottom: 1px solid #999; background: repeating-linear-gradient(#fff 0 7mm, #999 7mm 7.2mm); }
  .hkps-sign { display: flex; justify-content: space-between; margin-top: 8mm; gap: 10mm; }
  .hkps-sign span { flex: 1; border-top: 1px solid #000; padding-top: 1mm; font-size: 9pt; }
}