:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}.app{--bg:#fff;--surface:#fff;--surface-2:#fff;--text:#111827;--muted:#4b5563;--muted-2:#6b7280;--border:#e5e7eb;--shadow:0px 10px 15px -3px #0000001a,0px 4px 6px -4px #0000001a;--accent:#14b8a6;--accent-2:#0d9488;--accent-soft:#f0fdfa;--chip:#f3f4f6;color:var(--text);background:var(--bg);min-height:100vh}.theme-dark{--bg:#0b1220;--surface:#111827;--surface-2:#0f172a;--text:#f9fafb;--muted:#cbd5e1;--muted-2:#94a3b8;--border:#334155;--shadow:0px 10px 18px -8px #00000080;--accent:#14b8a6;--accent-2:#2dd4bf;--accent-soft:#14b8a61f;--chip:#94a3b82e}.theme-blue{--bg:#eff6ff;--surface:#fff;--surface-2:#fff;--text:#0f172a;--muted:#334155;--muted-2:#475569;--border:#dbeafe;--accent:#2563eb;--accent-2:#1d4ed8;--accent-soft:#dbeafe;--chip:#e0f2fe}.theme-mint{--bg:#ecfdf5;--surface:#fff;--surface-2:#fff;--text:#064e3b;--muted:#065f46;--muted-2:#047857;--border:#d1fae5;--accent:#14b8a6;--accent-2:#0d9488;--accent-soft:#f0fdfa;--chip:#d1fae5}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 80px}@media (width<=900px){.container{padding:0 16px}}.header{border-bottom:1px solid var(--border);background:var(--surface);height:101px}.headerInner{display:flex;justify-content:space-between;align-items: center;height:100%;padding:24px 32px}.headerActions{display:flex;align-items: center;gap:12px}@media (width<=900px){.headerInner{padding:18px 0}}.brand{display:flex;align-items: center;gap:16px}.brandLogo{object-fit:contain;width:48px;height:48px}.brandTitle{font-size:30px;font-weight:700;line-height:1.2}.button{cursor:pointer;color:var(--text);display:inline-flex;background:0 0;border:0;border-radius:8px;align-items: center;gap:8px;padding:12px 24px;font-size:16px;font-weight:600}.button:disabled{opacity:.6;cursor:not-allowed}.button.primary{background:var(--accent);color:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.button.ghost{color:var(--muted);border:1px solid var(--border);background:0 0}.fullscreenButton{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent)45%,var(--border));background:color-mix(in srgb,var(--accent)10%,transparent)}.fullscreenButton:hover{background:color-mix(in srgb,var(--accent)16%,transparent)}.fullscreenButton.active{background:var(--accent);color:#fff;border-color:var(--accent)}.fullscreenButton.active:hover{background:var(--accent-2)}.addButton img{width:20px;height:28px}.main{padding:32px 32px 64px}@media (width<=900px){.main{padding:24px 0 48px}}.clockList{display:grid;gap:24px;padding-bottom:32px}.clockListCols-auto{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.clockListCols-1{grid-template-columns:1fr}.clockListCols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.clockListCols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.clockListCols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (width<=900px){.clockListCols-3,.clockListCols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px){.clockListCols-2,.clockListCols-3,.clockListCols-4{grid-template-columns:1fr}}.clockCard{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:24px 24px 18px}.clockCardTop{display:flex;justify-content:space-between;align-items: center;gap:16px}.clockMeta{display:flex;align-items: center;gap:12px;min-width:0}.clockCardSortable{cursor:grab}.clockCardSortable:active{cursor:grabbing}.clockIcon{width:40px;height:40px}.clockMetaText{display:flex;flex-direction:column;min-width:0}.clockCity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;font-weight:700;line-height:1.25}.clockTz{color:var(--muted-2);font-size:14px}.clockTime{padding:12px 0 6px;font-size:48px;font-weight:700;line-height:1.1}@media (width<=520px){.clockTime{font-size:40px}}.clockDate{color:var(--muted-2);font-size:14px}.iconButton{cursor:pointer;display:inline-flex;color:var(--muted);background:0 0;border:0;border-radius:8px;justify-content:center;align-items: center;width:40px;height:40px}.iconButton:hover{background:var(--chip)}.iconButton img{width:28px;height:28px}.controls{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;border-radius:12px;flex-direction:column;gap:16px;padding:25px}.controlBlock{display:grid;grid-template-columns:96px 1fr;align-items: center;gap:16px}.controlLabel{color:var(--muted);white-space:nowrap;padding-bottom:0;font-size:14px;font-weight:600;line-height:1.2}@media (width<=520px){.controlBlock{grid-template-columns:1fr;align-items: start;gap:10px}.controlLabel{white-space:normal}}.segmented{background:var(--chip);display:inline-flex;border-radius:9999px;gap:8px;padding:4px}.segmentedButton{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9999px;padding:8px 24px;font-size:16px}.segmentedButton.active{background:var(--accent);color:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.themeRow{display:flex;gap:12px}.themeButton{background:var(--surface);cursor:pointer;border:2px solid #d1d5db;border-radius:8px;width:48px;height:48px;padding:2px}.themeButton.active{border-color:var(--accent);box-shadow:var(--shadow)}.themeSwatch{display:block;border-radius:6px;width:100%;height:100%}.swatchLight{background:linear-gradient(135deg,#fff 0%,#f3f4f6 100%)}.swatchDark{background:linear-gradient(135deg,#1f2937 0%,#111827 100%)}.swatchBlue{background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%)}.swatchMint{background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%)}.formatRow{display:flex;flex-wrap:wrap;gap:16px}.check{display:inline-flex;color:var(--muted);user-select:none;align-items: center;gap:10px}.check input{accent-color:var(--accent);width:16px;height:16px}.hintCard{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent)35%,transparent);display:flex;border-radius:8px;align-items: center;gap:12px;margin-top:0;padding:17px}.hintCard img{width:20px;height:30px}.hintTitle{color:var(--accent-2);font-size:14px;font-weight:600;line-height:1.2}.hintDesc{color:var(--accent);font-size:14px}.modalOverlay{position:fixed;display:flex;z-index:50;background:#0f172a8c;justify-content:center;align-items: center;padding:24px;inset:0}.modal{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;border-radius:12px;width:min(560px,100%)}.modalHeader{display:flex;border-bottom:0;justify-content:space-between;align-items: center;gap:12px;padding:16px 18px}.modalTitle{font-size:16px;font-weight:700}.modalBody{padding:18px}.modalFooter{display:flex;border-top:0;justify-content:flex-end;gap:12px;padding:16px 18px}.field{display:flex;flex-direction:column;gap:10px}.input{border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;border-radius:10px;width:100%;padding:12px}.input:focus{border-color:color-mix(in srgb,var(--accent)60%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent)18%,transparent)}.tip{color:var(--muted-2);font-size:13px}.error{color:#ef4444;font-size:13px}.suggestions{display:flex;flex-direction:column;gap:10px;margin-top:14px}.suggestion{text-align:left;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;border-radius:12px;justify-content:space-between;align-items: center;gap:12px;width:100%;padding:12px}.suggestion:hover{background:color-mix(in srgb,var(--accent)8%,var(--surface));border-color:color-mix(in srgb,var(--accent)35%,var(--border))}.suggestionLeft{min-width:0}.suggestionLabel{font-weight:700}.suggestionMeta{color:var(--muted-2);font-size:12px}.suggestionSource{color:var(--muted);background:var(--chip);white-space:nowrap;border-radius:9999px;padding:6px 10px;font-size:12px}.confirmText{color:var(--muted);font-size:14px}.mode-board .header,.mode-board .controls{display:none}.mode-board .container{max-width:none;padding:0}.mode-board .main{padding:0}.mode-board .clockList{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:28px;padding:28px}@media (width<=900px){.mode-board .clockList{grid-template-columns:1fr;gap:16px;padding:16px}}.mode-board .clockCard{border-radius:16px;padding:32px 32px 24px}.mode-board .clockCity{font-size:clamp(24px,2.2vw,40px)}.mode-board .clockTz{font-size:clamp(16px,1.2vw,22px)}.mode-board .clockTime{padding:18px 0 10px;font-size:clamp(64px,5vw,120px)}.mode-board .clockDate{font-size:clamp(16px,1.4vw,24px)}