/* Общие токены Публикатора: дом, «Новая статья» (и дальше все модули). Палитра Figma: светлая — белые панели и серое поле,
   тёмная — #2c2c2c. Скругления маленькие, поля без рамок (серая заливка, рамка только в фокусе), иконки — SVG 16px штрихом 1.5. */
:root{
  --bg:#f5f5f5; --panel:#ffffff; --soft:#f5f5f5; --hover:#f0f0f0; --field:#f2f2f2; --field-hover:#ebebeb; --chip:#efefef; --chip-on:#e3e3e3;
  --line:#e6e6e6; --line-soft:#f0f0f0; --line-strong:#cfcfcf;
  --ink:#1e1e1e; --ink-2:#444444; --muted:#757575; --faint:#b3b3b3;
  --accent:#0d99ff; --accent-bg:#e5f4ff; --accent-ink:#ffffff;
  --bad:#e03e1a; --bad-bg:#fde6e0; --ok:#0f9d58; --ok-bg:#dff5e8; --warn:#6f4f00; --warn-bg:#fff2c2; --warn-line:#e3b341;
  --backdrop:rgba(0,0,0,.35); --shadow:rgba(0,0,0,.14); --pic:#cfcfcf; --pic-line:#9e9e9e; --tip:#1e1e1e; --tip-ink:#fff;
  --r:5px; --r-lg:8px; --t:.15s;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1e1e1e; --panel:#2c2c2c; --soft:#383838; --hover:#383838; --field:#383838; --field-hover:#404040; --chip:#3d3d3d; --chip-on:#4a4a4a;
  --line:#444444; --line-soft:#3a3a3a; --line-strong:#5c5c5c;
  --ink:#ffffff; --ink-2:#e6e6e6; --muted:#b3b3b3; --faint:#7a7a7a;
  --accent-bg:rgba(13,153,255,.22);
  --bad:#ff7a66; --bad-bg:rgba(242,72,34,.28); --ok:#3fd37c; --ok-bg:rgba(20,174,92,.28); --warn:#ffd34d; --warn-bg:rgba(255,205,41,.2); --warn-line:#b48a1f;
  --backdrop:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.55); --pic:#5c5c5c; --pic-line:#8a8a8a; --tip:#ffffff; --tip-ink:#1e1e1e;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1e1e1e; --panel:#2c2c2c; --soft:#383838; --hover:#383838; --field:#383838; --field-hover:#404040; --chip:#3d3d3d; --chip-on:#4a4a4a;
  --line:#444444; --line-soft:#3a3a3a; --line-strong:#5c5c5c;
  --ink:#ffffff; --ink-2:#e6e6e6; --muted:#b3b3b3; --faint:#7a7a7a;
  --accent-bg:rgba(13,153,255,.22);
  --bad:#ff7a66; --bad-bg:rgba(242,72,34,.28); --ok:#3fd37c; --ok-bg:rgba(20,174,92,.28); --warn:#ffd34d; --warn-bg:rgba(255,205,41,.2); --warn-line:#b48a1f;
  --backdrop:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.55); --pic:#5c5c5c; --pic-line:#8a8a8a; --tip:#ffffff; --tip-ink:#1e1e1e;
  color-scheme:dark;
} }

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:13px/1.45 -apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
svg.i{width:16px;height:16px;flex:none;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* Кнопки */
.btn{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);height:28px;padding:0 10px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background var(--t),border-color var(--t)}
.btn:hover{border-color:var(--line-strong);background:var(--hover)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(.93);background:var(--accent)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.ghost:hover{background:var(--chip);color:var(--ink)}
.btn.sm{height:24px;padding:0 8px;font-size:12px}
.btn.icon{width:28px;padding:0;justify-content:center;border-color:transparent;background:none;color:var(--muted)}
.btn.icon:hover{background:var(--chip);color:var(--ink)}
.btn.icon.sm{width:24px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.danger{color:var(--bad)}
.seg{display:inline-flex;background:var(--field);border-radius:var(--r);padding:2px;gap:2px;flex:none}
.seg button,.seg a{border:0;background:none;height:24px;padding:0 9px;border-radius:4px;cursor:pointer;color:var(--muted);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;transition:background var(--t),color var(--t)}
.seg button:hover{color:var(--ink)}
.seg .on{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--line)}

/* Поля: заливка без рамки, рамка в фокусе */
.fld{margin-bottom:10px}
.fld>label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.in,.fld input,.fld select,.fld textarea,.rich{width:100%;border:1px solid transparent;border-radius:var(--r);padding:3px 7px;min-height:26px;font-size:12px;background:var(--field);outline:none;transition:background var(--t),border-color var(--t)}
.in:hover,.fld input:hover,.fld select:hover,.fld textarea:hover,.rich:hover{background:var(--field-hover)}
.in:focus,.fld input:focus,.fld select:focus,.fld textarea:focus,.rich:focus{border-color:var(--accent);background:var(--panel)}
.fld textarea{resize:vertical}

/* Чипы, подсказки, меню */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r);height:22px;padding:0 8px;background:var(--chip);color:var(--ink-2);font-size:12px;white-space:nowrap}
.chip.bad{background:var(--bad-bg);color:var(--bad)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.btnlike{cursor:pointer;border:0} .chip.btnlike:hover{filter:brightness(.96)}
.tip{position:fixed;z-index:100;pointer-events:none;background:var(--tip);color:var(--tip-ink);border-radius:var(--r);padding:5px 8px;font-size:12px;max-width:420px;box-shadow:0 6px 20px var(--shadow);opacity:0;transition:opacity var(--t)}
.tip.on{opacity:1}
.menu{position:fixed;z-index:90;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 10px 30px var(--shadow);padding:4px;min-width:180px;display:none}
.menu.on{display:block}
.menu .mi{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.menu .mi:hover{background:var(--hover)}
.menu .mi.danger{color:var(--bad)}
.menu hr{border:0;border-top:1px solid var(--line-soft);margin:4px 0}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);background:var(--tip);color:var(--tip-ink);border-radius:var(--r-lg);padding:8px 10px 8px 14px;display:flex;gap:10px;align-items:center;z-index:95;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 10px 30px var(--shadow)}
.toast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.toast .btn{height:24px;background:none;color:inherit;border-color:rgba(127,127,127,.5)}
dialog{border:0;border-radius:var(--r-lg);padding:0;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px var(--shadow);width:min(560px,92vw)}
dialog::backdrop{background:var(--backdrop)}
.dlg header{padding:16px 18px 6px} .dlg header h3{margin:0;font-size:15px}
.dlg .body{padding:8px 18px;max-height:62vh;overflow:auto}
.dlg footer{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line-soft)}

/* Шапка сервиса: дом · крошка */
.home-btn{color:var(--ink)}
.crumb{display:flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap;min-width:0}
.crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--ink)}
.crumb b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.lock{color:var(--muted);font-size:12px}
.k{color:var(--faint)}