.wc-wrapper{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#f8fafc;color:#1e293b;padding:20px;border-radius:18px;max-width:1300px;margin:0 auto}
.wc-title{text-align:center;font-size:1.8rem;font-weight:700;margin-bottom:20px;background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.wc-search-wrap{max-width:520px;margin:0 auto;position:relative}
.wc-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#94a3b8;pointer-events:none}
.wc-search{width:100%;padding:14px 18px 14px 46px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;color:#1e293b;font-size:1rem;outline:none;transition:border .25s;box-sizing:border-box}
.wc-search:focus{border-color:#3b82f6}
.wc-search::placeholder{color:#94a3b8}
.wc-controls{display:flex;justify-content:center;align-items:center;margin-top:12px}
.wc-toggle-wrap{display:flex;align-items:center;gap:10px;font-size:.85rem;color:#64748b}
.wc-toggle{position:relative;width:44px;height:24px;background:#e2e8f0;border-radius:12px;cursor:pointer;border:1px solid #cbd5e1;transition:background .25s;flex-shrink:0}
.wc-toggle.active{background:#3b82f6;border-color:#3b82f6}
.wc-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s}
.wc-toggle.active::after{transform:translateX(20px)}
.wc-region-tabs{display:flex;justify-content:center;gap:8px;margin:20px 0;flex-wrap:wrap}
.wc-region-tab{padding:7px 18px;border-radius:20px;border:1px solid #e2e8f0;background:transparent;color:#64748b;cursor:pointer;font-size:.82rem;transition:all .2s}
.wc-region-tab:hover,.wc-region-tab.active{background:#e2e8f0;color:#1e293b;border-color:#cbd5e1}
.wc-clocks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.wc-clock-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:22px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.wc-clock-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.06)}
.wc-clock-card .wc-city-name{font-size:1.05rem;font-weight:600;color:#1e293b}
.wc-clock-card .wc-country-name{font-size:.8rem;color:#94a3b8;margin-top:2px}
.wc-clock-card .wc-time-display{font-size:2rem;font-weight:700;letter-spacing:-.5px;margin-top:12px;font-variant-numeric:tabular-nums}
.wc-clock-card .wc-date-display{font-size:.78rem;color:#94a3b8;margin-top:4px}
.wc-clock-card .wc-offset-badge{position:absolute;top:16px;right:16px;background:#f1f5f9;padding:3px 10px;border-radius:8px;font-size:.72rem;color:#64748b;font-weight:500}
.wc-clock-card .wc-remove-btn{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;border:none;background:#f1f5f9;color:#94a3b8;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:14px;line-height:1;transition:all .2s;padding:0}
.wc-clock-card:hover .wc-remove-btn{display:flex}
.wc-clock-card .wc-remove-btn:hover{background:#ef4444;color:#fff}
.wc-analog-wrap{display:flex;justify-content:center;margin-bottom:8px}
.wc-clock-card canvas{width:80px;height:80px;border-radius:50%}
.wc-no-results{text-align:center;padding:60px 20px;color:#94a3b8;grid-column:1/-1}
.wc-no-results span{font-size:3rem;display:block;margin-bottom:12px}
.wc-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#fff;color:#1e293b;padding:10px 24px;border-radius:12px;font-size:.9rem;border:1px solid #e2e8f0;opacity:0;transition:opacity .3s;pointer-events:none;z-index:99999;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.wc-toast.show{opacity:1}
@media(max-width:600px){.wc-clocks-grid{grid-template-columns:1fr;gap:14px}.wc-region-tabs{gap:5px}.wc-region-tab{padding:5px 12px;font-size:.76rem}.wc-title{font-size:1.4rem}}