/* Общие стили гайдов воркшопа. Подключается из guide-<имя>/index.html как ../assets/guide.css */
:root {
  --accent:#00E1CF; --accent-dark:#0E8189;
  --bg:#FFFFFF; --bg-soft:#F7FAFA; --text:#1A1A1A; --text-muted:#5A6A6B;
  --prompt-bg:#ECFBF9; --border:#D9E6E6;
  --radius:14px; --shadow:0 4px 20px rgba(14,129,137,.08); --shadow-soft:0 2px 10px rgba(14,129,137,.06);
  --mono:"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
.wrap { max-width:880px; margin:0 auto; padding:0 20px; }
a { color:var(--accent-dark); }
a:hover { color:var(--accent); }

/* Шапка */
.hero { background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%); color:#fff; padding:48px 0; box-shadow:var(--shadow); }
.hero .kicker { margin:0 0 12px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#fff; opacity:.92; display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); border-radius:999px; padding:6px 14px; }
.hero h1 { margin:0 0 12px; font-size:clamp(28px,5vw,40px); letter-spacing:-.02em; }
.hero .lead { margin:0; font-size:clamp(16px,2.4vw,19px); opacity:.96; max-width:720px; }
.hero-links { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; }
.hero-links a { display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:8px 15px; transition:background .15s ease,color .15s ease; }
.hero-links a:hover { background:#fff; color:var(--accent-dark); }

main { padding:36px 0 70px; }
.back { display:inline-block; margin:0 0 6px; font-size:14px; font-weight:600; text-decoration:none; }
.back::before { content:"← "; }
.section-title { font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-dark); font-weight:700; margin:44px 0 16px; }
.section-title:first-of-type { margin-top:8px; }
p.body { margin:12px 0; }
.muted { color:var(--text-muted); }
.step { font-size:17px; font-weight:700; color:var(--text); margin:24px 0 8px; }
.step .em { color:var(--accent-dark); }
ul.clean { margin:8px 0; padding-left:0; list-style:none; }
ul.clean > li { position:relative; padding:6px 0 6px 26px; font-size:15px; }
ul.clean > li::before { content:""; position:absolute; left:6px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--accent-dark); }
ol.steps { margin:8px 0; padding-left:22px; }
ol.steps > li { padding:5px 0; font-size:15px; }

/* Callout */
.callout { background:var(--bg-soft); border:1px solid var(--border); border-left:5px solid var(--accent); border-radius:var(--radius); padding:16px 18px; margin:14px 0; box-shadow:var(--shadow-soft); }
.callout p { margin:8px 0; }
.callout p:first-child { margin-top:0; }
.callout p:last-child { margin-bottom:0; }
.callout.warn { border-left-color:#e6b800; background:#fff8e6; border-color:#f0d98a; color:#4a3a00; }

/* Карточки-ссылки (хаб) */
.cards { display:grid; gap:14px; }
.card { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--border); border-left:5px solid var(--accent); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-soft); transition:border-color .15s ease,transform .1s ease,box-shadow .15s ease; }
.card:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow); }
.card h3 { margin:0 0 6px; font-size:18px; color:var(--accent-dark); }
.card p { margin:0; color:#33403f; font-size:15px; }
.card .go { display:inline-block; margin-top:10px; font-size:14px; font-weight:600; color:var(--accent-dark); }

/* Блок-промпт с кнопкой «Копировать» */
.prompt { position:relative; background:var(--prompt-bg); border:1px solid var(--accent); border-left:5px solid var(--accent); border-radius:10px; margin:14px 0; padding:42px 18px 18px; max-width:100%; box-sizing:border-box; overflow:hidden; }
.prompt-label { position:absolute; top:12px; left:18px; font-size:12px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.06em; }
.prompt .prompt-text { margin:0; font-family:var(--mono); font-size:13.5px; line-height:1.55; color:var(--text);
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; max-width:100%; box-sizing:border-box; }
.copy-btn { position:absolute; top:8px; right:10px; display:inline-flex; align-items:center; gap:6px; background:var(--accent-dark); color:#fff; border:none; border-radius:8px; padding:7px 13px; font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; transition:background .18s ease,transform .1s ease; box-shadow:var(--shadow-soft); }
.copy-btn:hover { background:var(--accent); }
.copy-btn:active { transform:scale(.96); }
.copy-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.copy-btn.copied { background:var(--accent); }

/* Блок роли/примера (заголовок + поля) */
.item { padding:6px 0 2px; border-top:1px dashed var(--border); margin-top:22px; }
.item:first-of-type { border-top:none; }
.field-label { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-dark); margin:12px 0 4px; }

/* Таблицы (широкие — горизонтальный скролл) */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); box-shadow:var(--shadow-soft); margin:14px 0; }
table.tbl { width:100%; min-width:560px; border-collapse:collapse; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table.tbl thead th { background:var(--accent-dark); color:#fff; text-align:left; font-size:13px; padding:11px 14px; font-weight:600; line-height:1.3; }
table.tbl td { padding:11px 14px; border-top:1px solid var(--border); font-size:14px; vertical-align:top; }
table.tbl tbody tr:nth-child(even) { background:#fff; }

/* Сетка промпт-карточек (библиотека) */
.grid { display:grid; gap:14px; }
@media (min-width:680px) { .grid.two { grid-template-columns:1fr 1fr; } }

footer { border-top:1px solid var(--border); padding:28px 0; text-align:center; color:var(--text-muted); font-size:14px; }
footer .src { display:block; margin-top:6px; font-size:12.5px; }
footer .legal { display:block; margin:12px auto 0; max-width:680px; font-size:12px; color:var(--text-muted); }

@media (max-width:560px) {
  .hero { padding:40px 0 34px; }
}