.clock-settings{display:grid;grid-template-columns:330px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:14px;min-height:0;max-height:calc(88vh - 100px);font-family:inherit;font-size:13px;color:var(--ink,var(--text))}
.clock-settings .clock-preview-pane,.clock-settings .clock-options{min-width:0;min-height:0;overflow:auto;scrollbar-width:thin}
.clock-settings .clock-preview-pane{display:flex;flex-direction:column;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--canvas,var(--card));align-self:start}
.clock-settings .clock-stage{width:300px;max-width:100%;margin:0 auto;border-radius:10px;overflow:hidden;background:repeating-conic-gradient(#344052 0 25%,#293344 0 50%) 0 0/20px 20px}
.clock-settings iframe{display:block;width:300px;height:100px;max-width:100%;border:0;background:transparent;color-scheme:normal}
.clock-settings .clock-source{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 2px 4px;border-top:1px solid var(--line)}
.clock-settings .clock-source-hint{flex:1;min-width:160px}
.clock-settings .clock-copy{display:flex;justify-content:flex-end;flex:none;margin-left:auto}
.clock-settings .clock-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.clock-settings .clock-help,.clock-settings .clock-status{font-size:12px;color:var(--muted);line-height:1.5;margin:5px 0;overflow-wrap:anywhere}
.clock-settings .clock-status.error{color:var(--danger,#e35b70)}
.clock-settings .clock-main-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.clock-settings .clock-main-row>label{flex:1;min-width:0}
.clock-settings .clock-label{display:block;color:var(--muted);margin-bottom:5px}
.clock-settings .clock-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.clock-settings section{min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface,var(--card))}
.clock-settings h3{font-size:14px;margin:0 0 10px}
.clock-settings label.clock-field{display:block;min-width:0;margin-bottom:10px}
.clock-settings input[type=text],.clock-settings select{width:100%;max-width:none;box-sizing:border-box;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface,var(--card));color:inherit;font-size:13px;font-family:Arial}
.clock-settings .clock-range-row{display:flex;gap:8px;align-items:center}
.clock-settings input[type=range]{flex:1;width:auto;min-width:0;max-width:220px;accent-color:var(--accent);cursor:pointer}
.clock-settings output{min-width:43px;color:var(--muted);font-size:12px;white-space:nowrap}
.clock-settings .clock-colors{margin-top:10px}
.clock-settings .clock-color-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.clock-settings .clock-color-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.clock-settings input[type=color]{width:46px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface,var(--card));cursor:pointer;padding:1px}
.clock-settings [hidden]{display:none!important}
.modal-box.clock-panel-box{width:960px;max-width:94vw;max-height:88vh;overflow:hidden}
dialog:has(.clock-settings){width:min(960px,calc(100vw - 32px));overflow:hidden}
dialog .clock-settings{font-size:12px;max-height:62vh}
dialog .clock-settings h3{font-size:13px}
dialog .clock-settings .clock-label,dialog .clock-settings .clock-help,dialog .clock-settings output{font-size:11.5px}
dialog .clock-settings input[type=text],dialog .clock-settings select{font-family:inherit;font-size:inherit;padding:7px 9px;border-radius:9px}
@media(max-width:900px){dialog:has(.clock-settings){width:min(640px,calc(100vw - 32px));overflow:auto}dialog .clock-settings{display:block;max-height:none}dialog .clock-settings .clock-options{margin-top:12px}}
@media(max-width:767px){.modal-box.clock-panel-box{overflow:auto}.clock-panel-box .clock-settings{display:block;max-height:none}.clock-panel-box .clock-options{margin-top:12px}}
@media(max-width:520px){.clock-settings .clock-fields{grid-template-columns:1fr}.clock-settings .clock-main-row{flex-wrap:wrap}.clock-settings .clock-main-row>label{flex-basis:100%}}