/*
 * Micro-UI styles. Patterns adapted from React Bits "Micro" components (https://reactbits.dev/c/micro),
 * MIT + Commons Clause, (c) David Haz. Re-implemented for this site with its own tokens.
 */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --pop-bg:var(--bg);
  --pop-shadow:0 1px 2px rgba(17,26,12,.10), 0 14px 32px -12px rgba(17,26,12,.35);
}
.gs-native{ position:absolute !important; left:0; width:1px !important; height:1px !important; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; opacity:0; pointer-events:none; }

/* Buttons: press, arrow nudge, loader */
.btn{ transition:transform .16s var(--ease-out), background .15s ease, color .15s ease, box-shadow .2s ease; position:relative; }
.btn:active{ transform:scale(.97); }
.btn .icon{ transition:transform .25s var(--spring); }
.btn:hover .icon{ transform:translateX(3px); }
.btn-accent:focus-visible{ outline-offset:3px; }
.btn .btn-label{ display:inline-flex; align-items:center; gap:8px; transition:opacity .18s ease, filter .18s ease; }
.btn .ll{ position:absolute; inset:0; margin:auto; opacity:0; transition:opacity .18s ease; }
.btn.is-busy{ pointer-events:none; }
.btn.is-busy .btn-label{ opacity:0; filter:blur(2px); }
.btn.is-busy .ll{ opacity:1; }

/* Lattice loader */
.ll{ display:grid; grid-template-columns:repeat(3,5px); gap:2px; width:19px; height:19px; }
.ll i{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.18; animation:ll-on 1.15s cubic-bezier(.77,0,.175,1) infinite; }
.ll i.hole{ animation:none; opacity:.08; }
@keyframes ll-on{ 0%,100%{ opacity:.18; } 16%,40%{ opacity:1; } 62%{ opacity:.18; } }

/* Glide select */
.gs{ position:relative; }
.gs-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; font:inherit; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid color-mix(in srgb, var(--ink) 38%, var(--line)); border-radius:var(--radius); padding:12px 14px; cursor:pointer; transition:border-color .15s ease, transform .16s var(--ease-out); }
.gs-trigger:active{ transform:scale(.99); }
.gs-trigger:hover{ border-color:var(--ink-soft); }
.gs-trigger:focus-visible, .gs.is-open .gs-trigger{ border-color:var(--accent); }
.gs-trigger.is-placeholder .gs-value{ color:var(--ink-faint); }
.gs-caret{ display:flex; color:var(--ink-soft); transition:transform .28s var(--spring); }
.gs-caret svg{ width:16px; height:16px; }
.gs.is-open .gs-caret{ transform:rotate(180deg); }
.gs-menu{ position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px); min-width:max-content; max-height:min(320px,60vh); overflow:auto; padding:6px; background:var(--pop-bg); border:1px solid var(--line); border-radius:calc(var(--radius) + 3px); box-shadow:var(--pop-shadow); transform-origin:top center; opacity:0; transform:scale(.95) translateY(-4px); transition:opacity .13s ease, transform .16s var(--ease-out); }
.gs-menu.is-up{ top:auto; bottom:calc(100% + 6px); transform-origin:bottom center; transform:scale(.95) translateY(4px); }
.gs.is-shown .gs-menu{ opacity:1; transform:none; }
.gs-pill{ position:absolute; left:6px; right:6px; top:0; border-radius:var(--radius); background:var(--accent-tint); opacity:0; pointer-events:none; transition:transform .2s var(--ease-out), height .2s var(--ease-out), opacity .12s ease; }
.gs-opt{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 12px; font-size:15px; color:var(--ink); border-radius:var(--radius); cursor:pointer; user-select:none; }
.gs-opt[aria-selected="true"]{ font-weight:600; }
.gs-tick{ display:flex; color:var(--accent-deep); opacity:0; transform:scale(.5); transition:opacity .15s ease, transform .25s var(--spring); }
.gs-tick svg{ width:15px; height:15px; }
.gs-opt[aria-selected="true"] .gs-tick{ opacity:1; transform:none; }
.field.invalid .gs-trigger{ border-color:var(--danger); }

/* Rubber segment */
.seg{ position:relative; display:inline-flex; padding:3px; background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 2px); }
.seg-thumb{ position:absolute; top:3px; bottom:3px; left:0; width:0; background:var(--accent); border-radius:var(--radius); box-shadow:0 1px 2px rgba(17,26,12,.25); pointer-events:none; }
.seg-btn{ position:relative; z-index:1; font:inherit; font-size:14.5px; font-weight:500; color:var(--ink-soft); background:none; border:0; padding:9px 16px; border-radius:var(--radius); cursor:pointer; white-space:nowrap; transition:color .2s ease, transform .16s var(--ease-out); }
.seg-btn:hover{ color:var(--ink); }
.seg-btn:active{ transform:scale(.96); }
.seg-btn[aria-checked="true"]{ color:var(--accent-on); font-weight:600; }
.seg-btn:focus-visible{ outline-offset:1px; }
.filters .field > label{ margin-bottom:0; }

/* Spring check */
.sc-wrap{ position:relative; display:inline-flex; flex-shrink:0; width:20px; height:20px; margin-top:1px; }
.sc-wrap input{ position:absolute; inset:0; width:100% !important; height:100% !important; margin:0; opacity:0; cursor:pointer; z-index:1; }
.sc{ width:20px; height:20px; border-radius:7px; border:1.5px solid color-mix(in srgb, var(--ink) 45%, var(--line)); background:var(--bg); display:grid; place-items:center; transition:background .18s ease, border-color .18s ease, transform .3s var(--spring); }
.sc svg{ width:16px; height:16px; fill:none; stroke:var(--accent-on); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.sc path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .1s ease; }
.sc-wrap:hover .sc{ border-color:var(--ink-soft); }
.sc-wrap input:checked + .sc{ background:var(--accent); border-color:var(--accent); transform:scale(1.08); animation:sc-pop .34s var(--spring); }
.sc-wrap input:checked + .sc path{ stroke-dashoffset:0; transition:stroke-dashoffset .26s var(--ease-out) .08s; }
.sc-wrap input:focus-visible + .sc{ outline:2px solid var(--accent); outline-offset:3px; }
.sc-wrap input:active + .sc{ transform:scale(.9); }
@keyframes sc-pop{ 0%{ transform:scale(.8); } 60%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
.consent:has(input:invalid.attn) .sc{ border-color:var(--danger); }

/* Jelly radio chips */
.choices{ gap:10px; }
.choice{ position:relative; gap:0; padding:9px 16px; border:1px solid color-mix(in srgb, var(--ink) 30%, var(--line)); border-radius:999px; background:var(--bg); color:var(--ink-soft); font-size:14.5px; font-weight:500; transition:transform .38s var(--spring), background .2s ease, color .2s ease, border-color .2s ease, padding .3s var(--spring); user-select:none; }
.choice input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.choice:hover{ border-color:var(--ink-soft); color:var(--ink); }
.choice:active{ transform:scale(.95); }
.choice:has(input:checked){ background:var(--accent); border-color:var(--accent); color:var(--accent-on); transform:scale(1.05); padding-inline:19px; }
.choice:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:3px; }

/* Form status mark */
.form-status.show{ display:flex; gap:12px; align-items:flex-start; animation:st-in .28s var(--ease-out); }
.form-status .sm{ flex:none; margin-top:1px; }
@keyframes st-in{ from{ opacity:0; transform:translateY(6px); } }
.sm{ overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.sm-ring{ stroke:currentColor; stroke-dasharray:1; stroke-dashoffset:0; animation:sm-ring .55s var(--ease-out); }
.sm-glyph{ stroke:currentColor; stroke-dasharray:1 2; stroke-dashoffset:1.05; animation:sm-draw .32s var(--ease-out) .22s forwards; }
.sm-ok{ color:var(--accent); } .sm-fail{ color:var(--danger); }
@keyframes sm-ring{ from{ stroke-dashoffset:1; } }
@keyframes sm-draw{ to{ stroke-dashoffset:0; } }

/* Toast */
.toasts{ position:fixed; z-index:200; left:0; right:0; bottom:20px; display:flex; flex-direction:column; align-items:center; gap:10px; padding-inline:16px; pointer-events:none; }
.toast{ pointer-events:auto; display:flex; align-items:center; gap:12px; max-width:440px; width:100%; padding:14px 12px 14px 16px; background:var(--contrast-bg); color:var(--contrast-text); border-radius:calc(var(--radius) + 3px); box-shadow:var(--pop-shadow); font-size:14.5px; line-height:1.45; opacity:0; transform:translateY(16px) scale(.96); transition:opacity .22s ease, transform .3s var(--spring); touch-action:pan-y; cursor:grab; }
.toast.is-in{ opacity:1; transform:none; }
.toast.is-drag{ transition:none; cursor:grabbing; }
.toast.is-out{ opacity:0; transition:opacity .2s ease, transform .22s ease; }
.toast .sm-ok{ color:#7BD35A; } .toast .sm-fail{ color:#E58C7A; }
.toast-msg{ flex:1; }
.toast-x{ flex:none; width:28px; height:28px; display:grid; place-items:center; border:0; background:none; color:var(--contrast-text-soft); border-radius:50%; cursor:pointer; transition:background .15s ease, color .15s ease; }
.toast-x:hover{ background:color-mix(in srgb, var(--contrast-text) 14%, transparent); color:var(--contrast-text); }
.toast-x svg{ width:14px; height:14px; }

/* Warm tooltip */
.wt{ position:fixed; z-index:300; left:0; top:0; pointer-events:none; padding:6px 10px; border-radius:9px; background:var(--contrast-bg); color:var(--contrast-text); font-size:12.5px; font-weight:500; letter-spacing:-.005em; line-height:1.25; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.14), 0 8px 22px -8px rgba(0,0,0,.45); opacity:0; transform:translate(var(--wt-x,0), var(--wt-y,0)) scale(.94); transform-origin:center bottom; transition:transform .2s var(--ease-out), opacity .12s ease; }
.wt[data-side="bottom"]{ transform-origin:center top; }
.wt.no-glide{ transition:opacity .12s ease; }
.wt.is-open{ opacity:1; transform:translate(var(--wt-x,0), var(--wt-y,0)); }
.wt-arrow{ position:absolute; left:var(--wt-arrow,50%); bottom:-3px; width:8px; height:8px; margin-left:-4px; background:inherit; transform:rotate(45deg); border-radius:1.5px; }
.wt[data-side="bottom"] .wt-arrow{ bottom:auto; top:-3px; }
[data-tip]{ cursor:default; }

/* Peek stars */
.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.star{ display:block; width:15px; height:15px; color:var(--line); transition:transform .32s var(--spring), color .15s ease; transition-delay:calc(var(--i) * 28ms); }
.star.on{ color:#C99400; }
.star svg{ display:block; width:100%; height:100%; }
.stars:hover .star, .stars:focus-visible .star{ transform:translateY(-3px) scale(1.12); }
.stars:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

@media (prefers-reduced-motion: reduce){
  .btn .icon, .gs-caret, .star, .choice, .sc, .df-cell, .df-nav, .df-trigger{ transition:none !important; animation:none !important; }
  .ll i{ animation-duration:1.6s; }
  .sm-glyph{ stroke-dashoffset:0; animation:none; }
}
.listing .price{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.nav-links a{ white-space:nowrap; }

/* Text loop (port of React Bits TextLoop): district names running along a wavy ribbon */
.areas{ overflow:hidden; }
.areas-in{ padding-bottom:0; }
.text-loop{ display:block; position:relative; width:100%; overflow:hidden; margin-top:8px; min-height:120px; }
.text-loop svg{ display:block; width:100%; height:auto; }
.text-loop .tl-ribbon{ fill:none; stroke:var(--accent); stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s ease; }
@media (min-width:881px) and (hover:hover){ .text-loop:hover .tl-ribbon{ stroke:var(--accent-deep); } }
.text-loop text{ font-family:var(--font-display); font-weight:600; fill:var(--accent-on); text-transform:uppercase; user-select:none; }
.text-loop .tl-measure{ visibility:hidden; }
.text-loop:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
.tl-plain{ display:block; padding:28px 32px; font-weight:600; }
.mega a{ white-space:normal; }

.gs-opt, .gs-pill{ border-radius:10px; }
.toast, .mc{ border-radius:16px; }
.gs-menu{ border-radius:16px; }

/* Cities ribbon: only the ribbon itself is the hover/click zone, not the empty space around it */
.text-loop{ pointer-events:none; }
.text-loop .tl-ribbon, .text-loop text{ pointer-events:visibleStroke; cursor:pointer; }
.text-loop text{ pointer-events:auto; }


/* ONE CONTROL LANGUAGE: inputs, dropdowns, segmented switches, choice chips and buttons share height, radius, border and focus */
:root{ --ctl-h:48px; --ctl-r:12px; --ctl-line:color-mix(in srgb, var(--ink) 24%, var(--line)); }
.field input:not([type=checkbox]):not([type=radio]):not([type=range]), .field select, .gs-trigger{ min-height:var(--ctl-h); border:1px solid var(--ctl-line); border-radius:var(--ctl-r); background:var(--bg); }
.field textarea{ border:1px solid var(--ctl-line); border-radius:var(--ctl-r); }
.gs-trigger{ height:var(--ctl-h); padding:0 16px; }
.gs-trigger:hover, .field input:hover, .field textarea:hover{ border-color:color-mix(in srgb, var(--ink) 45%, var(--line)); }
.gs.is-open .gs-trigger, .gs-trigger:focus-visible, .field input:focus, .field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline:none; }
.gs-menu{ border-radius:var(--ctl-r); }
.gs-opt, .gs-pill{ border-radius:8px; }
.seg{ height:var(--ctl-h); box-sizing:border-box; border:1px solid var(--ctl-line); border-radius:var(--ctl-r); background:var(--bg); padding:3px; }
.seg-thumb{ top:3px; bottom:3px; border-radius:8px; }
.seg-btn{ height:100%; padding-block:0; border-radius:8px; }
.choice{ min-height:var(--ctl-h); padding:0 18px; border:1px solid var(--ctl-line); border-radius:var(--ctl-r); }
.choice:has(input:checked){ padding-inline:18px; }
.btn{ min-height:var(--ctl-h); border-radius:var(--ctl-r); }
.form .btn, .calc-cta{ min-height:var(--ctl-h); }
.field input:not([type=checkbox]):not([type=radio]):not([type=range]), .field select{ height:var(--ctl-h); padding-block:0; padding-inline:14px; }
.choice{ height:var(--ctl-h); }

/* Form details: placeholders, checkbox, textarea in the same hand as the other controls */
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); opacity:.85; }
.field textarea{ resize:none; min-height:150px; padding:14px; line-height:1.55; }
.sc-wrap{ width:22px; height:22px; margin-top:0; }
.sc{ width:22px; height:22px; border:1px solid var(--ctl-line); border-radius:7px; background:var(--bg); }
.sc-wrap:hover .sc{ border-color:color-mix(in srgb, var(--ink) 45%, var(--line)); }
.sc svg{ width:18px; height:18px; stroke-width:2.6; }
.sc-wrap input:checked + .sc{ border-color:var(--accent); }
.sc-wrap input:focus-visible + .sc{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.consent{ align-items:center; gap:12px; }
.consent .sc-wrap{ align-self:flex-start; margin-top:1px; }

/* Phone field: country code with flag + number, one control */
.phone{ position:relative; display:flex; align-items:stretch; height:var(--ctl-h); border:1px solid var(--ctl-line); border-radius:var(--ctl-r); background:var(--bg); transition:border-color .15s ease, box-shadow .15s ease; }
.phone:hover{ border-color:color-mix(in srgb, var(--ink) 45%, var(--line)); }
.phone.is-focus, .phone.is-open{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.phone-cc{ display:flex; align-items:center; gap:8px; flex:none; padding:0 10px 0 12px; border:0; border-right:1px solid var(--ctl-line); border-radius:calc(var(--ctl-r) - 1px) 0 0 calc(var(--ctl-r) - 1px); background:color-mix(in srgb, var(--surface) 70%, transparent); color:var(--ink); font:inherit; font-size:15px; font-weight:500; cursor:pointer; transition:background .15s ease; }
.phone-cc:hover{ background:var(--surface); }
.phone-cc:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
.phone-cc img{ width:22px; height:22px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(17,26,12,.12); }
.phone-cc i{ display:flex; color:var(--ink-soft); transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.phone-cc i svg{ width:13px; height:13px; }
.phone.is-open .phone-cc i{ transform:rotate(180deg); }
.field .phone input:not([type=search]){ flex:1; min-width:0; height:100%; border:0; border-radius:0 var(--ctl-r) var(--ctl-r) 0; background:transparent; box-shadow:none; padding-inline:14px; }
.field .phone input:not([type=search]):focus, .field .phone input:not([type=search]):hover{ border:0; box-shadow:none; }
.phone-menu{ position:absolute; z-index:45; left:0; top:calc(100% + 6px); width:min(340px, calc(100vw - 40px)); background:var(--pop-bg); border:1px solid var(--line); border-radius:var(--ctl-r); box-shadow:var(--pop-shadow); overflow:hidden; animation:st-in .18s cubic-bezier(.23,1,.32,1); }
.field .phone-menu .phone-search{ display:block; width:100%; height:44px; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0 14px; font-size:15px; background:transparent; box-shadow:none; }
.field .phone-menu .phone-search:focus{ border-color:var(--line); box-shadow:none; outline:none; }
.phone-list{ max-height:260px; overflow:auto; padding:6px; }
.phone-opt{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px; font-size:15px; cursor:pointer; }
.phone-opt.is-active{ background:var(--accent-tint); }
.phone-opt[aria-selected="true"] .pn{ font-weight:600; }
.phone-opt img{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(17,26,12,.12); }
.phone-opt .pn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone-opt .pd{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.phone-none{ padding:16px; color:var(--ink-faint); font-size:14.5px; }
.field.invalid .phone{ border-color:var(--danger); }
.field .phone > input{ border:0 !important; border-radius:0 calc(var(--ctl-r) - 1px) calc(var(--ctl-r) - 1px) 0 !important; background:transparent !important; box-shadow:none !important; height:100% !important; min-height:0 !important; }

/* Date field: a trigger styled like every other field control, opening our own month-grid popover instead of the
   browser's native calendar. The real <input type=date> stays in the DOM (visually hidden, read-only) so the form
   still submits a normal date value; the popover just writes into it. */
.df{ position:relative; }
.df-native{ position:absolute !important; left:0; width:1px !important; height:1px !important; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; opacity:0; pointer-events:none; }
.df-trigger{ width:100%; height:var(--ctl-h); display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; font:inherit; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid var(--ctl-line); border-radius:var(--ctl-r); padding:0 14px; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .16s var(--ease-out); }
.df-trigger:active{ transform:scale(.99); }
.df-trigger:hover{ border-color:color-mix(in srgb, var(--ink) 45%, var(--line)); }
.df-trigger:focus-visible, .df.is-open .df-trigger{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline:none; }
.df-trigger.is-placeholder .df-value{ color:var(--ink-faint); }
.df-ic{ display:flex; flex:none; color:var(--ink-soft); }
.df-ic .icon{ width:18px; height:18px; }
.field.invalid .df-trigger{ border-color:var(--danger); }
.df-menu{ position:absolute; z-index:40; left:0; top:calc(100% + 6px); width:300px; max-width:calc(100vw - 40px); padding:16px; background:var(--pop-bg); border:1px solid var(--line); border-radius:var(--ctl-r); box-shadow:var(--pop-shadow); transform-origin:top left; opacity:0; transform:scale(.95) translateY(-4px); transition:opacity .13s ease, transform .16s var(--ease-out); }
.df-menu.is-up{ top:auto; bottom:calc(100% + 6px); transform-origin:bottom left; transform:scale(.95) translateY(4px); }
.df.is-shown .df-menu{ opacity:1; transform:none; }
/* Reset every plain <button> inside the popover: without this they keep the browser's own button chrome (a light
   ButtonFace background regardless of color scheme), invisible over the light theme by coincidence but a glaring
   light circle on dark text in dark mode. */
.df-menu button{ appearance:none; -webkit-appearance:none; background:none; border:0; margin:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.df-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.df-title{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
.df-nav{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--ink-soft); transition:background .15s ease, color .15s ease; }
.df-nav svg{ width:14px; height:14px; }
.df-nav:hover{ background:var(--accent-tint); color:var(--accent-deep); }
.df-prev svg{ transform:rotate(90deg); }
.df-next svg{ transform:rotate(-90deg); }
.df-week{ display:grid; grid-template-columns:repeat(7, 1fr); margin-bottom:2px; }
.df-week span{ display:block; text-align:center; padding-block:4px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); }
.df-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.df-cell{ aspect-ratio:1; display:grid; place-items:center; font:inherit; font-size:14px; font-weight:500; color:var(--ink); border-radius:50%; transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s var(--spring); }
.df-cell:hover:not(:disabled){ background:var(--accent-tint); }
.df-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.df-cell.is-out{ color:var(--ink-faint); }
.df-cell.is-today{ font-weight:700; color:var(--accent-deep); box-shadow:inset 0 0 0 1px var(--accent); }
.df-cell.is-selected{ background:var(--accent); color:var(--accent-on); font-weight:600; box-shadow:none; }
.df-cell:disabled{ opacity:.35; cursor:not-allowed; }
.df-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.df-foot button{ font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); padding:4px 2px; transition:color .15s ease; }
.df-foot button:hover{ color:var(--accent-deep); }
.df-clear:hover{ color:var(--danger); }
@media (max-width:400px){ .df-menu{ width:calc(100vw - 40px); } }