:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --line:rgba(16,24,40,.10);
  --shadow: 0 14px 40px rgba(16,24,40,.08);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}

.header{position:sticky;top:14px;z-index:10;display:flex;justify-content:center;pointer-events:none;}
.island{pointer-events:auto;display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.75);backdrop-filter: blur(12px);border:1px solid var(--line);border-radius:999px;padding:10px 14px;box-shadow:0 10px 30px rgba(16,24,40,.10);flex-wrap:wrap;justify-content:center}
.island a{padding:8px 12px;border-radius:999px;color:var(--muted);font-weight:600;font-size:14px}
.island a:hover{background:rgba(16,24,40,.06);color:var(--text)}

.hero{padding:28px 0 10px}
.h1{font-size:38px;line-height:1.12;margin:0 0 10px;letter-spacing:-.02em}
.h2{font-size:22px;margin:0 0 10px}
.p{margin:0;color:var(--muted);max-width:900px;line-height:1.55}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow: var(--shadow);}
.form{margin-top:18px;padding:18px;}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.input{flex:1 1 280px;height:48px;padding:0 14px;border:1px solid rgba(16,24,40,.14);border-radius:14px;outline:none;font-size:16px;background:#fff;}
.input:focus{border-color:rgba(16,24,40,.34)}
.btn{
  min-height:48px;
  height:auto;
  padding:12px 18px;
  border:1px solid transparent; /* чтобы высота не "прыгала" рядом с btn-ghost */
  border-radius:16px;
  font-weight:800;
  font-size:15px;
  line-height:1.15;
  cursor:pointer;
  background:#111827;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  text-align:center;
  white-space:normal;
  word-break:break-word;
}
.btn:hover{opacity:.92}
.btn-ghost{background:#fff;color:#111827;border:1px solid rgba(16,24,40,.14)}
.btn:focus,.btn-ghost:focus,.like:focus{outline:2px solid rgba(17,24,39,.20);outline-offset:2px}
.small{font-size:13px;color:var(--muted);margin-top:10px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--muted);font-weight:700}

.grid{margin-top:18px;display:grid;grid-template-columns: repeat(12, 1fr);gap:14px;}
.section-title{margin:26px 0 10px;font-size:18px}
.list{grid-column: span 12;padding:16px;}
.kv{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv b{font-weight:900}
.kv span{color:var(--muted)}

.notice{padding:12px 14px;border-radius:14px;border:1px solid rgba(17,24,39,.12);background:rgba(17,24,39,.04);color:var(--text);margin-top:12px}
.notice.ok{border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.10)}
.notice.bad{border-color:rgba(244,63,94,.22);background:rgba(244,63,94,.08)}

hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.footer{padding:30px 0;color:var(--muted);font-size:13px}

/* phone preview */
.phone{grid-column: span 4;padding:14px;}
@media (max-width: 1000px){ .phone{grid-column: span 6} }
@media (max-width: 560px){ .phone{grid-column: span 12} .h1{font-size:30px} }

.phone-shell{
  border-radius:28px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#000;
  aspect-ratio: 9 / 19.5;
  position:relative;
  --iframe-w: 390;
  --iframe-h: 844;
  --scale: 1;
}
.phone-top{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:38%;height:10px;border-radius:999px;background:rgba(255,255,255,.18);
  z-index:3;
}
.phone iframe{
  position:absolute;left:0;top:0;
  width: calc(var(--iframe-w) * 1px);
  height: calc(var(--iframe-h) * 1px);
  transform: scale(var(--scale));
  transform-origin: top left;
  border:0;
  background:#fff;
}
.meta{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.meta .t{font-weight:900}
.meta .s{color:var(--muted);font-size:13px}
.like{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid rgba(16,24,40,.14);background:#fff;font-weight:800;cursor:pointer}
.like[disabled]{opacity:.55;cursor:not-allowed}
.like.active{background:rgba(17,24,39,.06)}

/* --- Buttons UI fixes --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  line-height:1;
  padding:12px 18px;
  border-radius:16px;
  border:1px solid transparent;
  font-weight:700;
  white-space:nowrap;
}
.btn.btn-ghost{
  background:transparent;
  border-color: rgba(0,0,0,.10);
}
.btn.btn-danger{
  background:#111827;
  color:#fff;
  border-color:#111827;
  opacity:.85;
}
.btn.btn-danger:hover{ opacity:1; }
.inline-form{ display:inline; }
.inline-form button{ margin-left:10px; }

/* --- Admin UI --- */
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
@media(max-width:900px){ .grid-3{ grid-template-columns:1fr; } }
.card-title{ font-weight:700; color:#111827; }
.card-num{ font-size:34px; font-weight:800; margin-top:8px; }
.admin-tabs{ display:flex; gap:10px; padding:12px; flex-wrap:wrap; }
.admin-tabs .tab{ padding:10px 14px; border-radius:14px; border:1px solid rgba(0,0,0,.10); text-decoration:none; color:#111827; font-weight:700; }
.admin-tabs .tab.active{ background:#111827; color:#fff; border-color:#111827; }
.table-wrap{ overflow:auto; border-top:1px solid rgba(0,0,0,.06); }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:12px 12px; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:top; }
.table th{ text-align:left; font-size:13px; color:#6b7280; }
.right{ text-align:right; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }
.admin-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.admin-search{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.form-row{ display:flex; gap:12px; flex-wrap:wrap; }
.form-col{ flex:1 1 260px; }
.pager{ display:flex; justify-content:space-between; align-items:center; padding:12px; gap:12px; flex-wrap:wrap; }
.pager-links{ display:flex; gap:10px; }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }

.btn-wrap{ white-space:normal; }
.small{ font-size:12px; color:#6b7280; }
.inline-form{ display:inline; }
.badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid rgba(0,0,0,.10); background:#fff; }
.badge.badge-dark{ background:#111827; color:#fff; border-color:#111827; }
.badge.badge-danger{ background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.badge.badge-ok{ background:#dcfce7; border-color:#bbf7d0; color:#166534; }


/* --- Admin & layout helpers --- */
.nav-spacer{ height:84px; }
.card-body{ padding:16px; }
.table-wrap{ overflow:auto; border-top:1px solid rgba(0,0,0,.06); }
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th, .table td{ padding:12px 10px; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:top; }
.table th{ text-align:left; color:#0f172a; font-weight:700; white-space:nowrap; }
.table td{ color:#0f172a; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(0,0,0,.08); background:#fff; }
.badge.ok{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); }
.badge.warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
.badge.err{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
.btn{ white-space:nowrap; }
.btn-sm{ padding:8px 12px; border-radius:12px; font-size:13px; }
.kpi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .kpi-grid{ grid-template-columns:1fr; } }


/* Flash messages */
.flash{
  margin:12px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}
.flash-ok{ border-color: rgba(34,197,94,.28); }
.flash-err{ border-color: rgba(239,68,68,.28); }
.flash-info{ border-color: rgba(59,130,246,.28); }
.flash-warn{ border-color: rgba(245,158,11,.28); }