:root{
  --a1:#7c3aed; --a2:#06b6d4;
  --txt:#fff; --txt-mut:#b8b8d4; --txt-dim:#8888aa;
  --bg:#0a0a1a; --bg-1:#1a0b2e; --bg-2:#0a1a2e;
  --card:rgba(255,255,255,.04); --card-b:rgba(255,255,255,.08);
  --inner:rgba(255,255,255,.03); --inner-b:rgba(255,255,255,.06);
  --star:#fff; --sh:rgba(0,0,0,.5); --sh-a:rgba(124,58,237,.15);
}
[data-theme="light"]{
  --txt:#1a1030; --txt-mut:#5a5570; --txt-dim:#8a8aa0;
  --bg:#f2f0fa; --bg-1:#e0d8f8; --bg-2:#d8e8f8;
  --card:rgba(255,255,255,.7); --card-b:rgba(124,58,237,.15);
  --inner:rgba(255,255,255,.6); --inner-b:rgba(124,58,237,.12);
  --star:#7c3aed; --sh:rgba(60,40,100,.15); --sh-a:rgba(124,58,237,.2);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--txt);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 20px; overflow-x:hidden; position:relative;
  transition:background .4s,color .4s;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 20%, var(--bg-1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, var(--bg-2) 0%, transparent 50%);
}
.aurora{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 600px 400px at 30% 30%, rgba(124,58,237,.25), transparent),
    radial-gradient(ellipse 700px 500px at 70% 60%, rgba(6,182,212,.2), transparent);
  animation:aurora 20s ease-in-out infinite alternate; opacity:.7;
}
@keyframes aurora{to{transform:translate(30px,-30px) scale(1.1)}}
.stars{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.6;
  background-image:
    radial-gradient(1px 1px at 20% 30%, var(--star), transparent),
    radial-gradient(1px 1px at 60% 70%, var(--star), transparent),
    radial-gradient(1px 1px at 80% 15%, var(--star), transparent),
    radial-gradient(1px 1px at 35% 85%, var(--star), transparent),
    radial-gradient(1px 1px at 90% 60%, var(--star), transparent),
    radial-gradient(1px 1px at 15% 50%, var(--star), transparent),
    radial-gradient(1px 1px at 50% 10%, var(--star), transparent),
    radial-gradient(1px 1px at 70% 40%, var(--star), transparent);
  animation:twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.3}to{opacity:.8}}
.theme-toggle{
  position:fixed; top:24px; right:24px; z-index:100;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--card-b); background:var(--card);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:var(--txt); font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s,border-color .2s;
}
.theme-toggle:hover{transform:scale(1.08); border-color:var(--a1)}
.card{
  position:relative; z-index:10; padding:50px 44px;
  max-width:1120px; width:100%; text-align:center;
  background:var(--card); border:1px solid var(--card-b);
  border-radius:24px;
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 30px 80px var(--sh), inset 0 1px 0 rgba(255,255,255,.1);
  animation:cardIn 1.2s cubic-bezier(.16,1,.3,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:none}}
.logo{
  width:80px; height:80px; margin:0 auto 28px; position:relative;
  border-radius:22px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  box-shadow:0 20px 60px rgba(124,58,237,.5),inset 0 0 0 1px rgba(255,255,255,.1);
  animation:logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px) rotate(2deg)}}
.logo::after{
  content:''; position:absolute; inset:-2px; border-radius:22px;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  filter:blur(20px); opacity:.5; z-index:-1;
}
.logo svg{width:40px; height:40px; stroke:#fff; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round}
h1{
  font-size:2.8em; font-weight:800; letter-spacing:-2px; margin-bottom:14px;
  background:linear-gradient(135deg,#fff 0%,#a8a8ff 50%,var(--a2) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% 200%; animation:gradShift 6s ease infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
p.subtitle{font-size:1em; color:var(--txt-mut); line-height:1.6; max-width:540px; margin:0 auto 36px}
.cities{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:20px}
.city{
  position:relative; display:block; padding:22px 20px;
  background:var(--inner); border:1px solid var(--inner-b);
  border-radius:18px; text-decoration:none; color:inherit; text-align:left;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  animation:cityIn .8s cubic-bezier(.16,1,.3,1) backwards;
}
.city:nth-child(1){animation-delay:.15s}
.city:nth-child(2){animation-delay:.25s}
.city:nth-child(3){animation-delay:.35s}
.city:nth-child(4){animation-delay:.45s}
.city:nth-child(5){animation-delay:.55s}
.city:nth-child(6){animation-delay:.65s}
@keyframes cityIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.city:hover{transform:translateY(-4px); border-color:rgba(124,58,237,.4); box-shadow:0 20px 40px var(--sh-a)}
.city-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.city-name{font-size:1.05em; font-weight:600; color:var(--txt); letter-spacing:.3px; display:flex; align-items:center; gap:8px}
.city-day{font-size:1em; opacity:.9}
.city-flag{font-size:1.3em}
.city-time{font-size:2.2em; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:1px; line-height:1.1}
.city-time .time{
  background:linear-gradient(135deg,#a8a8ff,var(--a2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.city-time-zone{font-size:.7em; color:var(--txt-dim); letter-spacing:.3px; display:block; margin-top:6px}
.city-meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--inner-b);
  font-size:.85em; color:var(--txt-mut); min-height:32px;
}
.city-weather{display:flex; align-items:center; gap:6px; opacity:0; transition:opacity .4s}
.city-weather.loaded{opacity:1}
.city-weather b{color:var(--txt); font-weight:600}
.weather-wind{opacity:.7; font-size:.85em}
.weather-icon{font-size:1.1em}
.city-diff{
  font-size:.75em; padding:3px 8px; border-radius:999px; font-weight:600;
  background:rgba(124,58,237,.15); color:#a8a8ff; white-space:nowrap;
}
.city-diff.pos{background:rgba(34,197,94,.15); color:#4ade80}
.city-diff.neg{background:rgba(239,68,68,.15); color:#f87171}
.back-link{
  position:fixed; top:24px; left:24px; z-index:100;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:12px;
  background:var(--card); border:1px solid var(--card-b);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:var(--txt); text-decoration:none; font-size:14px; font-weight:600;
  transition:transform .2s,border-color .2s;
}
.back-link:hover{transform:translateX(-3px); border-color:var(--a1)}
.city-page{
  position:relative; z-index:10; max-width:960px; width:100%;
  margin:0 auto; padding:80px 24px 60px;
}
.city-hero{text-align:center; padding:20px 0 24px}
.city-hero-name{
  font-size:1.5em; font-weight:700; letter-spacing:.3px;
  display:inline-flex; align-items:center; gap:12px; margin-bottom:24px;
  color:var(--txt);
}
.city-hero-name .city-flag{font-size:1.3em}
.big-clock{
  font-size:clamp(56px,15vw,150px); font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:-3px; line-height:1;
  background:linear-gradient(135deg,#fff 0%,#a8a8ff 50%,var(--a2) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% 200%; animation:gradShift 6s ease infinite;
}
.city-hero-meta{
  display:flex; justify-content:center; align-items:center; gap:14px;
  margin-top:18px; color:var(--txt-dim); font-size:.95em; flex-wrap:wrap;
}
.info-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; margin-top:32px;
}
.info-card{
  background:var(--inner); border:1px solid var(--inner-b);
  border-radius:16px; padding:20px 16px; text-align:center;
  transition:transform .2s,border-color .2s;
}
.info-card:hover{transform:translateY(-3px); border-color:rgba(124,58,237,.35)}
.info-label{font-size:.75em; color:var(--txt-dim); margin-bottom:10px; text-transform:uppercase; letter-spacing:.6px; font-weight:600}
.info-value{font-size:1.5em; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums}
.info-sub{font-size:.8em; color:var(--txt-mut); margin-top:4px}
.section-title{font-size:1.2em; font-weight:700; margin:44px 0 18px; letter-spacing:.3px; color:var(--txt)}
.forecast{display:grid; grid-template-columns:repeat(7,1fr); gap:10px}
.fday{
  background:var(--inner); border:1px solid var(--inner-b);
  border-radius:14px; padding:16px 6px; text-align:center;
  transition:transform .2s,border-color .2s;
}
.fday:hover{transform:translateY(-3px); border-color:rgba(124,58,237,.4)}
.fday.today{border-color:rgba(124,58,237,.5); background:rgba(124,58,237,.08)}
.fday-name{font-size:.72em; color:var(--txt-dim); margin-bottom:10px; text-transform:uppercase; letter-spacing:.6px; font-weight:600}
.fday-icon{font-size:1.7em; margin-bottom:8px; line-height:1}
.fday-max{font-size:1.05em; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums}
.fday-min{font-size:.82em; color:var(--txt-dim); margin-top:2px; font-variant-numeric:tabular-nums}
@media(max-width:720px){
  .forecast{grid-template-columns:repeat(3,1fr)}
  .city-page{padding:70px 16px 40px}
  .back-link{top:16px; left:16px; padding:8px 12px; font-size:13px}
  .card{padding:36px 24px; border-radius:20px}
  h1{font-size:2em}
  .cities{grid-template-columns:1fr}
  .theme-toggle{top:16px; right:16px; width:40px; height:40px; font-size:18px}
  .city-time{font-size:1.9em}
}

/* ---------- analog clock ---------- */
.analog{width:160px;height:160px;margin:0 auto 18px;position:relative}
.analog svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 30px rgba(124,58,237,.35))}
.analog .face{fill:var(--inner);stroke:var(--inner-b);stroke-width:1.5}
.analog .tick{stroke:var(--txt-dim);stroke-width:1.5;stroke-linecap:round}
.analog .tick.major{stroke:var(--txt);stroke-width:3}
.analog .hand{stroke:var(--txt);stroke-width:5;stroke-linecap:round}
.analog .hand.hour{stroke-width:6}
.analog .hand.min{stroke-width:4}
.analog .hand.sec{stroke:#f87171;stroke-width:2}
.analog .center{fill:var(--a1);stroke:var(--card);stroke-width:2}
@media(max-width:640px){.analog{width:130px;height:130px}}

/* ---------- world time ---------- */
.world-time-card{padding:36px 32px;margin-top:24px;max-width:1120px;text-align:left}
.wt-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}
.wt-title{font-size:1.25em;font-weight:700;margin-bottom:6px}
.wt-sub{color:var(--txt-mut);font-size:.9em;max-width:520px}
.wt-reset{background:var(--inner);border:1px solid var(--inner-b);color:var(--txt);padding:8px 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s,transform .1s;white-space:nowrap}
.wt-reset:hover{background:rgba(124,58,237,.15);border-color:var(--a1)}
.wt-reset:active{transform:scale(.96)}
.wt-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--a1),var(--a2));outline:none;cursor:pointer;margin:6px 0 18px}
.wt-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--a1);cursor:pointer;box-shadow:0 4px 14px rgba(124,58,237,.55);transition:transform .15s}
.wt-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.wt-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--a1);cursor:pointer;box-shadow:0 4px 14px rgba(124,58,237,.55)}
.wt-header{color:var(--txt-mut);font-size:.95em;margin-bottom:18px}
.wt-header b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums;font-size:1.05em;margin-left:4px}
.wt-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.wt-item{background:var(--inner);border:1px solid var(--inner-b);border-radius:14px;padding:16px;text-align:left;transition:transform .2s,border-color .2s}
.wt-item:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.4)}
.wt-item.is-msk{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.08)}
.wt-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.82em;color:var(--txt-mut)}
.wt-item-head .wt-flag{margin-right:6px;font-size:1.1em}
.wt-item-head .wt-short{font-size:.9em;opacity:.7}
.wt-item-time{font-size:1.55em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt);letter-spacing:.5px;line-height:1;margin-bottom:6px}
.wt-item-day{font-size:.75em;color:var(--txt-dim);min-height:1em}
.wt-item-day.pos{color:#4ade80}
.wt-item-day.neg{color:#f87171}
@media(max-width:640px){
  .world-time-card{padding:26px 20px}
  .wt-header-row{flex-direction:column;gap:12px}
  .wt-list{grid-template-columns:repeat(2,1fr)}
}