:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f2f5);
  --fg: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #8a8a8e);
  --link: var(--tg-theme-link-color, #2a7de1);
  --btn: var(--tg-theme-button-color, #2a7de1);
  --btn-fg: var(--tg-theme-button-text-color, #fff);
  --danger: #e0473c;
  --pending: #e8a33d;
  --radius: 12px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
body { padding: 0 0 96px; }
button { font: inherit; color: inherit; border: 0; background: var(--bg2); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
button.primary { background: var(--btn); color: var(--btn-fg); font-weight: 600; }
button.ghost { background: transparent; color: var(--link); padding: 6px 8px; }
button.danger { color: var(--danger); }
button:disabled { opacity: .45; }
input, textarea, select { font: inherit; color: var(--fg); background: var(--bg2); border: 0; border-radius: 10px; padding: 10px 12px; width: 100%; }
textarea { resize: vertical; min-height: 80px; }
label { display: block; font-size: 13px; color: var(--hint); margin: 12px 0 4px; }
.empty { padding: 40px 16px; text-align: center; color: var(--hint); }
.muted { color: var(--hint); font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; }
.grow { flex: 1; min-width: 0; }

/* шапка */
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 10px 16px 8px; border-bottom: 1px solid var(--bg2); }
.top h1 { font-size: 20px; margin: 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--hint); }
.dot.on { background: #3bb54a; }

/* каталог */
.search { margin: 10px 16px; }
.card { margin: 8px 16px; padding: 12px 14px; background: var(--bg2); border-radius: var(--radius); }
.card .t { font-weight: 600; }
.card .fl { font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta { font-size: 12px; color: var(--hint); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: var(--bg); }
.badge.suno { color: var(--pending); } .badge.done { color: #3bb54a; }

/* редактор */
.titlebar { display: flex; gap: 8px; align-items: center; }
.titlebar .ttl { font-size: 18px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-line { font-size: 13px; color: var(--hint); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block { margin: 12px 12px; background: var(--bg2); border-radius: var(--radius); padding: 6px 8px 8px; }
.block.pending { outline: 2px dashed var(--pending); }
.bhead { display: flex; align-items: center; gap: 4px; padding: 4px 2px; }
.handle { cursor: grab; padding: 4px 8px; color: var(--hint); font-size: 18px; touch-action: none; user-select: none; }
.bkind { font-weight: 700; font-size: 14px; flex: 1; color: var(--link); }
.line { padding: 7px 8px; border-radius: 8px; position: relative; }
.line.sel { background: var(--bg); }
.line.cue { color: var(--hint); font-style: italic; }
.line.pending .lt { opacity: .4; }
.line.pending::after { content: "бот думает…"; position: absolute; right: 8px; top: 8px; font-size: 11px; color: var(--pending); }
.line .ver { font-size: 11px; color: var(--hint); margin-left: 6px; }
.line .cf { color: var(--pending); margin-left: 4px; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tools button { padding: 6px 10px; font-size: 14px; }
.hintin { margin-top: 6px; font-size: 14px; padding: 8px 10px; }
.word { display: inline-block; padding: 2px 4px; margin: 1px; border-radius: 6px; background: var(--bg2); }
.word.on { background: var(--btn); color: var(--btn-fg); }
.sortable-ghost { opacity: .3; }

.gens { margin: 20px 16px; }
.gen { padding: 10px 12px; background: var(--bg2); border-radius: var(--radius); margin: 8px 0; font-size: 14px; }
.gen a { color: var(--link); margin-right: 10px; }
.bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--bg2); display: flex; gap: 8px; z-index: 6; }
.bar button { flex: 1; padding: 12px; }

/* шторка */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheet.hidden { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.sheet-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; background: var(--bg); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet h2 { font-size: 17px; margin: 0 0 8px; }
.menu button { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 12px; }
.ev { font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--bg2); }
.ev .muted { font-size: 12px; }
.vitem { padding: 10px; border-radius: 10px; background: var(--bg2); margin: 6px 0; }
.vitem.cur { outline: 2px solid var(--btn); }
pre.snap { white-space: pre-wrap; font: 13px/1.4 inherit; background: var(--bg2); padding: 10px; border-radius: 10px; max-height: 240px; overflow: auto; }
.toast { position: fixed; left: 16px; right: 16px; bottom: 90px; z-index: 30; background: #222; color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 14px; text-align: center; }
.toast.hidden { display: none; }
.seg { display: flex; gap: 6px; } .seg button.on { background: var(--btn); color: var(--btn-fg); }
input[type=range] { padding: 0; background: transparent; }