/* =====================================================================
   IPrazon — Личный кабинет
   Тема под основной сайт (css/style.css): синяя палитра, Inter, мягкие
   тени, скругления, pill-кнопки. Согласовано с РЕАЛЬНОЙ вёрсткой шаблонов
   Jensen CMS: разметка кабинета на float (.navigation + контент), а не
   flex — layout НЕ навязывается, меняются только цвета/типографика/детали.
   Ни один класс не удалён, структура не трогается — {BODY} не ломается.
   ===================================================================== */

/* Inter — self-hosted, те же файлы, что на сайте */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-cyrillic-400.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-cyrillic-500.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-cyrillic-600.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-cyrillic-700.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/inter-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/inter-cyrillic-800.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
	--primary:#4F7BFF;
	--primary-2:#6A8DFF;
	--primary-3:#9DB6FF;
	--bg:#FFFFFF;
	--surface:#F8FAFC;
	--surface-2:#EEF2FB;
	--text:#0F172A;
	--muted:#475569;
	--border:rgba(15,23,42,.08);
	--border-strong:rgba(79,123,255,.30);
	--shadow-sm:0 4px 14px rgba(15,23,42,.06);
	--shadow-md:0 18px 50px -12px rgba(79,123,255,.25);
	--grad:linear-gradient(135deg,#4F7BFF 0%,#6A8DFF 60%,#9DB6FF 100%);
	--ok:#16a34a;
	--warn:#b45309;
	--danger:#dc2626;
	--radius:22px;
	--radius-card:18px;
	--radius-input:14px;
	--container:1240px;
}

#myswf, #_ec_rgb_link{ visibility:hidden; display:none; }

/* reset — оставляю универсальный position:relative как в оригинале, чтобы
   не сломать абсолютно спозиционированные виджеты CMS внутри панели */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	position:relative;
}
html{ scroll-behavior:smooth; }
html, body, .wrapper{ height:100%; }

body{
	font-family:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	color:var(--text);
	background:
		radial-gradient(1200px 560px at 50% -160px, var(--surface-2) 0%, transparent 60%),
		var(--surface);
	-webkit-font-smoothing:antialiased;
	line-height:1.55;
	font-size:14px;
}
a{ color:var(--primary); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--primary-2); }

h2{ font-size:clamp(22px,2.4vw,30px); font-weight:700; letter-spacing:-.02em; width:100%; text-align:center; text-transform:none; }
h3{ font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--text); margin:0 0 4px; }
h4{ font-size:16px; font-weight:600; color:var(--text); }

/* ---------------- sticky footer (через flex, без хрупких margin) ------ */
.wrapper{ display:flex; flex-direction:column; min-height:100%; }
.content{ flex:1 0 auto; box-sizing:border-box; }
footer{
	flex-shrink:0;
	height:96px; width:100%;
	display:flex; align-items:center; justify-content:center;
	background:#0A0F1F; color:rgba(255,255,255,.6);
}
.footer{ width:100%; height:auto; margin:0; }
.copyright{ text-align:center; font-size:13px; color:rgba(255,255,255,.6); margin:0; }
.copyright a{ color:#fff; }
.copyright a:hover{ color:var(--primary-3); }

/* ----------------------------- header / nav --------------------------- */
header{
	position:sticky; top:0; z-index:50;
	width:100%; height:auto;
	background:rgba(255,255,255,.72);
	backdrop-filter:saturate(180%) blur(20px);
	-webkit-backdrop-filter:saturate(180%) blur(20px);
	border-bottom:1px solid var(--border);
}
header > div{ max-width:var(--container); height:64px; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:22px; width:100%; }

/* brand — синий градиентный квадрат + «IPrazon Network», как на сайте */
header > div > a.logo{
	float:none; z-index:auto;
	display:inline-flex; align-items:center; gap:10px;
	font-weight:700; font-size:17px; letter-spacing:.02em; line-height:1;
	color:var(--text); white-space:nowrap; margin:0; cursor:pointer;
}
header > div > a.logo .brand-mark{
	width:30px; height:30px; border-radius:8px;
	background:var(--grad); box-shadow:0 6px 18px rgba(79,123,255,.45);
	flex:0 0 30px;
}
header > div > a.logo .brand-mark::after{
	content:""; position:absolute; inset:6px; border-radius:4px;
	background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
}
header > div > a.logo > span{ color:var(--primary); font-size:17px; }

header > div > nav{ float:none; width:auto; height:auto; display:flex; align-items:center; gap:24px; }
header > div > nav > a{
	float:none; display:inline-flex; align-items:center;
	color:var(--muted); font-size:14.5px; font-weight:500;
	text-transform:none; padding:0; background:none; width:auto; height:auto; margin:0; line-height:1;
	transition:color .2s;
}
header > div > nav > a:first-child{ background:none; width:auto; height:auto; padding:0; margin:0; }
header > div > nav > a:hover{ color:var(--text); }
header > div > nav > a[style*="display:none"], header > div > nav > a:empty{ display:none !important; }

header > div > h2{
	width:auto; flex:1 1 auto; text-align:left; padding:0;
	font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--muted);
	text-transform:none; display:flex; align-items:center; gap:9px;
}
header > div > h2::before{ content:""; width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 12px #22c55e; flex:0 0 7px; }

.email{ color:var(--text); font-size:14px; float:none; }

/* язык — сегментированный pill, как на сайте */
.langBlock{
	float:none; margin:0;
	display:inline-flex; align-items:center; gap:2px;
	padding:3px; background:var(--surface); border:1px solid var(--border);
	border-radius:999px; font-size:12.5px; font-weight:600; line-height:1; color:var(--muted);
}
.langBlock a{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:36px; padding:6px 12px; border-radius:999px; color:var(--muted);
	letter-spacing:.03em; white-space:nowrap; transition:background .2s, color .2s, box-shadow .2s;
}
.langBlock a:hover{ color:var(--text); text-decoration:none; }
.langBlock a.active, .langBlock a:has(> b){ background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(79,123,255,.35); }
.langBlock a.active b, .langBlock a > b{ font-weight:600; color:#fff; }

/* ----------------------------- layout --------------------------------- */
.proxies{ padding:40px 0 56px; }
.proxies h2{ color:var(--text); margin-bottom:24px; }
.proxy-descr{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }
.proxy-descr > div{ width:100%; margin:0 auto; box-sizing:border-box; }
.proxy-descr > div > p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:12px 0; }

/* основная панель кабинета — белая карточка как на сайте */
#body{
	background:var(--bg); border:1px solid var(--border);
	border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm);
}

/* контентные блоки страниц */
.block_pages{ }
.block_pages > .text{ color:var(--text); }
.block_pages h3{ margin-bottom:14px; }

/* --------------------------- messages --------------------------------- */
.message.message-notice, .message.message-warning, .message.message-error{
	border:1px solid; margin:14px 0; padding:12px 16px; border-radius:var(--radius-input); font-size:14px;
}
.message.message-notice { color:var(--ok);     background:rgba(34,197,94,.10);  border-color:rgba(34,197,94,.30); }
.message.message-warning{ color:var(--warn);   background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.30); }
.message.message-error  { color:var(--danger); background:rgba(220,38,38,.08);  border-color:rgba(220,38,38,.28); }
.message span{ font-weight:600; }

/* ------------------------ forms / controls ---------------------------- */
label, input, button, select, textarea{ font-size:14px; font-weight:400; line-height:1.5; }
input, button, select, textarea{ font-family:inherit; }
label{ display:block; margin-bottom:6px; color:var(--muted); font-size:13.5px; font-weight:500; }

select, textarea,
input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"],
input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="color"]{
	max-width:100%; height:44px; margin-bottom:13px; padding:0 14px;
	border:1px solid var(--border); border-radius:var(--radius-input);
	outline:none; box-sizing:border-box; font-size:15px; color:var(--text);
	background:#fff; font-family:inherit;
	transition:border-color .18s, box-shadow .18s;
}
input::placeholder, textarea::placeholder{ color:#94a3b8; }
input:focus, select:focus, textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(79,123,255,.14); }
input[readonly]{ background:var(--surface); color:var(--muted); }

textarea, form > textarea{
	max-width:100%; height:140px; padding:12px 14px; border:1px solid var(--border);
	border-radius:var(--radius-input); resize:vertical; line-height:1.55; color:var(--text);
	background:#fff; font-family:inherit; font-size:15px;
}

select{
	height:44px; appearance:none; -webkit-appearance:none; padding-right:38px;
	background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
	background-position:calc(100% - 19px) 19px, calc(100% - 14px) 19px; background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
select option{ background:#fff; color:var(--text); }

/* основная кнопка — pill с градиентом, как .btn-primary на сайте.
   (классы .btn/.btn-primary в шаблонах — это тег <button>, ловится этим же
   правилом; инлайновые width в шаблонах сохраняются) */
input[type=submit], button, .btn{
	width:auto; min-width:150px; height:44px; display:block; margin:22px auto 0; padding:0 24px;
	text-align:center; color:#fff; background:var(--grad);
	font-family:inherit; font-weight:600; font-size:15px; letter-spacing:.01em;
	text-transform:none; text-decoration:none; box-sizing:border-box; cursor:pointer;
	border:0; border-radius:999px; box-shadow:0 10px 26px rgba(79,123,255,.35);
	transition:transform .25s ease, box-shadow .25s ease;
}
input[type=submit]:hover, button:hover, .btn:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 14px 32px rgba(79,123,255,.45); }
input[type=submit]:active, button:active, .btn:active{ transform:translateY(0); }

/* инлайн-кнопки (.inline) — вторичный стиль, компактные */
button.inline{
	background:#fff; color:var(--text); border:1px solid var(--border);
	padding:7px 14px; margin:0; width:auto; min-width:0; height:auto; line-height:normal;
	font-family:inherit; font-size:13px; font-weight:600; letter-spacing:0;
	display:inline-block; border-radius:999px; text-transform:none; box-shadow:none;
	transition:all .2s ease;
}
button.inline:hover{ background:var(--surface-2); border-color:var(--border-strong); color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-sm); }

#captcha_img{ cursor:pointer; border-radius:var(--radius-input); border:1px solid var(--border); vertical-align:middle; margin:0 0 13px; }

/* --------------------------- LK navigation (float, не flex!) ---------- */
.block_lk .navigation{ /* в шаблоне: div float:left width:200px — оставляем как есть */ }
.block_lk .navigation > b{ display:block; color:var(--text); font-weight:600; margin-bottom:14px; font-size:14px; }
.block_lk .navigation > b a{ color:var(--primary); }
.block_lk .navigation ul, .block_lk .navigation ul.lk_nav{ list-style:none; margin:0; padding:0; }
.block_lk .navigation li{ list-style:none; margin:0; }
.block_lk .navigation li a{
	text-decoration:none; display:block; color:var(--text);
	border:1px solid var(--border); width:auto; background:#fff;
	margin-bottom:8px !important; padding:11px 14px !important;
	text-align:left; border-radius:var(--radius-input);
	font-size:14px; font-weight:500; cursor:pointer; transition:all .2s ease;
}
.block_lk .navigation li:hover a, .block_lk .navigation li a:hover{
	color:var(--primary) !important; border-color:var(--border-strong);
	background:var(--surface-2); box-shadow:var(--shadow-sm); cursor:pointer;
}
.block_lk .navigation li:hover{ border-color:transparent !important; cursor:pointer; }
.block_lk .navigation li.active a, .block_lk .navigation li a.active{
	color:#fff !important; background:var(--grad); border-color:transparent; box-shadow:0 8px 20px rgba(79,123,255,.30);
}

/* --------------------------- LK profile ------------------------------- */
.lk_profile{ border-collapse:collapse; }
.lk_profile td{ padding:6px 6px; color:var(--text); vertical-align:middle; }
.lk_profile td:first-child:not([colspan]){ text-align:right; padding-right:10px; vertical-align:top; padding-top:14px; color:var(--muted); font-size:13.5px; }
.lk_profile input{ margin-bottom:0; }

/* ---------------------------- data tables ----------------------------- */
table.module_table{
	border-collapse:separate; border-spacing:0; border:1px solid var(--border);
	width:100%; background:#fff; border-radius:var(--radius-card); overflow:hidden;
	font-size:14px; box-shadow:var(--shadow-sm); margin:0;
}
table.module_table td{ padding:14px 14px; border:none; border-bottom:1px solid var(--border); color:var(--text); }
table.module_table thead tr{ background:var(--surface-2); color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; font-weight:700; }
table.module_table thead td{ padding:12px 14px; border-bottom:1px solid var(--border); }
table.module_table tbody tr:hover:not(.empty){ background:var(--surface); cursor:pointer; }
table.module_table tbody tr:last-child td{ border-bottom:none; }
table.module_table tbody tr.noBottomBorder td{ border-bottom-color:var(--primary); }
table.module_table tbody td{ font-variant-numeric:tabular-nums; }

/* --------------------------- tariffs table ---------------------------- */
.module_tableTariffs tbody tr td{ border-bottom:none; padding:8px 12px; }
.module_tableTariffs tbody tr td[rowspan]{ text-align:left; vertical-align:top; color:var(--primary); font-weight:600; }
.module_tableTariffs tbody tr.last td, .module_tableTariffs tbody tr td[rowspan]{ border-bottom:1px solid var(--border); }

/* ------------------------- ticket chat log ---------------------------- */
.ticket_chatlog{
	height:320px; overflow:auto; border:1px solid var(--border);
	background:var(--surface); border-radius:var(--radius-card); padding:8px;
}
.ticket_chatlog > div{ margin:8px; padding:11px 14px; border:1px solid var(--border); border-radius:14px; clear:both; max-width:80%; font-size:14px; background:#fff; }
.ticket_chatlog > div.admin_msg{ border-color:var(--border-strong); background:var(--surface-2); float:left; }
.ticket_chatlog > div.client_msg{ background:#fff; float:right; }
.ticket_chatlog > div.admin_msg > span{ color:var(--primary); }
.ticket_chatlog > div.client_msg > span{ color:var(--muted); }
.ticket_chatlog > div > span{ font-size:12px; font-weight:600; }
.ticket_chatlog > div > span:nth-child(1){ float:left; margin-right:10px; }
.ticket_chatlog > div > span:nth-child(2){ float:right; color:#94a3b8; }
.ticket_chatlog::-webkit-scrollbar{ width:10px; }
.ticket_chatlog::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
.ticket_chatlog::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }

.clear{ clear:both; }

/* --------------------- jquery-ui light touch-ups ---------------------- */
.ui-widget-content{ background:#fff; color:var(--text); border-color:var(--border); }
.ui-widget-header{ background:var(--surface-2); color:var(--primary); border-color:var(--border); }
.ui-datepicker{ font-family:inherit; border-radius:var(--radius-card); }

/* ----------------------------- responsive ----------------------------- */
/* Аккуратно: десктоп не трогаем (вёрстка фиксированная на float). На узких
   экранах только ужимаем шапку и отступы, без борьбы с инлайн-стилями. */
@media (max-width:900px){
	header > div{ flex-wrap:wrap; height:auto; padding:12px 18px; gap:12px; }
	header > div > h2{ order:5; flex-basis:100%; }
	.proxy-descr{ padding-left:18px; padding-right:18px; }
	#body{ padding:20px; overflow-x:auto; }
}
@media (max-width:560px){
	table.module_table{ font-size:13px; }
	table.module_table td, table.module_table thead td{ padding:10px 10px; }
	.ticket_chatlog > div{ max-width:92%; }
}
@media (prefers-reduced-motion:reduce){
	*{ animation:none !important; transition:none !important; }
}