/* 時鐘・鬧鐘・報時 */
.ck { max-width: 720px; margin: 0 auto; }
.ck [hidden] { display: none !important; }
.ck-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: color-mix(in srgb, var(--tc) 9%, var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--tc) 22%, transparent); margin-bottom: 16px; }
.ck-tabs button { flex: 1; padding: 11px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--tc); font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.ck-tabs button.on { background: var(--tc); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--tc) 40%, transparent); }

/* 大時鐘 */
.ck-face { text-align: center; padding: 30px 12px 22px; border-radius: 26px; background: radial-gradient(circle at 50% 20%, #12384a, #07151e 75%); color: #e7f7fb; box-shadow: 0 12px 32px rgba(7, 21, 30, .35); }
.ck-face:fullscreen { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0; }
.ck-time { font-size: clamp(64px, 20vw, 132px); font-weight: 800; letter-spacing: 2px; font-variant-numeric: tabular-nums; line-height: 1.05; text-shadow: 0 0 28px rgba(77, 208, 225, .45); }
.ck-face:fullscreen .ck-time { font-size: min(28vw, 38vh); }
.ck-sec { font-size: clamp(22px, 6vw, 34px); color: #7fd6e6; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.ck-date { margin-top: 8px; font-size: clamp(15px, 4vw, 20px); color: #a9cfd8; }
.ck-status { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 6px; }
.ck-chip { padding: 4px 12px; border-radius: 99px; font-size: 13px; background: color-mix(in srgb, var(--tc) 10%, var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--tc) 25%, transparent); }
.ck-chip.live { background: #e6fcf5; border-color: #63e6be; color: #087f5b; font-weight: 700; }
.ck-chip.idle { background: #fff4e6; border-color: #ffc078; color: #b45309; font-weight: 700; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px 0; }
.ck-actions .tl-btn { border-radius: 14px; }
.ck-chk { display: flex; align-items: center; gap: 8px; margin: 8px 2px; font-size: 14px; cursor: pointer; }
.ck-warn { display: grid; gap: 4px; margin-top: 12px; padding: 12px 16px; border-radius: 16px; background: #fff4e6; border: 1px solid #ffd8a8; color: #7c4a03; font-size: 13.5px; line-height: 1.75; }
.ck-warn.calm { background: color-mix(in srgb, var(--tc) 6%, var(--card, #fff)); border-color: var(--line, #ddd); color: var(--sub, #666); }

/* 鬧鐘清單 */
.ck-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ck-alist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ck-alist li { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 4px; border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line, #ddd); }
.ck-alist li.off { opacity: .55; }
.ck-alist .ck-empty { display: block; padding: 22px; text-align: center; color: var(--sub, #666); background: none; border-style: dashed; }
.ck-al-main { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; text-align: left; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; align-items: baseline; }
.ck-al-main b { grid-row: span 2; font-size: 34px; font-variant-numeric: tabular-nums; color: var(--tc); line-height: 1.1; }
.ck-al-main span { font-weight: 700; } .ck-al-main small { color: var(--sub, #666); font-size: 12.5px; }
.ck-sw { position: relative; width: 52px; height: 30px; flex: none; cursor: pointer; }
.ck-sw input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck-sw i { position: absolute; inset: 0; border-radius: 99px; background: #ced4da; transition: background .15s; pointer-events: none; }
.ck-sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: transform .15s; }
.ck-sw input:checked + i { background: var(--tc); } .ck-sw input:checked + i::after { transform: translateX(22px); }
.ck-del { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--sub, #666); font-size: 22px; cursor: pointer; }

/* 表單 */
.ck-form, .ck-card { margin: 14px 0; padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--tc) 5%, var(--card, #fff)); border: 1px solid var(--line, #ddd); display: grid; gap: 12px; }
.ck-form h4, .ck-card h4 { margin: 0; font-size: 16px; color: var(--tc); }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ck label { display: grid; gap: 5px; font-size: 13.5px; color: var(--sub, #666); }
.ck label.ck-chk { display: flex; color: inherit; }
.ck input[type=time], .ck input[type=text], .ck select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line, #ccc); border-radius: 12px; font: inherit; font-size: 16px; background: var(--card, #fff); color: inherit; }
.ck input[type=range] { width: 100%; accent-color: var(--tc); }
.ck-days { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ck-dl { font-size: 13.5px; color: var(--sub, #666); margin-right: 4px; }
.ck-days button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line, #ccc); background: var(--card, #fff); color: inherit; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ck-days button.on { background: var(--tc); border-color: var(--tc); color: #fff; }
.ck-snd { display: flex; align-items: flex-end; gap: 10px; } .ck-snd label { flex: 1; }
.ck-foot { text-align: center; margin-top: 26px; }

/* 鬧鐘響的時候 */
.ck-ring { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(7, 21, 30, .86); backdrop-filter: blur(6px); padding: 20px; }
.ck-ring-box { width: min(420px, 100%); text-align: center; padding: 34px 22px; border-radius: 28px; background: var(--card, #fff); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); animation: ckpulse 1.2s ease-in-out infinite; }
@keyframes ckpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.ck-ring-ic { font-size: 64px; animation: ckshake .5s ease-in-out infinite alternate; }
@keyframes ckshake { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.ck-ring-time { font-size: 64px; font-weight: 800; color: var(--tc); font-variant-numeric: tabular-nums; }
.ck-ring-label { margin: 4px 0 22px; font-size: 20px; font-weight: 700; }
.ck-ring-btns { display: grid; gap: 10px; }
.ck-ring-btns .tl-btn { border-radius: 16px; width: 100%; }

.ck-perm{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.ck-perm li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.92rem}
.ck-perm li.bad span{color:#b3261e;font-weight:600}
.ck [hidden]{display:none!important}
.ck-dl{margin-top:12px;padding:12px 16px;border-radius:16px;border:1px dashed var(--line,#ccc);font-size:13.5px;line-height:1.75;color:var(--sub,#666)}
.ck-dl a{font-weight:700}

/* App 的 WebView 不支援網頁全螢幕，改用鋪滿整個畫面的做法 */
.ck-face.fs { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0; margin: 0; }
.ck-face.fs .ck-time { font-size: min(28vw, 38vh); }
.ck-face.fs::after { content: attr(data-hint); position: absolute; bottom: 18px; font-size: 13px; color: #7fd6e6; opacity: .6; }

.ck-langbar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.ck-langbar label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub, #666); }
.ck-langbar select { padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line, #ccc); background: var(--card, #fff); color: inherit; font-size: 13px; }