:root { --menu-title-bg:var(--brand); --menu-title-fg:var(--brand-fg); --soft:#ecfdf5; --soft-fg:#065f46; --soft-line:#a7f3d0; --hover:#f0fdfa; --hover-line:#99f6e4; --neutral:#f3f4f6; --btn-alt:#e5e7eb; --cal-booked:var(--brand); --cal-booked-fg:#fff; --cal-open:var(--soft); --cal-closed:var(--neutral); --cal-closed-fg:#9ca3af; --notice-bg:#fffbeb; --notice-line:#fde68a; --row-hi:#f0fdf4; --fg:#111827; --muted:#6b7280; --line:#e5e7eb; --brand:#0f766e; --brand-fg:#fff; --bg:#f6f7f9; --err:#b91c1c; --card:#fff; --bar-bg:#fff; --bar-fg:var(--fg); --heading:var(--fg); --font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head:var(--font-body); }
* { box-sizing: border-box; }
html { font-size:var(--size-text,16px); }
body { margin:0; font:1rem/1.5 var(--font-body); color:var(--fg); background:var(--bg); }
body.center { display:grid; place-items:center; min-height:100vh; padding:16px; }
h1, h2, .brand-text { font-family:var(--font-head); color:var(--heading); } h1 { margin:0 0 4px; font-size:var(--size-title,32px); } h2 { margin:0 0 12px; font-size:calc(var(--size-title,32px) * .575); } h3 { margin:18px 0 8px; font-size:.95rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.muted { color:var(--muted); } .error { color:var(--err); min-height:1.4em; margin:.25rem 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:16px; }
.narrow { width:100%; max-width:380px; }
.wrap { max-width:860px; margin:0 auto; padding:16px; }
.bar { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--bar-bg); color:var(--bar-fg); border-bottom:1px solid var(--line); } .bar a, .bar .muted, .bar .brand-text { color:var(--bar-fg); } .brand-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; } .brand-img { height:34px; width:auto; max-width:200px; display:block; }
.section-help { margin:-6px 0 14px; color:var(--muted); white-space:pre-line; }
.grow { flex:1; }
label { display:block; margin:12px 0; font-size:.9rem; font-weight:600; }
label small { display:block; font-weight:400; color:var(--muted); }
input, select, textarea { width:100%; margin-top:4px; padding:9px 10px; font:inherit; border:1px solid #d1d5db; border-radius:8px; background:#fff; }
textarea { min-height:110px; resize:vertical; }
.bar select { width:auto; margin:0; }
button { padding:9px 16px; font:inherit; font-weight:600; color:var(--brand-fg); background:var(--brand); border:0; border-radius:8px; cursor:pointer; }
button.secondary { color:var(--fg); background:var(--btn-alt); } button.danger { background:var(--brand); } /* every button has the brand colour, also the ones that delete */ button:disabled { opacity:.5; cursor:not-allowed; }
.inline { display:flex; gap:8px; } .inline input { margin:0; }
.list { list-style:none; margin:0 0 12px; padding:0; } .list li { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); } .list code { flex:1; word-break:break-all; }
.status { min-height:1.4em; } .status.ok { color:var(--brand); } .status.bad { color:var(--err); }
.notice { background:var(--notice-bg); border:1px solid var(--notice-line); border-radius:8px; padding:10px 12px; margin-bottom:12px; word-break:break-all; }
.secret-row { display:flex; gap:8px; align-items:center; } .secret-row input { flex:1; } .secret-row button { margin-top:4px; }

.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table th, .table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.table tr.attention td { background:#fef2f2; }
.table td.status-confirmed { color:var(--brand); font-weight:600; }
.table td.status-refunded, .table td.status-cancelled { color:var(--muted); }
.table td.status-needs_attention { color:var(--err); font-weight:700; }
.panel-line { margin:.15rem 0; } .panel-line code { word-break:break-all; }
.tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.78rem; font-weight:700; background:#e5e7eb; }
.tag.good { background:var(--soft); color:var(--soft-fg); } .tag.bad { background:#fee2e2; color:#991b1b; } .tag.warn { background:#fef3c7; color:#92400e; }

/* guest guide editor */
.gsec { border:1px solid var(--line); border-radius:10px; padding:12px; margin:10px 0; background:#fcfcfd; }
.gsec .inline { align-items:center; flex-wrap:wrap; } .gsec .inline select { flex:0 0 auto; width:auto; min-width:150px; margin:0; }
.gsec textarea { min-height:90px; margin-top:8px; }
.gsec button.small, .langtabs button { padding:5px 10px; font-size:.85rem; }
.badge { font-size:.75rem; padding:2px 8px; border-radius:999px; background:var(--soft); color:var(--soft-fg); font-weight:700; white-space:nowrap; }
.badge.off { background:#e5e7eb; color:#4b5563; }
.langtabs { display:flex; gap:6px; margin:10px 0; flex-wrap:wrap; } .langtabs button.secondary.active { background:var(--brand); color:#fff; }
.cover { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:8px 0 16px; } .cover img { width:200px; max-width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.cover .none { width:200px; aspect-ratio:16/10; border:2px dashed var(--line); border-radius:10px; display:grid; place-items:center; color:var(--muted); font-size:.85rem; }
.check { display:flex; align-items:center; gap:10px; font-weight:600; } .check input { width:auto; margin:0; }
.savebar { margin-top:16px; align-items:center; }
.gsec input { margin:0; } .gsec .grow-input { flex:1; min-width:140px; }

.cover.logo { background:#0b3a2a; padding:10px; border-radius:10px; } .cover.logo img { width:auto; max-height:70px; aspect-ratio:auto; object-fit:contain; border:0; }
.cover.logo.on-light { background:#fff; border:1px solid var(--line); }
.gsec .inline + .inline { margin-top:8px; }
label textarea, label input, label select { font-weight: 400; }

.ggroup { border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin:12px 0; background:#fafafa; } .ggroup > .gsec { background:#fff; }
.iconpick { position:relative; } .iconbtn, .iconopt { background:#fff; color:#0b3a2a; border:1px solid #d1d5db; border-radius:10px; padding:6px; width:46px; height:46px; display:grid; place-items:center; cursor:pointer; }
.iconbtn img { width:34px; height:34px; object-fit:contain; border-radius:50%; } .iconopt { width:42px; height:42px; } .iconopt.on { border-color:#0f766e; box-shadow:0 0 0 2px rgba(15,118,110,.3); }
.iconpanel { position:absolute; z-index:20; top:52px; left:0; width:min(420px, 86vw); background:#fff; border:1px solid #d1d5db; border-radius:12px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.icongrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(42px, 1fr)); gap:6px; margin-bottom:8px; }
.pthumb { width:96px; height:72px; object-fit:cover; border-radius:10px; background:#e5e7eb; display:grid; place-items:center; color:#6b7280; font-size:.75rem; text-align:center; }
#didit-amount { width: 6rem; }
.wrap.wide { max-width: 1200px; }
.notice { overflow-wrap: break-word; word-break: normal; hyphens: manual; } .notice ul { margin: .5em 0; padding-left: 1.3em; }

.short-input { width: 8rem; }
.shop-product { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.shop-product .pthumb { flex: none; }
.shop-product .grow { flex: 1; min-width: 12rem; }
.shop-product.off { opacity: .6; }
.shop-edit { display: grid; gap: 10px; padding: 12px; background: #f9fafb; border-radius: 10px; margin: 8px 0; }
.plan-arriving td, .plan-leaving td { background: var(--row-hi); font-weight: 600; }
.plan-staying td { background: #f8fafc; }
.plan-left td { color: #6b7280; }
.msg-block { padding: 10px 0 14px; border-bottom: 1px solid #e5e7eb; }
.preview { white-space: pre-wrap; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: .9rem; margin: 4px 0 0; }

.dash-group { margin:10px 0; } .dash-group strong { display:block; margin-bottom:2px; } .dash-group.error { color:var(--err); }
a.button { display:inline-block; padding:9px 16px; font-weight:600; color:var(--fg); background:var(--btn-alt); border-radius:8px; text-decoration:none; }

.menu-off { display:none !important; }
.dash-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; }
.dash-block h3 { margin:12px 0 6px; font-size:1rem; }
.dash-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin:16px 0; }
.stat { background:var(--neutral); border-radius:10px; padding:12px 14px; } .stat strong { display:block; font-size:1.5rem; } .stat span { color:var(--muted, #6b7280); font-size:.85rem; }
.logo-preview { display:block; max-width:220px; max-height:80px; margin:8px 0; border:1px solid var(--line); border-radius:6px; padding:4px; background:#fff; }

/* admin shell: sidebar + page */
.shell { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:start; min-height:calc(100vh - 54px); }
.menu { display:flex; flex-direction:column; gap:2px; padding:12px 8px; background:var(--card); border-right:1px solid var(--line); position:sticky; top:0; align-self:stretch; }
.menu a { padding:7px 12px 7px 18px; color:var(--muted); text-decoration:none; font-weight:400; border-radius:8px; border-left:3px solid transparent; font-size:var(--size-menu,16px); } .menu a.sub { padding-left:40px; font-size:calc(var(--size-menu,16px) * .92); }
.menu-title { margin:14px 0 4px; padding:8px 14px; background:var(--menu-title-bg); color:var(--menu-title-fg); border-radius:999px; font-size:calc(var(--size-menu,16px) * 1.15); font-family:var(--font-head); } .menu-title:first-child { margin-top:0; } .menu-title[hidden] { display:none; }
.menu a:hover { color:var(--fg); background:var(--neutral); } .menu a.active { color:var(--brand); background:var(--soft); border-left-color:var(--brand); } .menu a[hidden] { display:none; }
.menu-label { margin:14px 12px 4px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .menu-label:empty { border-top:1px solid var(--line); margin:10px 8px 6px; }
.page { max-width:none; width:100%; margin:0; } .page .status { margin:0; min-height:0; } .page .status:not(:empty) { margin-bottom:12px; }
.dash { width:100%; } .dash .card { margin-bottom:0; }
.dash-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; margin-bottom:16px; } .dash-two > .card { min-width:0; }
.dash-four { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; width:100%; margin-bottom:16px; }
.dash-four .stat { background:#fff; border:1px solid var(--line); padding:16px; } .dash-four .stat strong { font-size:1.7rem; }
.dash-group { margin-bottom:16px !important; }
.resv { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.dash-col:has(.resv) { display:flex; flex-direction:column; }
.resv li { flex:1; display:flex; align-items:center; gap:14px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; cursor:pointer; min-height:56px; background:#fff; }
.resv li:hover, .resv li:focus { background:var(--hover); border-color:var(--hover-line); outline:none; }
.resv-badge { flex:none; width:46px; height:46px; border-radius:10px; background:var(--soft); color:var(--soft-fg); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; } .resv-badge strong { font-size:1.15rem; } .resv-badge span { font-size:.7rem; text-transform:uppercase; font-weight:700; }
.resv-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.resv-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resv-meta { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:.85rem; } .resv-meta a { font-size:.85rem; color:var(--brand); }
.resv-amount { flex:none; font-weight:700; white-space:nowrap; }
.msglist { list-style:none; margin:0; padding:0; } .msglist li { display:flex; flex-direction:column; padding:8px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:6px; } .msglist li:hover { background:var(--hover); }
.msglist li.unread .msg-text, tr.unread td { font-weight:700; } tr.unread { cursor:pointer; }
.msg-cell { white-space:normal !important; min-width:16rem; }
dialog.summary { border:0; border-radius:12px; padding:20px; width:min(480px, 94vw); box-shadow:0 12px 40px rgba(0,0,0,.25); } dialog.summary::backdrop { background:rgba(0,0,0,.4); }
.sum-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); }
.wrap-actions { flex-wrap:wrap; margin-top:12px; }
@media (max-width:900px) { .dash-four { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) {
  .shell { grid-template-columns:1fr; }
  .menu { flex-direction:row; overflow-x:auto; white-space:nowrap; position:static; border-right:0; border-bottom:1px solid var(--line); padding:6px; }
  .menu-label, .menu-title { display:none; } .menu a { border-left:0; border-bottom:3px solid transparent; border-radius:0; } .menu a.active { border-bottom-color:var(--brand); }
  .dash-two { grid-template-columns:1fr; } 
}
@media (max-width:480px) { .dash-four { grid-template-columns:1fr; } }

.webhook-box { margin-top:20px; padding-top:4px; border-top:1px solid var(--line); } .webhook-box .secret-row input { margin-top:0; }

.dash-one { margin-bottom:16px; }
.cal-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .cal-head h2 { margin:0; text-transform:capitalize; }
.cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.cal-dow { text-align:center; font-size:.75rem; color:var(--muted); font-weight:700; text-transform:uppercase; padding-bottom:2px; }
.cal-day { min-height:56px; border-radius:8px; padding:4px 5px; display:flex; flex-direction:column; gap:2px; background:var(--cal-closed); overflow:hidden; font-size:.8rem; }
.cal-day.empty { background:transparent; } .cal-day.open { background:var(--cal-open); } .cal-day.booked { background:var(--cal-booked); color:var(--cal-booked-fg); cursor:default; } .cal-day.booked[role=button] { cursor:pointer; }
.cal-day.closed { color:var(--cal-closed-fg); } .cal-day.past { opacity:.55; } .cal-day.today { outline:2px solid var(--brand); }
.cal-n { font-weight:700; } .cal-price { font-size:.78rem; color:var(--soft-fg); font-weight:600; } .cal-who { font-size:.72rem; line-height:1.15; overflow:hidden; text-overflow:ellipsis; }
.cal-legend { margin:10px 0 0; font-size:.8rem; } .swatch { display:inline-block; width:11px; height:11px; border-radius:3px; margin:0 4px 0 8px; vertical-align:-1px; background:var(--cal-open); border:1px solid var(--soft-line); } .swatch.booked { background:var(--cal-booked); border-color:var(--cal-booked); } .swatch.closed { background:var(--cal-closed); border-color:var(--line); }
@media (max-width:480px) { .cal-day { min-height:46px; padding:3px; } .cal-who { display:none; } }

.rte { border:1px solid #d1d5db; border-radius:8px; background:#fff; margin:6px 0; }
.rte-bar { display:flex; gap:6px; align-items:center; padding:6px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.rte-btn { min-width:34px; } .rte-btn .b { font-weight:800; } .rte-btn .i { font-style:italic; } .rte-btn .u { text-decoration:underline; }
.rte-fields { width:auto; margin:0; padding:5px 8px; font-size:.85rem; }
.rte-area { min-height:130px; padding:10px 12px; outline:none; white-space:pre-wrap; overflow-wrap:anywhere; } .rte-area:focus { box-shadow:inset 0 0 0 2px rgba(15,118,110,.25); border-radius:0 0 8px 8px; }
.rte-emoji { display:flex; flex-wrap:wrap; gap:2px; padding:6px; border-bottom:1px solid var(--line); background:#fafafa; } .rte-emoji[hidden] { display:none; }
.rte-e { background:transparent; color:inherit; font-size:1.25rem; padding:3px 5px; border-radius:6px; line-height:1; } .rte-e:hover { background:var(--btn-alt); }
.color-input { display:block; width:64px; height:44px; padding:2px; cursor:pointer; }
.brand-preview { padding:14px; background:var(--bar-bg); border:1px solid var(--line); border-radius:8px; margin:10px 0; }

.lang-select { width:auto; margin:0; padding:5px 8px; } .bar a { font-size:.9rem; }
.menu a.locked::after { content:' 🔒'; font-size:.75rem; }
.plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.plan-card { border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; } .plan-card h3 { margin:0; font-size:1.1rem; text-transform:none; letter-spacing:0; color:var(--fg); }
.plan-card.current { border-color:var(--brand); box-shadow:0 0 0 2px rgba(15,118,110,.2); } .plan-card ul { margin:0; padding-left:1.2em; flex:1; } .plan-card .badge { align-self:flex-start; }

.plain-list { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.plain-list li { border: 1px solid var(--line, #e3e3e3); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .5rem; display: grid; gap: .25rem; }
.plain-list li b { overflow-wrap: anywhere; }
.lang-pick { float: right; width: auto; padding: 4px 8px; font-size: .85rem; }
.auth-title { margin: 0 0 8px; } .auth-logo { display: block; max-height: 64px; max-width: 220px; width: auto; height: auto; }
.font-preview { margin:12px 0; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:1rem; } .font-preview + .muted { min-height:1.4em; }

/* the inbox, laid out like the inbox of the WordPress plugin */
:root { --chat-accent:#2563eb; --chat-host:#dbeafe; }
.chat { display:grid; grid-template-columns:minmax(230px, 290px) minmax(0, 1fr) minmax(0, 220px); margin:12px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); min-height:520px; }
.chat-side { border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; }
.chat-tabs { display:flex; align-items:center; gap:4px; padding:10px 12px 0; border-bottom:1px solid var(--line); }
.chat-tabs .tab { background:none; color:var(--muted); padding:8px 10px; border-radius:0; border-bottom:2px solid transparent; font-weight:700; } .chat-tabs .tab.on { color:var(--fg); border-bottom-color:var(--fg); }
.chat-tabs .icon-btn { margin-left:auto; background:none; color:var(--muted); padding:4px 8px; font-size:1.2rem; }
#chat-search { width:auto; margin:10px 12px; border-radius:10px; }
.chat-list { overflow-y:auto; max-height:560px; flex:1; }
.chat-item { display:flex; gap:10px; width:100%; text-align:left; padding:12px 14px; background:var(--card); color:var(--fg); border:0; border-bottom:1px solid var(--line); border-radius:0; font-weight:400; }
.chat-item.on { background:var(--chat-host); }
.avatar { flex:none; width:40px; height:40px; border-radius:50%; background:var(--btn-alt); display:grid; place-items:center; font-weight:700; color:var(--fg); }
.chat-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-top { display:flex; align-items:center; gap:6px; } .chat-name { font-weight:800; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-when { font-size:.8rem; color:var(--muted); } .dot { width:9px; height:9px; border-radius:50%; background:var(--chat-accent); }
.chan { display:inline-block; padding:0 6px; border-radius:4px; background:var(--chat-accent); color:#fff; font-size:.72rem; font-weight:800; line-height:1.5; } .chan.big { padding:2px 10px; border-radius:999px; background:var(--soft); color:var(--soft-fg); font-size:.8rem; text-transform:capitalize; }
.chat-last { font-size:.88rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-item.unread .chat-last { color:var(--fg); font-weight:700; }
.chat-prop { font-size:.82rem; font-weight:600; }
.chat-pane { display:flex; flex-direction:column; min-width:0; }
.chat-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:1.05rem; }
.bubbles { flex:1; display:flex; flex-direction:column; gap:6px; padding:16px; max-height:440px; overflow-y:auto; background:var(--bg); }
.msg { display:flex; flex-direction:column; max-width:82%; } .msg.in { align-self:flex-start; } .msg.out { align-self:flex-end; align-items:flex-end; }
.bubble { padding:12px 16px; border-radius:18px; } .msg.in .bubble { background:var(--card); border:1px solid var(--line); } .msg.out .bubble { background:var(--chat-host); }
.bubble-text { white-space:pre-wrap; overflow-wrap:anywhere; } .bubble-meta { margin:3px 6px 8px; font-size:.78rem; color:var(--muted); }
.chat-reply { margin:12px 16px 16px; border:1px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--card); }
.chat-reply textarea { border:0; min-height:0; resize:none; padding:4px; margin:0; } .chat-reply textarea:focus { outline:none; }
.chat-reply-bar { display:flex; justify-content:flex-end; } .chat-send { background:var(--chat-accent); color:#fff; border-radius:10px; padding:9px 22px; }
.chat-info { border-left:1px solid var(--line); padding:14px 16px; min-width:0; overflow-wrap:anywhere; } .chat-info h3 { margin:0 0 10px; font-size:.78rem; letter-spacing:.1em; color:var(--muted); }
.chat-info h4 { margin:16px 0 6px; font-size:1.05rem; } .info-line { display:flex; flex-direction:column; margin:6px 0; font-size:.9rem; } .info-line .muted { font-size:.75rem; }
.chat-log { margin-top:14px; } .chat-log summary { cursor:pointer; font-weight:600; color:var(--muted); }
@media (max-width:900px) { .chat { grid-template-columns:1fr; } .chat-info { border-left:0; border-top:1px solid var(--line); } .chat-side { border-right:0; border-bottom:1px solid var(--line); } .chat-list { max-height:240px; } }
.chat-tabs .icon-btn::before { content:"\21bb"; }

.menu a { display:flex; align-items:center; gap:10px; } .menu a .ico { flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .menu a.sub .ico { width:15px; height:15px; }
.short { width:90px; } #invoices-form .field { margin:12px 0; } #invoices-delay { width:90px; }

.svclist { list-style:none; margin:0; padding:0; } .svclist li { display:flex; align-items:center; gap:10px; padding:8px; border-bottom:1px solid var(--line); }
.svclist .dot { width:12px; height:12px; border-radius:50%; flex:none; background:#16a34a; } .svclist li.off .dot { background:#dc2626; }
.svclist .svc-name { flex:1; font-weight:600; } .svclist .svc-state { font-size:.9em; color:#15803d; } .svclist li.off .svc-state { color:#b91c1c; }
.svclist a { font-weight:700; }

#previous-table tr.row-main td { border-bottom:0; padding-bottom:2px; }
#previous-table tr.row-actions-line td { padding-top:2px; padding-bottom:10px; }
#previous-table .row-actions .small { margin:2px 6px 2px 0; vertical-align:middle; min-height:40px; }
#previous-table .row-actions a.button { display:inline-flex; align-items:center; text-decoration:none; box-sizing:border-box; }
dialog.summary .stack { display:grid; gap:10px; } dialog.summary .stack label { display:grid; gap:4px; font-weight:600; } dialog.summary .stack input, dialog.summary .stack select { font:inherit; padding:8px; width:100%; box-sizing:border-box; }
dialog.summary .row2 { display:grid; grid-template-columns:1fr 2fr; gap:10px; }

.checklist-steps { padding-left:20px; display:grid; gap:6px; } .checklist-steps li.off strong { color:var(--muted); }
.pill { display:inline-block; padding:1px 8px; border-radius:99px; font-size:.8em; background:#e5e7eb; } .pill.ok { background:#dcfce7; color:#166534; }
.custom-step { border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px; display:grid; gap:8px; }
.custom-step label { display:grid; gap:4px; font-weight:600; } .custom-step input, .custom-step textarea { font:inherit; padding:8px; width:100%; box-sizing:border-box; }
.custom-step .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.inline-status { margin-left:10px; font-weight:600; font-size:.95em; } .inline-status.ok { color:#15803d; } .inline-status.bad { color:#b91c1c; }
#planner-table select { min-width: 140px; }

/* price calendar */
.pc-nav { display:flex; align-items:center; gap:10px; margin:12px 0; } .pc-nav strong { min-width:150px; text-align:center; text-transform:capitalize; }
.pc-scroll { overflow-x:auto; }
.pc-table { border-collapse:collapse; font-size:12px; width:100%; }
.pc-table th, .pc-table td { border:1px solid var(--line, #e5e7eb); padding:4px 3px; text-align:center; min-width:42px; white-space:nowrap; }
.pc-table th.pc-chan { position:sticky; left:0; background:var(--card, #fff); text-align:left; min-width:130px; padding:4px 8px; z-index:1; }
.pc-day.weekend, .pc-cell.weekend { color:#b42318; } .pc-day.today, .pc-cell.today { background:#fff7d6; }
.pc-cell { cursor:pointer; } .pc-cell:hover, .pc-cell:focus { outline:2px solid #2563eb; outline-offset:-2px; }
.pc-cell.closed { background:#fde8e8; color:#b42318; font-weight:700; }
.pc-badge { display:inline-block; min-width:22px; padding:1px 4px; border-radius:4px; background:#e5e7eb; font-size:11px; font-weight:700; text-align:center; }
.pc-config { margin-bottom:8px; } .pc-config summary { cursor:pointer; font-weight:600; }
.pc-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(100px,1fr) minmax(100px,1fr) auto; gap:8px; margin:6px 0; } .pc-row select, .pc-row input { font:inherit; padding:6px; min-width:0; }
@media (max-width:600px) { .pc-row { grid-template-columns:1fr 1fr; } }

.mail-preview { width:100%; height:420px; border:1px solid var(--line, #e5e7eb); border-radius:8px; background:#f3f4f6; }
#code-form input[name=code] { font:600 24px/1.2 ui-monospace, Menlo, monospace; letter-spacing:6px; text-align:center; }

main.card .row2 { display:grid; grid-template-columns:1fr 2fr; gap:10px; }
#billing-form { display:grid; gap:10px; } #billing-form label { display:grid; gap:4px; font-weight:600; } #billing-form input, #billing-form select { font:inherit; padding:8px; width:100%; box-sizing:border-box; }
#billing-form[hidden] { display:none; }
.row-actions, .row-actions .inline-status { white-space:normal; }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:10000; max-width:min(92vw,560px); display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-radius:10px; background:#fff; border:1px solid var(--line,#d6d3d1); border-left:6px solid #15803d; box-shadow:0 8px 28px rgba(0,0,0,.22); font-weight:600; }
.toast.bad { border-left-color:#b91c1c; color:#b91c1c; } .toast.ok { color:#15803d; }
.toast-close { background:none; border:0; font-size:1.3em; line-height:1; cursor:pointer; color:inherit; padding:0 2px; }

.wc-card { border:1px solid var(--line,#e5e7eb); border-radius:12px; padding:14px 16px; margin:14px 0; }
.wc-card h3 { margin:0 0 4px; }
.wc-fields { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:flex-end; margin:10px 0; }
.wc-fields label { display:grid; gap:4px; font-size:.85rem; font-weight:600; }
.wc-fields .color-input { width:56px; height:36px; padding:2px; }
.wc-preview { width:100%; max-width:560px; height:620px; border:1px dashed var(--line,#d1d5db); border-radius:12px; background:#f9fafb; display:block; margin:8px 0; }
.wc-code { width:100%; font:13px/1.4 ui-monospace, Menlo, Consolas, monospace; }

.plan-matrix { width:100%; max-width:760px; } .plan-matrix th:not(:first-child), .plan-matrix td:not(:first-child) { text-align:center; width:110px; }
.plan-matrix tr.group th { text-align:left; background:#f3f4f6; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:#4b5563; }
.plan-matrix input[type=checkbox] { width:20px; height:20px; }
.shortcode-list { list-style:none; margin:6px 0 12px; padding:0; display:grid; gap:6px; }
.shortcode-list li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.shortcode-list code { font-size:.95em; }

/* Compact icon buttons in the invoice action rows */
button.icon { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
button.icon svg { flex:none; }
button.icon .icon-tag { font-size:inherit; }

/* the visual editor for the parts of the guide */
.wy-area { min-height:150px; white-space:normal; position:relative; }
.wy-area.wy-empty::before { content:attr(data-placeholder); color:var(--muted); position:absolute; pointer-events:none; }
.wy-area h3 { display:inline-block; margin:10px 0 4px; padding:6px 16px; background:var(--brand); color:var(--brand-fg); border-radius:999px; font-size:1rem; }
.wy-area p { margin:.5em 0; } .wy-area ul { margin:.5em 0; padding-left:1.4em; }
.wy-area a { color:var(--brand); text-decoration:underline; }
.wy-media { position:relative; margin:10px 0; padding:8px; border:1px dashed #cbd5e1; border-radius:10px; background:#f8fafc; }
.wy-media img { display:block; max-width:100%; max-height:260px; border-radius:8px; margin:0 auto 8px; }
.wy-media .wy-alt { width:100%; box-sizing:border-box; font-size:.85rem; padding:6px 8px; }
.wy-media .wy-video { padding:22px 12px; text-align:center; font-weight:600; background:#111827; color:#fff; border-radius:8px; overflow-wrap:anywhere; }
.wy-media .wy-x { position:absolute; top:6px; right:6px; min-width:30px; line-height:1; font-size:1.2rem; }
.wy-file { display:none; }
.wy-vrow { display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:6px; border-bottom:1px solid var(--line); background:#fafafa; } .wy-vrow[hidden] { display:none; }
.wy-vrow input { flex:1; min-width:200px; margin:0; }

/* the platform badges (planner) */
.chan-airbnb { background:#e0484f; } .chan-booking { background:#1d4f9c; } .chan-vrbo { background:#2a3b8f; } .chan-direct { background:#0f766e; } .chan-other { background:#64748b; }
.steps { padding-left:1.3rem; margin:.4rem 0 1rem; } .steps li { margin:.55rem 0; }

.mail-list { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; } .mail-item.on { outline:2px solid var(--brand, #0f766e); outline-offset:1px; }
.when-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0; } .when-row input, .when-row select { width:auto; margin:0; }
.plan-ok { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.plan-mark { font-weight: 800; font-size: 1.15rem; line-height: 1; }
.plan-mark.yes { color: #15803d; }
.plan-mark.no { color: #dc2626; }
.plan-approve { padding: 2px 8px; }

/* "{ }" menu: put a detail of the guest or the stay ({name}, {checkin}…) in a text */
.varmenu { width: 4.4em; flex: none; padding: 4px 2px; font-size: .9em; }
.rte-bar .varmenu { margin-left: auto; }
.inline > .grow-input { flex: 1 1 auto; min-width: 0; }

.tv-list{list-style:none;margin:0 0 12px;padding:0}
.tv-list li{padding:8px 0;border-bottom:1px solid var(--line,#e3ded6)}
.tv-code-big{font-size:2.4rem;font-weight:700;letter-spacing:.12em;margin:4px 0 8px}
.tv-code-input{width:9em;font-size:1.3rem;letter-spacing:.2em}
.tv-apps-row{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;margin:0 0 8px;scroll-snap-type:x proximity}
.tv-app{flex:0 0 118px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--line,#e3ded6);border-radius:12px;background:var(--card,#fff);scroll-snap-align:start;cursor:grab;text-align:center}
.tv-app.is-over{outline:2px solid var(--accent,#0b3a2a)}
.tv-app.is-hidden{opacity:.5}
.tv-app-icon{width:64px;height:64px;border-radius:14px;object-fit:cover;background:#eee}
.tv-app-initial{display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;color:#555}
.tv-app-name{font-size:.82rem;line-height:1.2;word-break:break-word;min-height:2.4em}
.tv-app-btns{display:flex;gap:4px}
.tv-ibtn.is-on{background:var(--accent,#0b3a2a);color:#fff;border-color:var(--accent,#0b3a2a)}
.tv-saver-list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tv-saver-slide{display:flex;gap:12px;align-items:flex-start;padding:8px;border:1px solid var(--line,#e3ded6);border-radius:12px;background:var(--card,#fff)}
.tv-saver-thumb{width:128px;height:72px;object-fit:cover;border-radius:8px;background:#eee;flex:0 0 auto}
.tv-saver-fields{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0}
.tv-saver-input{width:100%}
@media (max-width:640px){.tv-saver-slide{flex-wrap:wrap}.tv-saver-thumb{width:100%;height:auto;aspect-ratio:16/9}}
.tv-ibtn{padding:4px 6px;line-height:0}
.tv-texts-group{margin:0 0 10px}
.tv-texts-group summary{cursor:pointer;font-weight:600;padding:6px 0}
.tv-wa-input{max-width:16em}
.tv-name-input{width:16em;max-width:100%}

/* heating */
.heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 12px 0; }
.heat-card { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 12px; }
.heat-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.heat-dial { max-width: 230px; margin: 4px auto; text-align: center; }
.heat-dial svg { width: 100%; height: auto; touch-action: none; cursor: pointer; outline-offset: 2px; }
.heat-track { fill: none; stroke: #e3e6ea; stroke-width: 14; stroke-linecap: round; }
.heat-val { fill: none; stroke-width: 14; stroke-linecap: round; }
.heat-knob { stroke: #fff; stroke-width: 3; }
.heat-num { font-size: 34px; font-weight: 700; }
.heat-unit { font-size: 12px; fill: #8a929b; }
.heat-btns { display: flex; justify-content: center; gap: 10px; margin-top: 2px; }
.heat-btns button { min-width: 44px; }
.heat-mode { margin: 8px 0 4px; }
.heat-sched { margin-top: 10px; border-top: 1px solid var(--line, #ddd); padding-top: 10px; }
.sched-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.sched-bar { position: relative; height: 22px; border-radius: 6px; background: #e3e6ea; overflow: hidden; }
.sched-seg { position: absolute; top: 0; bottom: 0; }
.sched-ticks { display: flex; justify-content: space-between; font-size: 11px; color: #8a929b; margin-bottom: 8px; }
.sched-list { list-style: none; padding: 0; margin: 0 0 8px; }
.sched-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line, #eee); padding: 6px 0; }
.sched-row .heat-dial { max-width: 150px; margin: 0; }
.sched-row .heat-num { font-size: 30px; }

/* heating: layout fixes */
.heat-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.heat-card { min-width: 0; }
.heat-actions, .sched-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.heat-actions select { flex: 1 1 100%; max-width: none; }
.heat-actions button, .sched-actions button { flex: 1 1 auto; white-space: normal; }
.heat-panel { margin-top: 16px; border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 14px; }
.sched-row { display: grid; grid-template-columns: 120px minmax(120px, 170px) auto; align-items: center; gap: 10px 16px; }
.sched-row input[type=time] { width: 100%; }
.sched-row .heat-dial { max-width: 170px; }
.sched-tabs button { min-width: 44px; }
@media (max-width: 520px) { .sched-row { grid-template-columns: 1fr 1fr; } .sched-row .heat-dial { grid-column: 1 / -1; max-width: 220px; margin: 0 auto; } .sched-row button { grid-column: 1 / -1; } }
.sched-list .check { display: flex; gap: 6px; align-items: center; }

/* heating: what guests may control */
.hg-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.hg-room { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 12px 14px; }
.hg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.hg-fields.off { opacity: .45; }
.hg-field { display: grid; gap: 4px; align-content: start; font-size: .9em; }
.hg-field > span { font-weight: 600; }
.hg-field input { width: 100%; box-sizing: border-box; }
.hg-field small { line-height: 1.25; }
.hg-field > span { min-height: 2.5em; display: flex; align-items: flex-end; }
.heat-system { margin: 0 0 12px; }
.heat-system select { max-width: 100%; }
.heat-code { font-size: 1.4em; letter-spacing: .12em; padding: 2px 8px; border: 1px dashed currentColor; border-radius: 6px; }

/* room calendar */
.grid { border-collapse: collapse; font-size: .85rem; }
.grid th, .grid td { border: 1px solid var(--line, #ddd); padding: 4px 6px; white-space: nowrap; }
.grid .grid-day { font-weight: 600; text-align: center; min-width: 3.2rem; }
.grid .grid-type th { text-align: left; background: rgba(127,127,127,.12); }
.grid .grid-free { background: rgba(60,160,90,.10); }
.grid .grid-res { cursor: pointer; background: rgba(60,110,200,.28); overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.grid .grid-src-airbnb, .grid-legend i.grid-src-airbnb { background: #ffd9de; }
.grid .grid-src-booking_com, .grid-legend i.grid-src-booking_com { background: #cfe0ff; }
.grid .grid-src-expedia, .grid-legend i.grid-src-expedia { background: #ffe9b8; }
.grid .grid-src-vrbo, .grid-legend i.grid-src-vrbo { background: #d9d2f5; }
.grid .grid-src-direct, .grid-legend i.grid-src-direct { background: #bfe3cc; }
.grid .grid-src-manual, .grid-legend i.grid-src-manual { background: #e3e0da; }
.grid-legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.85rem; margin:10px 0 0; }
.grid-legend .legend-item { display:inline-flex; align-items:center; gap:7px; }
.grid-legend i { width:16px; height:16px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.12); }
.grid-legend i.chan-logo { width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:.72rem; color:#1f1f1d; overflow:hidden; }
.grid-legend i.chan-logo.has-img { background:#fff; padding:3px; }
.grid-legend i.chan-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.grid-legend { gap:8px 20px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(0,0,0,.08); }
.grid .grid-block { background: repeating-linear-gradient(45deg, rgba(127,127,127,.25), rgba(127,127,127,.25) 6px, rgba(127,127,127,.12) 6px, rgba(127,127,127,.12) 12px); }
.inline-form { margin-top: 1rem; }

.season-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; max-width: 34rem; }
.season-cal .cal-head { text-align: center; font-size: .8rem; opacity: .7; }
.season-cal .cal-day { display: flex; flex-direction: column; align-items: center; padding: .3rem .1rem; border: 2px solid transparent; border-radius: 6px; cursor: pointer; color: inherit; font: inherit; }
.season-cal .cal-day .n { font-weight: 600; }
.season-cal .cal-day .p { font-size: .75rem; opacity: .85; }
.season-cal .cal-day.weekend .n { text-decoration: underline; }
.season-cal .cal-day.manual .p { font-weight: 700; }
.season-cal .cal-day.manual .p::after { content: " ✎"; }
.season-cal .cal-day.selected { border-color: currentColor; }
.s-basis { background: rgba(127,127,127,.15); }
.s-holiday { background: rgba(60,160,90,.30); }
.s-special { background: rgba(220,140,40,.35); }
.season-btn { color: inherit; border: 1px solid rgba(127,127,127,.5); }
.cal-title { font-weight: 600; margin: 0 .5rem; }

.score-cards { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1rem; }
.score-card { border: 1px solid rgba(127,127,127,.35); border-radius: 10px; padding: .6rem .9rem; min-width: 11rem; }
.score-card .score-big { font-size: 1.5rem; font-weight: 700; }
.review-card { border-top: 1px solid rgba(127,127,127,.3); padding: .6rem 0; }
.review-card textarea { width: 100%; margin: .3rem 0; }
.plan-bill { margin-top:16px; } .plan-bill h3 { margin:0 0 6px; font-size:1rem; text-transform:none; letter-spacing:0; color:var(--fg); } .plan-bill p { margin:2px 0; }

fieldset.choice { border:1px solid var(--line, #e3e3e3); border-radius:10px; padding:10px 14px; margin:0 0 12px; display:grid; gap:6px; } fieldset.choice legend { font-weight:600; padding:0 6px; }
div.choice { display:grid; gap:6px; margin:8px 0 14px; }

.channel-iframe { width:100%; height:720px; border:1px solid var(--line, #e3e3e3); border-radius:10px; background:#fff; }
.grid .grid-src-c0, .grid-legend i.grid-src-c0 { background: #f5c6e8; }
.grid .grid-src-c1, .grid-legend i.grid-src-c1 { background: #c6ecf5; }
.grid .grid-src-c2, .grid-legend i.grid-src-c2 { background: #e8f0b8; }
.grid .grid-src-c3, .grid-legend i.grid-src-c3 { background: #ffd2b3; }
.grid .grid-src-c4, .grid-legend i.grid-src-c4 { background: #c8d6c0; }
.grid .grid-src-c5, .grid-legend i.grid-src-c5 { background: #e2c8ff; }
.grid .grid-src-c6, .grid-legend i.grid-src-c6 { background: #f7e0c0; }
.grid .grid-src-c7, .grid-legend i.grid-src-c7 { background: #b8e0d8; }