/* ================== 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:6px; /* ← если надо увеличить (22:23) */
	font-weight:500;
	color:#e5e7eb;
}

/* ===== 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;
}

/* ======================================================
   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-rate-switch{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:8px;
}

.ws-rate-icon-label{
	font-size:25px;
	line-height:1;
}

.ws-rate-switch button{
	background:#020617;
	border:1px solid #1e293b;
	color:#e5e7eb;
	padding:6px 8px;
	border-radius:8px;
	cursor:pointer;
	transition:.2s ease;
}

.ws-rate-switch button:hover{
	box-shadow:0 0 8px rgba(0,229,255,.2);
}

.ws-rate-switch button.active{
	background:#00e5ff;
	color:#020617;
	font-weight:700;
	box-shadow:0 0 10px rgba(0,229,255,.3);
}

/*===========owerlink курс===========================*/

.ws-overlay-box h2{
	font-size: 20px;        /* ← ГЛАВНЫЙ РАЗМЕР (меняй тут) */
	font-weight: 600;
	margin: 0 0 14px;
	color: #00e5ff;
	text-align: left;

	/* неон */
	text-shadow:
		0 0 6px rgba(0,229,255,.45),
		0 0 14px rgba(0,229,255,.25);
}


.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)),
		url('https://workserver.kz/wp-content/uploads/2025/11/лого2-1-e17644422494778.png') center/cover;
}

.ws-overlay-box{
	position:relative;
	width:90%;
	max-width:900px;
	height:520px;
	margin:5% auto;
	background:rgba(2,6,23,.65);
	border:1px solid #00e5ff;
	border-radius:16px;
	padding:20px;
	box-shadow:0 0 40px rgba(0,229,255,.35);
}

.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 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 {
	border: 1px solid #ef4444;
	background: rgba(239,68,68,.12);
	box-shadow: 0 0 0 1px rgba(239,68,68,.63);
}

.ws-alert-text {
	color: #fecaca;
	font-size: 18px;
	text-align: center;
	line-height: 1.6;
	font-weight: 600;
}
/* ======================================================
   СТАТУС СЕРВЕРА + МАЯК
   ====================================================== */

.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;
}*/
/* ======================================================
   ПОГОДА / ОБНОВЛЕНИЕ
   ====================================================== */

/*.ws-updated{
	margin-left:8px;
	font-size:13px;
	color:#9ca3af;
	font-weight:500;*/
/*}*/

.ws-updated-time{
	font-size:18px; /* ← если надо увеличить (22:23) */
	font-weight:600;
	color:#facc15;
}

/*=================прогноз=============================*/
/*.ws-weather-row{
	display:grid;
	grid-template-columns:60px 40px 90px 1fr;
	gap:10px;
	padding:8px 0;
	border-bottom:1px solid rgba(255,255,255,.06);
	color:#e5e7eb;
}
.ws-weather-trigger{cursor:pointer}
.ws-weather-trigger:hover{box-shadow:0 0 20px rgba(0,229,255,.25)}
.ws-weather-row{
	display:grid;
	grid-template-columns:70px 40px 80px 1fr;
	align-items:center;
	padding:10px 14px;
	border-bottom:1px solid rgba(255,255,255,.05);
	color:#cbd5e1;
}

.ws-weather-row.today{
	background:linear-gradient(90deg,rgba(0,229,255,.15),transparent);
	box-shadow:inset 3px 0 0 #00e5ff;
	font-weight:600;
}

.ws-w-icon{
	font-size:20px;
}

.ws-w-temp{
	line-height:1;
}
.ws-w-temp .max{
	font-size:18px;
	color:#22c55e;
}
.ws-w-temp .min{
	font-size:12px;
	color:#94a3b8;
}

.ws-w-desc{
	font-size:13px;
	color:#9ca3af;
}
/*=====================*/
/*.ws-weather-anim {
	width: 100%;
	height: 100px;
	margin-bottom: 12px;
	border-radius: 12px;
	overflow: hidden;
	background: radial-gradient(ellipse at center, #0b1220 0%, #020617 70%);
}

#weatherAnim {
	width: 100%;
	height: 100%;
	display: block;
}
/* ///////////////////// */

/* ///// ПОГОДА / 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)}
}

/* ////////////////////////////////////////////////// */
/* ===== СПИСОК ПРОГНОЗА — ГОРИЗОНТАЛЬНО ===== */

#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);
}

/* ❌ УБИТО НАХУЙ: today */
/*
.ws-weather-row.today{
	НИЧЕГО НЕТ
}
*/

/* ДАТА */
.ws-w-date{
	font-size:13px;
	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;
}