/* ==========================================================================
   Glassy admin — тёмная тема со стеклянными карточками.
   Только CSS + небольшой admin.js (CSP: script-src 'self').
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #07080d;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.075);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hi: rgba(255, 255, 255, 0.18);
  --line: rgba(255, 255, 255, 0.07);
  --text-primary: #eef0f7;
  --text-secondary: #a6abbd;
  --text-muted: #6f7488;
  --accent: #7b6cf6;
  --accent-2: #3d8bfd;
  --accent-grad: linear-gradient(135deg, #7b6cf6 0%, #4f7cf7 55%, #3d8bfd 100%);
  --series-1: #8679f8;
  --good: #3ccf8e;
  --warn: #f2b84b;
  --critical: #ff6b6b;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text-primary);
  font: 14px/1.5 "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(123, 108, 246, .22), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(61, 139, 253, .16), transparent 60%),
    radial-gradient(700px 600px at 50% 120%, rgba(123, 108, 246, .10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
a { color: #a9a0ff; text-decoration: none; transition: color .2s; }
a:hover { color: #d2ccff; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; background: var(--glass); padding: 1px 6px; border-radius: 6px; }

/* ---------------------------------------------------------------- каркас */
.shell { display: grid; grid-template-columns: 76px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 0; border-right: 1px solid var(--line); background: rgba(10, 11, 18, .55);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); z-index: 10;
}
.sidebar .logo { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-grad); display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(123, 108, 246, .45); margin-bottom: 18px; color: #fff; font-weight: 700; letter-spacing: -.5px; }
.sidebar a.nav {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px;
  color: var(--text-muted); transition: background .25s var(--ease), color .25s, transform .25s var(--ease);
}
.sidebar a.nav:hover { background: var(--glass-strong); color: var(--text-primary); transform: translateY(-1px); }
.sidebar a.nav.active { background: var(--glass-strong); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-border-hi); }
.sidebar a.nav.active::after { content: ""; position: absolute; right: -16px; top: 12px; width: 3px; height: 20px; border-radius: 3px; background: var(--accent-grad); }
.sidebar a.nav .tip {
  position: absolute; left: 56px; white-space: nowrap; padding: 5px 10px; border-radius: 8px; font-size: 12px;
  background: rgba(20, 21, 32, .95); border: 1px solid var(--glass-border); color: var(--text-primary);
  opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity .2s, transform .2s;
}
.sidebar a.nav:hover .tip { opacity: 1; transform: none; }
.sidebar .dot { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.sidebar .dot.over { background: var(--critical); box-shadow: 0 0 0 3px rgba(255, 107, 107, .2); }
.sidebar .spacer { flex: 1; }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }

.main { min-width: 0; padding: 18px 28px 60px; }
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.topbar .search { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; border-radius: 12px; width: min(360px, 40vw);
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-muted); }
.topbar .search input { all: unset; flex: 1; color: var(--text-primary); font-size: 13px; }
.topbar .today { color: #8fb4ff; font-size: 13px; }
.topbar .grow { flex: 1; }
.topbar .iconbtn { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-secondary); transition: all .2s; padding: 0; box-shadow: none; }
.topbar .iconbtn:hover { color: #fff; border-color: var(--glass-border-hi); }
.topbar .iconbtn .dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--critical); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.topbar .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-grad); display: grid; place-items: center;
  font-weight: 700; color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
h1 { font-size: 22px; letter-spacing: -.3px; margin: 0; font-weight: 650; }
h1 small { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 8px; letter-spacing: 0; }
.subtitle { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
h2 { font-size: 14.5px; margin: 0 0 12px; font-weight: 600; letter-spacing: -.1px; }
h2 small { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-left: 6px; }

/* ---------------------------------------------------------------- стекло */
.card, .tile {
  position: relative; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: transform .35s var(--ease), border-color .35s, background .35s;
  animation: rise .55s var(--ease) both;
}
.card::before, .tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), transparent 35%); }
.card:hover, .tile:hover { border-color: var(--glass-border-hi); }
.tile:hover { transform: translateY(-4px); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.grid2 > *:nth-child(2), .tiles > *:nth-child(2) { animation-delay: .05s; }
.grid2 > *:nth-child(3), .tiles > *:nth-child(3) { animation-delay: .1s; }
.grid2 > *:nth-child(4), .tiles > *:nth-child(4) { animation-delay: .15s; }
.grid2 > *:nth-child(5), .tiles > *:nth-child(5) { animation-delay: .2s; }
.grid2 > *:nth-child(6), .tiles > *:nth-child(6) { animation-delay: .25s; }
.tiles > *:nth-child(7) { animation-delay: .3s; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid2 > .card { margin-bottom: 0; }
.grid3 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid3 > .card { margin-bottom: 0; }
.mt { margin-top: 16px; }

/* показатели */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tile { margin-bottom: 0; padding: 16px 18px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; }
.tile .label { color: var(--text-secondary); font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tile .value { font-size: 28px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; margin-top: 10px; }
.tile .value a { color: inherit; }
.tile .foot { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; gap: 8px; }
.tile.hero { background: var(--accent-grad); border-color: rgba(255, 255, 255, .22); box-shadow: 0 16px 40px rgba(91, 108, 246, .35); }
.tile.hero .label, .tile.hero .foot { color: rgba(255, 255, 255, .85); }
.tile.alert { border-color: rgba(242, 184, 75, .45); background: linear-gradient(160deg, rgba(242, 184, 75, .12), var(--glass) 60%); }
.tile .arrow { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--glass-border-hi); color: var(--text-secondary); }
.tile.hero .arrow { background: #fff; color: #4f5cf0; border: 0; }
.delta { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.delta.up { color: #48e0a0; background: rgba(60, 207, 142, .14); border: 1px solid rgba(60, 207, 142, .3); }
.delta.down { color: #ff8a8a; background: rgba(255, 107, 107, .12); border: 1px solid rgba(255, 107, 107, .3); }
.delta.flat { color: var(--text-secondary); background: var(--glass); border: 1px solid var(--glass-border); }
.tile.hero .delta { color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------------- таблицы */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--text-muted); font-weight: 500; font-size: 11.5px; white-space: nowrap; }
table tr { transition: background .2s; }
table tr:hover td { background: rgba(255, 255, 255, .025); }
td.num, th.num { text-align: right; }
tr.total td { font-weight: 650; }
tr.overdue td { background: rgba(255, 107, 107, .06); }
.scroll { overflow-x: auto; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.quote { margin-top: 6px; padding: 6px 10px; border-left: 2px solid var(--accent); background: rgba(123, 108, 246, .08);
  border-radius: 0 8px 8px 0; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.person { display: flex; gap: 10px; align-items: center; }
.ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, #5b5bd6, #2f7bea); box-shadow: 0 0 0 2px rgba(255, 255, 255, .06); }
.ava.hot { background: linear-gradient(135deg, #ff7a59, #e8456b); }
.ava.warm { background: linear-gradient(135deg, #f2b84b, #e08a2e); }
.ava.cold { background: linear-gradient(135deg, #3d8bfd, #2ac3c3); }

/* ---------------------------------------------------------------- формы */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.filters label { display: flex; flex-direction: column; font-size: 11.5px; color: var(--text-muted); gap: 4px; }
label.check { flex-direction: row !important; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border); border-radius: 10px; padding: 8px 11px;
  transition: border-color .2s, box-shadow .2s, background .2s; color: var(--text-primary);
}
select option { background: #151622; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(123, 108, 246, .7); box-shadow: 0 0 0 3px rgba(123, 108, 246, .2); background: rgba(255, 255, 255, .06); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type=date], input[type=datetime-local] { color-scheme: dark; }
input[type=file] { padding: 6px; }
textarea { width: 100%; min-height: 110px; resize: vertical; line-height: 1.5; }
button, .btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center; cursor: pointer; border: 0; border-radius: 10px;
  padding: 9px 16px; font-weight: 550; color: #fff; background: var(--accent-grad); box-shadow: 0 6px 18px rgba(91, 108, 246, .3);
  transition: transform .2s var(--ease), box-shadow .2s, filter .2s, background .2s; white-space: nowrap; text-decoration: none;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(91, 108, 246, .42); color: #fff; }
button:active, .btn:active { transform: translateY(0); }
button.secondary, .btn.secondary { background: var(--glass); color: var(--text-primary); border: 1px solid var(--glass-border); box-shadow: none; }
button.secondary:hover, .btn.secondary:hover { border-color: var(--glass-border-hi); background: var(--glass-strong); }
button.danger { background: linear-gradient(135deg, #ff6b6b, #e8456b); box-shadow: 0 6px 18px rgba(232, 69, 107, .3); }
button.ghost { background: transparent; box-shadow: none; color: var(--text-secondary); padding: 6px 8px; }
button.ghost:hover { color: #fff; background: var(--glass); }
form.inline { display: inline; }
td.actions form { display: flex; gap: 6px; margin-bottom: 6px; }
td.actions input { min-width: 150px; }
input.copy { width: 100%; min-width: 240px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
textarea.copy { font-size: 12.5px; min-height: 110px; }
.copywrap { display: flex; gap: 6px; align-items: center; }
.copywrap button { padding: 7px 10px; }

/* ---------------------------------------------------------------- бейджи, сообщения */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 550;
  border: 1px solid var(--glass-border); color: var(--text-secondary); background: var(--glass); }
.badge.hot { color: #ff9b85; border-color: rgba(255, 122, 89, .4); background: rgba(255, 122, 89, .1); }
.badge.warm { color: #ffd27a; border-color: rgba(242, 184, 75, .4); background: rgba(242, 184, 75, .1); }
.badge.cold { color: #8fc0ff; border-color: rgba(61, 139, 253, .4); background: rgba(61, 139, 253, .1); }
.badge.good { color: #6ff0b4; border-color: rgba(60, 207, 142, .4); background: rgba(60, 207, 142, .1); }
.badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3ccf8e; box-shadow: 0 0 8px #3ccf8e; }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; }
.count.over { background: var(--critical); }
.flash { padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; border: 1px solid rgba(242, 184, 75, .35);
  background: rgba(242, 184, 75, .08); color: #ffe2a8; animation: rise .4s var(--ease) both; }
.flash.danger { border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .08); color: #ffc4c4; }
.flash.ok { border-color: rgba(60, 207, 142, .4); background: rgba(60, 207, 142, .08); color: #b9f5d8; }
.lvl-ERROR, .lvl-CRITICAL { color: var(--critical); font-weight: 600; }
.lvl-WARNING { color: var(--warn); font-weight: 600; }

.tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border); flex-wrap: wrap; }
.tabs a { padding: 6px 12px; border-radius: 9px; color: var(--text-secondary); font-size: 13px; transition: all .2s; }
.tabs a:hover { color: #fff; }
.tabs a.active { background: var(--glass-strong); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-border-hi); }
.pager { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
dl.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 14px; margin: 0; }
dl.kv dt { color: var(--text-muted); font-size: 12.5px; }
dl.kv dd { margin: 0; word-break: break-word; }
details summary { cursor: pointer; color: var(--text-secondary); }

/* ---------------------------------------------------------------- вход */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login { width: min(400px, 100%); padding: 30px; }
.login .logo { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-grad); display: grid; place-items: center; font-weight: 700; color: #fff; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(123, 108, 246, .5); }
.login label { display: block; margin-bottom: 14px; font-size: 12px; color: var(--text-muted); }
.login input { width: 100%; margin-top: 6px; }
.login button { width: 100%; margin-top: 6px; padding: 11px; }

/* ---------------------------------------------------------------- графики */
svg.chart { display: block; max-width: 100%; height: auto; overflow: visible; }
svg.chart .bar { fill: var(--series-1); transition: opacity .2s; }
svg.chart .bar-grad { transition: filter .2s; }
svg.chart .hit { fill: transparent; }
svg.chart g:hover .bar, svg.chart g:hover .bar-grad { filter: brightness(1.25); }
svg.chart g:hover .hit { fill: rgba(255, 255, 255, .03); }
svg.chart .lbl { fill: var(--text-secondary); font-size: 12px; }
svg.chart .val { fill: var(--text-secondary); font-size: 12px; }
svg.chart .tick { fill: var(--text-muted); font-size: 10.5px; }
svg.chart .grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
svg.chart .axis { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
svg.chart .line { fill: none; stroke: #8f84ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.chart .pt { fill: #fff; stroke: #8f84ff; stroke-width: 2; }
svg.chart .peak-bg { fill: #fff; }
svg.chart .peak-tx { fill: #111; font-size: 11px; font-weight: 700; }
svg.donut { display: block; }
svg.donut .seg { transition: opacity .2s; }
svg.donut g:hover .seg { opacity: .8; }
svg.donut .center { fill: var(--text-primary); font-size: 24px; font-weight: 700; }
svg.donut .center-sub { fill: var(--text-muted); font-size: 11px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.legend li b { margin-left: auto; color: var(--text-primary); font-weight: 600; }
.legend .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut-wrap .legend { flex: 1; min-width: 180px; }

/* прогресс-полоски */
.bars-list { display: grid; gap: 14px; }
.bars-list .row { display: grid; gap: 6px; }
.bars-list .row .top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-secondary); gap: 10px; }
.bars-list .row .top b { color: var(--text-primary); font-weight: 600; }
.bars-list .track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bars-list .fill { height: 100%; border-radius: 6px; background: var(--accent-grad); transform-origin: left; animation: grow .9s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- редактор рассылки */
.editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 16px; align-items: start; }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 12px 12px 0 0; border: 1px solid var(--glass-border);
  border-bottom: 0; background: rgba(255, 255, 255, .03); }
.toolbar button { padding: 6px 10px; min-width: 34px; background: transparent; box-shadow: none; color: var(--text-secondary); font-weight: 600; border-radius: 8px; }
.toolbar button:hover { background: var(--glass-strong); color: #fff; transform: none; box-shadow: none; }
.toolbar .sep { width: 1px; background: var(--line); margin: 4px 4px; }
.toolbar + textarea { border-radius: 0 0 12px 12px; min-height: 220px; font-family: inherit; }
.counter { font-size: 11.5px; color: var(--text-muted); text-align: right; margin-top: 4px; }
.counter.bad { color: var(--critical); }
.btn-builder .brow { display: flex; gap: 8px; align-items: stretch; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .025);
  border: 1px dashed var(--glass-border); margin-bottom: 8px; flex-wrap: wrap; }
.btn-builder .bbtn { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: var(--glass); border: 1px solid var(--glass-border); min-width: 200px; flex: 1; }
.btn-builder .bbtn .r { display: flex; gap: 6px; }
.btn-builder .bbtn input, .btn-builder .bbtn select { padding: 6px 8px; font-size: 12.5px; min-width: 0; flex: 1; }
.seg-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-pills label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all .2s; }
.seg-pills label:has(input:checked) { border-color: rgba(123, 108, 246, .7); background: rgba(123, 108, 246, .16); color: #fff; }
.seg-pills input { display: none; }
.radio-tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border); flex-wrap: wrap; }
.radio-tabs label { display: inline-flex; padding: 6px 12px; border-radius: 9px; cursor: pointer; color: var(--text-secondary); font-size: 13px; transition: all .2s; }
.radio-tabs label:has(input:checked) { background: var(--glass-strong); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-border-hi); }
.radio-tabs input { display: none; }
.media-panel { display: none; margin-top: 12px; }
.media-panel.show { display: block; animation: rise .3s var(--ease) both; }
.media-thumb { max-width: 100%; max-height: 220px; border-radius: 12px; display: block; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 18px 0 8px; }

/* превью «как в Telegram» */
.tg-phone { position: sticky; top: 18px; border-radius: 24px; padding: 16px; min-height: 360px;
  background: linear-gradient(180deg, rgba(23, 33, 43, .92), rgba(14, 22, 30, .92)); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.tg-phone .tg-head { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tg-phone .tg-head .ava { width: 36px; height: 36px; }
.tg-msg { max-width: 92%; border-radius: 14px 14px 14px 4px; background: #182533; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.tg-msg .tg-media { background: #0e1621; display: grid; place-items: center; min-height: 120px; color: var(--text-muted); font-size: 12px; padding: 0; }
.tg-msg .tg-media img { width: 100%; display: block; }
.tg-msg .tg-text { padding: 8px 12px 6px; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.45; color: #f5f5f5; }
.tg-msg .tg-text:empty { display: none; }
.tg-msg .tg-text a { color: #6ab3f3; }
.tg-msg .tg-text code, .tg-msg .tg-text pre { background: rgba(255, 255, 255, .08); border-radius: 4px; padding: 0 4px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.tg-msg .tg-text blockquote { margin: 4px 0; padding: 2px 8px; border-left: 3px solid #6ab3f3; background: rgba(106, 179, 243, .1); border-radius: 0 6px 6px 0; }
.tg-msg .tg-text .tg-spoiler { background: #3c4a59; color: transparent; border-radius: 3px; transition: color .2s; }
.tg-msg .tg-text .tg-spoiler:hover { color: #f5f5f5; background: transparent; }
.tg-msg .tg-time { text-align: right; font-size: 11px; color: #6d8094; padding: 0 10px 6px; }
.tg-kb { display: grid; gap: 4px; margin-top: 4px; max-width: 92%; }
.tg-kb .kr { display: flex; gap: 4px; }
.tg-kb .kb { flex: 1; text-align: center; padding: 9px 8px; border-radius: 10px; background: rgba(43, 82, 120, .55); color: #fff; font-size: 13px; position: relative; }
.tg-kb .kb.url::after { content: "↗"; position: absolute; right: 6px; top: 3px; font-size: 10px; opacity: .7; }

/* ---------------------------------------------------------------- адаптив */
@media (max-width: 1100px) { .editor, .grid3 { grid-template-columns: 1fr; } .tg-phone { position: static; } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; height: auto; flex-direction: row; justify-content: flex-start; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .logo { margin: 0 10px 0 0; }
  .sidebar .spacer { display: none; }
  .sidebar a.nav .tip { display: none; }
  .sidebar a.nav.active::after { display: none; }
  .main { padding: 14px 14px 50px; }
  .grid2 { grid-template-columns: 1fr; }
  .topbar .search { width: auto; flex: 1; }
  .topbar .today { display: none; }
  dl.kv { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }
.grow-1 { flex: 1; min-width: 240px; } .grow-1 input { width: 100%; }
a.tile { color: inherit; text-decoration: none; }
a.tile:hover { color: inherit; }
.bars-list svg.track { display: block; width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bars-list svg.track .fill { transform-box: fill-box; transform-origin: left; animation: grow .9s var(--ease) both; }
.page-head .tabs { margin-bottom: 0; }
.card .page-head { margin-bottom: 10px; align-items: center; }