@font-face { font-family: Inter; src: url(fonts/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/Inter-Semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/Inter-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* Палитра и формы — как в Need: светлая и тёмная тема, акцент #3AA8FC, скругления 26px */
:root {
	--bg_color: rgba(255, 255, 255, 1);
	--text_color: rgba(26, 38, 50, 1);
	--subtitle_text_color: rgba(142, 142, 147, 1);
	--accent_text_color: rgba(58, 168, 252, 1);
	--button_text_color: #fff;
	--button_color: #3AA8FC;
	--second_button_color: rgba(58, 168, 252, .1);
	--section_bg_color: rgba(247, 249, 251, 1);
	--separator_color: #DFE7EF;
	--destructive_text_color: rgba(255, 45, 85, 1);
	--destructive_bg: rgba(255, 45, 85, .1);
	--success_color: rgba(101, 196, 102, 1);
	--warning_color: rgba(255, 204, 0, 1);
	--warning-opacity_color: rgba(255, 204, 0, .1);
	--tertiary_fill_background: rgba(118, 118, 128, .12);
	--quaternary_fill_background: rgba(116, 116, 128, .08);
	--safe-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom));
	--radius: 26px;
	color-scheme: light;
}
[data-theme=dark] {
	--bg_color: rgba(29, 29, 29, 1);
	--text_color: rgba(255, 255, 255, 1);
	--subtitle_text_color: rgba(152, 152, 158, 1);
	--section_bg_color: rgba(44, 44, 46, 1);
	--separator_color: #3D3D3F;
	--destructive_text_color: rgba(255, 55, 95, 1);
	--destructive_bg: rgba(255, 55, 95, .12);
	--tertiary_fill_background: rgba(118, 118, 128, .24);
	--quaternary_fill_background: rgba(118, 118, 128, .16);
	color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
	background: var(--bg_color); color: var(--text_color);
	font: 400 15px/1.35 Inter, -apple-system, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
svg { fill: currentColor; }
code { font: 500 12px ui-monospace, "SF Mono", Consolas, monospace; background: var(--tertiary_fill_background); padding: 1px 5px; border-radius: 6px; overflow-wrap: anywhere; }

main { padding: 8px 16px calc(96px + var(--safe-bottom)); max-width: 560px; margin: 0 auto; }

/* заголовок страницы */
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 16px; }
.head h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.4px; }
.badge {
	display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px;
	background: var(--second_button_color); color: var(--accent_text_color); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.muted { background: var(--tertiary_fill_background); color: var(--subtitle_text_color); }
.badge.run { background: rgba(101, 196, 102, .14); color: var(--success_color); }
.badge.run i { animation: pulse 1.2s ease-in-out infinite; }
.badge.stop { background: var(--warning-opacity_color); color: var(--warning_color); }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .4; } }

/* главная карточка */
.hero { background: var(--section_bg_color); border-radius: var(--radius); padding: 20px 20px 18px; margin-bottom: 12px; }
.hero-label { color: var(--subtitle_text_color); font-size: 13px; font-weight: 600; }
.hero-value { display: block; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -1px; margin: 2px 0 14px; }
.progress { height: 6px; border-radius: 3px; background: var(--tertiary_fill_background); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--button_color); transition: width .5s ease; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.hero-stats b { display: block; font-size: 20px; font-weight: 700; }
.hero-stats span { color: var(--subtitle_text_color); font-size: 12px; }

/* секции со строками */
.section { background: var(--section_bg_color); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.section.pad { padding: 14px 16px; }
.section-title { margin: 22px 16px 8px; font-size: 13px; font-weight: 600; color: var(--subtitle_text_color); text-transform: uppercase; letter-spacing: .3px; }
.cell { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; cursor: pointer; }
.cell + .cell::before, .list > .acc + .acc::before, .list > .kv + .kv::before {
	content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--separator_color); transform: scaleY(.5);
}
.cell-title { font-size: 17px; letter-spacing: -.2px; white-space: nowrap; }
.cell-title small { color: var(--subtitle_text_color); font-size: 13px; }
.cell input[type=text], .cell select {
	flex: 1; min-width: 0; text-align: right; background: none; border: 0; outline: none; padding: 0;
	font-size: 17px; color: var(--subtitle_text_color); appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
}
.cell input[type=text]:focus { color: var(--text_color); }
/* строки, которые открывают выбор: значение и стрелка справа, отклик на нажатие */
button.cell { width: 100%; border: 0; background: none; text-align: left; transition: background .15s; }
.cell.pick:active, .cell.edit:active, .opt:active { background: var(--quaternary_fill_background); }
@media (hover: hover) { .cell.pick:hover, .opt:hover { background: var(--quaternary_fill_background); } }
.cell-value { flex: 1; min-width: 0; text-align: right; font-size: 17px; color: var(--subtitle_text_color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { width: 18px; height: 18px; flex: none; margin-right: -4px; fill: none; stroke: var(--subtitle_text_color); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.cell.edit input[type=text] { color: var(--text_color); }
.cell.edit input[type=text]::placeholder { color: var(--subtitle_text_color); }
.cell.template { padding-top: 0; min-height: 0; }
.cell.template::before { display: none; }
.cell.template input {
	width: 100%; height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid transparent; outline: none;
	background: var(--tertiary_fill_background); font: 500 13px ui-monospace, "SF Mono", Consolas, monospace; text-align: left; color: var(--text_color);
}
.cell.template input:focus { border-color: var(--button_color); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 14px; }
.chips button {
	height: 32px; padding: 0 12px; border: 0; border-radius: 16px; cursor: pointer;
	background: var(--second_button_color); color: var(--accent_text_color); font: 600 13px ui-monospace, "SF Mono", Consolas, monospace;
	transition: transform .15s;
}
.chips button:active { transform: scale(.94); }

/* окно выбора — по центру экрана, как модальные окна Need */
.sheet.modal { align-items: center; padding: 16px; }
.sheet.modal .sheet-body { max-width: 440px; border-radius: var(--radius); padding: 20px 16px 16px; animation: pop .22s cubic-bezier(.2, .8, .2, 1); }
.sheet.modal .section { margin-bottom: 0; background: var(--section_bg_color); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.picker-title { margin: 0 4px 14px; font-size: 20px; font-weight: 700; }
.opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; background: none; text-align: left; cursor: pointer; transition: background .15s; }
.list > .opt + .opt::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--separator_color); transform: scaleY(.5); }
.opt div { flex: 1; min-width: 0; }
.opt b { display: block; font-size: 17px; font-weight: 500; }
.opt span { display: block; margin-top: 2px; color: var(--subtitle_text_color); font-size: 13px; overflow-wrap: anywhere; }
.opt .check { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--tertiary_fill_background); display: flex; align-items: center; justify-content: center; }
.opt.on .check { border-color: var(--button_color); background: var(--button_color); }
.opt.on .check::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

.stepper { display: inline-flex; align-items: center; background: var(--tertiary_fill_background); border-radius: 18px; height: 36px; }
.stepper button { width: 40px; height: 36px; border: 0; background: none; color: var(--accent_text_color); font-size: 22px; font-weight: 600; cursor: pointer; }
.stepper input { width: 58px; height: 36px; border: 0; background: none; text-align: center; font-size: 17px; font-weight: 600; outline: none; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--tertiary_fill_background); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); transition: transform .2s; }
.switch input:checked + i { background: var(--success_color); }
.switch input:checked + i::after { transform: translateX(20px); }

textarea {
	display: block; width: 100%; min-height: 64px; border: 0; outline: none; resize: vertical; background: none; padding: 0;
	font: 500 13px/1.5 ui-monospace, "SF Mono", Consolas, monospace;
}
textarea::placeholder, input::placeholder { color: var(--subtitle_text_color); opacity: .8; }
.saved { font: 500 12px/1.5 ui-monospace, "SF Mono", Consolas, monospace; color: var(--subtitle_text_color); padding-bottom: 10px; margin-bottom: 10px; border-bottom: .5px solid var(--separator_color); word-break: break-all; }

/* кнопки */
.btn {
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px;
	width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: var(--radius); cursor: pointer;
	font-size: 17px; font-weight: 600; letter-spacing: -.2px; transition: transform .3s ease, opacity .2s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; pointer-events: none; }
.btn-brand { background: var(--button_color); color: var(--button_text_color); }
.btn-tinted { background: var(--second_button_color); color: var(--accent_text_color); }
.btn-gray { background: var(--section_bg_color); color: var(--text_color); }
.btn-danger { background: var(--destructive_bg); color: var(--destructive_text_color); }
.btn + .btn, .row2 + .btn, .btn + .section { margin-top: 10px; }
.row2 > .btn { margin-top: 0; }
.shine { position: absolute; top: -50%; left: -30%; width: 20px; height: 200%; background: #fff; transform: rotate(45deg); filter: blur(24px); opacity: .5; animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -30%; } 100% { left: 130%; } }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn.loading { color: transparent; }
.btn.loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-color: var(--accent_text_color) transparent var(--accent_text_color) transparent; animation: spin .8s linear infinite; }
.btn-brand.loading::after { border-color: #fff transparent #fff transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.note { margin: -4px 16px 12px; color: var(--subtitle_text_color); font-size: 13px; line-height: 1.4; }
.note.warn { color: var(--warning_color); margin-top: 0; }
.btn + .note, .row2 + .note { margin-top: 8px; }
.result { margin: 8px 16px 0; font-size: 13px; line-height: 1.5; }
.result .ok { color: var(--success_color); }
.result .bad { color: var(--destructive_text_color); }

/* потоки */
.workers { margin-top: 12px; }
.worker { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.worker + .worker::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--separator_color); transform: scaleY(.5); }
.worker .num { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--second_button_color); color: var(--accent_text_color); font-weight: 700; font-size: 15px; }
.worker .num.busy { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.92); opacity: .7; } }
.worker div { min-width: 0; }
.worker b { display: block; font-size: 15px; font-weight: 600; }
.worker span { display: block; color: var(--subtitle_text_color); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* журнал */
.log { padding: 10px 14px; max-height: 46vh; overflow-y: auto; font: 500 12px/1.55 ui-monospace, "SF Mono", Consolas, monospace; }
.log div { word-break: break-word; padding: 1px 0; }
.log time { color: var(--subtitle_text_color); margin-right: 6px; }
.log em { color: var(--accent_text_color); font-style: normal; margin-right: 4px; }
.log .ok { color: var(--success_color); }
.log .warn { color: var(--warning_color); }
.log .error { color: var(--destructive_text_color); }
.log-empty { margin: 6px 0; color: var(--subtitle_text_color); font-family: Inter, sans-serif; font-size: 13px; }

/* аккаунты */
.field { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-radius: var(--radius); background: var(--section_bg_color); margin-bottom: 12px; }
.field svg { width: 20px; height: 20px; color: var(--subtitle_text_color); flex: none; }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 17px; }
.acc { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 60px; cursor: pointer; transition: background .2s; }
.acc:active { background: var(--quaternary_fill_background); }
.list > .acc + .acc::before { left: 68px; }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--second_button_color); color: var(--accent_text_color); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.acc-main { flex: 1; min-width: 0; }
.acc-main b { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-main span { display: block; color: var(--subtitle_text_color); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: var(--tertiary_fill_background); color: var(--subtitle_text_color); white-space: nowrap; }
.pill.ma { background: rgba(101, 196, 102, .14); color: var(--success_color); }
.pill.new { background: var(--second_button_color); color: var(--accent_text_color); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 48px 24px; color: var(--subtitle_text_color); }
.empty svg { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--second_button_color); color: var(--accent_text_color); margin-bottom: 8px; }
.empty b { color: var(--text_color); font-size: 17px; }

/* нижнее меню */
.tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr);
	padding: 6px 12px calc(8px + var(--safe-bottom)); background: color-mix(in srgb, var(--bg_color) 88%, transparent);
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: .5px solid var(--separator_color);
}
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: 0; background: none; color: var(--subtitle_text_color); font-size: 11px; font-weight: 600; cursor: pointer; transition: color .2s; }
.tabbar svg { width: 26px; height: 26px; }
.tabbar button.active { color: var(--accent_text_color); }

/* шторка аккаунта */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .4); animation: fade .2s ease; }
.sheet-body { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--bg_color); border-radius: var(--radius) var(--radius) 0 0; padding: 8px 16px calc(16px + var(--safe-bottom)); animation: up .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }
.sheet-handle { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--tertiary_fill_background); margin: 0 auto 14px; }
.sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sheet-head .avatar { width: 52px; height: 52px; font-size: 20px; }
.sheet-head h3 { margin: 0; font-size: 20px; font-weight: 700; word-break: break-all; }
.sheet-head span { color: var(--subtitle_text_color); font-size: 13px; }
.guard { position: relative; display: block; width: 100%; text-align: left; border: 0; cursor: pointer; background: var(--second_button_color); border-radius: var(--radius); padding: 14px 18px 16px; margin-bottom: 12px; color: var(--text_color); }
.guard-label { display: block; font-size: 12px; font-weight: 600; color: var(--accent_text_color); margin-bottom: 4px; }
.guard b { font: 700 34px/1.1 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: 6px; }
.guard .ring { position: absolute; right: 18px; top: 50%; width: 40px; height: 40px; margin-top: -14px; transform: rotate(-90deg); fill: none; stroke-width: 3; }
.guard .ring circle:first-child { stroke: var(--tertiary_fill_background); }
.guard .ring circle:last-child { stroke: var(--accent_text_color); stroke-linecap: round; stroke-dasharray: 94.25; transition: stroke-dashoffset 1s linear; }
.guard i { position: absolute; right: 18px; top: 50%; width: 40px; margin-top: -2px; text-align: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent_text_color); }
.kv { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; cursor: pointer; }
.kv span { color: var(--subtitle_text_color); font-size: 15px; white-space: nowrap; }
.kv b { font: 500 14px ui-monospace, "SF Mono", Consolas, monospace; text-align: right; word-break: break-all; }
.list > .kv + .kv::before { left: 16px; }

.toast { position: fixed; left: 50%; bottom: calc(92px + var(--safe-bottom)); transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 18px; background: var(--text_color); color: var(--bg_color); font-size: 14px; font-weight: 600; box-shadow: 0 8px 30px rgba(0, 0, 0, .2); animation: fade .2s ease; }

.denied { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.denied-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--second_button_color); color: var(--accent_text_color); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.denied-icon svg { width: 36px; height: 36px; }
.denied h2 { margin: 0 0 8px; font-size: 22px; }
.denied p { margin: 0; color: var(--subtitle_text_color); }