/* 3D Time Zone Meeting Planner (homepage + full planner page) */
.tzp-section { max-width: 1180px; margin: 0 auto; padding: 10px 20px 18px; }
.tzp-panel { padding: 24px 24px 20px; }
.tzp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tzp-head h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.02em; }
.tzp-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(46, 230, 184, .45); padding: 4px 10px; border-radius: 999px; }
.tzp-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: tzp-blink 1.6s ease-in-out infinite; }
@keyframes tzp-blink { 50% { opacity: .3; } }
.tzp-head .tzp-sp { flex: 1; }
.tzp-head .btn { padding: 9px 14px; font-size: .88rem; }
.tzp-credit { font-size: .75rem; color: var(--text-muted); margin: 12px 0 0; }
.tzp-credit a { text-decoration: underline; }

.tzp-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "globe main" "globe main"; gap: 12px 22px; }
.tzp-globe { grid-area: globe; } .tzp-main { grid-area: main; min-width: 0; }
@media (max-width: 960px) { .tzp-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "globe" "main"; gap: 14px; } }


/* Globe */
.tzp-globe { position: relative; text-align: center; border-radius: 22px; padding: 4px 0 8px; background: radial-gradient(circle at 50% 44%, rgba(43, 98, 255, .22), transparent 66%); }
.tzp-canvas { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; display: block; margin: 0 auto; cursor: grab; touch-action: none; }
.tzp-ghint { font-size: .74rem; color: var(--text-muted); }
@media (max-width: 620px) { .tzp-canvas { max-width: 230px; } }

/* Toolbar */
.tzp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.tzp-add { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px 6px 2px 14px; border-radius: 14px; background: var(--input-bg); border: 1px solid var(--border); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); }
.tzp-add:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(122, 162, 255, .25); }
.tzp-add .tzp-input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 10px 0 !important; }
.tzp-dd { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 320px; overflow-y: auto; padding: 6px; }
.tzp-days { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tzp-days::-webkit-scrollbar { display: none; }
.tzp-days button {
  flex: 0 0 auto; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); border-radius: 11px; padding: 6px 9px; cursor: pointer;
  font: 700 .78rem/1.15 inherit; font-family: inherit; text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); transition: transform .15s;
}
.tzp-days button small { display: block; font-weight: 600; color: var(--text-muted); font-size: .66rem; }
.tzp-days button:hover { transform: translateY(-2px); }
.tzp-days button.on { background: var(--btn-bg); color: #fff; box-shadow: 0 4px 0 var(--btn-edge); border-color: transparent; }
.tzp-days button.on small { color: #dfe7ff; }
.tzp-tbtns { display: flex; gap: 8px; }
.tzp-tbtns .btn { padding: 8px 12px; font-size: .84rem; white-space: nowrap; }

/* Board */
.tzp-board { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 8px; }
.tzp-infos { display: flex; flex-direction: column; gap: 10px; }
.tzp-ci {
  position: relative; height: 72px; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); min-width: 0;
  transform: perspective(900px) rotateY(6deg); transform-origin: right center;
}
.tzp-ci.home { border-color: rgba(122, 162, 255, .6); box-shadow: 0 0 0 1px rgba(122, 162, 255, .25), var(--glass-shadow); }
.tzp-ci.tzp-new { animation: tzp-in .6s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes tzp-in { from { opacity: 0; transform: perspective(900px) rotateY(6deg) translateX(-24px) scale(.9); } }
.tzp-flag { font-size: 1.55rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); flex: 0 0 auto; }
.tzp-cmain { min-width: 0; flex: 1; }
.tzp-cname { font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tzp-cname i { font-style: normal; font-size: .6rem; font-weight: 800; padding: 2px 5px; border-radius: 5px; background: rgba(255, 255, 255, .12); color: var(--text-muted); vertical-align: 2px; }
:root[data-theme="light"] .tzp-cname i { background: rgba(40, 60, 140, .08); }
.tzp-ctime { font-size: 1.32rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tzp-ctime sup { font-size: .62rem; color: var(--text-muted); margin-left: 1px; }
.tzp-csub { font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tzp-sky { font-size: 1.15rem; flex: 0 0 auto; }
.tzp-acts { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .2s; }
.tzp-ci:hover .tzp-acts, .tzp-ci:focus-within .tzp-acts { opacity: 1; }
@media (hover: none) { .tzp-acts { opacity: 0; pointer-events: none; } .tzp-ci:focus-within .tzp-acts { opacity: 1; pointer-events: auto; } .tzp-ci:focus { outline: 2px solid var(--brand); outline-offset: 2px; } }
.tzp-acts button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--glass-border); background: var(--surface); color: var(--text-muted); font-size: .72rem; cursor: pointer; padding: 0; line-height: 1; }
.tzp-acts button:hover { color: var(--text); border-color: var(--glass-hi); }

.tzp-scroll { overflow-x: auto; overflow-y: visible; padding: 0 4px 34px; margin-bottom: -26px; scrollbar-width: thin; }
.tzp-ribs { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 520px; outline: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.tzp-ribs:focus-visible .tzp-beam { box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(122, 162, 255, .7); }
.tzp-rib {
  height: 72px; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; padding: 0 6px;
  border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.tzp-h {
  height: 48px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-weight: 800; font-size: .76rem; line-height: 1; position: relative; min-width: 0; overflow: hidden;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.tzp-h small { font-size: .56rem; font-weight: 700; opacity: .75; margin-top: 2px; }
.tzp-h .tzp-day { margin: 0 0 2px; font-size: .5rem; opacity: 1; letter-spacing: .04em; }
.tzp-h.n { background: linear-gradient(180deg, #1d2858, #121a3f); color: #b7c2e6; }
.tzp-h.m { background: linear-gradient(180deg, #4a6ed0, #3557b3); color: #fff; }
.tzp-h.d { background: linear-gradient(180deg, #ffeaa6, #f6d26f); color: #3d3000; }
.tzp-h.e { background: linear-gradient(180deg, #7a5cc9, #5c42ad); color: #fff; }
:root[data-theme="light"] .tzp-h.n { background: linear-gradient(180deg, #3a4a86, #2a376d); color: #e7ecff; }
:root[data-theme="light"] .tzp-h { box-shadow: 0 4px 0 rgba(40, 60, 140, .25), inset 0 1px 0 rgba(255, 255, 255, .35); }
.tzp-h.mid { outline: 2px dashed rgba(255, 255, 255, .55); outline-offset: -3px; }
.tzp-h.best { box-shadow: 0 0 0 2px #2ee6b8, 0 0 14px rgba(46, 230, 184, .55), 0 4px 0 rgba(0, 0, 0, .35); }
.tzp-h.sel { transform: translateY(-5px) scale(1.06); z-index: 2; }
.tzp-flash .tzp-h.best { animation: tzp-glow 1.2s ease-out 2; }
@keyframes tzp-glow { 0% { box-shadow: 0 0 0 2px #2ee6b8, 0 0 0 rgba(46, 230, 184, .9); } 50% { box-shadow: 0 0 0 3px #2ee6b8, 0 0 26px rgba(46, 230, 184, .95); } }

.tzp-beam {
  position: absolute; top: -8px; bottom: -8px; border-radius: 12px; z-index: 3; cursor: ew-resize; touch-action: none;
  background: linear-gradient(180deg, rgba(122, 162, 255, .30), rgba(46, 230, 184, .14));
  border: 2px solid #7aa2ff; box-shadow: 0 0 28px rgba(122, 162, 255, .6), inset 0 0 18px rgba(122, 162, 255, .35);
  transition: left .22s cubic-bezier(.2, .8, .2, 1), width .22s;
}
.tzp-dragging .tzp-beam, .tzp-dragging .tzp-h { transition: none; }
.tzp-knob {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: var(--btn-bg); color: #fff; font-weight: 800; font-size: .74rem; padding: 6px 10px; border-radius: 999px; box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}
.tzp-ghost { position: absolute; top: -4px; bottom: -4px; border-radius: 11px; border: 2px dashed rgba(122, 162, 255, .6); pointer-events: none; z-index: 1; }
.tzp-nowline { position: absolute; top: -10px; bottom: -6px; width: 2px; background: #ff5f6d; box-shadow: 0 0 8px #ff5f6d; z-index: 4; pointer-events: none; border-radius: 2px; }
.tzp-nowline span { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: .56rem; font-weight: 800; color: #fff; background: #c62835; padding: 1px 5px; border-radius: 5px; text-transform: uppercase; }

.tzp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .76rem; color: var(--text-muted); margin-top: 40px; }
.tzp-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.tzp-legend i.n { background: #1d2858; } .tzp-legend i.m { background: #4a6ed0; } .tzp-legend i.d { background: #f6d26f; } .tzp-legend i.e { background: #7a5cc9; }
.tzp-legend i.b { box-shadow: 0 0 0 2px #2ee6b8; }
.tzp-legend b { font-weight: 600; }

/* Phones */
@media (max-width: 640px) {
  .tzp-panel { padding: 18px 14px 16px; }
  .tzp-head h2 { font-size: 1.25rem; }
  .tzp-board { grid-template-columns: 132px minmax(0, 1fr); gap: 0 6px; }
  .tzp-ci { height: 68px; padding: 6px 6px 6px 8px; gap: 6px; transform: none; }
  .tzp-rib { height: 68px; padding: 0 6px; }
  .tzp-flag { font-size: 1.15rem; }
  .tzp-sky { display: none; }
  .tzp-ctime { font-size: 1.1rem; }
  .tzp-ribs { min-width: 760px; }
  .tzp-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tzp-beam, .tzp-h, .tzp-days button { transition: none; }
  .tzp-live::before, .tzp-ci.tzp-new, .tzp-flash .tzp-h.best { animation: none; }
  .tzp-ci { transform: none; }
}

/* ================= World Clocks widget ================= */
.wc { position: relative; }
.wc h3 { align-items: center; }
.wc-add { border: 1px solid var(--glass-border); background: var(--glass); color: var(--brand); font: 700 .76rem/1 inherit; font-family: inherit; padding: 6px 9px; border-radius: 9px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.wc-add:hover { border-color: var(--glass-hi); }
.wc-list { display: flex; flex-direction: column; gap: 8px; }
.wc-clock {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 16px; border: 1px solid var(--glass-border); overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .6s;
}
.wc-clock:hover { transform: translateY(-2px); }
.wc-clock.day { background: linear-gradient(120deg, rgba(255, 210, 110, .26), rgba(122, 190, 255, .14)); }
.wc-clock.dawn { background: linear-gradient(120deg, rgba(255, 150, 120, .28), rgba(160, 120, 255, .16)); }
.wc-clock.dusk { background: linear-gradient(120deg, rgba(255, 130, 90, .26), rgba(120, 70, 200, .24)); }
.wc-clock.night { background: linear-gradient(120deg, rgba(25, 35, 95, .75), rgba(8, 12, 40, .45)); }
:root[data-theme="light"] .wc-clock.night { background: linear-gradient(120deg, #34407e, #222a5a); color: #fff; }
:root[data-theme="light"] .wc-clock.night .wc-sub, :root[data-theme="light"] .wc-clock.night .wc-diff, :root[data-theme="light"] .wc-clock.night .wc-caret { color: #d5dcf5; }
:root[data-theme="light"] .wc-clock.night .wc-name { color: #fff; }
.wc-clock.wc-pop-in { animation: wc-in .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes wc-in { from { transform: scale(.85); opacity: 0; } }
.wc-face {
  position: relative; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #dbe3ff); box-shadow: 0 8px 14px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .15), inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.wc-clock.night .wc-face { background: radial-gradient(circle at 35% 30%, #3b4b8e, #19214f); box-shadow: 0 8px 14px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .12); }
.wc-tick { position: absolute; inset: 4px; border-radius: 50%; background:
  conic-gradient(from -1.5deg, #8a95b8 0 3deg, transparent 3deg 90deg, #8a95b8 90deg 93deg, transparent 93deg 180deg, #8a95b8 180deg 183deg, transparent 183deg 270deg, #8a95b8 270deg 273deg, transparent 273deg);
  -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px); mask: radial-gradient(circle, transparent 15px, #000 16px); }
.wc-face b { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 3px; background: #1a2250; }
.wc-clock.night .wc-face b { background: #e8eeff; }
.wc-hh { width: 4px; height: 13px; margin-left: -2px; }
.wc-mm { width: 3px; height: 18px; margin-left: -1.5px; }
.wc-ss { width: 1.5px; height: 20px; margin-left: -.75px; background: #ff5a5a !important; transition: transform .25s cubic-bezier(.4, 2.2, .5, 1); }
.wc-face::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; left: 22px; top: 22px; }
.wc-name { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 8px; color: var(--text); font: inherit; cursor: pointer; }
.wc-name:hover, .wc-name:focus-visible { background: rgba(255, 255, 255, .08); }
.wc-n { display: block; font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-caret { font-size: .7rem; color: var(--text-muted); }
.wc-sub { display: block; font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-time { text-align: right; flex: 0 0 auto; }
.wc-t { display: block; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-diff { display: block; font-size: .66rem; color: var(--text-muted); white-space: nowrap; }
.wc-rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 6px; border: 0; background: rgba(0, 0, 0, .3); color: #fff; font-size: .62rem; cursor: pointer; opacity: 0; transition: opacity .2s; padding: 0; }
.wc-clock:hover .wc-rm, .wc-rm:focus-visible { opacity: 1; }
@media (hover: none) { .wc-rm { opacity: .7; } }
.wc-pop { position: absolute; left: 12px; right: 12px; z-index: 40; padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
:root[data-theme="light"] .wc-pop { box-shadow: 0 24px 50px rgba(40, 60, 140, .25); }
.wc-pop-in-row { display: flex; gap: 6px; }
.wc-pop-in-row input { flex: 1; min-width: 0; padding: 10px 12px !important; }
.wc-close { width: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.wc-dd { position: static !important; box-shadow: none !important; border: 0 !important; margin-top: 6px; max-height: 260px; overflow-y: auto; padding: 0 !important; }
.wc-open .wc-clock { filter: saturate(.8); }

/* ================= Countdown & Alarm widget ================= */
.cd-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--border); margin-bottom: 10px; }
.cd-tabs button { flex: 1; border: 0; background: transparent; color: var(--text-muted); font: 700 .74rem/1 inherit; font-family: inherit; padding: 8px 4px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.cd-tabs button.on { background: var(--btn-bg); color: #fff; box-shadow: 0 3px 8px var(--btn-glow); }
.cd-cfg { display: none; margin-bottom: 10px; }
.cd[data-mode="holiday"] .cd-for-holiday, .cd[data-mode="event"] .cd-for-event, .cd[data-mode="timer"] .cd-for-timer { display: block; }
.cd[data-mode="timer"] .cd-not-timer { display: none !important; }
.cd-cfg select, .cd-cfg input { width: 100%; padding: 9px 10px; font-size: .86rem; }
.cd-for-event input + input { margin-top: 6px; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.cd-chips button, .cd-snd button, .cd-rem button {
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); border-radius: 999px; padding: 6px 10px;
  font: 700 .76rem/1 inherit; font-family: inherit; cursor: pointer; transition: transform .15s;
}
.cd-chips button:hover, .cd-snd button:hover, .cd-rem button:hover { transform: translateY(-2px); }
.cd-chips button.on, .cd-snd button.on, .cd-rem button.on { background: rgba(46, 230, 184, .18); border-color: rgba(46, 230, 184, .55); color: var(--accent); }
.cd-trow { display: flex; gap: 6px; }
.cd-trow input { flex: 1; min-width: 0; }
.cd-trow .btn { padding: 8px 12px; font-size: .82rem; white-space: nowrap; }
.cd-title { font-weight: 800; font-size: .98rem; margin: 2px 0 10px; line-height: 1.3; }
.cd-title small { color: var(--text-muted); font-weight: 600; font-size: .8rem; }
.cd-flip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; perspective: 400px; }
.cd-d { text-align: center; }
.cd-n {
  position: relative; display: grid; place-items: center; height: 56px; border-radius: 12px; font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff;
  background: linear-gradient(180deg, #2b3a7a 0 50%, #1f2c62 50% 100%); box-shadow: 0 7px 0 #0b1236, 0 14px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: rotateX(8deg); transform-origin: 50% 100%;
}
.cd-n::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0, 0, 0, .45); }
:root[data-theme="light"] .cd-n { background: linear-gradient(180deg, #3d58c9 0 50%, #2f48b0 50% 100%); box-shadow: 0 7px 0 #1d2f7a, 0 14px 22px rgba(40, 60, 140, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }
.cd-d.flip .cd-n { animation: cd-flip .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cd-flip { 0% { transform: rotateX(70deg); filter: brightness(1.5); } 100% { transform: rotateX(8deg); } }
.cd-d small { display: block; margin-top: 10px; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.cd-zero .cd-n { background: linear-gradient(180deg, #13a382 0 50%, #0f8b6f 50% 100%); box-shadow: 0 7px 0 #075c49, 0 0 24px rgba(46, 230, 184, .6); }
.cd-prog { display: none; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin-top: 10px; overflow: hidden; }
.cd[data-mode="timer"] .cd-prog { display: block; }
.cd-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width 1s linear; }
.cd-ring { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; font-weight: 800; background: linear-gradient(120deg, rgba(255, 210, 63, .25), rgba(46, 230, 184, .18)); border: 1px solid rgba(255, 210, 63, .5); animation: cd-shake .6s ease 3; }
.cd-ring[hidden] { display: none; }
.cd-ring .cd-ring-t { flex: 1; }
.cd-ring .btn { padding: 6px 12px; font-size: .8rem; }
@keyframes cd-shake { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
.cd-alarm { margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-border); }
:root[data-theme="light"] .cd-alarm { background: rgba(255, 255, 255, .6); }
.cd-arow { display: flex; align-items: center; gap: 10px; }
.cd-bell { font-size: 1.35rem; display: inline-block; transform-origin: 50% 10%; }
.cd-armed .cd-bell { animation: cd-bell 2.4s ease-in-out infinite; }
@keyframes cd-bell { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(18deg); } 85% { transform: rotate(-14deg); } 95% { transform: rotate(8deg); } }
.cd-atext { flex: 1; min-width: 0; }
.cd-atext b { display: block; font-size: .88rem; }
.cd-atext small { display: block; font-size: .7rem; color: var(--text-muted); line-height: 1.3; }
.cd-switch { position: relative; width: 44px; height: 24px; flex: 0 0 44px; border-radius: 99px; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .18); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); transition: background .2s; }
:root[data-theme="light"] .cd-switch { background: #c4cbe0; }
.cd-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: left .22s cubic-bezier(.3, 1.5, .5, 1); }
.cd-switch[aria-checked="true"] { background: #13a382; }
.cd-switch[aria-checked="true"] span { left: 23px; }
.cd-opts { display: none; margin-top: 10px; }
.cd-armed .cd-opts { display: block; }
.cd-snd, .cd-rem { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 8px; }
.cd-rem span { font-size: .74rem; color: var(--text-muted); font-weight: 700; margin-right: 2px; }
.cd-notify-row { display: flex; gap: 8px; align-items: center; font-size: .76rem; color: var(--text-muted); cursor: pointer; }
.cd-notify-row input { width: auto; }
.cd-status { min-height: 1em; margin: 8px 0 0; font-size: .74rem; color: var(--text-muted); }
.cd-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 3000; }

@media (prefers-reduced-motion: reduce) {
  .wc-clock, .wc-ss, .cd-switch span, .cd-prog i { transition: none !important; }
  .wc-clock.wc-pop-in, .cd-d.flip .cd-n, .cd-armed .cd-bell, .cd-ring { animation: none !important; }
}

/* Widgets row layout: clocks and countdown get more room */
.gl-widgets { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) !important; grid-auto-flow: row dense; }
.gl-widgets > .wc, .gl-widgets > .cd { grid-row: span 2; }
@media (max-width: 1020px) { .gl-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .gl-widgets > .wc, .gl-widgets > .cd { grid-row: auto; } }
@media (max-width: 560px) { .gl-widgets { grid-template-columns: minmax(0, 1fr) !important; } }
.wc-dd { width: auto !important; min-width: 0 !important; left: auto !important; right: auto !important; }
.tzp-full { padding-top: 0; }

/* Reserve the converter's space before its script runs, so the page doesn't jump while loading */
[data-tzp] { min-height: 486px; }
@media (max-width: 1100px) { [data-tzp] { min-height: 563px; } }
@media (max-width: 960px) { [data-tzp] { min-height: 830px; } }
@media (max-width: 620px) { [data-tzp] { min-height: 797px; } }
@media (max-width: 480px) { [data-tzp] { min-height: 839px; } }