.tz-head .grow{flex-basis:140px}
.tz-ctrl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.tz-daterow{display:flex;gap:6px;align-items:center}
.tz-daterow .input{flex:1;min-width:0}
.tz-daterow .btn{flex:none;min-height:46px;white-space:nowrap}
.tz-step{width:40px;padding:0;font-size:22px;line-height:1}
.tz-note{margin:8px 0 0;color:var(--warn)}
@media (max-width:620px){.tz-ctrl{grid-template-columns:1fr}}

.tz-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overscroll-behavior-x:contain}
.tz-grid{--nw:118px;--cw:34px;--n:24;position:relative;min-width:calc(var(--nw) + var(--n) * var(--cw));font-variant-numeric:tabular-nums}
@media (min-width:700px){.tz-grid{--nw:150px;--cw:26px}}
.tz-rows{position:relative}
.tz-row{display:grid;grid-template-columns:var(--nw) repeat(var(--n),minmax(var(--cw),1fr));border-bottom:1px solid var(--border)}
.tz-name{position:sticky;left:0;z-index:3;background:var(--surface);padding:6px 8px 6px 10px;border-right:1px solid var(--border);min-width:0;display:flex;flex-direction:column;justify-content:center;box-shadow:4px 0 6px -4px rgba(0,0,0,.18)}
.tz-name b{font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-name small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.tz-home{color:var(--brand);margin-right:3px}
.tz-row.base .tz-name{background:var(--brand-soft)}
.tz-row.base .tz-name b{color:var(--brand)}
.tz-dst{display:inline-block;padding:0 4px;border-radius:4px;background:var(--warn);color:#fff;font-weight:700;font-size:10px;line-height:15px;vertical-align:1px}
.tz-c{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-left:1px solid rgba(127,127,127,.12);user-select:none;-webkit-user-select:none;line-height:1.1}
.tz-c b{font-size:14px;font-weight:700}
.tz-c.frac b{font-size:11px;letter-spacing:-.03em}
.tz-c small{font-size:9.5px;color:var(--muted);white-space:nowrap}
.tz-c.work{background:color-mix(in srgb,var(--good) 20%,var(--surface))}
.tz-c.edge{background:var(--surface)}
.tz-c.night{background:color-mix(in srgb,#2b3550 22%,var(--surface-2));color:var(--muted)}
.tz-c.day{border-left:2px solid var(--brand);background:color-mix(in srgb,var(--brand) 14%,var(--surface))}
.tz-c.day b{font-size:11px;color:var(--brand);letter-spacing:-.03em}
.tz-c.day small{color:var(--brand)}
.tz-c.on b{color:var(--text)}
.tz-c:hover{filter:brightness(.95)}
.tz-ov{position:absolute;top:0;bottom:0;left:var(--nw);right:0;pointer-events:none;overflow:hidden;z-index:2}
.tz-band{position:absolute;top:0;bottom:0;border:2px solid var(--brand);border-radius:6px;background:color-mix(in srgb,var(--brand) 12%,transparent);transition:left .12s}
.tz-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--bad);opacity:.75}
.tz-slrow{border-bottom:0}
.tz-slrow .tz-name{font-size:12px;font-weight:600;color:var(--muted)}
.tz-slwrap{grid-column:2/-1;display:flex;align-items:center;padding:0 2px;min-height:44px}
.tz-slwrap input{width:100%;margin:0;accent-color:var(--brand);height:32px}
.tz-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.tz-legend span{display:inline-flex;align-items:center;gap:5px}
.tz-sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--border)}
.tz-sw.work{background:color-mix(in srgb,var(--good) 20%,var(--surface))}
.tz-sw.edge{background:var(--surface)}
.tz-sw.night{background:color-mix(in srgb,#2b3550 22%,var(--surface-2))}
.tz-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}

.tz-sum{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tz-si{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 12px;padding:10px 8px 10px 14px;border-radius:var(--radius-sm);background:var(--surface-2)}
.tz-si.base{background:var(--brand-soft)}
.tz-sn{min-width:0}
.tz-sn b{display:block;font-size:16px;line-height:1.3}
.tz-sn small,.tz-st small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
.tz-st{text-align:right;white-space:nowrap}
.tz-st b{font-size:20px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tz-st small.next{color:var(--brand)}
.tz-st small.prev{color:var(--warn)}
.tz-zone{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700}
.tz-zone.work{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.tz-zone.edge{background:var(--surface);color:var(--muted)}
.tz-zone.night{background:color-mix(in srgb,#2b3550 30%,transparent);color:var(--muted)}
.tz-act{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.tz-act .btn-sm{min-height:34px;white-space:nowrap}
.tz-del{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--faint);font-size:20px;cursor:pointer;line-height:1}
.tz-del:hover{background:var(--surface);color:var(--bad)}
.tz-share .btn{flex:1 1 140px}
@media (max-width:520px){
  .tz-si{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n t" "a t";padding-left:12px;align-items:start}
  .tz-sn{grid-area:n}.tz-st{grid-area:t;align-self:center}
  .tz-act{grid-area:a;justify-content:flex-start;margin-left:-6px}
  .tz-act:empty{display:none}
}