/* The look of the host app (portal, admin, sign-in): the "paper" palette, Hanken Grotesk, a sticky sidebar that folds in to icons.
   Loaded after the platform admin's theme, the font and the colours come from the platform admin's settings (default Hanken Grotesk) through the variables in app.css/theme.css. */
:root { --bar-h:76px; --menu-w:236px; --menu-w-small:68px; --radius:14px; --shadow:0 1px 2px rgba(31,31,29,.04), 0 4px 14px rgba(31,31,29,.04); --ink-2:#3b3a36; }
body { font-weight:400; -webkit-font-smoothing:antialiased; }
h1, h2, .brand-text { font-weight:600; letter-spacing:-.01em; }
h2 { font-size:1.2rem; }

/* top bar: sticks to the top, the sidebar sticks under it */
.bar { position:sticky; top:0; z-index:30; height:var(--bar-h); padding:0 20px; border-bottom:1px solid var(--line); }
.brand-link { font-weight:700; letter-spacing:-.02em; }
.bar select, .lang-select { border-radius:999px; padding:6px 12px; border:1px solid var(--line); background:var(--card); font-size:.9rem; }

/* cards, fields, buttons */
.card { border-radius:var(--radius); border-color:var(--line); box-shadow:var(--shadow); padding:22px; }
input, select, textarea { border-color:var(--line); border-radius:10px; background:var(--card); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--ink-2); outline-offset:1px; border-color:var(--ink-2); }
button, a.button { border-radius:999px; padding:9px 20px; font-weight:500; transition:background .12s, opacity .12s; }
button:hover:not(:disabled) { background:var(--ink-2); }
button.secondary, a.button { background:transparent; color:var(--fg); border:1px solid var(--line); }
button.secondary:hover:not(:disabled), a.button:hover { background:var(--neutral); }
button.small, .langtabs button { padding:5px 13px; }
/* one size for every button in the host backend, wherever it sits (a table, a note, a flex row): the text size no longer follows the surroundings */
button, a.button { font-size:.92rem; line-height:1.25; min-height:38px; padding:8px 18px; display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; text-decoration:none; white-space:nowrap; }
button.small, .langtabs button, td button, th button, .row-actions button, .row-actions a.button { font-size:.85rem; min-height:32px; padding:5px 13px; }
button.icon, .iconbtn, .tv-ibtn, .rte-btn, .heat-btns button, .sched-tabs button { min-height:32px; }
.heat-actions button, .sched-actions button { white-space:normal; }
input[type=number].short-input, input.short-input { min-height:38px; box-sizing:border-box; }
.langtabs button.secondary.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.tag, .badge { font-weight:600; }
.table th { font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); }
.table td { border-bottom:1px solid var(--neutral); }
.table tr:hover td { background:var(--hover); }
.table tr.attention td { background:#f6e4e0; }
.gsec, .ggroup, .shop-edit, .plan-card { border-radius:var(--radius); border-color:var(--line); background:var(--card); }
.ggroup { background:var(--bg); }
dialog.summary { border-radius:var(--radius); }

/* shell: sidebar + page */
.shell { grid-template-columns:var(--menu-w) minmax(0,1fr); min-height:calc(100vh - var(--bar-h)); transition:grid-template-columns .18s ease; }
.shell.collapsed { grid-template-columns:var(--menu-w-small) minmax(0,1fr); }
.menu { position:sticky; top:var(--bar-h); height:calc(100vh - var(--bar-h)); align-self:start; overflow-y:auto; overflow-x:hidden; padding:14px 12px; gap:3px; background:var(--card); border-right:1px solid var(--line); box-shadow:6px 0 24px -8px rgba(31,31,29,.14); z-index:20; scrollbar-width:thin; }
.menu a { gap:12px; padding:9px 12px; border-left:0; border-radius:12px; color:var(--ink-2); font-weight:500; font-size:.95rem; white-space:nowrap; }
.menu.pending a, .menu.pending .menu-label { visibility:hidden; } /* until the pages are known: no flicker of items that are then hidden */
.menu a.sub { padding-left:34px; font-size:.9rem; font-weight:400; }
.menu a:hover { background:var(--neutral); color:var(--fg); }
.menu a.active { background:var(--brand); color:var(--brand-fg); }
.menu a .ico { width:20px; height:20px; stroke-width:1.7; }
.menu a.sub .ico { width:16px; height:16px; }
.menu-title { margin:18px 0 4px; padding:0 12px; background:none; color:var(--muted); border-radius:0; font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.menu-title:first-of-type { margin-top:4px; }
.menu-toggle { display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; margin:0 0 6px auto; background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:50%; flex:none; }
.menu-toggle:hover:not(:disabled) { background:var(--neutral); color:var(--fg); }
.menu-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.shell.collapsed .menu-toggle { margin:0 auto 6px; } .shell.collapsed .menu-toggle svg { transform:rotate(180deg); }

/* folded: only the icons */
.shell.collapsed .menu { padding:14px 10px; }
.shell.collapsed .menu a { justify-content:center; padding:10px 0; gap:0; }
.shell.collapsed .menu a span, .shell.collapsed .menu-label { display:none; }
.shell.collapsed .menu a.sub { padding-left:0; } .shell.collapsed .menu a.sub .ico { width:18px; height:18px; }
.shell.collapsed .menu a.locked::after { display:none; }
.shell.collapsed .menu a:not(:has(.ico)) { display:none; }
.shell.collapsed .menu-title { height:1px; margin:12px 8px; padding:0; background:var(--line); font-size:0; overflow:hidden; } .shell.collapsed .menu-title:first-of-type { display:none; }

.page { padding:28px 32px 48px; }
.wrap.wide { max-width:1280px; }

/* dashboard: like a chart panel, thin grid lines, small muted captions */
.dash-four { gap:16px; }
.dash-four .stat { border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); padding:18px 20px; display:flex; flex-direction:column-reverse; gap:6px; }
.dash-four .stat span { font-size:.82rem; color:var(--muted); }
.dash-four .stat strong { font-size:1.9rem; font-weight:600; letter-spacing:-.02em; }
.cal-head h2 { font-size:1.15rem; font-weight:600; }
.cal-grid { gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); border-radius:6px; overflow:hidden; }
.cal-dow { padding:8px 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.68rem; letter-spacing:.06em; background:var(--bg); }
.cal-day { border-radius:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--card); min-height:60px; }
.cal-day.empty { background:var(--bg); }
.cal-day.open { background:var(--cal-open); } .cal-day.closed { background:var(--cal-closed); }
.cal-day.booked { background:var(--cal-booked); color:var(--cal-booked-fg); }
.cal-day.today { outline:2px solid var(--fg); outline-offset:-2px; }
.cal-n { font-weight:600; } .cal-price { color:var(--ink-2); font-weight:500; }
.swatch { border-color:var(--line); }
.resv li { border-radius:12px; border-color:var(--line); }
.resv-badge { background:var(--soft); color:var(--soft-fg); border-radius:12px; }
.svclist .dot { background:#5f8a5b; } .svclist li.off .dot { background:var(--err); }
.svclist .svc-state { color:#4d7549; } .svclist li.off .svc-state { color:var(--err); }
.status.ok, .table td.status-confirmed { color:#4d7549; }

@media (max-width:1000px) { .page { padding:22px 20px 40px; } }
@media (max-width:760px) {
  .shell, .shell.collapsed { grid-template-columns:1fr; }
  .menu { position:sticky; top:var(--bar-h); height:auto; flex-direction:row; align-items:center; overflow-x:auto; overflow-y:hidden; padding:8px 10px; z-index:20; border-right:0; border-bottom:1px solid var(--line); }
  .menu-toggle, .menu-title, .menu-label { display:none !important; }
  .menu a, .shell.collapsed .menu a { flex:none; padding:8px 14px; gap:8px; border-bottom:0; border-radius:999px; }
  .shell.collapsed .menu a span { display:inline; }
  .menu a.active { background:var(--brand); color:var(--brand-fg); border-bottom:0; }
  .bar { padding:0 12px; gap:8px; overflow-x:auto; }
  .page { padding:18px 14px 36px; }
}
@media (prefers-reduced-motion:reduce) { .shell, .menu-toggle svg { transition:none; } }
.cal-day.booked .cal-price { color:inherit; opacity:.8; }
/* the facilities of a listing: in columns instead of one long list */
#directory-body fieldset.choice { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:4px 18px; padding:14px 18px; border-radius:var(--radius); }
#directory-body fieldset.choice legend { grid-column:1 / -1; }
#directory-body fieldset.choice .check { margin:6px 0; font-weight:500; }

/* calendars (room calendar, price calendar): light grid, sticky first column, reservations as soft coloured blocks */
.grid, .pc-table { border-collapse:separate; border-spacing:0; font-size:.82rem; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.grid th, .grid td, .pc-table th, .pc-table td { border:0; border-right:1px solid var(--neutral); border-bottom:1px solid var(--neutral); padding:7px 6px; }
.grid .grid-day, .pc-table th.pc-day { background:var(--bg); color:var(--muted); font-weight:600; font-size:.74rem; text-align:center; border-bottom:1px solid var(--line); }
.grid .grid-type th { background:var(--bg); color:var(--fg); font-weight:600; letter-spacing:.02em; }
.grid tbody th, .pc-table th.pc-chan { position:sticky; left:0; z-index:1; background:var(--card); text-align:left; font-weight:600; border-right:1px solid var(--line); }
.grid .grid-free { background:var(--card); color:var(--muted); }
.grid .grid-free:hover { background:var(--hover); }
.grid .grid-res { background:var(--cal-open); color:var(--fg); font-weight:500; border-radius:8px; box-shadow:inset 0 0 0 2px var(--card); }
.grid .grid-src-airbnb, .grid-legend i.grid-src-airbnb { background:#f1d3cf; } .grid .grid-src-booking_com, .grid-legend i.grid-src-booking_com { background:#d3dcea; }
.grid .grid-src-expedia, .grid-legend i.grid-src-expedia { background:#f0e2c0; } .grid .grid-src-vrbo, .grid-legend i.grid-src-vrbo { background:#ddd8ee; }
.grid .grid-src-direct, .grid-legend i.grid-src-direct { background:#dfe3d8; } .grid .grid-src-manual, .grid-legend i.grid-src-manual { background:#e9e6e0; }
.pc-day.weekend, .pc-cell.weekend { color:var(--err); } .pc-day.today, .pc-cell.today { background:var(--hover); }
.pc-cell:hover, .pc-cell:focus { outline:2px solid var(--fg); }
.pc-cell.closed { background:#f3dedb; color:var(--err); }
.pc-badge { background:var(--neutral); border-radius:999px; padding:1px 7px; }
.grid-legend { border-top-color:var(--line); }

/* menu groups (Vrbo style): a parent with an arrow, its pages folded under it; the group's own page lists them */
.menu a.menu-group { justify-content:flex-start; }
.menu a.menu-group span { flex:1; }
.menu a .chev { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.menu a.menu-group.open .chev { transform:rotate(180deg); }
.menu a.sub.deep { padding-left:52px; font-size:.86rem; }
.shell.collapsed .menu a .chev { display:none; }
.shell.collapsed .menu a.sub.deep { padding-left:0; }
.crumb { display:flex; align-items:center; gap:14px; margin:0 0 18px; font-size:.9rem; color:var(--muted); }
.crumb-back { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid var(--ink-2); border-radius:999px; color:var(--ink-2); font-weight:600; text-decoration:none; }
.crumb-back:hover { background:var(--neutral); }
.crumb-back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hub h2 { font-size:1.9rem; margin:0 0 4px; }
.hub-list { margin-top:18px; }
.hub-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 14px; border-top:1px solid var(--line); color:var(--fg); text-decoration:none; }
.hub-row:first-child { border-top:0; }
.hub-row:hover { background:var(--hover); }
.hub-title { display:block; font-size:1.05rem; font-weight:600; }
.hub-desc { display:block; margin-top:2px; font-size:.9rem; color:var(--muted); }
.hub-row svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:760px) { .menu a.sub.deep, .menu a.sub { padding-left:14px; } .menu a .chev { display:none; } }

/* the season calendar: two months side by side, the season colour on every night (basis unless it is holiday or special) */
:root { --s-basis:#ececea; --s-holiday:#bfe0c9; --s-special:#f3d4a8; }
.season-cals { display:flex; flex-wrap:wrap; gap:28px 36px; margin:14px 0 8px; }
.season-cals .sc-month { flex:1 1 300px; min-width:280px; max-width:460px; }
.sc-title { margin:0 0 10px; font-size:1.05rem; font-weight:600; text-transform:capitalize; }
.sc-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.sc-head { padding:4px 0 6px; text-align:center; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sc-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:56px; padding:6px 2px; border:2px solid transparent; border-radius:10px; color:var(--fg); font:inherit; cursor:pointer; transition:transform .08s, box-shadow .12s; }
.sc-day:hover:not(:disabled) { background-image:none; box-shadow:0 0 0 2px var(--ink-2) inset; }
.sc-day .n { font-size:.95rem; font-weight:600; }
.sc-day .p { font-size:.74rem; color:var(--ink-2); font-weight:500; }
.sc-day.weekend .n { color:var(--err); }
.sc-day.past { opacity:.55; }
.sc-day.today { box-shadow:0 0 0 2px var(--fg) inset; }
.sc-day.manual .p { font-weight:700; }
.sc-day.manual .p::after { content:" ✎"; font-size:.7rem; }
.sc-day.selected { border-color:var(--fg); }
.sc-day.sel-start, .sc-day.sel-end { background-image:linear-gradient(rgba(31,31,29,.18), rgba(31,31,29,.18)); }
.season-cals .sc-day.s-basis, .season-btn.s-basis { background-color:var(--s-basis); }
.season-cals .sc-day.s-holiday, .season-btn.s-holiday { background-color:var(--s-holiday); }
.season-cals .sc-day.s-special, .season-btn.s-special { background-color:var(--s-special); }
.season-btn { color:var(--fg); border:1px solid rgba(31,31,29,.18); }
.season-btn:hover:not(:disabled) { background-color:var(--s-basis); filter:brightness(.95); color:var(--fg); }
.season-btn.s-holiday:hover:not(:disabled) { background-color:var(--s-holiday); } .season-btn.s-special:hover:not(:disabled) { background-color:var(--s-special); }
@media (max-width:760px) { .sc-day { min-height:46px; } .sc-day .p { font-size:.66rem; } }
.crumb[hidden] { display:none; }

#directory-body .dir-form > button[type=submit] { position:sticky; bottom:16px; z-index:5; box-shadow:0 6px 20px rgba(31,31,29,.25); }
.toast-close, .lb-close, .modal-close { min-height:0; padding:2px 8px; }

/* rows of fields and buttons (.inline): one line, centred, every control the same height */
.inline { align-items:center; flex-wrap:wrap; gap:10px 12px; }
.inline label { display:inline-flex; align-items:center; gap:10px; font-weight:600; }
.inline select, .inline input:not([type=checkbox]):not([type=radio]) { width:auto; margin:0; min-height:38px; box-sizing:border-box; }
.inline input.short-input, input.short-input { width:8rem; }
.inline label.check, .inline .check { font-weight:500; gap:6px; } .inline input[type=checkbox], .inline input[type=radio] { width:auto; min-height:0; margin:0; }
#weekend-days { gap:6px 18px; }
.table input.short-input, .table select { margin:0; }
.table td, .table th { vertical-align:middle; }
.inline input.short-input:not([type=checkbox]):not([type=radio]), .table input.short-input { width:8rem; }
.table select { width:auto; min-width:11rem; }
.unit-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 6px 3px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:.9rem; }
.unit-chip .unit-x { min-height:0; width:22px; height:22px; padding:0; border-radius:50%; background:transparent; color:var(--fg); font-size:1rem; line-height:1; }
.unit-chip .unit-x:hover:not(:disabled) { background:var(--neutral); }

/* Accommodation page: overview cards, new accommodation, smart lock and heating per accommodation */
.acc-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.acc-card, .acc-dev { border:1px solid var(--line); border-radius:18px; padding:16px 18px; background:var(--card); }
.acc-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.acc-head .acc-title { flex:1; min-width:0; }
.acc-head h3 { margin:0; font-size:1.05rem; }
.acc-kind { color:var(--ink-2); font-size:.85rem; }
.acc-icon { flex:none; width:44px; height:44px; border-radius:14px; background:var(--neutral); display:inline-flex; align-items:center; justify-content:center; }
.acc-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.acc-row { display:flex; flex-direction:column; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.acc-ctl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.acc-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.acc-forms { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.acc-forms form { border:1px solid var(--line); border-radius:18px; padding:16px 18px; }
.acc-forms form h3 { margin-top:0; }
#rooms-devices { display:grid; gap:14px; }
.acc-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.acc-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); text-decoration:none; font-size:.9rem; }
.acc-pill.on { background:var(--neutral); color:var(--fg); }
.acc-pill:hover { border-color:var(--fg); }
.acc-pill-ico { display:inline-flex; width:18px; height:18px; }
.acc-pill-ico svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.acc-rooms { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px; }
.acc-rooms li { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.acc-head { flex-wrap:nowrap; }
.acc-card { display:flex; flex-direction:column; }
.acc-foot { margin-top:auto; padding-top:14px; display:flex; justify-content:flex-end; }
.acc-foot button { margin:0; position:static; white-space:nowrap; }
.acc-title h3 { text-transform:none; letter-spacing:0; color:var(--fg); }
.acc-ctl .short-input { width:84px; }
.acc-ctl label.inline { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.acc-grid { grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); align-items:start; }
.cleaner-card { margin-bottom:14px; }
.cleaner-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.cleaner-actions { margin-top:14px; }
a.button.small { display:inline-flex; align-items:center; min-height:34px; padding:6px 14px; border-radius:999px; text-decoration:none; font-size:.85rem; }
.cleaner-grid .inline { flex-wrap:nowrap; }
.cleaner-grid .inline .short-input { width:90px; }
.stat-tiles { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); margin:8px 0 18px; }
.stat-tile { border:1px solid var(--line); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.stat-tile b { font-size:1.7rem; line-height:1.1; }
.stat-tile span { color:var(--ink-2); font-size:.85rem; }
.stat-tile.bad b { color:#b42318; }
.stat-list { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:4px; }
.cleaner-props { display:flex; flex-direction:column; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
@media (min-width:761px) { /* the menu stays on the screen while the page scrolls */
  .menu { position:fixed; top:var(--bar-h); left:0; width:var(--menu-w); height:calc(100vh - var(--bar-h)); transition:width .18s ease; }
  .shell.collapsed .menu { width:var(--menu-w-small); }
  .shell > .page, .shell > main { grid-column:2; }
}
.cleaner-grid > label:last-child { min-width:0; } .cleaner-grid > label:last-child .inline { flex-wrap:nowrap; } .cleaner-grid select { max-width:100%; width:auto; }
.cleaner-grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }

.dir-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin:10px 0; }
.dir-photos > p, .dir-photos > label { grid-column:1/-1; }
.dir-photo { border:1px solid var(--line,#ddd); border-radius:14px; padding:8px; background:#fff; display:flex; flex-direction:column; gap:6px; }
.dir-photo img { width:100%; height:140px; object-fit:cover; border-radius:10px; display:block; }
.dir-photo input[type=text] { width:100%; margin:0; }
.dir-photo .inline { display:flex; gap:6px; flex-wrap:wrap; }
.dir-photo .inline button { padding:6px 12px; font-size:.85rem; }

.dir-tpl { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.dir-tpl legend { grid-column:1/-1; }
.tpl-opt { display:flex; flex-direction:column; gap:4px; border:1px solid var(--line,#ddd); border-radius:12px; padding:10px; cursor:pointer; background:#fff; }
.tpl-opt:has(input:checked) { border-color:var(--brand,#1f6f5c); box-shadow:0 0 0 2px var(--brand,#1f6f5c) inset; }
.tpl-opt input { position:absolute; opacity:0; } .tpl-opt:has(input:focus-visible) { outline:2px solid var(--brand,#1f6f5c); outline-offset:2px; }
.tpl-opt small { color:var(--muted,#6b7280); }
.tpl-pic { display:grid; gap:3px; height:64px; margin-bottom:4px; } .tpl-pic i { background:#cfd8d4; border-radius:3px; display:block; }
.tpl-pic.tp1 { grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; } .tpl-pic.tp1 i:first-child { grid-row:span 2; } .tpl-pic.tp1 i:nth-child(4) { grid-column:span 1; background:#a9c4bb; }
.tpl-pic.tp2 { grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; } .tpl-pic.tp2 i:first-child { grid-row:span 2; }
.tpl-pic.tp3 { grid-template-columns:1fr 1fr 1fr; grid-template-rows:2fr 1fr; } .tpl-pic.tp3 i:first-child { grid-column:span 3; background:#7d6a5a; }

.form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px 16px; align-items:end; margin-bottom:10px; }
.form-grid > label { margin:0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; font-size:.9rem; }
.form-grid > label input, .form-grid > label select { width:100%; box-sizing:border-box; margin:0; }

.score-card.score-avg { border-color:var(--brand,#1f6f5c); box-shadow:0 0 0 1px var(--brand,#1f6f5c) inset; }