:root{
  --wc-bg:#f6f3ec;
  --wc-surface:#fffdf8;
  --wc-text:#26312b;
  --wc-border:#d9d2c1;
  --wc-accent:#586b52;
  --wc-accent2:#c67a4e;
}

.wc-wrap{
  --wc-radius:16px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--wc-bg);
  color:var(--wc-text);
  max-width:760px;
  margin:24px auto;
  padding:20px 20px 18px;
  border:1px solid var(--wc-border);
  border-radius:var(--wc-radius);
  box-sizing:border-box;
}
.wc-wrap.wc-wrap--full{max-width:100%;}
.wc-wrap *{box-sizing:border-box;font-family:inherit;min-width:0;}

/* ---------- Раскладка "cards" (по умолчанию) ---------- */
.wc-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.wc-card{
  flex:1 1 150px;
  min-width:0;
  background:var(--wc-surface);
  border:1.5px solid var(--wc-border);
  border-radius:12px;
  padding:14px 14px 12px;
  text-align:center;
  overflow-wrap:break-word;
  word-break:break-word;
}
.wc-card--local{
  border-color:var(--wc-accent);
  box-shadow:0 0 0 1px var(--wc-accent) inset;
}
.wc-card--you{
  background:var(--wc-accent);
  border-color:var(--wc-accent);
}
.wc-card--you .wc-city,
.wc-card--you .wc-time,
.wc-card--you .wc-date,
.wc-card--you .wc-offset{color:#fff;}

.wc-city-block{display:contents;}
.wc-time-block{display:contents;}

.wc-icon{font-size:18px; line-height:1; display:block; margin-bottom:6px;}
.wc-city{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--wc-text);
  opacity:.8;
  margin-bottom:4px;
  overflow-wrap:break-word;
  word-break:break-word;
}
.wc-time{
  display:block;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--wc-text);
  font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.wc-date{
  display:block;
  font-size:11px;
  color:var(--wc-text);
  opacity:.6;
  margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.wc-offset{
  display:block;
  font-size:10px;
  color:var(--wc-accent2);
  font-weight:700;
  margin-top:5px;
  font-variant-numeric:tabular-nums;
}
.wc-card--you .wc-offset{color:#fff; opacity:.85;}

/* ---------- Раскладка "list" (компактные строки) ---------- */
.wc-wrap.wc-layout-list .wc-grid{flex-direction:column; gap:0;}
.wc-wrap.wc-layout-list .wc-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex:none;
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid var(--wc-border);
  border-radius:0;
  padding:9px 2px;
}
.wc-wrap.wc-layout-list .wc-card:last-child{border-bottom:none;}
.wc-wrap.wc-layout-list .wc-card--local{
  background:var(--wc-surface);
  border-radius:8px;
  border-bottom:1px solid var(--wc-border);
  box-shadow:none;
  padding-left:8px;
  padding-right:8px;
}
.wc-wrap.wc-layout-list .wc-city-block{display:flex; align-items:center; gap:8px; min-width:0;}
.wc-wrap.wc-layout-list .wc-time-block{display:flex; align-items:baseline; gap:10px; flex:0 0 auto;}
.wc-wrap.wc-layout-list .wc-icon{margin:0; font-size:15px;}
.wc-wrap.wc-layout-list .wc-city{margin:0; font-size:13px;}
.wc-wrap.wc-layout-list .wc-time{font-size:16px; margin:0;}
.wc-wrap.wc-layout-list .wc-date{margin:0; opacity:.55;}
.wc-wrap.wc-layout-list .wc-offset{margin:0;}

/* ---------- Раскладка "minimal" (в одну строку/облако меток) ---------- */
.wc-wrap.wc-layout-minimal{padding:16px 18px;}
.wc-wrap.wc-layout-minimal .wc-grid{flex-direction:row; flex-wrap:wrap; gap:6px 16px;}
.wc-wrap.wc-layout-minimal .wc-card{
  flex:0 0 auto;
  background:none;
  border:none;
  padding:2px 0;
  border-radius:0;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.wc-wrap.wc-layout-minimal .wc-card--local .wc-city{color:var(--wc-accent);}
.wc-wrap.wc-layout-minimal .wc-icon{display:none;}
.wc-wrap.wc-layout-minimal .wc-city-block{display:flex; gap:4px;}
.wc-wrap.wc-layout-minimal .wc-time-block{display:flex; gap:4px; align-items:baseline;}
.wc-wrap.wc-layout-minimal .wc-city{font-size:11.5px; opacity:.65; font-weight:600; margin:0;}
.wc-wrap.wc-layout-minimal .wc-time{font-size:13px; font-weight:700; margin:0;}
.wc-wrap.wc-layout-minimal .wc-date,
.wc-wrap.wc-layout-minimal .wc-offset{display:none;}

@media (max-width:480px){
  .wc-wrap{padding:16px 14px 14px;}
  .wc-wrap.wc-layout-cards .wc-grid{gap:9px;}
  .wc-wrap.wc-layout-cards .wc-card{flex:1 1 42%;}
  .wc-wrap.wc-layout-cards .wc-time{font-size:19px;}
}

/* ---------- Отдельный ряд "Ваше время" над остальными городами ---------- */
/* Правила ниже намеренно идут последними в файле и переопределяют стили
   карточки независимо от выбранной раскладки (cards/list/minimal) — "Ваше
   время" всегда выглядит как горизонтальный баннер сверху, а не как ещё
   одна карточка в общей сетке. */
.wc-you-row{margin-bottom:16px;}
.wc-wrap .wc-you-row .wc-card--you{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex:none;
  width:100%;
  text-align:left;
  border-radius:12px;
  padding:14px 18px;
}
.wc-wrap .wc-you-row .wc-card--you .wc-city-block{
  display:flex;
  align-items:center;
  gap:10px;
}
.wc-wrap .wc-you-row .wc-card--you .wc-time-block{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex:0 0 auto;
}
.wc-wrap .wc-you-row .wc-card--you .wc-icon{display:inline-block; margin:0; font-size:20px;}
.wc-wrap .wc-you-row .wc-card--you .wc-city{margin:0; font-size:13px; opacity:.9;}
.wc-wrap .wc-you-row .wc-card--you .wc-time{margin:0; font-size:21px;}
.wc-wrap .wc-you-row .wc-card--you .wc-date{display:block; margin:0; opacity:.8;}
.wc-wrap .wc-you-row .wc-card--you .wc-offset{display:block; margin:0;}

@media (max-width:480px){
  .wc-wrap .wc-you-row .wc-card--you{flex-wrap:wrap; gap:8px;}
  .wc-wrap .wc-you-row .wc-card--you .wc-time-block{flex-wrap:wrap; row-gap:2px;}
}