/* PULSE Blog — кабинет. Токены совпадают с дизайн-системой семейства:
   светлый шелл, синий бренд #3157ff, Inter, радиусы 8/12/16. */

:root{
  --brand:#3157ff; --brand-light:#6b86ff; --brand-ink:#1e3a8a; --brand-soft:#eef2ff;
  --brand-line:#d5ddff; --brand-rgb:49,87,255;
  --good:#10a66a; --good-soft:#e7f7f0; --good-ink:#0b6f47;
  --warn:#d97706; --warn-soft:#fdf3e3; --warn-ink:#8a4d05;
  --bad:#d75c72;  --bad-soft:#fdeef1;  --bad-ink:#96324a;
  --bg:#f5f5f9; --panel:#fff; --panel-soft:#fafafc; --side:#fff;
  --ink:#384551; --heading:#2f3d4f; --muted:#697a8d; --faint:#a1acb8; --line:#e7e7ef;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --soft-shadow:0 2px 8px rgba(24,32,48,.06);
  --shadow:0 8px 24px rgba(24,32,48,.10);
  --focus-ring:0 0 0 3px rgba(var(--brand-rgb),.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--heading); margin:0}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.tabular,td.num,th.num{font-variant-numeric:tabular-nums}

/* ── шелл ─────────────────────────────────────────────────────────────── */
.shell{display:flex; min-height:100vh}
.side{
  width:250px; flex:0 0 250px; background:var(--side); border-right:1px solid var(--line);
  padding:18px 14px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0;
  height:100vh; overflow-y:auto;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; padding:0 6px}
.logo:hover{text-decoration:none}
.logo-mark{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-light));
  color:#fff; font-weight:800; font-size:13px; letter-spacing:.5px;
}
.logo-text{color:var(--heading); font-weight:600; font-size:15px}
.logo-text b{font-weight:800}

.side-project{padding:10px 12px; background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:var(--r-md)}
.side-project-name{font-weight:700; color:var(--brand-ink); font-size:13px; line-height:1.3}
.side-project-url{font-size:12px; color:var(--brand); word-break:break-all}

.side-nav{display:flex; flex-direction:column; gap:2px}
.side-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm);
  color:var(--ink); font-weight:600; font-size:13.5px;
}
.side-nav a:hover{background:var(--panel-soft); text-decoration:none}
.side-nav a.is-active{background:var(--brand-soft); color:var(--brand-ink)}
.side-nav .ico{width:18px; text-align:center; color:var(--faint); font-size:13px}
.side-nav a.is-active .ico{color:var(--brand)}
.side-nav .cnt{
  margin-left:auto; font-style:normal; font-size:11.5px; font-weight:700; color:var(--muted);
  background:var(--bg); border-radius:var(--r-pill); padding:1px 8px;
}
.side-bottom{margin-top:auto; border-top:1px solid var(--line); padding-top:12px}

.main{flex:1; min-width:0; padding:22px 26px 60px}
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.page-title{font-size:24px; font-weight:800; letter-spacing:-.3px}
.page-sub{margin:4px 0 0; color:var(--muted); font-size:13.5px; max-width:76ch}
.topbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.user-chip{
  font-size:12px; font-weight:700; color:var(--muted); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 12px;
}

/* ── компоненты ───────────────────────────────────────────────────────── */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--soft-shadow); padding:18px}
.card + .card{margin-top:14px}
.card-title{font-size:15px; font-weight:800}
.card-sub{color:var(--muted); font-size:13px; margin:4px 0 0}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
/* редактор статьи: текст слева, мета-панель справа; на узком — в колонку */
.editor-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start}
@media (max-width:1100px){ .editor-grid{grid-template-columns:minmax(0,1fr)} }

.btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font:inherit; font-weight:700; font-size:13.5px;
  padding:9px 16px; border-radius:var(--r-md); cursor:pointer; transition:.15s;
}
.btn:hover{border-color:var(--brand-line); text-decoration:none}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:#2547e0; border-color:#2547e0}
.btn-ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn-danger{color:var(--bad-ink); border-color:var(--bad-soft); background:var(--bad-soft)}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:var(--r-sm)}
.btn[disabled]{opacity:.5; pointer-events:none}

.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  border-radius:var(--r-pill); padding:3px 10px; background:#f1f2f6; color:var(--muted)}
.chip-brand{background:var(--brand-soft); color:var(--brand-ink)}
.chip-good{background:var(--good-soft); color:var(--good-ink)}
.chip-warn{background:var(--warn-soft); color:var(--warn-ink)}
.chip-bad{background:var(--bad-soft); color:var(--bad-ink)}

.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--soft-shadow)}
.kpi-label{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.kpi-value{font-size:28px; font-weight:800; color:var(--heading); font-variant-numeric:tabular-nums; line-height:1.2; margin-top:4px}
.kpi-note{font-size:12.5px; color:var(--muted)}

label{display:block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],select,textarea{
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; min-height:42px;
}
textarea{min-height:120px; resize:vertical; line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:var(--focus-ring); outline:none}
.field{margin-bottom:14px}
.hint{font-size:12.5px; color:var(--muted); margin-top:5px; text-transform:none; letter-spacing:0; font-weight:400}
.form-row{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.check{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink); text-transform:none; letter-spacing:0; font-weight:600}
.check input{width:18px; height:18px; min-height:0; accent-color:var(--brand)}

table.data{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
table.data th{
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line); background:var(--panel-soft);
}
table.data td{padding:11px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:top}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:var(--panel-soft)}
.tbl-wrap{overflow-x:auto; border-radius:var(--r-md)}

.empty{text-align:center; padding:44px 20px; color:var(--muted)}
.empty-ico{width:52px; height:52px; border-radius:50%; background:var(--bg); display:grid; place-items:center; margin:0 auto 12px; font-size:22px}
.empty h3{font-size:15px; margin-bottom:6px}
.empty p{font-size:13px; margin:0 auto; max-width:52ch}

.flashes{margin-bottom:14px; display:flex; flex-direction:column; gap:8px}
.flash{background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-ink);
  border-radius:var(--r-md); padding:10px 14px; font-size:13.5px; font-weight:600}

.job-bar{
  display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--brand-line);
  border-radius:var(--r-md); padding:11px 14px; margin-bottom:14px; font-size:13.5px; box-shadow:var(--soft-shadow);
}
.job-bar b{color:var(--brand-ink)}
.job-step{color:var(--muted)}
.job-count{margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; font-size:12.5px}
.job-bar .inline-form{margin-left:8px}
.spinner{width:14px; height:14px; border-radius:50%; border:2px solid var(--brand-line);
  border-top-color:var(--brand); animation:spin .8s linear infinite; flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* мастер запуска */
.steps{display:flex; flex-direction:column; gap:2px}
.step{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-sm)}
.step:hover{background:var(--panel-soft); text-decoration:none}
.step-num{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px;
  font-weight:800; background:var(--bg); color:var(--muted); flex:0 0 auto}
.step.is-done .step-num{background:var(--good-soft); color:var(--good-ink)}
.step-title{font-weight:600; color:var(--ink); font-size:13.5px}
.step-go{margin-left:auto; font-size:12.5px; color:var(--brand); font-weight:700}

/* прогресс-полоса сложности/приоритета */
.bar{height:6px; border-radius:var(--r-pill); background:var(--bg); overflow:hidden; min-width:60px}
.bar span{display:block; height:100%; border-radius:var(--r-pill); background:var(--brand)}
.bar.is-warn span{background:var(--warn)}
.bar.is-bad span{background:var(--bad)}
.bar.is-good span{background:var(--good)}

.pager{display:flex; gap:6px; align-items:center; justify-content:center; margin-top:16px}
.pager a,.pager span{padding:6px 11px; border-radius:var(--r-sm); font-size:13px; font-weight:700;
  border:1px solid var(--line); background:var(--panel); color:var(--ink)}
.pager .is-current{background:var(--brand); border-color:var(--brand); color:#fff}

.inline-form{display:inline}
.row-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px}
.nowrap{white-space:nowrap}
.sec-label{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px}

/* вход */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:24px; background:
  radial-gradient(1200px 600px at 50% -10%, rgba(var(--brand-rgb),.10), transparent 60%), var(--bg)}
.auth-card{width:min(420px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:28px}
.auth-card h1{font-size:22px; font-weight:800; margin-bottom:6px}
.auth-card p.sub{color:var(--muted); font-size:13.5px; margin:0 0 20px}
.auth-switch{margin-top:16px; font-size:13px; color:var(--muted); text-align:center}

@media (max-width:980px){
  .shell{flex-direction:column}
  .side{width:100%; flex:none; height:auto; position:static; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:10px; padding:12px}
  .side-project{width:100%; order:3}
  .side-nav{flex-direction:row; overflow-x:auto; width:100%; order:4; padding-bottom:2px}
  .side-nav a{white-space:nowrap; min-height:40px}
  .side-bottom{margin-top:0; border-top:none; padding-top:0; width:auto; order:2; margin-left:auto}
  .main{padding:16px 14px 48px}
  .page-title{font-size:20px}
  input,select,textarea{font-size:16px} /* без зума на iOS */
}