а сейчас как /* ================== REMOTE TAB CLEAN ================== */

/* ===== ОБЩАЯ ОБЁРТКА ===== */
.ws-remote-wrap{
	display:grid;
	grid-template-columns:1fr;
	gap:20px;
	padding:0;
	background:transparent;
}

/* ===== КАРТОЧКИ ===== */
.ws-remote-card,
.ws-live-card{
	background:#020617;
	border:1px solid #22c55e;
	border-radius:14px;
	padding:18px 20px;
	box-shadow:none;
}

/* ===== ЗАГОЛОВКИ СЕКЦИЙ ===== */
.ws-remote-section-title{
	text-align:center;
	padding-bottom:10px;
	margin-bottom:16px;
	border-bottom:1px solid rgba(34,197,94,.4);
}

/* ======================================================
   🔧 ЕДИНАЯ РЕГУЛИРОВКА
   ====================================================== */

/* ===== 1️⃣ ЗАГОЛОВКИ (лейблы) ===== */
.ws-info-label,
.ws-live-title,
.ws-updated,
.ws-remote-section-title{
	font-size:16px;          /* ← МЕНЯЕШЬ ЗДЕСЬ #9ca3af;  #ef4444; */
	text-align:center;
	font-weight:500;
	color:#00e5ff;
	text-shadow:0 0 6px rgba(0,229,255,.2);
	line-height:1.3;
}
.ws-updated-time{
	font-size:14px; /* ← если надо увеличить (22:23) */
	font-weight:600;
	color:#facc15;
}

/* ===== 2️⃣ ДАННЫЕ (значения) ===== */
 .ws-info-value,
.ws-live-value,
#ws-rate-value,
#ws-rub-value,
/*.ws-live-value span, */
/*.ws-rate-line span,   */     /* ← ВСЕ валюты ТУТ */
#ws-weather{
	font-size:17px;
	text-align:center;
	font-weight:600;
	color:#22c55e;          /* ← МЕНЯЕШЬ ЦВЕТ ЗДЕСЬ */
	line-height:1.45;
} 

/* ======================================================
   INFO БЛОК
   ====================================================== */

.ws-remote-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
}

.ws-info-box{
	background:rgba(0,0,0,.35);
	border-radius:10px;
	padding:14px 16px;
	display:flex;
	flex-direction:column;
	gap:6px;
}

/* ID пользователя */
.ws-id{
	color:#22c55e;
}

/* Логин */
.ws-info-box.ok .ws-info-value{
	color:#22c55e;
}
.ws-info-box.alert .ws-info-value {
	color: #facc15;
}
/* ===================================================== */
.ws-login-status{
	margin-top:6px;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.6px;
	text-align:center;
}

.ws-login-disabled{
	color:#ef4444;
}

.ws-login-locked{
	color:#facc15;
}

/* ======================================================
   LIVE PANEL (IP / RATE / WEATHER)
   ====================================================== */

.ws-live-panel{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
	margin-top:20px;
}

@media(max-width:900px){
	.ws-live-panel{
		grid-template-columns:1fr;
	}
}

/* ======================================================
   КУРС ВАЛЮТ
   ====================================================== */
/* ===== DUAL RATE LAYOUT ===== */
.ws-rate-dual{
	display:flex;
	flex-direction:column;
	gap:10px;
}

/* контейнер двух валют */
.ws-rate-pairs{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:22px;
	justify-items:center;
}

/* колонка валюты */
.ws-rate-col{
	text-align:center;
}

/* USD → KZT / RUB → KZT */
.ws-rate-name{
	font-size:15px;
	font-weight:500;
	color:#00e5ff; 
	text-shadow:0 0 6px rgba(0,229,255,.25);
	margin-bottom:4px;
}

/* 504.6 ₸ ▬ 0.00 ₸ */
.ws-rate-line{
	font-size:17px;
	font-weight:600;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
}

/* ///////////////флажки курса и разницы//////////////////////// */

.ws-rate-up{ color:#22c55e; }   /* зелёный color:#22c55e;*/
.ws-rate-down{ color:#ef4444; } /* красный */
.ws-rate-flat{ color:#e5e7eb; } /* нейтрал color:#ffffff;*/

.ws-rate-diff{
	margin-left:3px;
	font-weight:500;
}
/*===========резкий обвал================*/
.ws-rate-alert{
	margin:14px auto;            /* ⬅ центр по горизонтали */
	padding:10px 16px;
	border-radius:12px;

	display:flex;
	align-items:center;
	justify-content:center;      /* ⬅ центр текста */
	gap:10px;

	width:fit-content;           /* ⬅ ширина по контенту */
	max-width:90%;               /* ⬅ защита для мобилы */

	font-weight:600;
	font-size:15px;
	text-align:center;
}
.ws-rate-alert.down{
	background:rgba(239,68,68,.15);
	border:1px solid rgba(239,68,68,.6);
	color:#fecaca;
	box-shadow:0 0 20px rgba(239,68,68,.35);
}

.ws-rate-alert.up{
	background:rgba(34,197,94,.15);
	border:1px solid rgba(34,197,94,.6);
	color:#bbf7d0;
	box-shadow:0 0 20px rgba(34,197,94,.35);
}

/*===========иконка банка==================*/
.ws-rate-title{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
}

.ws-rate-icon{
	width:30px;          /* размер иконки */
	height:30px;
	object-fit:contain;
	filter:drop-shadow(0 0 6px rgba(0,229,255,.6)); /* неон */
	
}
/* ==================кнопки 📈 USD → KZT RUB → KZT===============================*/

.ws-overlay-close{
	position:absolute;
	top:12px;
	right:14px;
	background:none;
	border:none;
	color:#fff;
	font-size:20px;
	cursor:pointer;
}
.ws-rate-controls{
	display:flex;
	gap:10px;
	margin-bottom:14px;
}
.ws-rate-controls button{
	background:#020617;
	border:1px solid #1e293b;
	color:#e5e7eb;
	padding:6px 14px;
	border-radius:8px;
	cursor:pointer;
}
.ws-rate-controls button.active{
	background:#00e5ff;
	color:#000;
}
/* ===== RATE SWITCH SCROLL BAR ===== */

 .ws-rate-switch{
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	padding-bottom: 6px;
	scrollbar-width: thin;
}

.ws-rate-switch::-webkit-scrollbar{
	height: 6px;
}

.ws-rate-switch::-webkit-scrollbar-track{
	background: rgba(255,255,255,0.05);
	border-radius: 10px;
}

.ws-rate-switch::-webkit-scrollbar-thumb{
	background: linear-gradient(90deg,#00e5ff,#22c55e);
	border-radius: 10px;
} 

/* ////////////////////////////////*/
/* ===== RATE SWITCH CLEAN STYLE ===== */

.ws-rate-switch{
	display:flex;
	gap:8px;
	padding:4px;
	background:rgba(255,255,255,0.03);
	border-radius:10px;
}

.ws-rate-switch button{
	background:#020617;
	color:#9ca3af;
	border:1px solid rgba(255,255,255,0.08);
	padding:6px 12px;
	border-radius:8px;
	font-size:13px;
	cursor:pointer;
	transition:0.2s;
	box-shadow:none;
}

/* hover */
.ws-rate-switch button:hover{
	color:#e5e7eb;
	border-color:#00e5ff;
	background:#020617;
}

/* ACTIVE */
.ws-rate-switch button.active{
	background:#00e5ff;
	color:#020617;
	border-color:#00e5ff;
	box-shadow:none;
}

/* УБИРАЕМ ВСЁ НЕОНОВОЕ ГОВНО */
.ws-rate-switch button:focus,
.ws-rate-switch button:active{
	outline:none;
	box-shadow:none;
}


/* чтобы кнопки не сжимались */
.ws-rate-switch button{
	flex: 0 0 auto;
}
/* ========================= */
/* Высота окна с графиком */
/* .ws-rate-chart-wrap{
	height: 780px;   /* было примерно 360-400 */ /*
} */

/* Сам canvas пусть растягивается */
/*#ws-rate-chart{
	height:100% !important;
}



/* ======================================================
   СТАТУС СЕРВЕРА + МАЯК
   ====================================================== */

.ws-beacon{
	width:10px;
	height:10px;
	border-radius:50%;
	display:inline-block;
	margin-right:6px;
}

.ws-status-online .ws-info-value{ color:#22c55e; }
.ws-status-online .ws-beacon{
	background:#22c55e;
	box-shadow:0 0 10px rgba(34,197,94,.8);
	animation:pulse-green 1.5s infinite;
}

.ws-status-offline .ws-info-value{ color:#ef4444; }
.ws-status-offline .ws-beacon{
	background:#ef4444;
	box-shadow:0 0 6px rgba(239,68,68,.7);
}

.ws-status-unknown .ws-info-value{ color:#facc15; }
.ws-status-unknown .ws-beacon{
	background:#facc15;
	box-shadow:0 0 6px rgba(250,204,21,.7);
}

@keyframes pulse-green{
	0%{box-shadow:0 0 0 0 rgba(34,197,94,.9);}
	70%{box-shadow:0 0 0 8px rgba(34,197,94,.15);}
	100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}

/* ======================================================
   КНОПКИ
   ====================================================== */

.ws-remote-btn{
	padding:14px 20px;
	font-size:15px;
	border-radius:8px;
	text-align:center;
	transition:.2s ease;
}

.ws-remote-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 6px 14px rgba(0,0,0,.45);
}

/* ================== КНОПКИ (ВОЗВРАЩЕНЫ КАК БЫЛИ) ================== */
.ws-remote-columns{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
	margin-top:24px;
}

.ws-remote-columns .ws-remote-card{
	height:100%;
}

.ws-remote-card .ws-remote-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:14px;
}

.ws-remote-btn{
	width:100%;
	padding:14px 20px;
	font-size:15px;
	border-radius:8px;
	text-align:center;
	transition:all .2s ease;
}

.ws-remote-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 6px 14px rgba(0,0,0,.45);
}
/* адаптив */
@media(max-width:900px){
	.ws-remote-columns{
		grid-template-columns:1fr;
	}
}

/* ======================================================
 * LIVE CARD — NEON + HOVER + MOBILE TAP
 * ====================================================== */

.ws-live-card{
	position:relative;
	transition:
		border-color .25s ease,
		box-shadow .25s ease,
		transform .18s ease;
}

/* ---------- НЕОН ПРИ НАВЕДЕНИИ ---------- */
.ws-live-card:hover{
	cursor:pointer;
	border-color:#00e5ff;
	box-shadow:
		0 0 0 1px rgba(0,229,255,.45),
		0 0 14px rgba(0,229,255,.35),
		0 0 28px rgba(0,229,255,.25);
	transform: translateY(-1px);
}

/* ---------- АКЦЕНТ ДЛЯ КУРСА ---------- */
.ws-rate-card:hover{
	box-shadow:
		0 0 0 1px rgba(0,229,255,.55),
		0 0 18px rgba(0,229,255,.45),
		0 0 36px rgba(0,229,255,.35);
}

/* ---------- TAP ЭФФЕКТ (МОБИЛА) ---------- */
.ws-live-card:active{
	transform: scale(.97);
	box-shadow:
		0 0 0 1px rgba(0,229,255,.7),
		0 0 12px rgba(0,229,255,.6),
		0 0 24px rgba(0,229,255,.5);
}

/* ---------- ВИЗУАЛЬНАЯ ПОДСКАЗКА (TAP) ---------- */
@media (hover: none) {
	.ws-live-card{
		-webkit-tap-highlight-color: transparent;
	}
}

/* ---------- OFFLINE: БЕЗ СВЕЧЕНИЯ ---------- */
/*.ws-status-offline:hover,
.ws-status-offline:active{
	cursor:not-allowed;
	border-color:#7f1d1d;
	box-shadow:none;
	transform:none;
}*/

/* ///// ПОГОДА / HERO ///// */
.ws-weather-visual{
	position:relative;
	height:220px;
	border-radius:18px;
	background:linear-gradient(160deg,#0ea5e9,#020617);
	box-shadow:0 30px 60px rgba(0,0,0,.6);
	overflow:hidden;
	margin-bottom:20px;
}

.ws-weather-visual .sky{
	position:absolute;
	inset:0;
	background:radial-gradient(
		circle at 30% 20%,
		rgba(255,255,255,.12),
		transparent 60%
	);
}

.weather-main{
	position:relative;
	z-index:2;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#e5e7eb;
}

.weather-icon-big{
	font-size:72px;
	filter:drop-shadow(0 0 20px rgba(255,255,255,.35));
	animation:float 4s ease-in-out infinite;
}

.weather-temp-big{
	font-size:48px;
	font-weight:700;
	margin-top:8px;
}

.weather-desc-big{
	font-size:15px;
	opacity:.85;
	margin-top:4px;
	text-transform:capitalize;
}

@keyframes float{
	0%,100%{transform:translateY(0)}
	50%{transform:translateY(-8px)}
}

/* ////////////////////////////////////////////////// */
/* ======================================================
   WEATHER OVERLAY — FIXED NORMAL SIZE
   ====================================================== */

.ws-weather-overlay-box{
	position:relative;

	width:880px;        /* нормальная ширина */
	max-width:100vw;

	margin:6vh auto;
	padding:28px;

	background:rgba(2,6,23,.85);
	border:1px solid #00e5ff;
	border-radius:22px;

	box-shadow:
		0 0 25px rgba(34,197,94,.45),
		0 0 60px rgba(34,197,94,.15);
}

/* заголовок */
.ws-weather-overlay-box h2{
	font-size:18px;
	margin-bottom:18px;
	text-align:center;
	color:#22c55e;
}

/* герой */
.ws-weather-visual{
	height:220px;
	border-radius:20px;
	margin-bottom:20px;
}


/* ============================================================
   MOBILE FIX
   ============================================================ */
/* мобильная страховка */
/*@media(max-width:600px){
	#ws-weather-overlay .ws-weather-overlay-box{
		height:640px;
	}
	#ws-weather-overlay .ws-weather-overlay-box{
		width:94vw;
	}
}

@media(max-width:600px){
	#ws-weather-overlay .ws-weather-visual{
		height:640px;
	}
	#ws-weather-overlay .ws-weather-visual{
		width:94vw;
	}
} */

/* ======================================================
   WEATHER MOBILE ADAPTATION
   ====================================================== */

@media (max-width: 600px){

  /* герой меньше */
  .ws-weather-visual{
    height:160px;
    margin-bottom:14px;
    border-radius:16px;
  }

  .weather-icon-big{
    font-size:52px;
  }

  .weather-temp-big{
    font-size:34px;
  }

  .weather-desc-big{
    font-size:13px;
  }

  /* ощущается */
  .weather-feels{
    font-size:13px;
    margin-bottom:10px;
  }

  /* сетка параметров -> 2 колонки */
  .ws-weather-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .ws-weather-grid div{
    padding:10px;
    font-size:13px;
  }

  /* восход / закат */
  .ws-weather-sun{
    font-size:12px;
  }

  /* окно overlay компактнее */
  .ws-weather-overlay-box{
    padding:18px;
    margin:4vh auto;
  }
}
/* ===== СПИСОК ПРОГНОЗА — ГОРИЗОНТАЛЬНО ===== */

#ws-weather-forecast{
	display:flex;
	gap:14px;
	padding:14px 6px 18px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
}

/* 🔥 ЦЕНТРОВКА */
#ws-weather-forecast.centered{
	justify-content:center;
	overflow-x:hidden;
}
/* аккуратный скролл */
#ws-weather-forecast::-webkit-scrollbar{
	height:6px;
}
#ws-weather-forecast::-webkit-scrollbar-thumb{
	background:rgba(0,229,255,.35);
	border-radius:6px;
}

/* ===== КАРТОЧКА ДНЯ (ВСЕ ОДИНАКОВЫЕ) ===== */
.ws-weather-row{
	flex:0 0 120px;
	scroll-snap-align:start;

	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;

	padding:14px 10px;
	border-radius:14px;

	background:rgba(255,255,255,.05);
	backdrop-filter:blur(6px);

	color:#e5e7eb;
	text-align:center;
	transition:background .25s, transform .25s;
}

/* hover — лёгкий, без ебли */
.ws-weather-row:hover{
	background:rgba(0,229,255,.10);
	transform:translateY(-2px);
}


/* ДАТА */
.ws-w-date{
	font-size:16px;
	color:#9ca3af;
}

/* ИКОНКА */
.ws-w-icon{
	font-size:26px;
	margin:6px 0;
}

/* ТЕМПЕРАТУРЫ */
.ws-w-temp{
	display:flex;
	gap:6px;
	font-weight:600;
}

.ws-w-temp .max{ color:#22c55e; }
.ws-w-temp .min{ color:#60a5fa; }

/* ОПИСАНИЕ */
.ws-w-desc{
	font-size:12px;
	color:#cbd5f5;
	opacity:.85;
	white-space:nowrap;
}

/* ==========================================
   FIX "DRUNK NUMBERS" (табличные цифры)
   ========================================== */

/* делаем цифры ровными */
.ws-info-value,
.ws-id{
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: .2px;
}

/* значения в карточках тоже без мыла */
.ws-info-value{
	font-family: "Segoe UI", Arial, sans-serif !important;
	text-shadow: none !important;
}

/* ============================= */
/* ============================================================
   OVERLAY WINDOWS (FINAL CLEAN VERSION)
   ============================================================ */
/* ================== RATE RANGE BUTTONS (NEON) ================== */

.ws-rate-controls button{
	position:relative;
	transition:
		background .2s ease,
		box-shadow .25s ease,
		transform .15s ease;
}

/* hover */
.ws-rate-controls button:hover{
	box-shadow:
		0 0 0 1px rgba(0,229,255,.5),
		0 0 12px rgba(0,229,255,.45);
	transform:translateY(-1px);
}

/* active */
.ws-rate-controls button.active{
	background:#00e5ff;
	color:#020617;
	box-shadow:
		0 0 0 1px rgba(0,229,255,.9),
		0 0 16px rgba(0,229,255,.75),
		0 0 32px rgba(0,229,255,.55);
	font-weight:700;
}

/* mobile tap */
.ws-rate-controls button:active{
	transform:scale(.96);
	box-shadow:
		0 0 0 1px rgba(0,229,255,.9),
		0 0 20px rgba(0,229,255,.7);
}


/*=====================================================*/
/* ===== ALERT CARD ===== */
/*.ws-alert-card{
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 20px 24px;
    border-radius: 16px;
} */

.ws-alert-card {
	border: 1px solid #ef4444;
	background: rgba(239,68,68,.12);
	box-shadow: 0 0 0 1px rgba(239,68,68,.63);
	margin-top: 28px;
    margin-bottom: 28px;
    padding: 20px 24px;
    border-radius: 16px;
}

.ws-alert-text {
	color: #fecaca;
	font-size: 18px;
	text-align: center;
	line-height: 1.6;
	font-weight: 600;
}

/*////////vanga//////////////*/
.ws-rate-forecast{
	margin-top:8px;
	text-align:center;
	font-weight:600;
	font-size:14px;
}

.ws-rate-forecast.up{ color:#22c55e; }
.ws-rate-forecast.down{ color:#ef4444; }
.ws-rate-forecast.flat{ color:#9ca3af; }


/* ===== ОБЩИЙ OVERLAY ===== */

.ws-overlay{
	position:fixed;
	inset:0;
	display:none;
	z-index:9999;
}

.ws-overlay-bg{
	position:absolute;
	inset:0;
	background:
		linear-gradient(rgba(2,6,23,.9), rgba(2,6,23,.95));
}

/* крестик */
.ws-overlay-close{
	position:absolute;
	top:12px;
	right:14px;
	background:none;
	border:none;
	color:#ffffff;
	font-size:20px;
	cursor:pointer;
}

/* ============================================================
   RATE OVERLAY (ГРАФИК)
   ============================================================ */

.ws-rate-overlay-box{
	position:relative;

	width:85vw;
	max-width:760px;
	height:460px;

	margin:5vh auto;
	padding:22px;

	background:rgba(2,6,23,.75);
	border:1px solid #00e5ff;
	border-radius:18px;

	box-shadow:0 0 40px rgba(0,229,255,.45);
}

/* контейнер графика */
.ws-rate-chart-wrap{
	height:330px;
}

#ws-rate-chart{
	width:100% !important;
	height:100% !important;
}
/* ============================================================
   MOBILE FIX
   ============================================================ */
/* мобильная страховка */
@media(max-width:600px){
	#ws-rate-overlay .ws-overlay-box{
		height:640px;
	}
	#ws-weather-overlay .ws-overlay-box{
		width:94vw;
	}
}


/* =========================================================
   WEATHER OVERLAY V2 — richer dashboard
   ========================================================= */
.ws-weather-overlay-box{
    width:920px;
    max-width:calc(100vw - 28px);
    max-height:90vh;
    overflow:auto;
    scrollbar-width:thin;
}
.ws-weather-headline{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin:0 6px 14px;
}
.ws-weather-headline h2{
    margin:0;
    text-align:left;
    font-size:24px;
    color:#e5faff;
    letter-spacing:.02em;
}
.ws-weather-kicker{
    color:#22c55e;
    font-weight:800;
    font-size:12px;
    letter-spacing:.16em;
    margin-bottom:2px;
}
.ws-weather-updated{
    color:#718096;
    font-size:12px;
    padding-bottom:3px;
}
.ws-weather-visual{
    height:250px;
    isolation:isolate;
    background:linear-gradient(155deg,#149ed1 0%,#0b4e76 43%,#020617 100%);
    border:1px solid rgba(255,255,255,.08);
}
.ws-weather-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(2,6,23,.24));
    pointer-events:none;
}
.ws-weather-orb{
    position:absolute;
    width:98px;
    height:98px;
    border-radius:50%;
    right:78px;
    top:35px;
    background:radial-gradient(circle,#fff7b0 0 15%,#ffd34d 38%,rgba(255,197,46,.18) 67%,transparent 70%);
    filter:drop-shadow(0 0 24px rgba(255,205,64,.42));
    opacity:.7;
    animation:wsOrbPulse 5s ease-in-out infinite;
}
.ws-weather-cloud{
    position:absolute;
    width:150px;
    height:34px;
    border-radius:50px;
    background:rgba(255,255,255,.10);
    filter:blur(.2px);
    opacity:.4;
}
.ws-weather-cloud::before,.ws-weather-cloud::after{
    content:"";
    position:absolute;
    background:inherit;
    border-radius:50%;
}
.ws-weather-cloud::before{width:55px;height:55px;left:28px;bottom:2px}
.ws-weather-cloud::after{width:72px;height:72px;left:66px;bottom:0}
.cloud-a{left:-170px;top:48px;animation:wsCloud 22s linear infinite}
.cloud-b{left:-240px;top:145px;transform:scale(.72);animation:wsCloud 30s linear 6s infinite;opacity:.25}
@keyframes wsCloud{from{transform:translateX(0)}to{transform:translateX(1160px)}}
@keyframes wsOrbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.ws-weather-visual.night{background:linear-gradient(155deg,#16213e,#0b1025 60%,#020617)}
.ws-weather-visual.night .ws-weather-orb{background:radial-gradient(circle,#eef2ff 0 30%,#a5b4fc 44%,rgba(165,180,252,.15) 65%,transparent 70%);opacity:.7}
.ws-weather-visual.clouds,.ws-weather-visual.partly{background:linear-gradient(155deg,#38657a,#20394a 55%,#07111e)}
.ws-weather-visual.clouds .ws-weather-orb{opacity:.2}
.ws-weather-visual.rain{background:linear-gradient(155deg,#244454,#122733 58%,#020617)}
.ws-weather-visual.storm{background:linear-gradient(155deg,#30304f,#17172a 58%,#020617)}
.ws-weather-visual.snow{background:linear-gradient(155deg,#7da3b8,#38566b 58%,#0c1721)}
.ws-weather-visual.fog{background:linear-gradient(155deg,#60717c,#344550 58%,#101820)}

.weather-main{align-items:flex-start;padding-left:54px;justify-content:center}
.weather-icon-big{font-size:58px}
.weather-temp-big{font-size:58px;line-height:1;margin-top:4px;text-shadow:0 8px 28px rgba(0,0,0,.22)}
.weather-desc-big{font-size:17px;font-weight:600}
.weather-feels{font-size:13px;color:#d6e7f1;opacity:.88;margin-top:8px}

.ws-weather-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:2px 0 14px;
}
.ws-weather-grid>div{
    min-height:62px;
    padding:11px 13px;
    border-radius:13px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(148,163,184,.10);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
}
.ws-weather-grid span{font-size:11px;color:#8492a6}
.ws-weather-grid strong{font-size:14px;color:#e5f4ff;font-weight:700}

.ws-weather-sun{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:9px 13px;
    margin-bottom:15px;
    border-radius:13px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(148,163,184,.08);
}
.ws-weather-sun>div:not(.ws-weather-dayline){display:flex;align-items:center;gap:7px;font-size:12px;color:#93a4b8}
.ws-weather-sun strong{color:#e8f7ff}
.ws-weather-dayline{height:2px;background:linear-gradient(90deg,#f59e0b,#fde68a,#f59e0b);opacity:.55;position:relative}
.ws-weather-dayline i{position:absolute;width:8px;height:8px;border-radius:50%;background:#fde68a;top:-3px;left:50%;box-shadow:0 0 12px #fbbf24}
.ws-weather-forecast-title{font-size:11px;letter-spacing:.13em;color:#718096;margin:0 6px -4px;font-weight:700}
.ws-weather-row{flex-basis:145px;min-height:174px;border:1px solid rgba(148,163,184,.08)}
.ws-weather-row.today{background:rgba(0,229,255,.075);border-color:rgba(0,229,255,.25)}
.ws-w-weekday{font-size:11px;font-weight:800;color:#22c55e;letter-spacing:.08em}
.ws-w-date{font-size:13px}
.ws-w-icon{font-size:31px}
.ws-w-desc{max-width:126px;overflow:hidden;text-overflow:ellipsis}
.ws-w-mini{display:flex;gap:8px;font-size:10px;color:#94a3b8;margin-top:7px;white-space:nowrap}
.ws-weather-loading{width:100%;text-align:center;color:#8293a7;padding:35px 0}

@media(max-width:700px){
    .ws-weather-overlay-box{max-height:94vh;padding:16px}
    .ws-weather-headline h2{font-size:19px}
    .ws-weather-updated{display:none}
    .ws-weather-visual{height:205px}
    .weather-main{padding-left:24px}
    .weather-icon-big{font-size:45px}
    .weather-temp-big{font-size:46px}
    .ws-weather-orb{right:20px;top:30px;width:78px;height:78px}
    .ws-weather-grid{grid-template-columns:repeat(2,1fr)}
    .ws-weather-grid>div{min-height:54px}
    .ws-weather-sun{grid-template-columns:1fr 1fr}
    .ws-weather-dayline{display:none}
    .ws-weather-sun>div:last-child{justify-content:flex-end}
    .ws-weather-row{flex-basis:132px}
}


/* =========================================================
   WEATHER V4 — RESPONSIVE AUTO MARQUEE FORECAST
   Если 5 карточек помещаются — стоят по центру.
   Если не помещаются — бесшовно едут по горизонтали.
   На телефоне также можно свайпать пальцем; автопрокрутка
   после ручного свайпа сама продолжится.
   ========================================================= */
#ws-weather-forecast{
    position:relative;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
}

#ws-weather-forecast.ws-weather-auto-scroll{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden;
    scroll-snap-type:none;
    scrollbar-width:none;
    touch-action:pan-x pan-y;
    cursor:grab;
    /* мягко прячем края, чтобы движение выглядело как лента */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
#ws-weather-forecast.ws-weather-auto-scroll:active{cursor:grabbing}
#ws-weather-forecast.ws-weather-auto-scroll::-webkit-scrollbar{display:none}
#ws-weather-forecast.ws-weather-auto-scroll .ws-weather-row{
    scroll-snap-align:none;
    flex-shrink:0;
}
#ws-weather-forecast.ws-weather-paused .ws-weather-row{
    /* визуально ничего не дёргаем; класс нужен JS для состояния */
}

@media (max-width:700px){
    /* Верхняя часть остаётся компактной, а прогноз снова становится
       именно горизонтальной лентой, а не вертикальным списком. */
    #ws-weather-forecast,
    #ws-weather-forecast.centered,
    #ws-weather-forecast.ws-weather-auto-scroll{
        display:flex;
        flex-direction:row;
        gap:10px;
        padding:10px 4px 8px;
    }

    #ws-weather-forecast .ws-weather-row{
        flex:0 0 128px;
        width:128px;
        min-height:166px;
        padding:11px 8px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-between;
        text-align:center;
        border-radius:13px;
    }

    #ws-weather-forecast .ws-w-weekday{font-size:10px}
    #ws-weather-forecast .ws-w-date{font-size:10px}
    #ws-weather-forecast .ws-w-icon{font-size:28px;margin:5px 0}
    #ws-weather-forecast .ws-w-temp{display:flex;flex-direction:row;gap:5px;align-items:baseline}
    #ws-weather-forecast .ws-w-temp .max{font-size:14px}
    #ws-weather-forecast .ws-w-temp .min{font-size:11px}
    #ws-weather-forecast .ws-w-desc{
        width:112px;
        max-width:112px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        font-size:9.5px;
    }
    #ws-weather-forecast .ws-w-mini{font-size:8.5px;gap:6px;margin-top:5px}
}

@media (max-width:420px){
    #ws-weather-forecast .ws-weather-row{
        flex-basis:116px;
        width:116px;
        min-height:158px;
        padding:9px 7px;
    }
    #ws-weather-forecast .ws-w-desc{width:102px;max-width:102px}
}

/* Пользователь с системной настройкой «меньше движения» получает
   обычный ручной горизонтальный скролл без принудительной анимации. */
@media (prefers-reduced-motion:reduce){
    #ws-weather-forecast.ws-weather-auto-scroll{scroll-behavior:auto}
}

/* =========================================================
   WEATHER V6 — COMPACT HEIGHT MODE
   Для ноутбуков/окон с небольшой высотой (1366x768 и похожие).
   Широкие/4K экраны остаются без изменений.
   ========================================================= */

@media (max-height: 820px) and (min-width: 701px){
    .ws-weather-overlay-box{
        margin:2vh auto;
        padding:16px 20px;
        max-height:96vh;
    }

    .ws-weather-headline{margin:0 4px 9px}
    .ws-weather-headline h2{font-size:20px}
    .ws-weather-kicker{font-size:10px}
    .ws-weather-updated{font-size:10px}

    .ws-weather-visual{
        height:165px;
        margin-bottom:11px;
        border-radius:16px;
    }

    .weather-main{padding-left:36px}
    .weather-icon-big{font-size:42px}
    .weather-temp-big{font-size:45px;margin-top:2px}
    .weather-desc-big{font-size:14px}
    .weather-feels{font-size:11px;margin-top:5px}

    .ws-weather-orb{
        width:72px;
        height:72px;
        right:55px;
        top:24px;
    }

    .ws-weather-grid{
        gap:7px;
        margin:0 0 9px;
    }

    .ws-weather-grid>div{
        min-height:46px;
        padding:7px 10px;
        border-radius:10px;
        gap:2px;
    }

    .ws-weather-grid span{font-size:10px}
    .ws-weather-grid strong{font-size:12px}

    .ws-weather-sun{
        padding:6px 10px;
        margin-bottom:9px;
        border-radius:10px;
    }

    .ws-weather-sun>div:not(.ws-weather-dayline){font-size:10px}

    .ws-weather-forecast-title{
        font-size:10px;
        margin:0 5px -6px;
    }

    #ws-weather-forecast,
    #ws-weather-forecast.centered,
    #ws-weather-forecast.ws-weather-auto-scroll{
        gap:10px;
        padding:10px 5px 8px;
    }

    #ws-weather-forecast .ws-weather-row{
        min-height:128px;
        padding:8px;
        border-radius:11px;
    }

    #ws-weather-forecast .ws-w-weekday{font-size:9px}
    #ws-weather-forecast .ws-w-date{font-size:10px}
    #ws-weather-forecast .ws-w-icon{font-size:24px;margin:2px 0}
    #ws-weather-forecast .ws-w-temp .max{font-size:13px}
    #ws-weather-forecast .ws-w-temp .min{font-size:10px}
    #ws-weather-forecast .ws-w-desc{font-size:9px}
    #ws-weather-forecast .ws-w-mini{font-size:8px;margin-top:3px}
}

@media (max-height: 700px) and (min-width: 701px){
    .ws-weather-overlay-box{
        margin:1vh auto;
        padding:12px 17px;
        max-height:98vh;
    }

    .ws-weather-headline{margin-bottom:6px}

    .ws-weather-visual{
        height:135px;
        margin-bottom:7px;
    }

    .weather-icon-big{font-size:35px}
    .weather-temp-big{font-size:39px}
    .weather-desc-big{font-size:12px}
    .weather-feels{font-size:10px;margin-top:3px}

    .ws-weather-orb{
        width:60px;
        height:60px;
        top:18px;
    }

    .ws-weather-grid{
        gap:5px;
        margin-bottom:6px;
    }

    .ws-weather-grid>div{
        min-height:40px;
        padding:5px 9px;
    }

    .ws-weather-sun{
        padding:5px 9px;
        margin-bottom:6px;
    }

    #ws-weather-forecast,
    #ws-weather-forecast.centered,
    #ws-weather-forecast.ws-weather-auto-scroll{
        padding-top:7px;
        padding-bottom:5px;
    }

    #ws-weather-forecast .ws-weather-row{
        min-height:112px;
        padding-top:6px;
        padding-bottom:6px;
    }

    #ws-weather-forecast .ws-w-icon{font-size:21px}
}

@media (max-width:700px) and (max-height:800px){
    .ws-weather-overlay-box{
        margin:1.5vh auto;
        padding:12px;
        max-height:97vh;
    }

    .ws-weather-headline{margin-bottom:7px}

    .ws-weather-visual{
        height:155px;
        margin-bottom:8px;
    }

    .weather-main{padding-left:18px}
    .weather-icon-big{font-size:36px}
    .weather-temp-big{font-size:40px}
    .weather-desc-big{font-size:12px}
    .weather-feels{font-size:10px;margin-top:4px}

    .ws-weather-grid{
        gap:6px;
        margin-bottom:7px;
    }

    .ws-weather-grid>div{
        min-height:44px;
        padding:6px 8px;
    }

    .ws-weather-sun{
        padding:6px 8px;
        margin-bottom:7px;
    }

    #ws-weather-forecast .ws-weather-row{
        min-height:145px;
    }
}

/* =========================================================
   WEATHER V6.1 — LOW SCREEN VERTICAL POSITION FIX
   На низких ноутбучных экранах опускаем окно чуть ниже,
   чтобы верхняя рамка и кнопка закрытия не упирались в край.
   ========================================================= */

@media (max-height: 820px) and (min-width: 690px){
    .ws-weather-overlay-box{
        margin:58px auto 10px;
        max-height:calc(100vh - 38px);
    }

    .ws-weather-overlay-box .ws-overlay-close{
        top:10px;
        right:12px;
        z-index:20;
    }
}

@media (max-height: 700px) and (min-width: 701px){
    .ws-weather-overlay-box{
        margin:18px auto 6px;
        max-height:calc(100vh - 24px);
    }
}
/* ==========================================
   WEATHER — SAFE TOP OFFSET FOR LOW SCREENS
   ========================================== */

@media (max-height:820px) and (min-width:690px){

    #ws-weather-overlay{
        box-sizing:border-box;
        padding-top:50px;
    }

    #ws-weather-overlay .ws-weather-overlay-box{
        margin:0 auto 10px !important;
        max-height:calc(100vh - 60px) !important;
    }
}

/* =========================================================
   RATE V2 — ADAPTIVE MARKET DASHBOARD
   Телефон / низкий 15" ноутбук / Full HD / 4K.
   Рабочая логика курсов и AJAX не меняется.
   ========================================================= */

#ws-rate-overlay{
    box-sizing:border-box;
    overflow:hidden;
}

#ws-rate-overlay .ws-overlay-bg{
    background:
        radial-gradient(circle at 50% 20%,rgba(0,229,255,.055),transparent 35%),
        linear-gradient(rgba(2,6,23,.91),rgba(2,6,23,.97));
    backdrop-filter:blur(2px);
}

.ws-rate-overlay-box{
    box-sizing:border-box;
    width:min(900px,calc(100vw - 40px));
    max-width:none;
    height:auto;
    max-height:calc(100vh - 72px);
    margin:36px auto;
    padding:20px 22px 18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:12px;
    background:linear-gradient(160deg,rgba(7,16,31,.97),rgba(2,6,23,.96));
    border:1px solid rgba(0,229,255,.72);
    border-radius:20px;
    box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 34px rgba(0,229,255,.22);
}

.ws-rate-overlay-box .ws-overlay-close{
    top:12px;
    right:14px;
    z-index:10;
    width:34px;
    height:34px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(148,163,184,.14);
    border-radius:10px;
    background:rgba(2,6,23,.56);
    color:#cbd5e1;
    font-size:17px;
    line-height:1;
    transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.ws-rate-overlay-box .ws-overlay-close:hover{
    color:#fff;
    border-color:rgba(0,229,255,.45);
    background:rgba(15,23,42,.92);
}
.ws-rate-overlay-box .ws-overlay-close:active{transform:scale(.94)}

.ws-rate-head{
    min-height:44px;
    padding-right:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.ws-rate-heading{display:flex;align-items:center;gap:11px;min-width:0}
.ws-rate-head-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(0,229,255,.075);
    border:1px solid rgba(0,229,255,.18);
    font-size:19px;
}
.ws-rate-kicker{
    margin-bottom:2px;
    color:#22c55e;
    font:800 9px/1.1 "Segoe UI",Arial,sans-serif;
    letter-spacing:.16em;
}
.ws-rate-heading h2{
    margin:0;
    color:#eafaff;
    font:700 20px/1.15 "Segoe UI",Arial,sans-serif;
    letter-spacing:.01em;
}
.ws-rate-current-pair{
    flex:0 0 auto;
    padding:7px 11px;
    border-radius:10px;
    border:1px solid rgba(0,229,255,.18);
    background:rgba(0,229,255,.055);
    color:#8befff;
    font:700 12px/1 "Segoe UI",Arial,sans-serif;
    letter-spacing:.03em;
}

.ws-rate-switch{
    display:flex;
    gap:7px;
    margin:0;
    padding:4px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-behavior:smooth;
    background:rgba(255,255,255,.026);
    border:1px solid rgba(148,163,184,.07);
    border-radius:12px;
}
.ws-rate-switch::-webkit-scrollbar{display:none}
.ws-rate-switch button{
    flex:0 0 auto;
    min-height:31px;
    padding:6px 11px;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:#8291a6;
    font:600 11px/1 "Segoe UI",Arial,sans-serif;
    box-shadow:none;
    transition:background .18s,color .18s,border-color .18s;
}
.ws-rate-switch button:hover{
    background:rgba(255,255,255,.035);
    border-color:rgba(0,229,255,.18);
    color:#d9f8ff;
}
.ws-rate-switch button.active{
    background:rgba(0,229,255,.92);
    border-color:#00e5ff;
    color:#021019;
    box-shadow:0 4px 14px rgba(0,229,255,.16);
    font-weight:800;
}

.ws-rate-toolbar{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:32px;
}
.ws-rate-range-label{
    flex:0 0 auto;
    color:#65758b;
    font:700 10px/1 "Segoe UI",Arial,sans-serif;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ws-rate-controls{
    display:flex;
    gap:6px;
    margin:0;
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.ws-rate-controls::-webkit-scrollbar{display:none}
.ws-rate-controls button{
    flex:0 0 auto;
    min-width:36px;
    min-height:29px;
    padding:5px 10px;
    border-radius:8px;
    border:1px solid rgba(148,163,184,.10);
    background:rgba(2,6,23,.72);
    color:#9ba8b9;
    font:700 11px/1 "Segoe UI",Arial,sans-serif;
    box-shadow:none;
}
.ws-rate-controls button:hover{
    transform:none;
    border-color:rgba(0,229,255,.34);
    box-shadow:none;
    color:#dffbff;
}
.ws-rate-controls button.active{
    background:rgba(0,229,255,.94);
    color:#021019;
    border-color:#00e5ff;
    box-shadow:0 4px 15px rgba(0,229,255,.17);
}
.ws-rate-controls button:active{transform:scale(.96);box-shadow:none}

.ws-rate-chart-wrap{
    position:relative;
    height:380px;
    min-height:260px;
    padding:8px 6px 0;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.08);
    border-radius:14px;
    background:
        radial-gradient(circle at 50% 45%,rgba(0,229,255,.035),transparent 52%),
        rgba(1,5,15,.36);
}
#ws-rate-chart{width:100% !important;height:100% !important}

.ws-rate-alert{
    min-height:34px;
    margin:0 auto !important;
    width:max-content;
    max-width:90%;
    align-self:center;
    padding:7px 11px !important;
    border-radius:10px !important;
    justify-content:center;
    align-items:center;
    text-align:center;
    font:700 11px/1.3 "Segoe UI",Arial,sans-serif;
    letter-spacing:.02em;
}

/* 4K / большие рабочие столы: больше полезная площадь, но без гигантского окна. */
@media (min-width:2200px) and (min-height:1200px){
    .ws-rate-overlay-box{
        width:min(1080px,calc(100vw - 80px));
        margin:6vh auto;
        padding:24px 26px 22px;
        gap:14px;
    }
    .ws-rate-heading h2{font-size:23px}
    .ws-rate-head-icon{width:42px;height:42px;flex-basis:42px;font-size:21px}
    .ws-rate-switch button{font-size:12px;padding:7px 13px}
    .ws-rate-chart-wrap{height:500px}
}

/* Низкий 15" ноутбук / 1366x768 и похожие окна. */
@media (max-height:820px) and (min-width:701px){
    #ws-rate-overlay{padding-top:48px}
    .ws-rate-overlay-box{
        width:min(840px,calc(100vw - 44px));
        max-height:calc(100vh - 58px);
        margin:0 auto 10px;
        padding:14px 18px 14px;
        gap:8px;
        border-radius:17px;
    }
    .ws-rate-head{min-height:38px}
    .ws-rate-head-icon{width:32px;height:32px;flex-basis:32px;border-radius:9px;font-size:16px}
    .ws-rate-kicker{font-size:8px}
    .ws-rate-heading h2{font-size:17px}
    .ws-rate-current-pair{padding:6px 9px;font-size:10px}
    .ws-rate-switch{gap:5px;padding:3px}
    .ws-rate-switch button{min-height:27px;padding:5px 9px;font-size:10px}
    .ws-rate-toolbar{min-height:28px}
    .ws-rate-controls button{min-width:32px;min-height:26px;padding:4px 8px;font-size:10px}
    .ws-rate-chart-wrap{height:300px;min-height:250px;padding-top:4px}
    .ws-rate-alert{min-height:30px;padding:5px 9px !important;font-size:10px}
}

@media (max-height:650px) and (min-width:701px){
    #ws-rate-overlay{padding-top:12px}
    .ws-rate-overlay-box{
        max-height:calc(100vh - 20px);
        margin:0 auto 8px;
        padding:10px 15px;
        gap:6px;
    }
    .ws-rate-head{min-height:32px}
    .ws-rate-head-icon{display:none}
    .ws-rate-kicker{display:none}
    .ws-rate-heading h2{font-size:15px}
    .ws-rate-chart-wrap{height:245px;min-height:205px}
}

/* Телефон / узкий планшет: окно становится настоящей mobile-панелью. */
@media (max-width:700px){
    #ws-rate-overlay{
        padding:10px;
        overflow:hidden;
    }
    .ws-rate-overlay-box{
        width:100%;
        height:calc(100dvh - 20px);
        max-height:calc(100dvh - 20px);
        margin:0;
        padding:13px 10px 11px;
        gap:8px;
        border-radius:16px;
    }
    .ws-rate-overlay-box .ws-overlay-close{
        top:9px;
        right:9px;
        width:32px;
        height:32px;
        font-size:16px;
    }
    .ws-rate-head{min-height:39px;padding:0 38px 0 1px;gap:8px}
    .ws-rate-head-icon{width:32px;height:32px;flex-basis:32px;border-radius:9px;font-size:16px}
    .ws-rate-kicker{font-size:7px;letter-spacing:.12em}
    .ws-rate-heading h2{font-size:16px}
    .ws-rate-current-pair{padding:5px 7px;font-size:9px;border-radius:8px}
    .ws-rate-switch{
        margin:0 -1px;
        padding:3px;
        gap:4px;
        scroll-snap-type:x proximity;
    }
    .ws-rate-switch button{
        min-height:29px;
        padding:5px 9px;
        font-size:10px;
        scroll-snap-align:center;
    }
    .ws-rate-toolbar{gap:7px;min-height:29px}
    .ws-rate-range-label{font-size:8px}
    .ws-rate-controls{gap:4px}
    .ws-rate-controls button{min-width:31px;min-height:27px;padding:4px 7px;font-size:9px}
    .ws-rate-chart-wrap{
        flex:1 1 auto;
        height:auto;
        min-height:245px;
        padding:5px 2px 0;
        border-radius:12px;
    }
    .ws-rate-alert{min-height:30px;font-size:9px;padding:5px 8px !important}
}

@media (max-width:420px){
    #ws-rate-overlay{padding:6px}
    .ws-rate-overlay-box{
        height:calc(100dvh - 12px);
        max-height:calc(100dvh - 12px);
        padding:11px 8px 9px;
        gap:7px;
        border-radius:14px;
    }
    .ws-rate-current-pair{display:none}
    .ws-rate-head{padding-right:36px}
    .ws-rate-switch button{padding-left:8px;padding-right:8px}
    .ws-rate-range-label{display:none}
    .ws-rate-chart-wrap{min-height:225px}
}

@media (max-width:700px) and (max-height:620px){
    #ws-rate-overlay{padding:5px}
    .ws-rate-overlay-box{
        height:calc(100dvh - 10px);
        max-height:calc(100dvh - 10px);
        padding:8px;
        gap:5px;
    }
    .ws-rate-head{min-height:31px}
    .ws-rate-head-icon,.ws-rate-kicker{display:none}
    .ws-rate-heading h2{font-size:14px}
    .ws-rate-switch button{min-height:25px;padding:4px 8px;font-size:9px}
    .ws-rate-toolbar{min-height:25px}
    .ws-rate-controls button{min-height:24px;padding:3px 7px}
    .ws-rate-chart-wrap{min-height:185px}
}

@media (prefers-reduced-motion:reduce){
    .ws-rate-switch,.ws-rate-controls{scroll-behavior:auto}
    .ws-rate-overlay-box *{transition:none !important}
}


/* =========================================================
   WEATHER V7 — LIVE SUN / NIGHT TIMELINE
   Шарик показывает текущее положение между восходом и закатом.
   После заката шкала автоматически становится: Закат -> Восход.
   ========================================================= */
.ws-weather-sun-side{
    white-space:nowrap;
}
.ws-weather-sun-right{
    justify-content:flex-end;
}
.ws-weather-dayline{
    height:3px;
    border-radius:999px;
    overflow:visible;
    opacity:.9;
    background:linear-gradient(90deg,#f59e0b 0%,#fde68a 50%,#f59e0b 100%);
    box-shadow:0 0 9px rgba(245,158,11,.13);
}
.ws-weather-dayline i{
    width:12px;
    height:12px;
    top:50%;
    left:0;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle at 38% 35%,#fff9c7 0 18%,#fde047 38%,#f59e0b 72%,#b45309 100%);
    border:1px solid rgba(255,255,255,.62);
    box-shadow:0 0 7px rgba(253,224,71,.95),0 0 15px rgba(245,158,11,.55);
    transition:left .8s linear,background .35s ease,box-shadow .35s ease;
    z-index:2;
}
.ws-weather-sun.is-night .ws-weather-dayline{
    background:linear-gradient(90deg,#334155 0%,#64748b 45%,#93c5fd 100%);
    box-shadow:0 0 9px rgba(96,165,250,.12);
}
.ws-weather-sun.is-night .ws-weather-dayline i{
    background:radial-gradient(circle at 38% 35%,#ffffff 0 18%,#dbeafe 35%,#93c5fd 68%,#3b82f6 100%);
    border-color:rgba(219,234,254,.8);
    box-shadow:0 0 7px rgba(191,219,254,.9),0 0 15px rgba(96,165,250,.5);
}

/* На телефоне линию тоже оставляем живой, но делаем компактнее. */
@media(max-width:700px){
    .ws-weather-sun{
        grid-template-columns:auto minmax(48px,1fr) auto;
        gap:8px;
    }
    .ws-weather-dayline{display:block}
    .ws-weather-sun>div:last-child{justify-content:flex-end}
    .ws-weather-sun-side{font-size:10px !important;gap:4px !important}
    .ws-weather-dayline i{width:10px;height:10px}
}


/* =========================================================
   WEATHER V8 — MOON PHASE CARD
   Фаза + примерная освещённость Луны в восьмой ячейке сетки.
   ========================================================= */
.ws-weather-moon{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.ws-weather-moon::after{
    content:"";
    position:absolute;
    width:72px;
    height:72px;
    right:-24px;
    top:-30px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(191,219,254,.10),rgba(96,165,250,.03) 48%,transparent 72%);
    pointer-events:none;
    z-index:-1;
}
.ws-weather-moon strong{
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.ws-weather-moon.is-waxing strong{color:#dbeafe}
.ws-weather-moon.is-waning strong{color:#cbd5e1}
.ws-weather-moon.is-full{
    border-color:rgba(226,232,240,.22);
    background:rgba(226,232,240,.055);
    box-shadow:inset 0 0 18px rgba(191,219,254,.035);
}
.ws-weather-moon.is-full strong{color:#f8fafc}
.ws-weather-moon.is-new strong{color:#94a3b8}

@media(max-width:420px){
    .ws-weather-moon strong{font-size:11px}
}

/* =========================================================
   WEATHER V9 — LIVE CINEMATIC WEATHER SCENE
   Generated WorkServer assets + lightweight CSS animation.
   ========================================================= */
.ws-weather-visual{overflow:hidden}
.ws-weather-visual>.ws-weather-orb,
.ws-weather-visual>.ws-weather-cloud{display:none!important}
.ws-weather-live-scene{
    position:absolute;right:12px;top:4px;width:48%;height:96%;
    z-index:1;pointer-events:none;overflow:visible;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));
}
.ws-weather-art{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;animation:wsWeatherFloat 6s ease-in-out infinite;transition:opacity .35s ease,filter .35s ease}
.ws-weather-live-scene[data-scene="clear"] .ws-weather-art{background-image:url('../modules/weather/assets/legacy-v9/sun.webp')}
.ws-weather-live-scene[data-scene="partly"] .ws-weather-art{background-image:url('../modules/weather/assets/legacy-v9/sun-cloud.webp')}
.ws-weather-live-scene[data-scene="clouds"] .ws-weather-art{background-image:url('../modules/weather/assets/legacy-v9/partly.webp')}
.ws-weather-live-scene[data-scene="rain"] .ws-weather-art,
.ws-weather-live-scene[data-scene="mixed"] .ws-weather-art,
.ws-weather-live-scene[data-scene="snow"] .ws-weather-art{background-image:url('../modules/weather/assets/legacy-v9/rain-cloud.webp');filter:saturate(.85) brightness(.95)}
.ws-weather-live-scene[data-scene="storm"] .ws-weather-art{background-image:url('../modules/weather/assets/legacy-v9/storm-cloud.webp');filter:saturate(.9) brightness(.88)}
.ws-weather-live-scene[data-scene="fog"] .ws-weather-art{background-image:url('../modules/weather/assets/legacy-v9/moon-cloud.webp');opacity:.35;filter:grayscale(1) blur(1px)}
.ws-weather-live-scene.is-night .ws-weather-art{background-image:url('../modules/weather/assets/legacy-v9/moon-cloud.webp');filter:saturate(.72) brightness(.72)}
.ws-weather-live-scene.is-night[data-scene="clear"] .ws-weather-art{opacity:0}

/* Moon is rendered separately so the visible phase matches the Moon card. */
.ws-weather-live-moon{display:none;position:absolute;width:116px;height:116px;right:52px;top:35px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 38% 35%,#fff 0,#e8edf5 42%,#9ca8b8 75%,#536174 100%);box-shadow:0 0 22px rgba(203,213,225,.42),inset -10px -7px 20px rgba(15,23,42,.35);animation:wsMoonDrift 7s ease-in-out infinite}
.ws-weather-live-scene.is-night .ws-weather-live-moon{display:block}
.ws-weather-live-moon:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 30%,rgba(71,85,105,.28) 0 5%,transparent 6%),radial-gradient(circle at 63% 63%,rgba(71,85,105,.23) 0 9%,transparent 10%),radial-gradient(circle at 48% 76%,rgba(71,85,105,.18) 0 6%,transparent 7%);z-index:1}
.ws-weather-live-moon i{position:absolute;inset:-2px;border-radius:50%;background:#0b1830;transition:transform .8s ease,opacity .5s ease}
.ws-weather-live-scene.moon-full .ws-weather-live-moon i{opacity:0}
.ws-weather-live-scene.moon-new .ws-weather-live-moon i{opacity:.93;transform:translateX(0)}
.ws-weather-live-scene.moon-waxing .ws-weather-live-moon i{opacity:.96;transform:translateX(-43%)}
.ws-weather-live-scene.moon-waning .ws-weather-live-moon i{opacity:.96;transform:translateX(43%)}

/* Rain: repeated streak texture moves continuously; no GIF/video required. */
.ws-weather-rain-layer,.ws-weather-snow-layer,.ws-weather-lightning-layer,.ws-weather-mist-layer{position:absolute;inset:30% 7% 0 10%;display:none;overflow:hidden}
.ws-weather-live-scene.has-rain .ws-weather-rain-layer{display:block;background-image:repeating-linear-gradient(105deg,transparent 0 19px,rgba(147,197,253,.78) 20px 22px,transparent 23px 39px);background-size:48px 88px;filter:drop-shadow(0 0 3px rgba(96,165,250,.55));animation:wsRainFall .58s linear infinite;mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 78%,transparent 100%)}
.ws-weather-live-scene.heavy-rain .ws-weather-rain-layer{animation-duration:.38s;opacity:1;background-size:38px 74px}
.ws-weather-live-scene.has-snow .ws-weather-snow-layer{display:block;background-image:radial-gradient(circle,#fff 0 2px,transparent 2.8px),radial-gradient(circle,#dbeafe 0 2.5px,transparent 3.3px),radial-gradient(circle,#fff 0 1.5px,transparent 2.2px);background-size:52px 58px,71px 76px,39px 45px;background-position:0 0,17px 12px,8px 23px;filter:drop-shadow(0 0 3px rgba(255,255,255,.65));animation:wsSnowFall 3.2s linear infinite;mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%)}
.ws-weather-live-scene.has-storm .ws-weather-lightning-layer{display:block;inset:26% 20% 8% 18%;background:linear-gradient(118deg,transparent 46%,rgba(255,255,255,.98) 48%,#a5b4fc 50%,transparent 52%);clip-path:polygon(47% 0,58% 0,51% 35%,65% 35%,35% 100%,44% 55%,31% 55%);filter:drop-shadow(0 0 9px #818cf8) drop-shadow(0 0 18px #6366f1);opacity:0;animation:wsLightning 5.8s steps(1,end) infinite}
.ws-weather-live-scene.has-fog .ws-weather-mist-layer{display:block;inset:25% -5% 12% 0;background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(226,232,240,.18) 18px 29px,transparent 30px 48px);filter:blur(7px);animation:wsMist 8s ease-in-out infinite alternate}
@keyframes wsWeatherFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7px,-4px,0) scale(1.018)}}
@keyframes wsMoonDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wsRainFall{from{background-position:0 -90px}to{background-position:-18px 0}}
@keyframes wsSnowFall{from{background-position:0 -80px,17px -110px,8px -60px}to{background-position:28px 20px,-10px 10px,35px 30px}}
@keyframes wsLightning{0%,7%,10%,12%,100%{opacity:0}8%,11%{opacity:1}9%{opacity:.25}}
@keyframes wsMist{from{transform:translateX(-8px);opacity:.45}to{transform:translateX(18px);opacity:.8}}

.weather-main{position:relative;z-index:3}
@media(max-width:700px){
    .ws-weather-live-scene{right:-8px;top:7px;width:52%;height:82%;opacity:.92}
    .ws-weather-live-moon{width:76px;height:76px;right:28px;top:25px}
}
@media(max-height:820px) and (min-width:690px){
    .ws-weather-live-scene{right:4px;top:0;width:45%;height:94%}
    .ws-weather-live-moon{width:86px;height:86px;right:42px;top:22px}
}
@media(prefers-reduced-motion:reduce){
    .ws-weather-live-scene *{animation:none!important}
}

/* =========================================================
   WEATHER V10 — PHOTO PREVIEW MODE
   Static photorealistic scene pack for fast visual approval.
   Uses generated PNG assets now; later can be swapped to GIF/WebM.
   ========================================================= */
.ws-weather-visual{overflow:hidden;background:linear-gradient(155deg,#254a63 0%,#12293a 52%,#07111d 100%)}
.ws-weather-visual.clear{background:linear-gradient(155deg,#2a617d 0%,#17354a 52%,#091521 100%)}
.ws-weather-visual.partly{background:linear-gradient(155deg,#3d6173 0%,#223849 52%,#0b1622 100%)}
.ws-weather-visual.clouds{background:linear-gradient(155deg,#3b5260 0%,#202d38 52%,#0a1119 100%)}
.ws-weather-visual.rain,.ws-weather-visual.storm{background:linear-gradient(155deg,#31414d 0%,#1b2530 52%,#080f16 100%)}
.ws-weather-visual.snow{background:linear-gradient(155deg,#5d7488 0%,#324555 52%,#0d1823 100%)}
.ws-weather-visual.fog{background:linear-gradient(155deg,#56636d 0%,#303b45 52%,#0d141b 100%)}
.ws-weather-visual.is-night,.ws-weather-visual.night{background:linear-gradient(155deg,#162233 0%,#0d1524 58%,#050a12 100%)}

.ws-weather-visual>.ws-weather-orb,
.ws-weather-visual>.ws-weather-cloud,
.ws-weather-live-moon,
.ws-weather-rain-layer,
.ws-weather-snow-layer,
.ws-weather-lightning-layer,
.ws-weather-mist-layer{display:none !important;}

.ws-weather-live-scene{
    position:absolute;
    right:20px;
    top:16px;
    width:49%;
    height:86%;
    z-index:1;
    pointer-events:none;
    overflow:visible;
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.26));
}
.ws-weather-art{
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    animation:none !important;
    transition:opacity .25s ease, filter .25s ease;
}

/* Day scenes */
.ws-weather-live-scene[data-scene="clear"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/sun.webp');}
.ws-weather-live-scene[data-scene="partly"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/sun-cloud.webp');}
.ws-weather-live-scene[data-scene="clouds"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/cloud.webp');}
.ws-weather-live-scene[data-scene="rain"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/rain.webp');}
.ws-weather-live-scene[data-scene="storm"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/storm.webp');}
.ws-weather-live-scene[data-scene="snow"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/snow.webp');}
.ws-weather-live-scene[data-scene="mixed"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/sleet.webp');}
.ws-weather-live-scene[data-scene="fog"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/cloud.webp');opacity:.58;filter:grayscale(.18) brightness(.96);}

/* Night scenes */
.ws-weather-live-scene.is-night[data-scene="clear"] .ws-weather-art{opacity:1;filter:none;}
.ws-weather-live-scene.is-night[data-scene="clear"].moon-full .ws-weather-art{background-image:url('../modules/weather/assets/photo/moon-full.webp');}
.ws-weather-live-scene.is-night[data-scene="clear"].moon-new .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="clear"].moon-waxing .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="clear"].moon-waning .ws-weather-art{background-image:url('../modules/weather/assets/photo/moon-crescent.webp');}
.ws-weather-live-scene.is-night[data-scene="partly"] .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="clouds"] .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="fog"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/moon-cloud.webp');opacity:1;filter:none;}
.ws-weather-live-scene.is-night[data-scene="rain"] .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="storm"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/moon-rain.webp');opacity:1;filter:none;}
.ws-weather-live-scene.is-night[data-scene="snow"] .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="mixed"] .ws-weather-art{background-image:url('../modules/weather/assets/photo/moon-snow.webp');opacity:1;filter:none;}

/* Text block: remove flat emoji and let the photo be the hero. */
.weather-main{
    position:relative;
    z-index:3;
    align-items:flex-start;
    justify-content:center;
    padding-left:34px;
    padding-right:34px;
    max-width:52%;
}
.weather-icon-big{display:none !important;}
.weather-temp-big{margin-top:0; font-size:64px; line-height:1; text-shadow:0 10px 24px rgba(0,0,0,.28);}
.weather-desc-big{font-size:17px;font-weight:700;max-width:300px;}
.weather-feels{font-size:13px;max-width:360px;line-height:1.35;color:#e2edf7;}

@media(max-width:700px){
    .ws-weather-live-scene{right:0;top:16px;width:49%;height:72%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.24));}
    .weather-main{max-width:58%;padding-left:18px;padding-right:16px;justify-content:flex-start;padding-top:22px;}
    .weather-temp-big{font-size:42px;}
    .weather-desc-big{font-size:14px;max-width:180px;}
    .weather-feels{font-size:11px;max-width:190px;}
}

@media(max-height:820px) and (min-width:690px){
    .ws-weather-live-scene{right:10px;top:8px;width:45%;height:86%;}
    .weather-main{max-width:55%;padding-left:28px;}
    .weather-temp-big{font-size:54px;}
}

/* =========================================================
   WEATHER V10.3 — CRESCENT IN CLOUDS FIX
   For night cloudy / partly cloudy / fog scenes, show a crescent-in-clouds
   image when the calculated moon phase is waxing or waning.
   ========================================================= */
.ws-weather-live-scene.is-night[data-scene="partly"].moon-waxing .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="partly"].moon-waning .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="clouds"].moon-waxing .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="clouds"].moon-waning .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="fog"].moon-waxing .ws-weather-art,
.ws-weather-live-scene.is-night[data-scene="fog"].moon-waning .ws-weather-art{
    background-image:url('../modules/weather/assets/photo/moon-cloud-crescent.webp');
    opacity:1;
    filter:none;
}

/* =========================================================
   WEATHER V11 — HYBRID MODE
   DAY: prepared transparent WebM animation.
   NIGHT: V10.3 photorealistic static moon/weather artwork.
   Static day image remains as an automatic fallback while video loads.
   ========================================================= */
.ws-weather-day-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:none;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    filter:drop-shadow(0 16px 24px rgba(0,0,0,.16));
}
.ws-weather-live-scene.uses-day-video .ws-weather-day-video{
    display:block;
}
.ws-weather-live-scene.uses-day-video.video-ready .ws-weather-day-video{
    opacity:1;
}
.ws-weather-live-scene.uses-day-video.video-ready .ws-weather-art{
    opacity:0 !important;
}
.ws-weather-live-scene.is-night .ws-weather-day-video{
    display:none !important;
    opacity:0 !important;
}

@media(max-width:700px){
    .ws-weather-day-video{object-position:center;}
}

/* =========================================================
   WEATHER V11.1 — COSMETIC POLISH
   Light visual refinement only: unified scene position,
   soft ambient clouds, gentle depth glow, subtle card accents.
   No layout/logic rebuild.
   ========================================================= */

/* 1) One shared position for both daytime video and nighttime photo art.
      Slightly farther right than V11, while keeping comfortable air to the edge. */
.ws-weather-live-scene{
    right:16px;
    top:10px;
    width:45.5%;
    height:90%;
}
.ws-weather-day-video{
    object-position:58% 50%;
}
.ws-weather-art{
    background-position:58% 50%;
}

/* Gentle depth halo behind the main weather object. */
.ws-weather-live-scene::before{
    content:"";
    position:absolute;
    inset:18% 4% 14% 8%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,218,108,.11) 0%,rgba(255,197,61,.045) 40%,transparent 72%);
    filter:blur(12px);
    opacity:.8;
    pointer-events:none;
}
.ws-weather-live-scene.is-night::before{
    background:radial-gradient(circle,rgba(147,197,253,.12) 0%,rgba(96,165,250,.045) 42%,transparent 74%);
}

/* 2) Bring back only the old lightweight decorative cloud shapes as a BACKGROUND layer.
      They remain very faint and never cover text or the main weather art. */
.ws-weather-visual.clear>.ws-weather-cloud,
.ws-weather-visual.partly>.ws-weather-cloud,
.ws-weather-visual.clouds>.ws-weather-cloud,
.ws-weather-visual.night>.ws-weather-cloud,
.ws-weather-visual.is-night>.ws-weather-cloud{
    display:block!important;
    z-index:0;
    pointer-events:none;
    background:rgba(236,248,255,.10);
    filter:blur(.65px);
    mix-blend-mode:screen;
}
.ws-weather-visual>.ws-weather-cloud.cloud-a{
    left:-175px;
    top:54px;
    opacity:.13;
    animation:wsAmbientCloudA 34s linear infinite!important;
}
.ws-weather-visual>.ws-weather-cloud.cloud-b{
    left:-235px;
    top:150px;
    opacity:.075;
    animation:wsAmbientCloudB 46s linear 7s infinite!important;
}
.ws-weather-visual.is-night>.ws-weather-cloud{
    background:rgba(184,214,255,.09);
    opacity:.085;
}
.ws-weather-visual.is-night>.ws-weather-cloud.cloud-b{opacity:.055;}

@keyframes wsAmbientCloudA{
    from{transform:translate3d(0,0,0) scale(.86)}
    to{transform:translate3d(1110px,-5px,0) scale(.86)}
}
@keyframes wsAmbientCloudB{
    from{transform:translate3d(0,0,0) scale(.64)}
    to{transform:translate3d(1160px,4px,0) scale(.64)}
}

/* 3) Very light card polish — depth rather than a multicolour UI. */
.ws-weather-grid>div{
    position:relative;
    overflow:hidden;
    transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 7px 18px rgba(0,0,0,.045);
}
.ws-weather-grid>div::before{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(125,211,252,.19),transparent);
    opacity:.65;
    pointer-events:none;
}
.ws-weather-grid>div:nth-child(4)::before{background:linear-gradient(90deg,transparent,rgba(251,191,36,.20),transparent);}
.ws-weather-grid>div:nth-child(8)::before{background:linear-gradient(90deg,transparent,rgba(147,197,253,.24),transparent);}
@media(hover:hover) and (pointer:fine){
    .ws-weather-grid>div:hover{
        transform:translateY(-1px);
        background:rgba(255,255,255,.052);
        border-color:rgba(148,163,184,.15);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 9px 20px rgba(0,0,0,.07);
    }
}

/* 4) Today card: a little more visual priority, still restrained. */
.ws-weather-row.today{
    background:linear-gradient(180deg,rgba(0,229,255,.082),rgba(0,229,255,.048));
    border-color:rgba(34,211,238,.32);
    box-shadow:inset 0 0 18px rgba(34,211,238,.035),0 0 14px rgba(34,211,238,.025);
}

/* 5) Timeline marker polish: slightly more dimensional, same logic as before. */
.ws-weather-dayline i{
    box-shadow:0 0 6px rgba(253,224,71,.95),0 0 13px rgba(245,158,11,.50),0 0 0 2px rgba(255,255,255,.07);
}
.ws-weather-sun.is-night .ws-weather-dayline i{
    box-shadow:0 0 6px rgba(219,234,254,.9),0 0 13px rgba(96,165,250,.46),0 0 0 2px rgba(255,255,255,.06);
}

/* Low-height laptops: preserve the same right-shifted composition. */
@media(max-height:820px) and (min-width:690px){
    .ws-weather-live-scene{
        right:14px;
        top:5px;
        width:43.5%;
        height:89%;
    }
    .ws-weather-day-video{object-position:59% 50%;}
    .ws-weather-art{background-position:59% 50%;}
    .ws-weather-visual>.ws-weather-cloud.cloud-a{top:42px;opacity:.10;}
    .ws-weather-visual>.ws-weather-cloud.cloud-b{top:125px;opacity:.055;}
}

/* Phones: keep the visual right-biased, but calm the decorative layer. */
@media(max-width:700px){
    .ws-weather-live-scene{
        right:2px;
        top:12px;
        width:47%;
        height:75%;
    }
    .ws-weather-day-video{object-position:60% 50%;}
    .ws-weather-art{background-position:60% 50%;}
    .ws-weather-visual>.ws-weather-cloud.cloud-a{opacity:.07;}
    .ws-weather-visual>.ws-weather-cloud.cloud-b{display:none!important;}
}

@media(prefers-reduced-motion:reduce){
    .ws-weather-visual>.ws-weather-cloud{animation:none!important;}
}


/* =========================================================
   WEATHER V11.2 — DATA-DRIVEN ATMOSPHERICS
   Decorative background clouds react to cloudiness percentage.
   Rain/snow overlay intensity reacts to precipitation probability / amount.
   ========================================================= */
.ws-weather-visual>.ws-weather-cloud{
    filter:blur(var(--ws-cloud-blur,.65px));
}
.ws-weather-visual>.ws-weather-cloud.cloud-a{
    opacity:var(--ws-cloud-a-opacity,.13);
    animation-duration:var(--ws-cloud-a-duration,34s)!important;
}
.ws-weather-visual>.ws-weather-cloud.cloud-b{
    opacity:var(--ws-cloud-b-opacity,.075);
    animation-duration:var(--ws-cloud-b-duration,46s)!important;
}
.ws-weather-visual.is-night>.ws-weather-cloud.cloud-a{opacity:var(--ws-cloud-a-opacity,.10);}
.ws-weather-visual.is-night>.ws-weather-cloud.cloud-b{opacity:var(--ws-cloud-b-opacity,.055);}

.ws-weather-live-scene.has-rain .ws-weather-rain-layer{
    opacity:var(--ws-rain-opacity,.65);
    animation-duration:var(--ws-rain-duration,.58s);
    background-size:var(--ws-rain-size-x,48px) var(--ws-rain-size-y,88px);
    filter:drop-shadow(0 0 3px rgba(96,165,250,var(--ws-rain-glow,.55)));
}
.ws-weather-live-scene.medium-rain .ws-weather-rain-layer{
    background-image:repeating-linear-gradient(105deg,transparent 0 17px,rgba(147,197,253,.80) 18px 20px,transparent 21px 34px);
}
.ws-weather-live-scene.heavy-rain .ws-weather-rain-layer{
    opacity:var(--ws-rain-opacity,1);
    background-image:repeating-linear-gradient(105deg,transparent 0 13px,rgba(147,197,253,.88) 14px 16px,transparent 17px 27px);
}
.ws-weather-live-scene.has-snow .ws-weather-snow-layer{
    opacity:var(--ws-snow-opacity,.72);
    animation-duration:var(--ws-snow-duration,3.2s);
    transform:scale(var(--ws-snow-scale,1));
    transform-origin:50% 0;
}
.ws-weather-live-scene.heavy-snow .ws-weather-snow-layer{
    background-size:44px 50px,62px 68px,33px 38px;
}


/* =========================================================
   WEATHER V11.3 — DYNAMIC ATMOSPHERICS FIX
   Fixes V11.2: clouds were excluded for rain/storm/snow and the legacy
   V10 rule used display:none!important on precipitation layers.
   This version uses dedicated full-HERO rain/snow layers and makes
   decorative clouds react visibly to OpenWeather cloudiness percentage.
   ========================================================= */

/* Dynamic clouds must be allowed in ALL relevant weather states. */
.ws-weather-visual.clear>.ws-weather-cloud,
.ws-weather-visual.partly>.ws-weather-cloud,
.ws-weather-visual.clouds>.ws-weather-cloud,
.ws-weather-visual.rain>.ws-weather-cloud,
.ws-weather-visual.storm>.ws-weather-cloud,
.ws-weather-visual.snow>.ws-weather-cloud,
.ws-weather-visual.fog>.ws-weather-cloud,
.ws-weather-visual.night>.ws-weather-cloud,
.ws-weather-visual.is-night>.ws-weather-cloud{
    display:block!important;
    z-index:0;
    pointer-events:none;
    background:rgba(232,245,255,.50);
    filter:blur(var(--ws-cloud-blur,.65px));
    mix-blend-mode:screen;
}
.ws-weather-visual>.ws-weather-cloud.cloud-a{
    opacity:var(--ws-cloud-a-opacity,.12)!important;
    animation:wsAmbientCloudA var(--ws-cloud-a-duration,36s) linear infinite!important;
}
.ws-weather-visual>.ws-weather-cloud.cloud-b{
    opacity:var(--ws-cloud-b-opacity,.065)!important;
    animation:wsAmbientCloudB var(--ws-cloud-b-duration,49s) linear 7s infinite!important;
}

/* Full-HERO precipitation sits over the visual art/video, but below text. */
.ws-weather-dynamic-rain,
.ws-weather-dynamic-snow{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    display:none;
    overflow:hidden;
    border-radius:inherit;
}

.ws-weather-visual.ws-atmo-rain>.ws-weather-dynamic-rain{
    display:block;
    opacity:var(--ws-rain-opacity,.55);
    background-image:
        repeating-linear-gradient(104deg,
            transparent 0 calc(var(--ws-rain-gap-a,32px) - 2px),
            rgba(188,222,255,.72) calc(var(--ws-rain-gap-a,32px) - 1px),
            rgba(188,222,255,.72) var(--ws-rain-gap-a,32px),
            transparent calc(var(--ws-rain-gap-a,32px) + 1px) calc(var(--ws-rain-gap-a,32px) * 2)),
        repeating-linear-gradient(104deg,
            transparent 0 calc(var(--ws-rain-gap-b,50px) - 2px),
            rgba(130,190,245,.42) calc(var(--ws-rain-gap-b,50px) - 1px),
            rgba(130,190,245,.42) var(--ws-rain-gap-b,50px),
            transparent calc(var(--ws-rain-gap-b,50px) + 1px) calc(var(--ws-rain-gap-b,50px) * 2));
    background-size:48px 92px,72px 126px;
    filter:drop-shadow(0 0 2px rgba(96,165,250,.32));
    mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 93%,transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 93%,transparent 100%);
    animation:wsHeroRain var(--ws-rain-duration,.62s) linear infinite;
}
@keyframes wsHeroRain{
    from{background-position:0 -100px,19px -142px;}
    to{background-position:-18px 0,-11px 0;}
}

.ws-weather-visual.ws-atmo-snow>.ws-weather-dynamic-snow{
    display:block;
    opacity:var(--ws-snow-opacity,.58);
    transform:scale(var(--ws-snow-density,1));
    transform-origin:50% 0;
    background-image:
        radial-gradient(circle,rgba(255,255,255,.95) 0 1.6px,transparent 2.2px),
        radial-gradient(circle,rgba(219,234,254,.88) 0 2.1px,transparent 2.8px),
        radial-gradient(circle,rgba(255,255,255,.72) 0 1.1px,transparent 1.7px);
    background-size:52px 60px,74px 82px,38px 46px;
    background-position:0 0,17px 10px,9px 23px;
    filter:drop-shadow(0 0 2px rgba(255,255,255,.35));
    mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 95%,transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 95%,transparent 100%);
    animation:wsHeroSnow var(--ws-snow-duration,3s) linear infinite;
}
@keyframes wsHeroSnow{
    from{background-position:0 -70px,17px -100px,9px -55px;}
    to{background-position:26px 18px,-9px 14px,35px 25px;}
}

/* Keep the actual day WebM/art above background clouds and under precipitation. */
.ws-weather-live-scene{z-index:1;}
.weather-main{z-index:3;}

@media(max-width:700px){
    .ws-weather-visual>.ws-weather-cloud.cloud-a{
        opacity:calc(var(--ws-cloud-a-opacity,.10) * .72)!important;
    }
    .ws-weather-visual>.ws-weather-cloud.cloud-b{display:none!important;}
    .ws-weather-dynamic-rain,.ws-weather-dynamic-snow{opacity:.78;}
}

@media(prefers-reduced-motion:reduce){
    .ws-weather-dynamic-rain,
    .ws-weather-dynamic-snow,
    .ws-weather-visual>.ws-weather-cloud{animation:none!important;}
}

/* =========================================================
   WEATHER V11.4 — REALISTIC SHORT RAINDROPS
   Replaces long diagonal streaks with short, fine, near-vertical drops.
   Density/speed still react to precipitation data from V11.3.
   ========================================================= */
.ws-weather-visual.ws-atmo-rain>.ws-weather-dynamic-rain{
    /* Two sparse tiled fields of SHORT droplets. No full-height streaks. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23cbe6ff' stroke-width='1.15' stroke-linecap='round' stroke-opacity='.78'%3E%3Cpath d='M7 3 L8.6 12'/%3E%3Cpath d='M25 20 L26.7 30'/%3E%3Cpath d='M47 7 L48.5 16'/%3E%3Cpath d='M35 43 L36.8 54'/%3E%3Cpath d='M58 36 L59.5 45'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%238fc7f5' stroke-width='.95' stroke-linecap='round' stroke-opacity='.52'%3E%3Cpath d='M15 10 L17 22'/%3E%3Cpath d='M52 5 L54 17'/%3E%3Cpath d='M80 30 L82 43'/%3E%3Cpath d='M34 62 L36 74'/%3E%3Cpath d='M69 76 L71 88'/%3E%3C/g%3E%3C/svg%3E");
    background-size:
        var(--ws-rain-tile-a,64px) var(--ws-rain-tile-a,64px),
        var(--ws-rain-tile-b,96px) var(--ws-rain-tile-b,96px);
    background-repeat:repeat,repeat;
    filter:drop-shadow(0 0 1.2px rgba(96,165,250,.30));
    opacity:var(--ws-rain-opacity,.55);
    animation:wsHeroRainShort var(--ws-rain-duration,.68s) linear infinite;
    mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 95%,transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 95%,transparent 100%);
}

@keyframes wsHeroRainShort{
    from{background-position:0 -72px,23px -112px;}
    to{background-position:-5px 0,18px 0;}
}

/* At 100% precipitation increase NUMBER of drops, not their length. */
.ws-weather-visual.ws-atmo-rain.ws-rain-heavy>.ws-weather-dynamic-rain{
    filter:drop-shadow(0 0 1.4px rgba(96,165,250,.34));
}

@media(max-width:700px){
    .ws-weather-visual.ws-atmo-rain>.ws-weather-dynamic-rain{
        filter:drop-shadow(0 0 1px rgba(96,165,250,.26));
    }
}

/* =========================================================
   WEATHER V11.5 — HERO ART SIZE / POSITION TUNE
   Keep day video and night photo on the same coordinates.
   Main weather object is ~1.5x smaller and shifted farther right.
   ========================================================= */
.ws-weather-live-scene{
    right:-25px;
    top:30px;
    width:31%;
    height:62%;
}
.ws-weather-day-video{
    object-position:66% 50%;
}
.ws-weather-art{
    background-position:66% 50%;
}

/* Keep the soft halo proportional to the smaller art. */
.ws-weather-live-scene::before{
    inset:14% 2% 12% 5%;
    filter:blur(9px);
    opacity:.68;
}

/* Low-height laptops: same visual balance, just a touch more compact. */
@media(max-height:820px) and (min-width:690px){
    .ws-weather-live-scene{
        right:-2px;
        top:24px;
        width:30%;
        height:61%;
    }
    .ws-weather-day-video{object-position:67% 50%;}
    .ws-weather-art{background-position:67% 50%;}
}

/* Phones: don't shrink as aggressively; keep the weather object readable. */
@media(max-width:700px){
    .ws-weather-live-scene{
        right:-4px;
        top:24px;
        width:39%;
        height:62%;
    }
    .ws-weather-day-video{object-position:68% 50%;}
    .ws-weather-art{background-position:68% 50%;}
}