:root{
	--bg:#0b1220;
	--card:#111827;
	--muted:#93a4bf;
	--text:#e5ecff;
	--accent:#7c3aed;
	--accent-2:#06b6d4;
	--danger:#ef4444;
	--success:#10b981;
	--border:#243042;
	--chip:#1f2937;
	--chip-bad:#3b1d23;
	--focus:#38bdf8;
    --input:#0c111b;

	--control-h:40px;
	--radius:12px;
}

@media (prefers-color-scheme: light){
	:root{
		--bg:#f3f6fb;
		--card:#ffffff;
		--muted:#51607a;
		--text:#121826;
		--border:#dfe5f1;
		--chip:#eef2f8;
		--chip-bad:#fde2e4;
        --input:#ffffff;
	}
}

html, body { height:100%; margin:0; }

body{
	font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
	color:var(--text);

	background:
		radial-gradient(1200px 700px at 80% -10%, rgba(124,58,237,.18) 0%, transparent 60%),
		radial-gradient(1000px 600px at -10% 10%, rgba(6,182,212,.16) 0%, transparent 55%),
		var(--bg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center top;
	background-size:cover;
}
.container{max-width:960px;margin:40px auto;padding:0 16px;}
.sep{height:1px;background:var(--border);margin:10px 0 16px;}
footer{text-align:center;color:var(--muted);font-size:13px;padding:16px 0 30px;}

.card{
	background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%),var(--card);
	border:1px solid var(--border);
	border-radius:20px;
	box-shadow:0 10px 30px rgba(0,0,0,.15);
	padding:22px;
}
.header{
	padding:20px 22px;border-radius:18px;overflow:hidden;position:relative;isolation:isolate;
	background:
		radial-gradient(400px 160px at 20% -30%, rgba(124,58,237,.50), transparent 60%),
		radial-gradient(400px 160px at 120% 0%, rgba(6,182,212,.45), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	border:1px solid var(--border);
}
.header-flex{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;}
.header-left{flex:1 1 60%;}
.title{font-size:26px;font-weight:750;letter-spacing:.2px;margin:0 0 6px;}
.subtitle{color:var(--muted);margin:0 0 16px;}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.btn{
	height:var(--control-h);
	padding:0 16px;
	border-radius:12px;
	border:1px solid transparent;
	cursor:pointer;
	font-weight:700;
	letter-spacing:.2px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
	background:transparent;
	color:var(--text);
}
.btn:active{transform:translateY(1px);}
.btn i,.btn svg{width:18px;height:18px;display:inline-block;}

.btn-primary{
	color:#fff;
	background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--accent-2)));
	box-shadow:0 6px 20px rgba(124,58,237,.35);
}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border);}

.btn-share{
	color:#001018;
	background:linear-gradient(135deg, color-mix(in oklab, var(--accent-2) 90%, white 10%), color-mix(in oklab, var(--accent-2) 70%, black 0%));
	border-color:color-mix(in oklab, var(--accent-2) 65%, var(--border));
	box-shadow:0 6px 16px color-mix(in oklab, var(--accent-2) 25%, transparent);
}
.btn-share:hover{
	filter:saturate(1.03) brightness(1.02);
}

.btn-del{
	color:#fff;
	background:linear-gradient(135deg, color-mix(in oklab, var(--danger) 85%, black 10%), var(--danger));
	border-color:color-mix(in oklab, var(--danger) 70%, var(--border));
	box-shadow:0 6px 16px color-mix(in oklab, var(--danger) 30%, transparent);
}
.btn-del:hover{filter:saturate(1.05) brightness(1.03);}

.chip-input{
	display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:46px;padding:8px;
	border:1px solid var(--border);border-radius:12px;background:transparent;
}
.chip{
	display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--chip);
	border:1px solid var(--border);color:var(--text);font-size:14px;
}
.chip.bad{background:var(--chip-bad);border-color:color-mix(in oklab, var(--danger) 35%, var(--border));}
.chip .x{cursor:pointer;opacity:.8;}
.chip .x:hover{opacity:1;}
.chip-input input{min-width:120px;flex:1;border:none;outline:none;background:transparent;color:var(--text);padding:6px 4px;height:32px;}
.label{font-size:14px;color:var(--muted);}
.hint{font-size:13px;color:var(--muted);margin-top:2px;}
.muted{color:var(--muted);}
.pill{padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:13px;}

.btn-like{
	display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;
	border:1px solid var(--btn-border,#2a2f3a);background:var(--btn-bg,#1f2430);
	user-select:none;white-space:nowrap;transition:opacity .15s ease;
}
.btn-like.primary{background:var(--primary,#6b5cff);border-color:var(--primary-border,#5a4cf0);color:#fff;}
.dot-inline{width:8px;height:8px;border-radius:999px;background:#2ecc71;box-shadow:0 0 0 2px rgba(46,204,113,.25);}
.status-username{opacity:.9;font-size:.9em;}

.sysinfo{border-radius:12px;}

.sets-card{
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:auto auto auto;
	gap:16px;
}
.sets-head{
	display:grid;
	grid-template-columns:1fr auto;
	grid-auto-rows:auto;
	align-items:center;
	gap:12px;
}
.sets-title{margin:0;font-size:18px;}
.sets-subtitle{grid-column:1 / -1;margin:0;}

#setsWrap{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
}
@media (min-width:1024px){
	#setsWrap{grid-template-columns:repeat(2, minmax(360px, 1fr));}
}

.set-card{
	display:flex;flex-direction:column;gap:10px;
	padding:12px;border:1px solid var(--border,#303645);border-radius:12px;background:var(--card,#0f1522);
	overflow:visible;
}

.set-card .set-head{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:nowrap;
}
.set-card .set-name{
	flex:1 1 auto;
	min-width:0;
	height:var(--control-h);
	padding:0 10px;
	border:1px solid var(--border,#303645);
	border-radius:8px;
	background:var(--input,#0c111b);
	color:var(--text);
}

.set-card .set-head .btn{
	width:auto;
	white-space:nowrap;
}

.set-card .label{margin-top:4px;margin-bottom:6px;}
.set-card .hint{margin-top:6px;}

.set-card .chip-input{
	min-height:44px;padding:6px;border:1px solid var(--border,#303645);border-radius:10px;background:var(--input,#0c111b);
}

.sets-card .actions{
	display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;grid-column:1 / -1;
}

.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    min-width: 220px;
    max-width: 90vw;
    padding: 12px 16px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width:900px){
	.hero{display:block;}
}

/* language */
.header-right{ margin-left:auto; display:flex; align-items:flex-start; }
.lang-switch{ display:flex; gap:8px; }
.lang-switch a{
	text-decoration:none;
	display:inline-flex; align-items:center; justify-content:center;
	height:32px; padding:0 12px;
	border:1px solid var(--border);
	border-radius:999px;
	color:var(--text);
	background:transparent;
	opacity:.85;
	transition:opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-switch a:hover{ opacity:1; }
.lang-switch a.active{
	background:var(--chip);
	opacity:1;
	border-color:color-mix(in oklab, var(--border) 70%, var(--focus));
}


@media(max-width:768px) {
    .header-flex {
        flex-direction:column;
    }
}

/* Hero section */
.hero-banner-bg {
    position: relative;
    display: grid;
    grid-template-columns: minmax(340px, 560px) 1fr;
    min-height: 360px;
    border-radius: 18px;
    overflow: hidden;
    background: url("/images/head-bg-light.webp") right center / cover no-repeat;
    z-index: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.hero-left {
    position: relative;
    z-index: 1;
    padding: 56px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #1a1f2c;
}

.slogan {
    margin: 0 0 18px;
    font-weight: 800;
    line-height: 1.06;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 42px;
    color: #1a1f2c;
}
.slogan p { margin: 0; }
.slogan p:nth-child(2){ color: #0BA5A5; }
.slogan p:nth-child(3){ color: #7C3AED; }

.slogan-sub { margin: 6px 0 22px; color: #444; }

.slogan-actions { display:flex; gap:14px; flex-wrap:wrap; }
.slogan-actions a { text-decoration:none; }

@media (prefers-color-scheme: dark) {
    .hero-banner-bg {
        background: url("/images/head-bg-dark.webp") right center / cover no-repeat;
    }
    .hero-banner-bg::before {
        background: linear-gradient(
            90deg,
            rgba(8,10,16,.88) 0%,
            rgba(8,10,16,.82) 45%,
            rgba(8,10,16,.55) 60%,
            rgba(8,10,16,0) 75%
        );
    }
    .hero-left { color: #fff; }
    .slogan p:nth-child(2){ color: #2ED4D4; }
    .slogan p:nth-child(3){ color: #9B7BFF; }
    .slogan-sub { color: #DDE3F0; }
}


@media (max-width: 860px){
    .hero-banner-bg {
        grid-template-columns: 1fr;
        background:none;
    }
    .hero-banner-bg::before {
        background: linear-gradient(
            180deg,
            rgba(245, 238, 228, 0.95) 0%,
            rgba(245, 238, 228, 0.6) 60%,
            rgba(245, 238, 228, 0) 100%
        );
    }
    @media (prefers-color-scheme: dark) {
        .hero-banner-bg::before {
            background: linear-gradient(
                180deg,
                rgba(8,10,16,.86) 0%,
                rgba(8,10,16,.6) 60%,
                rgba(8,10,16,0) 100%
            );
        }
    }
    .hero-left { padding: 36px 16px; text-align: center; }
}

/* ------------- instructions ----------- */
.instr__header{
    margin:0 0 8px;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    user-select:none;
}

.instr__arrow{
    display:inline-block;
    transition:transform 200ms ease;
}
.instr__header[aria-expanded="true"] .instr__arrow{
    transform:rotate(180deg);
}

.instr__content{
    overflow:hidden;
    max-height:0;       
    opacity:0;
    transition:max-height 280ms ease, opacity 220ms ease;
}
.instr__content.is-open{
    opacity:1;
}



/* monitor-v2.css - Стили в соответствии с дизайном сайта */

/* ========== Обёртка для элемента сета ========== */
.set-item-wrapper {
	margin-bottom: 16px;
}

/* ========== Список сетов ========== */
#setsListWrap {
	display: flex;
	flex-direction: column;
}

.set-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%), var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.set-list-item:hover {
	border-color: var(--accent);
	box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
	transform: translateY(-1px);
}

.set-list-item-main {
	flex: 1;
	min-width: 0;
}

.set-list-item-name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: var(--text);
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.set-list-item-stats {
	font-size: 13px;
	color: var(--muted);
}

.set-list-item-actions {
	display: flex;
	gap: 8px;
	margin-left: 16px;
}

.btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: var(--muted);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-icon:hover {
	background: var(--chip);
	color: var(--accent);
}

/* ========== Пустое состояние ========== */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--muted);
	background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 40%), var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.empty-state i {
	font-size: 64px;
	color: var(--border);
	margin-bottom: 20px;
	opacity: 0.5;
}

.empty-state p {
	margin: 8px 0;
	font-size: 16px;
	color: var(--text);
}

.empty-state .hint {
	font-size: 13px;
	color: var(--muted);
}

/* ========== Форма редактирования (встроенная) ========== */
.set-editor {
	background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%), var(--card);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.set-editor-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background:
		radial-gradient(400px 160px at 20% -30%, rgba(124,58,237,.50), transparent 60%),
		radial-gradient(400px 160px at 120% 0%, rgba(6,182,212,.45), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	border-bottom: 1px solid var(--border);
}

.set-editor-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 750;
	letter-spacing: 0.2px;
	color: var(--text);
}

.btn-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 16px;
}

.btn-close:hover {
	background: rgba(255, 255, 255, 0.12);
}

.set-editor-body {
	padding: 20px;
}

.form-group {
	margin-bottom: 16px;
}

.form-group:last-child {
	margin-bottom: 0;
}

.label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 6px;
}

.set-name-input {
	width: 100%;
	height: var(--control-h);
	padding: 0 12px;
	font-size: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	font-family: inherit;
	background: var(--input);
	color: var(--text);
}

.set-name-input:focus {
	outline: none;
	border-color: var(--focus);
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.hint {
	font-size: 13px;
	color: var(--muted);
	margin-top: 4px;
}

.set-editor-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
	border-top: 1px solid var(--border);
	gap: 10px;
}

.footer-left,
.footer-right {
	display: flex;
	gap: 8px;
}

/* ========== Кнопки (используем стили сайта) ========== */
.btn {
	height: var(--control-h);
	padding: 0 16px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	font-weight: 700;
	letter-spacing: 0.2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
	background: transparent;
	color: var(--text);
	white-space: nowrap;
	font-family: inherit;
	font-size: 14px;
}

.btn:active {
	transform: translateY(1px);
}

.btn i, .btn svg {
	width: 18px;
	height: 18px;
	display: inline-block;
}

.btn-primary {
	color: #fff;
	background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--accent-2)));
	box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.btn-primary:hover {
	filter: saturate(1.05) brightness(1.05);
}

.btn-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	filter: none;
}

.btn-secondary {
	background: var(--chip);
	color: var(--text);
	border: 1px solid var(--border);
}

.btn-secondary:hover {
	background: color-mix(in oklab, var(--chip) 80%, var(--text) 5%);
}

.btn-outline {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border);
}

.btn-outline:hover {
	background: var(--chip);
	border-color: color-mix(in oklab, var(--border) 70%, var(--focus));
}

.btn-delete {
	color: #fff;
	background: linear-gradient(135deg, color-mix(in oklab, var(--danger) 85%, black 10%), var(--danger));
	border-color: color-mix(in oklab, var(--danger) 70%, var(--border));
	box-shadow: 0 6px 16px color-mix(in oklab, var(--danger) 30%, transparent);
}

.btn-delete:hover {
	filter: saturate(1.05) brightness(1.03);
}

.btn-share {
	color: #001018;
	background: linear-gradient(135deg, color-mix(in oklab, var(--accent-2) 90%, white 10%), color-mix(in oklab, var(--accent-2) 70%, black 0%));
	border-color: color-mix(in oklab, var(--accent-2) 65%, var(--border));
	box-shadow: 0 6px 16px color-mix(in oklab, var(--accent-2) 25%, transparent);
}

.btn-share:hover {
	filter: saturate(1.03) brightness(1.02);
}

/* ========== ChipInput (используем стили сайта) ========== */
.chip-input {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 46px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--input);
	cursor: text;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative; /* для автокомплита */
}

.chip-input:focus-within {
	border-color: var(--focus);
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.chip-input input {
	flex: 1;
	min-width: 120px;
	border: none;
	outline: none;
	font-size: 14px;
	padding: 6px 4px;
	height: 32px;
	font-family: inherit;
	background: transparent;
	color: var(--text);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--chip);
	border: 1px solid var(--border);
	color: var(--text);
	font-size: 14px;
}

.chip.bad {
	background: var(--chip-bad);
	border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
}

.chip .x {
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.chip .x:hover {
	opacity: 1;
}

/* ========== Автокомплит ========== */
.chip-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	max-height: 240px;
	overflow-y: auto;
	z-index: 1000;
}

.chip-autocomplete-item {
	padding: 10px 14px;
	cursor: pointer;
	transition: background 0.15s ease;
	border-bottom: 1px solid var(--border);
}

.chip-autocomplete-item:last-child {
	border-bottom: none;
}

.chip-autocomplete-item:hover,
.chip-autocomplete-item.selected {
	background: var(--chip);
}

.autocomplete-main {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 2px;
}

.autocomplete-sub {
	font-size: 12px;
	color: var(--muted);
}

/* Скроллбар для автокомплита */
.chip-autocomplete::-webkit-scrollbar {
	width: 6px;
}

.chip-autocomplete::-webkit-scrollbar-track {
	background: transparent;
}

.chip-autocomplete::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
}

.chip-autocomplete::-webkit-scrollbar-thumb:hover {
	background: var(--muted);
}

/* ========== Адаптивность ========== */
@media (max-width: 768px) {
	.set-list-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.set-list-item-actions {
		margin-left: 0;
		width: 100%;
		justify-content: flex-end;
	}

	.set-editor-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.footer-left,
	.footer-right {
		width: 100%;
		justify-content: space-between;
	}

	.btn {
		flex: 1;
	}
}

/* ========== Toast (в стиле сайта, справа внизу) ========== */
#toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	min-width: 220px;
	max-width: 90vw;
	padding: 12px 16px;
	background: var(--accent);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
	font-size: 15px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 10000;
}

#toast.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

#toast .progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 0 0 8px 8px;
	overflow: hidden;
}

#toast .progress i {
	display: block;
	height: 100%;
	background: var(--success);
	animation: progress var(--toast-dur, 2200ms) linear;
}

@keyframes progress {
	from { width: 100%; }
	to { width: 0%; }
}

/* ========== Карточка сетов (обёртка) ========== */
.sets-card {
	background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%), var(--card);
	border: 1px solid var(--border);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0,0,0,.15);
	padding: 22px;
	margin-bottom: 24px;
}

.sets-head {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-auto-rows: auto;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.sets-title {
	margin: 0;
	font-size: 18px;
	font-weight: 750;
	letter-spacing: 0.2px;
	color: var(--text);
}

.sets-subtitle {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--muted);
}

/* ========== Светлая тема ========== */
@media (prefers-color-scheme: light) {
	.btn-share {
		color: #fff;
	}
}

/* ========== Balance widget (header) ========== */
.balance-widget {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: var(--control-h);
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--btn-bg, #1f2430);
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.balance-widget:hover {
	border-color: var(--accent-2);
	box-shadow: 0 4px 14px color-mix(in oklab, var(--accent-2) 20%, transparent);
}

.balance-widget i {
	color: var(--accent-2);
	font-size: 15px;
}

/* ========== Balance page ========== */
.balance-page-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.btn-back {
	flex-shrink: 0;
}

.balance-summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	background: rgba(255,255,255,.02);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 20px;
}

.balance-summary-label {
	font-size: 13px;
	color: var(--muted);
}

.balance-summary-amount {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--accent-2);
	line-height: 1;
}

.balance-currency {
	font-size: 18px;
	font-weight: 600;
	opacity: 0.65;
}

/* ========== Topup form ========== */
.balance-topup {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: rgba(255,255,255,.02);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 24px;
}

.topup-presets {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.topup-preset {
	height: 36px;
	padding: 0 16px;
	font-size: 14px;
	border-radius: 999px;
	transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}

.topup-preset.active {
	background: color-mix(in oklab, var(--accent) 15%, var(--chip));
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
}

.topup-custom {
	display: flex;
	gap: 10px;
	align-items: center;
}

.topup-input {
	flex: 1;
	min-width: 0;
	height: var(--control-h);
	padding: 0 12px;
	font-size: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--input);
	color: var(--text);
	font-family: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.topup-input:focus {
	outline: none;
	border-color: var(--focus);
	box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
}

.topup-input::-webkit-inner-spin-button,
.topup-input::-webkit-outer-spin-button {
	opacity: 0.5;
}

/* ========== Transactions section ========== */
.balance-txs-section {
	border-top: 1px solid var(--border);
	padding-top: 18px;
}

.tx-list { }

.tx-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--border);
}

.tx-row:last-child {
	border-bottom: none;
}

.tx-icon {
	font-size: 18px;
	flex-shrink: 0;
	width: 20px;
	text-align: center;
}

.tx-icon.tx-approved { color: var(--success); }
.tx-icon.tx-pending  { color: #f59e0b; }
.tx-icon.tx-declined { color: var(--danger); }

.tx-info {
	flex: 1;
	min-width: 0;
}

.tx-desc {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tx-date {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}

.tx-amount {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--muted);
}

.tx-amount-positive { color: var(--success); }
.tx-amount-negative { color: var(--danger); }

.tx-empty {
	text-align: center;
	padding: 28px 0;
	color: var(--muted);
	font-size: 14px;
}

/* ========== Subscription status ========== */
.subscription-status {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 10px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 15px;
	border: 1px solid var(--border);
}

.sub-status-active {
	background: color-mix(in oklab, var(--success) 12%, var(--card));
	color: var(--success);
	border-color: color-mix(in oklab, var(--success) 30%, transparent);
}

.sub-status-inactive {
	background: var(--chip);
	color: var(--muted);
}

.sub-status-expired {
	background: color-mix(in oklab, var(--danger) 12%, var(--card));
	color: var(--danger);
	border-color: color-mix(in oklab, var(--danger) 30%, transparent);
}

.sub-status-icon {
	font-size: 20px;
	flex-shrink: 0;
}

/* ========== Subscription plans ========== */
.sub-plans-section {
	margin-bottom: 20px;
}

.sub-plans {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.sub-plan-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 14px 10px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: var(--chip);
	gap: 4px;
	transition: border-color .15s, background .15s;
	cursor: pointer;
}

.sub-plan-btn:hover {
	border-color: var(--accent);
	background: color-mix(in oklab, var(--accent) 8%, var(--chip));
}

.sub-plan-btn.active {
	border-color: var(--accent);
	background: color-mix(in oklab, var(--accent) 15%, var(--chip));
}

.sub-plan-period {
	font-size: 14px;
	font-weight: 700;
	color: var(--fg);
}

.sub-plan-price {
	font-size: 13px;
	color: var(--muted);
}

.sub-plan-badge {
	position: absolute;
	top: -8px;
	right: -6px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 8px;
}

/* ========== Referral card ========== */
.ref-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ref-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ref-stats {
	display: flex;
	gap: 20px;
	flex-shrink: 0;
}

.ref-stat-item {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.ref-stat-val {
	font-size: 20px;
	font-weight: 700;
	color: var(--accent-2);
	line-height: 1;
}

.ref-stat-label {
	font-size: 11px;
	color: var(--muted);
}

.ref-link-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.ref-link-input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	background: var(--chip);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--accent-2);
	font-size: 13px;
	font-family: monospace;
	outline: none;
	cursor: text;
}

@media (max-width: 540px) {
	.topup-custom {
		flex-direction: column;
		align-items: stretch;
	}
	.balance-page-nav {
		flex-wrap: wrap;
	}
}

.free-plan-banner {
    padding: 0 20px 20px 20px;
}