/* ficklestudio26 · Time zone tools (builds on /timer/timer.css) */
.tz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-top:14px; text-align:center; }
.tz-card { background:#fff4e6; border-radius:16px; padding:14px 8px; }
.tz-card.tz-me { background:#e7f5ff; }
.tz-city { display:block; font:700 17px system-ui,sans-serif; }
.tz-time { display:block; font:800 clamp(30px,6vw,44px)/1.1 system-ui,sans-serif; font-variant-numeric:tabular-nums; color:#d9480f; margin:2px 0; }
.tz-sub, .tz-rel { display:block; font:600 14px system-ui,sans-serif; color:#5b5b66; }
.tz-big { font:800 clamp(52px,15vw,150px)/1.05 system-ui,sans-serif; font-variant-numeric:tabular-nums; color:#d9480f; display:block; }
.tz-bigsub { font:700 clamp(16px,3vw,24px) system-ui,sans-serif; display:block; }
.tz-form { display:grid; gap:12px; max-width:640px; margin:0 auto 6px; text-align:left; grid-template-columns:1fr 1fr; }
.tz-form label { display:grid; gap:4px; font:700 12px system-ui,sans-serif; color:#5b5b66; text-transform:uppercase; letter-spacing:.05em; }
.tz-form select, .tz-form input { padding:12px; border:2px solid #e8e8ec; border-radius:12px; font:600 17px system-ui,sans-serif; background:#fff; width:100%; }
.tz-form .full { grid-column:1 / -1; }
@media (max-width:560px) { .tz-form { grid-template-columns:1fr; } }
.c-out { margin:18px auto 4px; padding:18px 12px; background:#fff4e6; border-radius:16px; text-align:center; max-width:760px; }
.c-label { display:block; font:700 clamp(16px,3vw,22px) system-ui,sans-serif; color:#5b5b66; }
.c-value { display:block; font:800 clamp(44px,13vw,110px)/1.05 system-ui,sans-serif; color:#d9480f; word-break:break-word; }
.c-note { display:block; margin-top:6px; font:600 clamp(15px,2.6vw,19px) system-ui,sans-serif; color:#1d1d22; }

.wm { position:relative; max-width:1000px; margin:0 auto; line-height:0; border-radius:14px; overflow:hidden; border:1px solid #e8e8ec; }
.wm-img { width:100%; height:auto; display:block; }
.wm-ov { position:absolute; inset:0; width:100%; height:100%; }
.wm-t { font:700 8.5px system-ui,sans-serif; fill:#7a3b00; } .wm-b { font:700 9px ui-monospace,Menlo,monospace; fill:#1d1d22; }
.wm-city { cursor:pointer; } .wm-city:focus, .wm-city:hover circle:nth-child(2) { r:6; outline:none; }
@media (max-width:700px) { .wm-t, .wm-b { display:none; } }