/* servicios.css -- Ajustes > servicios de los departamentos (public/servicios.js, module servicios).
   Taken from the design file's board "Ajustes · departamento, después"; every colour from app.css's tokens. */
.ad { max-width: 980px; margin: 18px auto; padding: 0 16px; }
.ad .ad-crumb { margin-bottom: 4px; }
.ad-h1 { margin: 0 0 6px; }
.ad-card { background: var(--card); border: 1px solid var(--hairline); padding: 14px 18px; margin: 0 0 16px; }
.ad-ch { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; margin: 0 0 6px; }
.ad-k { font: 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0; }
.ad-q { font: 600 18px var(--sans); margin: 0 0 6px; }
.ad-help { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.ad-help.ad-after { margin: 8px 0 0; }
.ad-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-t th, .ad-t td { padding: 5px 6px; border-bottom: 1px solid var(--field-focus); text-align: left; vertical-align: middle; }
.ad-t th { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ad-t .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.ad-t tr.is-old td { color: var(--faint); }
.ad-t tr.is-new td { background: var(--field-focus); }
.ad-muted { color: var(--muted); }
.ad-in { width: 64px; padding: 4px 6px; font: 13px var(--mono); text-align: right; border: 1px solid var(--rule); }
.ad-text { width: 100%; max-width: 360px; padding: 4px 6px; font: 13px var(--sans); border: 1px solid var(--rule); box-sizing: border-box; }
.ad-text.ad-short { max-width: 200px; margin-left: 6px; }
.ad-sel { padding: 3px 4px; font: 13px var(--sans); border: 1px solid var(--rule); background: var(--card); max-width: 220px; }
.ad-time, .ad-date { padding: 3px 4px; font: 13px var(--mono); border: 1px solid var(--rule); }
.ad-seg { display: inline-flex; border: 1px solid var(--rule); flex-wrap: wrap; }
.ad-seg button { border: 0; border-left: 1px solid var(--rule); background: var(--card); padding: 3px 9px; font: 600 11px var(--mono); cursor: pointer; min-height: 26px; white-space: nowrap; color: var(--ink); }
.ad-seg button:first-child { border-left: 0; }
.ad-seg button.is-on { background: var(--ink); color: var(--card); }
.ad-seg button:disabled { cursor: default; }
.ad-sub { display: block; font-size: 11px; color: var(--muted); }
.ad-sub.ad-inl { display: inline; margin-left: 8px; }
.ad-link { border: 0; background: none; color: var(--link); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }
.ad-b { border: 1px solid var(--rule); background: var(--card); padding: 2px 8px; font: 600 12px var(--mono); cursor: pointer; min-width: 28px; min-height: 26px; }
.ad-n { display: inline-block; min-width: 22px; text-align: center; font-family: var(--mono); }
.ad-step { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ad-tabs { display: flex; gap: 0; margin: 0 0 14px; flex-wrap: wrap; }
.ad-tabs button { border: 1px solid var(--hairline); background: var(--card); padding: 6px 14px; font: 600 13px var(--sans); cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--ink); }
.ad-tabs button + button { border-left: 0; }
.ad-tabs button.is-on { background: var(--ink); color: var(--card); }
.ad-dot { display: inline-block; width: 10px; height: 10px; background: var(--faint); }
.ad-leg { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.lk { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; }
.lk.is-fijo { border-color: var(--office); color: var(--office); }
.lk.is-fecha { border-color: var(--remote); color: var(--remote); }
.ad-fixed { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rule); background: var(--field-focus); padding: 10px 14px; flex-wrap: wrap; }
.ad-fixed b { font: 600 15px var(--sans); }
.ad-fixed .ad-sub { font-size: 13px; }
.ad-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ad-opt { text-align: left; border: 1px solid var(--rule); background: var(--card); padding: 10px 12px; cursor: pointer; font: inherit; color: var(--ink); }
.ad-opt:hover { border-color: var(--ink); }
.ad-opt b { display: block; font: 600 14px var(--sans); margin-bottom: 2px; }
.sv { border: 1px solid var(--rule); background: var(--card); margin: 6px 0; }
.sv-h { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; text-align: left; flex-wrap: wrap; }
.sv-h b { font: 600 14px var(--sans); }
.sv-h .sv-s { font-size: 12px; color: var(--muted); flex: 1; }
.sv-h .sv-a { font: 600 12px var(--mono); color: var(--muted); }
.sv-b { padding: 0 10px 8px; border-top: 1px solid var(--field-focus); }
.sv-day { margin: 8px 0 4px; }
.sv-dh { margin: 10px 0 2px; font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; }
.ad-row { display: grid; grid-template-columns: 200px 1fr; gap: 6px 14px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--field-focus); }
.ad-row > span:first-child { color: var(--muted); }
.ad-more { margin: 8px 0 0; }
.ad-acts { display: flex; gap: 14px; align-items: center; margin: 10px 0 0; flex-wrap: wrap; }
.ad-arch { margin: 10px 0 0; font-size: 13px; }
.ad-arch summary { cursor: pointer; color: var(--muted); }
.ad-arch-r { display: flex; gap: 12px; padding: 4px 0; }
@media (max-width: 900px) {
  .ad-row { grid-template-columns: 1fr; }
}

/* Departamentos > calendario de servicios -- from the design file's board "Plan de departamento ·
   Bizieskola" (step Sesiones): year grid, day cells, the chosen course's panel. */
.sc { max-width: 1180px; }
.sc-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ad-door { display: inline-flex; line-height: 0; }
.ad-tabs .is-on .ad-door { color: #fff !important; }
.sc-door svg { width: 30px; height: 30px; }
.ad-h1 .cm-note, .ad-q .cm-note, .ad-k .cm-note { vertical-align: middle; font-weight: 400; }
.ad-k .cm-note { text-transform: none; letter-spacing: 0; }
.sc-per { font: 600 13px var(--mono); margin: 0 6px; }
.sc-bad { color: var(--alarm); }
.pd-note { font-size: 12px; color: var(--muted); margin: 4px 0; }
.pd-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.pd-tool { display: flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: var(--card); padding: 6px 10px; font: 600 13px var(--sans); cursor: pointer; color: var(--ink); }
.pd-tool.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pd-sw { display: inline-block; width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, .15); vertical-align: -2px; }
.sc-sw { background: var(--paul); }
.sc-sw.sc-prev { opacity: .62; }
.sc-sw.sc-4 { background: var(--panel); }
.sc-pc { outline: 2px dashed var(--juan); outline-offset: -3px; }
.pd-legend { font-size: 11px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0; }
.pd-selc { border: 1px solid var(--hairline); background: var(--card); padding: 8px 12px; margin: 6px 0 10px; }
.pd-selc-h { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.pd-selc-h span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pd-selc-h .pd-selc-tag { border: 1px solid var(--rule); padding: 1px 6px; }
.sc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; margin: 8px 0 0; }
.sc-mv { display: inline-flex; gap: 6px; align-items: center; }
.sc-form { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0 0; }
.sc-f { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.sc-f .ad-text { width: 220px; }
.sc-f .ad-text.ad-short { width: 110px; margin-left: 0; }
.yr { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px 16px; user-select: none; margin: 6px 0; }
.mo-h { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 3px; display: flex; justify-content: space-between; }
.mo-h span + span { color: var(--muted); font-weight: 400; }
.mo-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mo-wd { font: 10px var(--mono); color: var(--muted); text-align: center; }
.dy { height: 22px; border: 1px solid var(--field-focus); background: var(--card); font: 11px var(--mono); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.dy:hover { border-color: var(--ink); }
.dy.is-blank { border: 0; background: transparent; cursor: default; }
.dy.is-wk { background: var(--field-focus); color: var(--faint); cursor: default; }
.dy.is-c3 { background: var(--paul); color: var(--card); border-color: var(--paul); }
.dy.is-c4 { background: var(--panel); color: var(--card); border-color: var(--panel); }
.dy.is-prev { opacity: .62; }
.dy.is-pc { outline: 2px dashed var(--juan); outline-offset: -3px; }
.dy.has-mon::after { content: attr(data-mon); position: absolute; top: 1px; left: 2px; font-size: 8px; line-height: 1; font-weight: 700; }
.dy.is-mondiff::after { color: var(--alarm); background: var(--card); padding: 0 2px; left: 0; top: 0; }
.sv-monk { font: 700 11px var(--mono); color: var(--alarm); }
.dy.is-sel { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 1; }
/* Days without service (festivos, holidays): grey and not clickable; "según el cliente": a dashed edge. */
.dy.is-closed { background: var(--rule); border-color: var(--rule); color: var(--muted); cursor: not-allowed; }
.dy.is-maybe { border: 1px dashed var(--juan); }
.dy.is-clash { box-shadow: inset 0 0 0 2px var(--alarm); }
.pd-sw.sc-closed { background: var(--rule); border-color: var(--rule); }
.pd-sw.sc-maybe { background: var(--card); border: 1px dashed var(--juan); }
/* Dragging a course (whole), or one day of it after a double-click (inside). */
.dy.is-grab { cursor: grab; touch-action: none; }
.sc.is-dragging, .sc.is-dragging .dy { cursor: grabbing; }
.dy.is-fade { opacity: .3; }
.dy.is-in { outline: 2px dashed var(--ink); outline-offset: 1px; z-index: 1; }
.dy.is-drop { outline: 2px solid var(--remote); outline-offset: 1px; z-index: 2; }
.dy.is-drop-bad { outline: 2px solid var(--alarm); outline-offset: 1px; z-index: 2; }
.sc-inside { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; margin: 8px 0 0; padding: 6px 8px; background: var(--field-focus); }
.sc-inside .st-btn { margin-left: auto; }
.pd-note.sc-warn { color: var(--body); }
.sc-closed-ed { margin: 12px 0; }
.sc-closed-ed .ad-text { width: 240px; margin-left: 0; }
.sc-chk { font-size: 12px; white-space: nowrap; }
.pd-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.pd-sum div { border: 1px solid var(--rule); background: var(--card); padding: 6px 8px; }
.pd-sum b { display: block; font: 600 16px var(--mono); text-align: right; }
.pd-sum span { font-size: 11px; color: var(--muted); }
@media (max-width: 900px) {
  .pd-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cierre > Facturas · <department>: the month's services (renderServiciosFacturar). */
.sf { margin: 6px 0 16px; padding: 10px 12px; border: 1px solid var(--rule); background: var(--card); }
.sf:empty { display: none; }   /* no services in the month: no empty frame over the drafts (Paul, 2026-11-03) */
.sf-h { font: 600 15px var(--sans); margin: 0 0 6px; }
.sf-sum { max-width: 620px; }
.sf-c { border-top: 1px solid var(--rule); padding: 10px 0 4px; margin-top: 10px; }
.sf-bad { color: var(--alarm); font-size: 13px; margin: 4px 0; }
.sf-m { font: 12px var(--mono); }
.sf-tot td { font-weight: 600; border-bottom: 0; }
.sc-rent { margin: 14px 0; }

/* Departamentos > servicios (Paul, 2026-11-04; design file «Antolaketa · Servicios»). */
.fl.sv { --fl-w: 240px; grid-template-columns: var(--fl-w) 0 minmax(0, 1fr); }
.sv-grip { pointer-events: none; }
.sv-main { background: var(--paper); display: flex; flex-direction: column; min-height: 0; }
.sv .fl-sname.sv-dep { display: flex; align-items: center; gap: 6px; }
.sv .sv-plus { margin-left: auto; flex: none; }
.sv-bar { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border-bottom: 1px solid var(--hairline); padding: 8px 18px; flex: none; flex-wrap: wrap; }
.sv-title { font: 700 19px var(--serif, Georgia, serif); display: inline-flex; align-items: center; gap: 6px; }
.per-gr { display: flex; align-items: center; gap: 4px; }
.per-gr button { font: 700 11px var(--mono); padding: 6px 12px; border: 1px solid var(--rule); background: var(--card); color: var(--muted); cursor: pointer; }
.per-gr button.on { border-color: var(--ink); background: var(--ink); color: var(--card); }
.per-nav { display: flex; align-items: center; gap: 12px; }
.per-nav button { border: 0; background: none; padding: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); }
.per-nav span { font: 700 13px var(--mono); min-width: 100px; text-align: center; }
.sv-fil { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--sans); border: 1px solid var(--ink); background: var(--card); padding: 3px 4px 3px 9px; border-radius: 12px; }
.sv-fil button { border: 0; background: none; padding: 0 4px; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; }
.sv-np { margin-left: auto; font: 600 13px var(--sans); background: var(--ink); color: var(--card); border: 1px solid var(--ink); padding: 8px 18px; cursor: pointer; }
.sv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; flex: 1 1 auto; min-height: 0; }
.sv-ctr { padding: 10px 16px 24px; overflow-y: auto; min-height: 0; min-width: 0; }
.sv-rb { background: var(--card); border-left: 1px solid var(--hairline); padding: 10px 14px 24px; overflow-y: auto; min-height: 0; min-width: 0; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0 0 6px; }
.sv-chips .ad-k { margin-right: 4px; }
.sv-chip { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--sans); border: 1px solid var(--rule); background: var(--card); padding: 3px 9px; border-radius: 12px; color: var(--ink); cursor: pointer; }
.sv-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink); }
.sv-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--card); }
.sv-hint { font: 12px var(--mono); color: var(--muted); }
.sv-msg { margin: 2px 0 4px; min-height: 18px; }
.sv-yr { user-select: none; margin: 8px 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-yr.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-yr.g3 .dy { height: 44px; }
.sv-yr.g1 { grid-template-columns: minmax(0, 1fr); }
.sv-yr.g1 .dy { height: 72px; font-size: 14px; }
.dy.is-free { box-shadow: inset 0 0 0 1px var(--ink); }
.dy.is-free:hover { background: var(--field-focus); }
.sv-kh { display: flex; align-items: center; margin: 0 0 6px; }
.sv-kh .ad-k { margin: 0; }
.sv-acc { border-bottom: 1px solid var(--rule); }
.sv-acch { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 8px 2px; font: 600 14px var(--sans); text-align: left; color: var(--ink); cursor: pointer; }
.sv-acc-plus { flex: none; }
.sv-tpl { cursor: pointer; padding-left: 14px; }
.sv-car { font: 11px var(--mono); color: var(--muted); flex: none; width: 10px; }
.sv-tplb { margin: 0 8px 6px 26px; padding: 4px 0 4px 8px; border-left: 1px solid var(--rule); font-size: 11px; color: var(--body); }
.sv-tpld { font: 600 11px var(--sans); margin: 4px 0 1px; color: var(--ink); }
.sv-tplr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding: 1px 0; }
.sv-tplb .ad-link { font-size: 11px; margin-top: 4px; }
.sv-occt { min-width: 0; }
.sv-draft { background: var(--surface-2); border: 1px solid var(--ink); padding: 6px 8px 4px; margin: 0 0 8px; }
.sv-draft > .cb { margin: 0 0 4px; }
.sv-drafth { display: flex; align-items: center; gap: 8px; font: 600 14px var(--sans); margin: 0 0 6px; }
.sv-drafth i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink); }
.sv-drafth .x { margin-left: auto; flex: none; }
.sv-acc-plus.is-on { outline: 2px solid var(--ink); outline-offset: 1px; }
.sv-acch i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink); }
.sv-acch em { margin-left: auto; font: 400 11px var(--mono); color: var(--muted); white-space: nowrap; }
.sv-accb { padding: 0 2px 10px; }
.sv-card { border: 1px solid var(--ink); background: var(--card); margin-bottom: 8px; }
.sv-cardh { padding: 9px 10px; font-size: 15px; position: sticky; top: -10px; z-index: 2; background: var(--card); }
.sv-cardb { padding: 0 10px; border-top: 1px solid var(--rule); }
.sv-cardb .sv-acc:last-child { border-bottom: 0; }
.sv-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0 0 6px; }
.sv-tbl th { font: 600 10px var(--mono); text-transform: uppercase; color: var(--muted); text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--ink); }
.sv-tbl td { padding: 3px 4px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
.sv-tbl .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.sv-tbl .nw { white-space: nowrap; }
.sv-tbl tr.grp td { background: var(--surface-2); font: 600 12px var(--sans); border-top: 1px solid var(--ink); padding: 5px 4px; }
.sv-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.sv-fact b { color: var(--ink); text-align: right; font: 600 12px var(--mono); }
.sv-mns { margin-top: 6px; }
.sv-mn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 2px 0; font-size: 11px; color: var(--muted); }
.sv-mn b { font: 500 11px var(--mono); color: var(--ink); text-align: right; white-space: nowrap; }
.sv-mn.hd { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 5px; font: 600 12px var(--sans); color: var(--ink); }
.sv-mn.hd b { font: 600 13px var(--mono); }
.sv .cb { position: relative; display: flex; }
.sv .cb input { flex: 1; min-width: 0; font: 13px var(--sans); padding: 5px 6px; border: 1px solid var(--rule); border-right: 0; background: var(--card); color: var(--ink); }
.sv .cb > button { width: 22px; border: 1px solid var(--rule); background: var(--card); cursor: pointer; padding: 0; color: var(--muted); font-size: 9px; }
.sv .cbl { position: absolute; top: 100%; left: 0; min-width: 240px; right: 0; max-height: 220px; overflow-y: auto; background: var(--card); border: 1px solid var(--ink); z-index: 30; }
.sv .cbl p { font: 600 10px var(--mono); text-transform: uppercase; color: var(--muted); padding: 5px 8px 2px; margin: 0; }
.sv .cbl button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 5px 8px; font: 13px var(--sans); cursor: pointer; color: var(--ink); }
.sv .cbl button:hover, .sv .cbl button.hit { background: var(--surface-2); }
.sv .cbl button.new { border-top: 1px solid var(--rule); font-weight: 600; }
.te > .cb { margin: 0 0 4px; }
.teh { display: flex; align-items: center; gap: 8px; background: var(--surface-2); padding: 2px 2px 2px 8px; margin: 0 0 6px; font-size: 12px; }
.teh .x { margin-left: auto; }
.sv-m { font: 11px var(--mono); color: var(--muted); }
.tehint { font: 600 12px var(--sans); color: var(--ink); margin: 0 0 4px; }
.sv .x { width: 20px; height: 22px; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0; font-size: 15px; }
.sv .x:hover { color: var(--ink); }
.ted { border-top: 1px solid var(--rule); }
.tedh { display: flex; align-items: center; width: 100%; background: none; border: 0; padding: 6px 2px; font: 600 12px var(--sans); text-align: left; color: var(--ink); cursor: pointer; }
.tedh em { margin-left: auto; font: 400 11px var(--mono); color: var(--muted); }
.ter { padding: 4px 0 5px; border-bottom: 1px solid var(--surface-2); }
.tr2 { display: grid; grid-template-columns: 58px 58px minmax(0, 1fr) 42px 20px; column-gap: 6px; align-items: center; margin-top: 3px; }
.tr2 .al-tsel { width: 58px; }
.tr2 .sv-step { justify-content: center; }
.trh { font: 600 9px var(--mono); text-transform: uppercase; color: var(--muted); margin: 4px 0 0; }
.trh span:nth-child(3) { text-align: center; }
.sv-step { display: inline-flex; align-items: center; gap: 5px; font: 12px var(--mono); }
.sv-step button { width: 22px; height: 22px; border: 1px solid var(--rule); background: var(--card); cursor: pointer; font: 13px var(--sans); padding: 0; color: var(--ink); }
.sv-tk { display: flex; justify-content: center; }
.sv-tk input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.sv-ch { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin-top: 2px; }
.rw + .sv-ch { padding: 0 40px 4px 12px; margin-top: -2px; }
.sv-chi { width: 38px; box-sizing: border-box; font: 11px var(--mono); padding: 1px 3px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-align: right; }
.sv-add { background: none; border: 0; padding: 4px 0 6px; font: 13px var(--sans); color: var(--link); cursor: pointer; text-decoration: underline; }
.te-more { display: grid; gap: 6px; }
.te-more .ad-text, .te-more .ad-sel { width: 100%; box-sizing: border-box; margin: 0; }
.tef { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 8px; }
.tef .ad-link { font-size: 12px; }
/* the template, step by step */
.sv-wizp { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sv-back { background: none; border: 0; padding: 0; font: 13px var(--sans); color: var(--link); cursor: pointer; }
.wz { display: grid; grid-template-columns: 180px minmax(0, 1fr) 280px; gap: 22px; padding: 14px 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wz-s { list-style: none; margin: 0; padding: 0; }
.wz-step { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--rule); background: none; color: var(--muted); font: 14px var(--sans); text-align: left; cursor: default; }
.wz-step.go { cursor: pointer; color: var(--ink); }
.wz-step b { width: 20px; height: 20px; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 600 11px var(--mono); flex: none; background: var(--card); color: var(--ink); }
.wz-step.on { color: var(--ink); font-weight: 600; }
.wz-step.on b { background: var(--ink); color: var(--card); }
.wz-c { min-width: 0; }
.wz-q { font: 600 17px var(--sans); margin: 0 0 10px; }
.wz-f { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px; }
.sv-fr { display: flex; gap: 8px; }
.sv-cards { display: grid; gap: 8px; max-width: 680px; }
.sv-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; background: var(--card); border: 1px solid var(--ink); box-shadow: inset 3px 0 0 transparent; font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow .12s ease; }
@media (hover: hover) { .sv-opt:hover { box-shadow: inset 3px 0 0 var(--ink); } }
.sv-opt:active { box-shadow: inset 9px 0 0 var(--ink); }
.sv-opt.on { box-shadow: inset 3px 0 0 var(--ink); }
.sv-opt.on.p1 { animation: sv-dipa .32s ease-out; }
.sv-opt.on.p2 { animation: sv-dipb .32s ease-out; }
@keyframes sv-dipa { 0% { box-shadow: inset 0 0 0 var(--ink); } 45% { box-shadow: inset 9px 0 0 var(--ink); } 100% { box-shadow: inset 3px 0 0 var(--ink); } }
@keyframes sv-dipb { 0% { box-shadow: inset 0 0 0 var(--ink); } 45% { box-shadow: inset 9px 0 0 var(--ink); } 100% { box-shadow: inset 3px 0 0 var(--ink); } }
.sv-opt b { font: 600 15px var(--sans); display: flex; align-items: center; gap: 8px; }
.sv-opt span { font-size: 12px; color: var(--muted); }
.sv-big { font: 600 18px var(--sans); width: 100%; max-width: 520px; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); }
.sv-fbtn { font: 13px var(--sans); background: var(--surface-2); border: 1px solid var(--rule); padding: 7px 14px; cursor: pointer; color: var(--ink); }
.sv-pbtn { font: 600 13px var(--sans); background: var(--ink); color: var(--card); border: 1px solid var(--ink); padding: 8px 18px; cursor: pointer; }
.sv-week { display: flex; gap: 4px; margin: 10px 0 0; }
.sv-week button { width: 30px; height: 30px; border: 1px solid var(--rule); background: var(--card); font: 600 12px var(--mono); cursor: pointer; }
.sv-week button.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.sv-pr { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.sv-pr label { font: 600 13px var(--sans); }
.sv-price { font: 600 14px var(--mono); width: 84px; padding: 5px 7px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); text-align: right; }
.sv-pwarnbox { display: inline-flex; gap: 8px; align-items: center; }
.sv-pwarn { font: 600 12px var(--sans); color: var(--alarm); }
.dcard { background: var(--card); border: 1px solid var(--ink); margin: 0 0 4px; }
.dh { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--rule); }
.dh b { font: 600 14px var(--sans); }
.dh input { font: 13px var(--sans); padding: 3px 6px; border: 1px solid var(--rule); width: 130px; background: var(--card); color: var(--ink); }
.dh .tt { margin-left: auto; font: 11px var(--mono); color: var(--muted); }
.rw, .rh { display: grid; grid-template-columns: minmax(120px, 1fr) 66px 66px 36px 78px 44px 44px 20px; column-gap: 8px; align-items: center; padding: 4px 12px; }
.rw.hm, .rh.hm { grid-template-columns: minmax(120px, 1fr) 110px 78px 10px 44px 20px; }
.rh { font: 600 10px var(--mono); text-transform: uppercase; color: var(--muted); padding-top: 6px; padding-bottom: 0; }
.rh .n { text-align: right; }
.rw .h { font: 12px var(--mono); text-align: right; }
.rw .al-tsel { width: 66px; }
.sv-hw { width: 100%; box-sizing: border-box; font: 13px var(--mono); padding: 4px 6px; border: 1px solid var(--ink); text-align: right; }
.sv-addw { padding: 6px 12px 8px; }
.sv-addd { display: block; width: 100%; text-align: left; background: none; border: 1px dashed var(--ink); padding: 8px 12px; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; margin-top: 4px; }
.sv-rev { background: var(--card); border: 1px solid var(--ink); padding: 8px 12px; }
.wz-side h4 { font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; font-weight: 400; }
.totc { background: var(--card); border: 1px solid var(--ink); padding: 8px 12px; margin: 0 0 14px; }
.totc > div:not(.sv-mns) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--muted); }
.totc > div:not(.sv-mns) b { font: 600 14px var(--mono); color: var(--ink); }
.oths { background: var(--card); border: 1px solid var(--rule); }
.oth { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); padding: 7px 10px; cursor: pointer; color: var(--ink); font: 12px var(--sans); }
.oth:first-child { border-top: 0; }
.oth:hover { background: var(--surface-2); }
.otl { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; }
.otl i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink); }
.otl b { font: 600 13px var(--sans); }
.otl em { margin-left: auto; font: 400 11px var(--mono); color: var(--muted); }
.otr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 1px 0 1px 14px; font-size: 11px; color: var(--muted); }
.otm { font-family: var(--mono); }
.sv-mod { position: fixed; inset: 0; background: rgba(20, 20, 19, .4); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 60; }
.sv-modb { background: var(--paper); border: 1px solid var(--ink); padding: 14px 16px; width: 420px; max-width: calc(100vw - 32px); box-sizing: border-box; }
.sv-modh { display: flex; justify-content: space-between; align-items: center; }
.sv-modh h3 { font: 600 15px var(--sans); margin: 0; }
.sv-modh .x { width: 22px; height: 22px; border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--muted); }
.sv-lab { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.sv-lab .sv-big { display: block; font: 14px var(--sans); padding: 6px 8px; margin-top: 3px; max-width: none; }
.sv-lab .sv-cards { margin-top: 4px; }
.sv-modr { display: flex; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 900px) {
  .fl.sv { grid-template-columns: minmax(0, 1fr); }
  .sv-cols, .wz { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .sv-rb { border-left: 0; border-top: 1px solid var(--hairline); }
  .rw, .rh { grid-template-columns: minmax(100px, 1fr) 60px 60px 30px 72px 34px 34px 18px; column-gap: 4px; padding: 4px 6px; }
}