/* Inter is linked from index.html, not @imported here: an @import holds this whole file until the font host answers */
/* ============================== tokens ============================== */
:root {
--bg: #05070c;
--raise: #0b0f17;
--raise-2: #111724;
--line: rgba(255, 255, 255, 0.06);
--line-2: rgba(255, 255, 255, 0.1);
--text: #e6e9f0;
--muted: #8a93a6;
--dim: #4f586c;
--accent: #5b8cff;
--accent-2: #3d6df2;
--glow: rgba(91, 140, 255, 0.45);
--glow-soft: rgba(91, 140, 255, 0.16);
--ok: #3fcf9a;
--warn: #e3b04b;
--err: #f0585e;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--surface: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
--surface-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
--btn-bg: linear-gradient(180deg, #161d2c, #10151f);
--btn-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 18px -10px rgba(0,0,0,.95);
--rail: 76px;
/* telegram-web-app.js keeps --tg-viewport-height and the safe-area insets up to date */
--safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
--app-height: var(--tg-viewport-height, 100dvh);
}
/* ============================== base ============================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
[v-cloak] { display: none; }
html, body { height: 100%; }
html.locked { overflow: hidden; } /* a sheet or a dropdown is open: the page under it stays put (app.js) */
body {
background: var(--bg); color: var(--text);
font: 14px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body::before {
content: ''; position: fixed; inset: -30vh 0 auto 0; height: 60vh; pointer-events: none; z-index: 0;
background: radial-gradient(50% 60% at 50% 0%, rgba(61, 109, 242, 0.14), transparent 70%);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.icon-fill { fill: currentColor; stroke: none; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 6px; }
input[type=number]::-webkit-inner-spin-button { display: none; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--text); caret-color: var(--text);
-webkit-box-shadow: 0 0 0 1000px var(--raise) inset; transition: background-color 9999s ease-out;
}
.min0 { min-width: 0; }
.grow { flex: 1; min-width: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes fade { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes live-dot { 0%, 100% { transform: scale(.9); opacity: .85; } 50% { transform: scale(1.3); opacity: 1; } }
@keyframes shadow-pulse { 50% { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 30px -6px rgba(240,88,94,.85); } }
@keyframes orb-ring { 0% { box-shadow: 0 0 0 0 rgba(63,207,154,.45), 0 10px 30px -8px rgba(63,207,154,.7); } 70% { box-shadow: 0 0 0 16px rgba(63,207,154,0), 0 10px 30px -8px rgba(63,207,154,.7); } 100% { box-shadow: 0 0 0 0 rgba(63,207,154,0), 0 10px 30px -8px rgba(63,207,154,.7); } }
/* ============================== sign-in gate ============================== */
.gate {
position: relative; z-index: 1; min-height: var(--app-height); padding: 32px 24px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
}
.gate-logo { position: relative; width: 76px; height: 76px; margin-bottom: 10px; border-radius: 24px; padding: 3px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 20px 50px -14px rgba(32,140,170,.55); }
.gate-logo img { width: 100%; height: 100%; border-radius: 21px; }
.gate-logo.loading::after { content: ''; position: absolute; inset: -7px; border-radius: 30px; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: rgba(91,140,255,.35); animation: spin 1s linear infinite; }
.gate p { max-width: 320px; font-size: 14px; color: var(--muted); }
.gate .btn-glow { margin-top: 6px; min-width: 180px; }
/* the splash before the app is up (index.html #boot): its retry shows only if the app has not come up by then */
.boot-fail { display: flex; flex-direction: column; align-items: center; gap: 12px; visibility: hidden; opacity: 0; animation: boot-fail .3s ease-out 12s forwards; }
@keyframes boot-fail { to { visibility: visible; opacity: 1; } }
/* ============================== shell & navigation ============================== */
.shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.rail {
position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 20;
display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 18px 0;
border-right: 1px solid var(--line); background: rgba(6, 8, 13, .82); backdrop-filter: blur(14px);
}
.logo { width: 38px; height: 38px; border-radius: 12px; cursor: pointer; box-shadow: 0 0 0 1px var(--line-2), 0 8px 22px -6px rgba(32,140,170,.6); }
.rail-nav { display: flex; flex-direction: column; gap: 8px; }
.rail-item {
position: relative; width: 48px; height: 48px; border-radius: 15px;
display: flex; align-items: center; justify-content: center; color: var(--dim);
transition: color .15s, background .2s, box-shadow .2s;
}
.rail-item svg { width: 21px; height: 21px; }
.rail-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.rail-item.active { color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px -8px var(--glow); }
.rail-item::after {
content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%);
padding: 5px 10px; border-radius: 8px; white-space: nowrap; font-size: 12px; color: var(--text);
background: var(--raise-2); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -10px rgba(0,0,0,.8);
opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
}
.rail-item:hover::after { opacity: 1; transform: translate(0, -50%); }
.rail-badge {
position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff;
background: var(--err); box-shadow: 0 0 0 2px var(--bg), 0 4px 10px -2px rgba(240,88,94,.7);
}
.rail-live { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(63,207,154,.9); animation: live-dot 1.5s ease-in-out infinite; }
.rail-me { margin-top: auto; width: 36px; height: 36px; border-radius: 12px; cursor: pointer; background: var(--raise); box-shadow: 0 0 0 1px var(--line-2); }
/* a phone held sideways is wide but only ~320-340 px high: the rail gets compact, and scrolls if even that is too
tall (its tips would be cut by the scrolling — a touch screen shows none anyway) */
@media (min-width: 761px) and (max-height: 520px) {
.rail { gap: 10px; padding: 10px 0; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-nav { gap: 4px; }
.rail-item { height: 42px; }
.rail-item::after { display: none; }
.logo, .rail-me { width: 32px; height: 32px; flex-shrink: 0; }
}
.main { flex: 1; min-width: 0; margin-left: var(--rail); }
.page { max-width: 1180px; margin: 0 auto; padding: 32px 36px 64px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
/* ============================== shared controls ============================== */
.btn-glow {
height: 44px; padding: 0 22px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
color: #fff; font-size: 14px; font-weight: 600;
background: linear-gradient(180deg, var(--accent), var(--accent-2));
box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 26px -10px var(--glow);
transition: box-shadow .2s, transform .1s, opacity .15s;
}
.btn-glow svg { width: 17px; height: 17px; }
.btn-glow:hover { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 32px -8px var(--glow); }
.btn-glow:active { transform: translateY(1px) scale(.99); }
.btn-glow:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn-glow.wide { width: 100%; height: 50px; border-radius: 15px; font-size: 15px; }
.btn-plain {
height: 48px; padding: 0 18px; border-radius: 15px; font-size: 14px; font-weight: 600; color: var(--text);
background: var(--btn-bg); border: 1px solid rgba(255,255,255,.07); box-shadow: var(--btn-shadow);
transition: border-color .2s, color .15s;
}
.btn-plain:hover { border-color: rgba(91,140,255,.35); }
.btn-danger {
height: 48px; padding: 0 18px; border-radius: 15px; font-size: 14px; font-weight: 700; color: #fff;
background: linear-gradient(180deg, #f57177, #d94248); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px rgba(240,88,94,.7);
}
.btn-warn {
height: 48px; padding: 0 18px; border-radius: 15px; font-size: 14px; font-weight: 700; color: #2a1d00;
background: linear-gradient(180deg, #f2c66d, #df9f2b); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px rgba(227,176,75,.7);
}
.row-btns { display: flex; gap: 10px; align-items: center; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* an input with an icon (and optional buttons) inside one field */
.ifield {
display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 14px; border-radius: 15px;
background: var(--raise); border: 1px solid rgba(255,255,255,.05); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
transition: border-color .15s, box-shadow .15s;
}
.ifield.sm { height: 42px; border-radius: 13px; }
.ifield:focus-within { border-color: rgba(91,140,255,.55); box-shadow: 0 0 0 4px var(--glow-soft); }
.ifield > svg { width: 17px; height: 17px; color: var(--dim); }
.ifield:focus-within > svg { color: var(--accent); }
.ifield input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; appearance: none; }
.ifield input:focus { outline: none; }
.ifield input::placeholder { color: var(--dim); }
.field-input {
width: 100%; height: 50px; padding: 0 14px; border-radius: 15px; font: inherit; font-size: 15px; color: var(--text);
background: var(--raise); border: 1px solid rgba(255,255,255,.05); transition: border-color .15s, box-shadow .15s;
}
.field-input::placeholder { color: var(--dim); }
.field-input:focus { outline: none; border-color: rgba(91,140,255,.55); box-shadow: 0 0 0 4px var(--glow-soft); }
.field-input.code { text-align: center; font-size: 24px; letter-spacing: .5em; height: 56px; font-variant-numeric: tabular-nums; }
.tfield {
width: 100%; min-height: 120px; padding: 13px 15px; border-radius: 15px; resize: vertical; font: inherit; font-size: 15px; line-height: 1.6; color: var(--text);
background: var(--raise); border: 1px solid rgba(255,255,255,.05); transition: border-color .15s, box-shadow .15s;
}
.tfield::placeholder { color: var(--dim); }
.tfield:focus { outline: none; border-color: rgba(91,140,255,.55); box-shadow: 0 0 0 4px var(--glow-soft); }
.in-btn { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); transition: color .15s, background .15s, transform .12s; }
.in-btn svg { width: 18px; height: 18px; }
.in-btn:hover, .in-btn.on { color: var(--text); background: rgba(255,255,255,.05); }
.in-btn:disabled { opacity: .35; cursor: default; }
.in-btn.busy svg { animation: pulse 1s ease-in-out infinite; color: var(--accent); }
.in-btn.gen { color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px -6px var(--glow); }
.in-btn.gen:disabled { opacity: .35; box-shadow: none; }
.in-btn.gen:active { transform: rotate(-12deg) scale(.95); }
.in-chip { flex-shrink: 0; margin-right: 6px; padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ok); background: rgba(63,207,154,.1); font-variant-numeric: tabular-nums; }
.ftag { flex-shrink: 0; min-width: 34px; padding: 3px 6px; border-radius: 7px; text-align: center; font: 600 10.5px/1.4 var(--mono); letter-spacing: .04em; color: #9bc0ff; background: rgba(91,140,255,.12); border: 1px solid rgba(91,140,255,.22); }
/* square icon buttons with a soft shadow */
.ibtn {
width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted);
background: var(--btn-bg); border: 1px solid rgba(255,255,255,.07); box-shadow: var(--btn-shadow);
transition: color .15s, border-color .2s, box-shadow .2s, transform .12s;
}
.ibtn svg { width: 18px; height: 18px; }
.ibtn.lg { width: 50px; height: 50px; border-radius: 15px; }
.ibtn:hover { color: var(--text); border-color: rgba(91,140,255,.35); }
.ibtn:active { transform: scale(.95); }
.ibtn:disabled { opacity: .4; cursor: default; transform: none; }
.ibtn.on { color: #fff; border-color: rgba(91,140,255,.55); background: linear-gradient(180deg, rgba(91,140,255,.32), rgba(61,109,242,.18)); }
.ibtn.ok { color: #5fe0b0; border-color: rgba(63,207,154,.35); }
.ibtn.err { color: #ff8a8f; border-color: rgba(240,88,94,.4); }
.ibtn.danger:hover:not(:disabled) { color: var(--err); border-color: rgba(240,88,94,.45); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px -10px rgba(240,88,94,.6); }
.ibtn.accent { color: #fff; border-color: transparent; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px var(--glow); }
.ibtn.busy svg { animation: pulse 1s ease-in-out infinite; color: var(--accent); }
.ibtn.spin svg { animation: spin .9s linear infinite; color: var(--accent); }
/* segmented control */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 15px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg button { height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: color .2s, background .2s, box-shadow .2s; }
.seg button svg { width: 16px; height: 16px; }
.seg button.on { color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px var(--glow); }
.seg.sm button { height: 32px; font-size: 12.5px; border-radius: 10px; }
.seg-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); }
.seg button.on .seg-badge { background: rgba(255,255,255,.25); }
/* select dressed as a chip */
/* horizontal chip tabs (categories) */
.chip-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px 16px; scrollbar-width: none; }
.chip-tabs::-webkit-scrollbar { display: none; }
.chip-tabs button { flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; background: var(--raise); border: 1px solid var(--line-2); transition: color .15s, background .2s, box-shadow .2s; }
.chip-tabs button:hover { color: var(--text); }
.chip-tabs button.on { color: #fff; border-color: transparent; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 18px -8px var(--glow); }
/* a mouse wheel scrolls only up and down, and the row has no scrollbar: with a mouse every chip is in sight */
@media (hover: hover) and (pointer: fine) { .chip-tabs { flex-wrap: wrap; overflow: visible; } }
/* chips, pills, small meta */
.hchips { display: flex; gap: 8px; }
.hchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--raise); border: 1px solid var(--line-2); white-space: nowrap; }
.hchip svg { width: 15px; height: 15px; }
.hchip.ok { color: var(--ok); border-color: rgba(63,207,154,.3); background: rgba(63,207,154,.08); }
.hchip.err { color: var(--err); border-color: rgba(240,88,94,.35); background: rgba(240,88,94,.09); }
.spill { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .01em; background: rgba(255,255,255,.06); color: var(--muted); white-space: nowrap; }
.spill svg { width: 12px; height: 12px; }
.spill.s-ok, .spill.u-approved { background: rgba(63,207,154,.13); color: #5fe0b0; }
.spill.s-err, .spill.u-blocked, .spill.u-rejected { background: rgba(240,88,94,.14); color: #ff8a8f; }
.spill.s-wait, .spill.u-pending { background: rgba(227,176,75,.15); color: #f2c66d; }
.spill.s-admin { background: rgba(240,192,64,.14); color: #f5c84c; }
button.spill { transition: filter .15s, box-shadow .2s; }
button.spill:hover { filter: brightness(1.2); box-shadow: 0 0 0 1px currentColor inset; }
button.spill:active { transform: scale(.97); }
.spill.act svg { width: 11px; height: 11px; margin-right: -3px; stroke-width: 2.4; }
.mi { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mi svg { width: 13px; height: 13px; opacity: .8; }
.mi.err { color: #ff8a8f; }
.cnt { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.06); }
.cnt.warn { color: #2a1d00; background: #f2c66d; box-shadow: 0 0 14px rgba(242,198,109,.45); }
.badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 12px -4px var(--glow); }
/* cards */
.scard, .acard, .me, .pcard, .send-hero {
background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--surface-shadow);
}
.scard { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.scard-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; font-size: 14.5px; font-weight: 600; }
.scard-head svg { width: 17px; height: 17px; color: var(--accent); }
.empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; color: var(--dim); font-size: 13px; }
.empty-state svg { width: 34px; height: 34px; stroke-width: 1.3; }
.empty-state.center { flex: 1; justify-content: center; }
.empty-state.loading svg { animation: pulse 1s ease-in-out infinite; }
.note { font-size: 13px; color: var(--muted); padding: 11px 14px; border-radius: 14px; background: var(--raise); border: 1px solid var(--line); }
.note.err { color: #ff9ea2; background: rgba(240,88,94,.08); border-color: rgba(240,88,94,.25); }
.note.ok { color: #8fe6c3; background: rgba(63,207,154,.08); border-color: rgba(63,207,154,.25); }
.progress { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--accent); }
.progress::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 8px var(--glow); animation: pulse 1s ease-in-out infinite; }
.link-out { font-size: 13px; color: var(--accent); text-decoration: none; }
button.link-out { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; color: var(--accent); }
button.link-out:disabled { opacity: .5; cursor: default; }
.link-out.block { display: block; margin-top: 6px; }
.strength { display: flex; gap: 6px; padding: 0 4px; }
.strength i { flex: 1; height: 3px; border-radius: 3px; background: var(--raise-2); transition: background .2s, box-shadow .2s; }
.strength i.on { background: var(--accent); box-shadow: 0 0 8px var(--glow); }
/* switch row */
/* ============================== chats ============================== */
/* the list column narrows on a mid-size screen (a tablet, a phone sideways): the thread keeps room for its photos */
.page.chats { max-width: none; padding: 0; height: 100vh; display: grid; grid-template-columns: clamp(280px, 36vw, 370px) minmax(0, 1fr); }
.conv-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 26px 18px 14px; }
.head-acts { display: flex; align-items: center; gap: 8px; }
.col-head .head-acts { min-width: 0; } /* a long account name in the filter chip gives way, not the sync button */
.conv-tools { padding: 0 18px 10px; display: flex; flex-direction: column; gap: 10px; }
.conv-tools .seg { margin-bottom: 0; }
.conv-list { flex: 1; overflow-y: auto; padding: 4px 10px 18px; display: flex; flex-direction: column; gap: 2px; }
.conv {
position: relative; width: 100%; text-align: left; display: flex; align-items: center; gap: 12px;
padding: 10px; border-radius: 16px; border: 1px solid transparent; transition: background .15s, border-color .2s;
}
.conv:hover { background: rgba(255,255,255,.03); }
.conv.fresh { animation: conv-fresh 2.4s ease-out; }
@keyframes conv-fresh { 0%, 30% { background: rgba(91,140,255,.16); box-shadow: 0 0 0 1px rgba(91,140,255,.45) inset, 0 10px 30px -14px var(--glow); } 100% { background: transparent; box-shadow: none; } }
.live-title { display: inline-flex; align-items: center; gap: 10px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); transition: background .3s, box-shadow .3s; }
.live-dot.on { background: var(--ok); box-shadow: 0 0 10px rgba(63,207,154,.8); animation: live-dot 2s ease-in-out infinite; }
.conv.selected, .conv.selected:hover {
background: linear-gradient(180deg, rgba(91,140,255,.13), rgba(91,140,255,.07));
border-color: rgba(91,140,255,.55); box-shadow: 0 0 0 1px rgba(91,140,255,.16) inset;
}
.conv-thumb, .thread-thumb {
width: 54px; height: 54px; flex-shrink: 0; border-radius: 15px; overflow: hidden; background: var(--raise-2);
display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; color: var(--dim); text-transform: uppercase;
box-shadow: 0 6px 16px -8px rgba(0,0,0,.9);
}
.conv-thumb img, .thread-thumb img { width: 100%; height: 100%; object-fit: cover; }
.conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.conv-top, .conv-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conv-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 11px; color: var(--dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.conv.unread .conv-time { color: var(--accent); font-weight: 600; }
.conv-last { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.unread .conv-last { color: var(--text); }
.conv-meta { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the end of a loaded page: the next one comes when this is in sight */
.conv-more { flex-shrink: 0; align-self: center; margin: 8px 0 4px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: color .15s, border-color .2s; }
.conv-more:hover { color: var(--text); border-color: rgba(91,140,255,.35); }
.conv-more.busy { color: var(--accent); animation: pulse 1s ease-in-out infinite; }
.thread-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.thread-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgba(6,8,13,.6); backdrop-filter: blur(12px); }
.thread-thumb { width: 46px; height: 46px; border-radius: 14px; font-size: 16px; }
.thread-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.th-top .thread-name { min-width: 0; }
.pstate { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--dim); background: rgba(255,255,255,.04); font-variant-numeric: tabular-nums; }
.pstate svg { width: 12px; height: 12px; }
.pstate.read { color: #8fb0ff; background: rgba(91,140,255,.12); }
.pstate.wrote { color: var(--muted); }
.pstate.live { color: #5fe0b0; background: rgba(63,207,154,.12); }
.pstate.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(63,207,154,.9); animation: live-dot 1.6s ease-in-out infinite; }
.th-ad { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 1px; }
.th-ad-title { min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-pill { flex-shrink: 0; height: 19px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(180deg, rgba(91,140,255,.35), rgba(61,109,242,.22)); font-variant-numeric: tabular-nums; }
.link-pill { flex-shrink: 0; width: 22px; height: 19px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: rgba(255,255,255,.06); transition: color .15s, background .15s, transform .1s; }
.link-pill svg { width: 12px; height: 12px; stroke-width: 2.2; }
.link-pill:hover { color: #fff; background: rgba(91,140,255,.3); }
.link-pill:active { transform: scale(.9); }
.link-pill.done { color: #04281a; background: var(--ok); }
.th-facts { display: flex; gap: 5px; margin-top: 5px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.fact { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact svg { width: 11px; height: 11px; opacity: .85; }
.fact.ok { color: #5fe0b0; border-color: rgba(63,207,154,.25); }
.fact.err { color: #ff8a8f; border-color: rgba(240,88,94,.3); }
/* «Пишем от» gives way to the partner's name and the ad (a long account name would squeeze them to nothing) */
.thread-as { min-width: 0; max-width: 30%; }
.thread-as span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.thread-back { display: none; }
.warn-banner { display: flex; align-items: center; gap: 10px; margin: 12px 20px 0; padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; color: #ff9ea2; background: rgba(240,88,94,.09); border: 1px solid rgba(240,88,94,.3); box-shadow: 0 10px 26px -16px rgba(240,88,94,.7); }
.warn-banner svg { width: 18px; height: 18px; }
.thread { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.sys { align-self: center; max-width: 80%; margin: 2px 0 6px; text-align: center; font-size: 11.5px; color: var(--dim); }
.day-sep { align-self: center; margin: 8px 0 4px; }
.day-sep span { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); letter-spacing: .01em; }
.msg { display: flex; flex-direction: column; gap: 3px; max-width: 70%; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg-row { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.msg.out .msg-row { flex-direction: row-reverse; }
.bubble { min-width: 0; padding: 10px 14px; border-radius: 19px; font-size: 14px; line-height: 1.5; }
.bubble p { white-space: pre-wrap; word-break: break-word; }
.msg .bubble { background: #131926; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 8px 20px -14px rgba(0,0,0,.9); }
.msg.in .bubble { border-bottom-left-radius: 6px; }
.msg.out .bubble { border-bottom-right-radius: 6px; }
.msg.pending .bubble { opacity: .7; }
.msg.failed .bubble { border-color: rgba(240,88,94,.5); }
.bubble.has-img { padding: 4px; }
.bubble.has-img p { padding: 6px 10px 4px; }
.attach { display: block; margin-top: 4px; font-size: 12.5px; color: inherit; opacity: .9; text-decoration: underline; text-underline-offset: 3px; }
button.attach { text-align: left; }
/* a photo that did not load: tapped, it is fetched again */
.attach.photo { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; padding: 7px 11px; border-radius: 11px; text-decoration: none; color: var(--muted); background: rgba(255,255,255,.05); }
.attach.photo svg { width: 14px; height: 14px; }
.attach.photo:hover { color: var(--text); }
/* as wide as its bubble allows: a viewport-based width overflowed the bubble where the thread column is narrow */
.attach-img { display: block; width: 260px; max-width: 100%; height: auto; max-height: 320px; min-height: 120px; object-fit: cover; border-radius: 15px; cursor: zoom-in; background: rgba(255,255,255,.04); }
.attach-img + .attach-img, .attach-img + .attach, .attach + .attach-img { margin-top: 4px; }
.tr { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-2); }
.bubble.has-img .tr { margin: 4px 10px 6px; }
.tr-label { display: inline-block; margin-bottom: 3px; padding: 0 5px; border-radius: 5px; font: 700 9.5px/1.6 var(--mono); letter-spacing: .06em; background: rgba(255,255,255,.14); }
.tr-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tr-err { opacity: .85; }
.tr-icon { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; color: var(--dim); opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.tr-icon svg { width: 15px; height: 15px; }
.msg:hover .tr-icon, .tr-icon.on, .tr-icon.busy, .tr-icon.err { opacity: 1; }
.tr-icon:hover { color: var(--accent); background: rgba(255,255,255,.05); }
.tr-icon.on { color: var(--accent); }
.tr-icon.busy { color: var(--accent); animation: pulse 1s ease-in-out infinite; }
.tr-icon.err { color: var(--err); }
@media (hover: none) { .tr-icon { opacity: .5; } }
.msg-meta { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.tick { letter-spacing: -2px; }
.clock { width: 12px; height: 12px; color: var(--dim); animation: pulse 1.2s ease-in-out infinite; }
.msg-act { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; color: var(--accent); background: rgba(91,140,255,.12); }
.msg-act svg { width: 11px; height: 11px; stroke-width: 2.2; }
.msg-act:hover { background: rgba(91,140,255,.22); }
.tick.read { color: var(--accent); text-shadow: 0 0 8px var(--glow); }
.msg-flag { padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 600; }
.msg-flag.ok { color: #5fe0b0; background: rgba(63,207,154,.12); }
.msg-flag.err { color: #ff8a8f; background: rgba(240,88,94,.14); }
.msg-flag.wait { color: var(--muted); background: rgba(255,255,255,.06); }
.composer { padding: 10px 20px 20px; }
.photo-strip { display: flex; gap: 8px; margin-bottom: 8px; animation: rise .18s ease-out; }
.photo-chip { position: relative; width: 76px; height: 76px; border-radius: 16px; overflow: hidden; background: var(--raise-2); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -14px rgba(0,0,0,.95); }
.photo-chip img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.photo-chip.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.photo-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(5,7,12,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .12s, background .15s; }
.photo-x svg { width: 12px; height: 12px; stroke-width: 2.4; }
.photo-x:hover { background: rgba(240,88,94,.85); }
.photo-x:active { transform: scale(.9); }
.quote-photo { display: block; width: 96px; height: 96px; margin-bottom: 8px; border-radius: 12px; object-fit: cover; }
.tr-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 6px 6px 10px; border-radius: 14px; background: var(--glow-soft); border: 1px solid rgba(91,140,255,.25); animation: rise .18s ease-out; }
.tr-tag { flex-shrink: 0; padding: 1px 6px; border-radius: 6px; font: 700 10px/1.6 var(--mono); color: #fff; background: var(--accent); }
.tr-strip-text { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.compose-row {
display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 18px; border-radius: 20px;
background: var(--raise); border: 1px solid rgba(255,255,255,.07); box-shadow: 0 14px 34px -20px rgba(0,0,0,.95);
transition: border-color .15s, box-shadow .15s;
}
.compose-row:focus-within { border-color: rgba(91,140,255,.45); box-shadow: 0 0 0 4px var(--glow-soft); }
.compose-input { flex: 1; min-width: 0; height: 40px; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; }
.compose-input:focus { outline: none; }
.compose-input::placeholder { color: var(--dim); }
.send { width: 42px; height: 42px; border-radius: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px -8px var(--glow); transition: opacity .15s, transform .1s; }
.send svg { width: 18px; height: 18px; }
.send:active { transform: scale(.94); }
.send:disabled { opacity: .3; box-shadow: none; cursor: default; }
/* ============================== products ============================== */
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; transition: opacity .2s; }
.pgrid.wait { opacity: .5; } /* the cards of the previous filter, while the new one loads */
.pcard { overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .2s, border-color .2s, box-shadow .2s; }
.pcard:hover { transform: translateY(-2px); border-color: rgba(91,140,255,.35); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 44px -22px var(--glow); }
.pcard-img { position: relative; aspect-ratio: 4 / 3; background: var(--raise-2); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
/* an ad without a picture: a mark of its own, nothing loaded from elsewhere */
.pcard-img > .ph, .ps-img > .ph { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; color: var(--dim); stroke-width: 1.3; }
.pcard-tag { position: absolute; top: 10px; left: 10px; height: 24px; padding: 0 9px; border-radius: 999px; display: flex; align-items: center; font-size: 11px; font-weight: 700; color: #fff; background: rgba(5,7,12,.6); backdrop-filter: blur(8px); border: 1px solid var(--line-2); }
.fab { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 22px -6px rgba(0,0,0,.8), 0 0 18px -6px var(--glow); transition: transform .12s; }
.fab svg { width: 18px; height: 18px; }
.fab:active { transform: scale(.92); }
.pcard-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; }
.pcard-price { font-size: 16px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pcard-title { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ============================== publish ============================== */
/* ============================== sending ============================== */
.page.send-page { max-width: 880px; display: flex; flex-direction: column; gap: 14px; }
.page.send-page .page-head { margin-bottom: 6px; }
.send-hero { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 18px 18px 18px 20px; }
.orb { width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); background: radial-gradient(circle at 35% 30%, #232c3f, #10151f); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 26px -10px rgba(0,0,0,.95); }
.orb svg { width: 24px; height: 24px; }
.send-hero.running { border-color: rgba(63,207,154,.35); }
.send-hero.running .orb { color: #04281a; background: radial-gradient(circle at 35% 30%, #7af0c4, #2eb382); animation: orb-ring 1.8s ease-out infinite; }
.hero-title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.send-hero.running .hero-title { color: #5fe0b0; }
.hero-counts { display: flex; gap: 8px; margin-top: 6px; }
.big-btn { height: 50px; padding: 0 22px; border-radius: 16px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; transition: transform .1s, filter .15s; }
.big-btn svg { width: 16px; height: 16px; }
.big-btn:active { transform: scale(.97); }
.big-btn:disabled { opacity: .5; cursor: default; }
.big-btn.go { color: #04281a; background: linear-gradient(180deg, #5fe0b0, #2eb382); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 26px -10px rgba(63,207,154,.75); }
.big-btn.stop { color: #fff; background: linear-gradient(180deg, #f57177, #d94248); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 26px -10px rgba(240,88,94,.75); }
.log-strip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 15px; font-size: 13px; line-height: 1.45; color: var(--muted); background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.log-strip svg { width: 17px; height: 17px; margin-top: 1px; color: var(--dim); }
.log-strip.live svg { color: var(--ok); animation: pulse 1.4s ease-in-out infinite; }
.log-strip.err { color: #ff9ea2; border-color: rgba(240,88,94,.3); background: rgba(240,88,94,.06); }
.log-strip.err svg { color: var(--err); animation: none; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { height: 30px; padding: 0 10px; border-radius: 9px; font: 600 12px/1 var(--mono); color: #9bc0ff; background: rgba(91,140,255,.1); border: 1px solid rgba(91,140,255,.22); transition: background .15s, transform .12s; }
.tag-chip:hover { background: rgba(91,140,255,.2); }
.tag-chip:active { transform: scale(.95); }
.hrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.hdot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(63,207,154,.7); }
.hrow.failed .hdot { background: var(--err); box-shadow: 0 0 8px rgba(240,88,94,.7); }
.hrow.blocked_antifraud .hdot { background: var(--warn); box-shadow: 0 0 8px rgba(227,176,75,.6); }
.h-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* an error is read whole (what to do depends on it — a new proxy, a new login), not cut to fit one line */
.h-err { font-size: 12px; color: #ff8a8f; overflow-wrap: anywhere; }
.h-time { flex-shrink: 0; font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.h-acc { flex-shrink: 0; max-width: 34%; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; color: var(--muted); background: rgba(255,255,255,.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hchip.next { color: #9bc0ff; border-color: rgba(91,140,255,.3); background: rgba(91,140,255,.08); }
.send-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.send-empty { height: 54px; border-radius: 14px; border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: color .15s, border-color .2s; }
.send-empty:hover { color: var(--text); border-color: rgba(91,140,255,.4); }
/* one account of the rotation: the ring around it fills up while it rests */
.sacc { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 16px; background: rgba(0,0,0,.22); border: 1px solid var(--line); transition: border-color .25s, background .25s, opacity .2s; }
.sacc-ava { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.sacc-ava img { position: absolute; top: 5px; left: 5px; width: 34px; height: 34px; border-radius: 50%; background: var(--raise-2); transition: filter .3s; }
.ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 2.5; }
.ring-bg { stroke: rgba(255,255,255,.07); }
.ring-fg { stroke: var(--dim); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.sacc-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sacc-sub { display: flex; align-items: center; gap: 8px; margin-top: 1px; font-size: 12px; color: var(--muted); }
.sacc-state { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sacc.st-error .sacc-state { white-space: normal; overflow-wrap: anywhere; } /* the reason, whole: see .h-err */
.sacc-today { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--dim); font-variant-numeric: tabular-nums; }
.sacc-today svg { width: 11px; height: 11px; }
.sacc-timer { flex-shrink: 0; font: 600 15px/1 var(--mono); letter-spacing: -.02em; color: #9bc0ff; font-variant-numeric: tabular-nums; }
.sacc.st-ready .ring-fg { stroke: var(--ok); filter: drop-shadow(0 0 4px rgba(63,207,154,.55)); }
.sacc.st-ready .sacc-state { color: #5fe0b0; }
.sacc.st-sending { border-color: rgba(91,140,255,.4); background: rgba(91,140,255,.07); }
.sacc.st-sending .ring-fg { stroke: var(--accent); animation: pulse 1s ease-in-out infinite; }
.sacc.st-sending .sacc-state { color: #9bc0ff; }
.sacc.st-cooldown .ring-fg { stroke: var(--accent); }
.sacc.st-error .ring-fg { stroke: var(--err); }
.sacc.st-error .sacc-state, .sacc.st-error .sacc-timer, .sacc.st-expired .sacc-state, .sacc.st-shadow .sacc-state { color: #ff8a8f; }
.sacc.st-nologin .sacc-state { color: #f2c66d; }
.sacc.st-off { opacity: .5; }
.sacc.st-off img, .sacc.st-expired img, .sacc.st-shadow img, .sacc.st-nologin img { filter: grayscale(1); }
/* switch */
.tgl { position: relative; width: 44px; height: 26px; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); transition: background .2s, border-color .2s, box-shadow .2s; }
.tgl i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #c9cfdb; box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform .22s cubic-bezier(.3, 1.4, .6, 1), background .2s; }
.tgl.on { border-color: transparent; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px -6px var(--glow); }
.tgl.on i { transform: translateX(18px); background: #fff; }
/* delay */
.delay-box { display: flex; align-items: center; gap: 10px; }
.delay-val { flex: 1; min-width: 0; height: 50px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: 15px; background: rgba(0,0,0,.35); border: 1px solid var(--line); cursor: text; transition: border-color .2s, box-shadow .2s; }
.delay-val:focus-within { border-color: rgba(91,140,255,.55); box-shadow: 0 0 0 4px var(--glow-soft); }
.delay-val input { width: 4.2ch; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 700 24px/1 'Inter', system-ui, sans-serif; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.delay-val span { font-size: 13px; font-weight: 600; color: var(--muted); }
.seg.delay-unit { margin-bottom: 0; }
.send-grid.wait, .scard.wait { opacity: .5; pointer-events: none; transition: opacity .2s; }
.delay-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { height: 30px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--raise); border: 1px solid var(--line-2); transition: color .15s, background .2s, box-shadow .2s, transform .1s; }
.dchip:hover { color: var(--text); }
.dchip:active { transform: scale(.95); }
.dchip.on { color: #fff; border-color: transparent; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px -8px var(--glow); }
/* ad filters of «Отправка» */
.flt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.flt { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.flt:focus-within { border-color: rgba(91,140,255,.45); box-shadow: 0 0 0 3px var(--glow-soft); }
.flt.wide { grid-column: 1 / -1; }
.flt.row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.flt-k { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flt-k svg { width: 14px; height: 14px; color: var(--accent); }
.flt-v { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.flt-v input { flex: 1; min-width: 0; padding: 0; background: none; border: 0; outline: none; color: var(--text); font: 600 15px/1.4 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.flt-v input::placeholder { color: var(--dim); font-weight: 500; }
.flt-v i { font-style: normal; font-size: 13px; color: var(--muted); }
.flt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* ============================== accounts ============================== */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-bottom: 26px; }
.acard { padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, box-shadow .2s; }
.acard.current { border-color: rgba(91,140,255,.45); box-shadow: 0 0 0 1px rgba(91,140,255,.15) inset, 0 18px 44px -22px var(--glow); }
.acard-top { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.acard-ava { position: relative; flex-shrink: 0; }
.acard-ava img { width: 46px; height: 46px; border-radius: 15px; background: var(--raise-2); box-shadow: 0 6px 16px -8px rgba(0,0,0,.8); }
.acard-ava i { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--bg); background: var(--dim); }
.acard-ava i.s-ok { background: var(--ok); box-shadow: 0 0 10px rgba(63,207,154,.7); }
.acard-ava i.s-err { background: var(--err); box-shadow: 0 0 10px rgba(240,88,94,.7); }
.acard-ava i.s-wait { background: var(--warn); }
.acard-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
.acard-acts { display: grid; grid-template-columns: 1fr 1fr 1fr 44px; gap: 8px; }
.abtn {
height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 7px;
font-size: 13px; font-weight: 600; color: var(--text); background: var(--btn-bg);
border: 1px solid rgba(255,255,255,.07); box-shadow: var(--btn-shadow);
transition: transform .12s, box-shadow .2s, border-color .2s, color .2s, background .2s;
}
.abtn svg { width: 17px; height: 17px; }
.abtn:hover { border-color: rgba(91,140,255,.35); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 24px -10px var(--glow); }
.abtn:active { transform: translateY(1px) scale(.98); }
.abtn:disabled { cursor: default; }
.abtn.on { color: #fff; border-color: rgba(91,140,255,.55); background: linear-gradient(180deg, rgba(91,140,255,.32), rgba(61,109,242,.18)); }
.abtn.busy svg { animation: spin .9s linear infinite; color: var(--accent); }
.abtn.danger { color: var(--muted); }
.abtn.danger:hover { color: var(--err); border-color: rgba(240,88,94,.45); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px -10px rgba(240,88,94,.6); }
/* the shadow-ban check: its colour is Bolha's last verdict */
.abtn.shadow.sh-ok { color: #5fe0b0; border-color: rgba(63,207,154,.35); background: linear-gradient(180deg, rgba(63,207,154,.18), rgba(63,207,154,.06)); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 22px -10px rgba(63,207,154,.55); }
.abtn.shadow.sh-err { color: #ff8a8f; border-color: rgba(240,88,94,.45); background: linear-gradient(180deg, rgba(240,88,94,.22), rgba(240,88,94,.07)); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 24px -10px rgba(240,88,94,.7); animation: shadow-pulse 2.4s ease-in-out infinite; }
.abtn.shadow.busy { animation: none; }
.acard-proxy { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
/* login / registration sheet (opened from the accounts header) */
.auth-sheet { max-width: 480px; }
.auth-card { display: flex; flex-direction: column; gap: 14px; }
.auth-top { display: flex; align-items: center; gap: 8px; }
.auth-top .seg { margin-bottom: 0; }
.auth-top .ibtn { width: 50px; height: 50px; border-radius: 15px; }
.page-head .head-acts { display: flex; align-items: center; gap: 10px; }
.empty-state .btn-glow { margin-top: 6px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
/* proxy picker */
.pp { display: flex; flex-direction: column; gap: 8px; }
.pp-row { display: flex; gap: 8px; }
.pp .ibtn { width: 50px; height: 50px; border-radius: 15px; }
.pp-res, .px-res { font: 500 11.5px/1.4 var(--mono); padding-left: 4px; overflow-wrap: anywhere; } /* an IPv6 exit has no break of its own */
.pp-res.ok, .px-res.ok { color: #5fe0b0; }
.pp-res.err, .px-res.err { color: #ff8a8f; font-family: inherit; }
/* ============================== settings ============================== */
.page.set-page { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.me { display: flex; align-items: center; gap: 14px; padding: 16px; }
.me-ava { width: 52px; height: 52px; border-radius: 17px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.9); }
.me-name { font-size: 17px; font-weight: 600; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #2a1d00; background: linear-gradient(180deg, #ffd66b, #e9ac2b); box-shadow: 0 6px 18px -6px rgba(233,172,43,.65); }
.me-badge svg { width: 14px; height: 14px; }
.pxrow, .urow { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 6px; border-radius: 15px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.pxrow.def { border-color: rgba(242,198,109,.35); background: linear-gradient(90deg, rgba(242,198,109,.08), rgba(0,0,0,.2)); }
.px-host { font: 600 13.5px/1.35 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-user { font: 500 11.5px/1.35 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--dim); transition: color .15s; }
.star svg { width: 18px; height: 18px; }
.star:hover { color: #f2c66d; }
.star.on { color: #f5c84c; }
.star.on svg { fill: currentColor; filter: drop-shadow(0 0 6px rgba(245,200,76,.6)); }
.pxadd { display: flex; gap: 8px; }
.pxadd .ifield { height: 48px; }
.urow { padding: 8px; }
.u-ava { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; }
.u-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a long @username is cut, never painted over the status pill and the buttons; the accounts count stays whole */
.u-sub { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-size: 12px; color: var(--muted); }
.u-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-sub .mi { flex-shrink: 0; overflow: visible; }
.urow .spill { flex-shrink: 0; }
.urow .ibtn { width: 36px; height: 36px; border-radius: 11px; }
/* ============================== dropdown (instead of the native