/* Необрутализм канала: голубой фон с сеткой, чёрные обводки, жёсткие тени */
:root {
  --ink: #111; --yellow: #FFD23F; --pink: #FF6FB5; --violet: #A06BFF; --red: #FF4D4D; --lime: #B8F35A;
  --navy: #0B1A33; --sky: #8EC5F0; --gray: #e4e4e4;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--navy);
  font: 600 16px/1.45 Manrope, system-ui, 'Segoe UI Emoji', sans-serif;
  background: var(--sky);
  background-image: linear-gradient(rgba(255,255,255,.32) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.32) 2px, transparent 2px);
  background-size: 72px 72px;
}
a { color: var(--navy); }
h2, h3, .logo { font-family: Unbounded, sans-serif; font-weight: 900; margin: 0 0 12px; }
h2 { font-size: 20px; } h3 { font-size: 15px; margin-top: 16px; }
code { background: #fff6; padding: 1px 5px; border-radius: 6px; }

.top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 24px; background: #fff; border-bottom: 4px solid var(--ink); }
.logo { font-size: 22px; text-decoration: none; margin: 0; }
.logo span { background: var(--pink); border: 3px solid var(--ink); border-radius: 8px; padding: 0 6px; margin-left: 6px; display: inline-block; transform: rotate(-3deg); }
.logo.big { font-size: 30px; margin-bottom: 20px; }
nav { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
nav a { font-weight: 800; text-decoration: none; padding: 6px 12px; border: 3px solid transparent; border-radius: 10px; }
nav a.on { border-color: var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
nav small { font-size: 11px; opacity: .55; margin-left: 4px; }

main { max-width: 1180px; margin: 0 auto; padding: 24px; display: grid; gap: 24px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.card { background: #fff; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--ink); padding: 20px; min-width: 0; }
.login { max-width: 380px; margin: 12vh auto 0; }
.hint { opacity: .7; }
.err { color: #b00; font-weight: 800; }
.meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

label { display: grid; gap: 4px; font-weight: 800; font-size: 14px; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.login form { display: grid; gap: 14px; }

.btn, button { font: 800 15px Manrope, sans-serif; cursor: pointer; padding: 9px 16px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.btn:active, button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.small { padding: 5px 10px; font-size: 13px; }
button.ghost { box-shadow: none; border-color: transparent; background: none; }
.yellow { background: var(--yellow); } .pink { background: var(--pink); } .lime { background: var(--lime); }
.red { background: var(--red); } .violet { background: var(--violet); } .gray { background: var(--gray); }

.badge { display: inline-block; font-weight: 800; font-size: 13px; padding: 2px 9px; border: 2px solid var(--ink); border-radius: 8px; }
table.jobs { width: 100%; border-collapse: collapse; }
.jobs th, .jobs td { text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--gray); }
.jobs th { font-size: 13px; opacity: .6; }

.stills { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 12px; }
.stills figure { margin: 0; flex: 0 0 auto; }
.stills img { width: 180px; display: block; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--ink); }
.stills figcaption { font-weight: 800; text-align: center; margin-top: 8px; }
.log { background: var(--navy); color: #dfe8ff; padding: 14px; border-radius: 12px; border: 3px solid var(--ink); max-height: 420px; overflow: auto; font-size: 13px; white-space: pre-wrap; word-break: break-word; }

/* Идеи */
.grow { flex: 1; min-width: 220px; }
.stack { display: grid; gap: 24px; }
textarea { width: 100%; font: 600 15px/1.5 Manrope, sans-serif; }
.card > label, form > label { margin-top: 10px; }
.card.lime { background: var(--lime); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs a { font-weight: 800; text-decoration: none; padding: 5px 11px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.tabs a.on { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.tabs small { opacity: .55; }
.filters .row { margin: 0; }
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; align-items: start; }
.idea { display: grid; gap: 10px; }
.idea.inwork { background: #f3ffe0; }
.idea.dim { opacity: .6; }
.idea-head { display: flex; gap: 12px; align-items: center; }
.idea-head h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.score { flex: 0 0 auto; font: 900 22px Unbounded, sans-serif; min-width: 56px; text-align: center; padding: 6px 8px; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 800; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
.chip.ghost { border-style: dashed; }
.chip.warn { background: var(--yellow); }
.chip.danger { background: var(--red); color: #fff; }
.reason { margin: 0; font-weight: 800; background: #fff8d6; border-left: 5px solid var(--yellow); padding: 6px 10px; border-radius: 6px; }
.idea dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.idea dt { font-weight: 800; opacity: .6; }
.idea dd { margin: 0; }
details summary { cursor: pointer; font-weight: 800; }
table.crit { font-size: 13px; margin: 6px 0; }
table.crit td { padding: 1px 10px 1px 0; }
.dots { letter-spacing: 2px; }
.comments { margin: 0; padding-left: 0; list-style: none; font-size: 14px; display: grid; gap: 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vote { padding: 6px 10px; font-size: 18px; }
.vote.on { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.comment { display: flex; gap: 6px; flex: 1 1 100%; }
.comment input { flex: 1; min-width: 0; font-size: 14px; padding: 6px 8px; }
pre.taste { white-space: pre-wrap; font: 600 14px/1.5 Manrope, sans-serif; background: #f6f6f6; padding: 10px; border-radius: 10px; }
@media (max-width: 520px) { .ideas { grid-template-columns: 1fr; } main { padding: 14px; } }

/* Ролики и утверждение сценария */
.scroll { overflow-x: auto; }
table.script { width: 100%; border-collapse: collapse; font-size: 14px; }
.script th, .script td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 2px solid var(--gray); }
.script th { font-size: 12px; opacity: .6; }
.script td.voice { min-width: 260px; font-weight: 800; }
.script td.cc { min-width: 180px; }
.script td.cc textarea { font-size: 13px; padding: 4px 6px; border-width: 2px; }
.mark { background: var(--violet); color: #fff; border-radius: 5px; padding: 0 4px; font-size: 12px; }
.sticker { display: inline-block; margin: 0 4px 4px 0; padding: 1px 7px; border: 2px solid var(--ink); border-radius: 7px; background: var(--yellow); font-size: 13px; transform: rotate(-1.5deg); }
.questions { display: grid; gap: 12px; }
fieldset.q { border: 3px solid var(--ink); border-radius: 12px; padding: 10px 14px; background: #fffdf2; }
fieldset.q legend { font-weight: 800; padding: 0 6px; }
fieldset.q .hint { margin: 0 0 6px; }
label.opt { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 4px 0; }
label.opt input[type=text], label.opt input:not([type]) { flex: 1; font-size: 14px; padding: 4px 8px; }
.rc { font-size: 13px; background: #eef6ff; border-radius: 8px; padding: 4px 8px; }
.versions a { font-weight: 800; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 8px; text-decoration: none; }
.versions a.on { background: var(--yellow); }
ul.events { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.md { font-size: 14px; overflow-x: auto; }
.md table { border-collapse: collapse; margin: 8px 0; }
.md th, .md td { border: 1px solid #bbb; padding: 3px 7px; }
.md h1 { font: 900 18px Unbounded, sans-serif; } .md h2 { font-size: 16px; }
ins { background: #c9f7a1; text-decoration: none; }
del { background: #ffc4c4; }
pre.diffpre { white-space: pre-wrap; font: 600 13px/1.5 Manrope, sans-serif; background: #f8f8f8; padding: 10px; border-radius: 10px; }

/* Производство */
ol.steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0; counter-reset: s; }
ol.steps li { counter-increment: s; font-weight: 800; font-size: 13px; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; }
ol.steps li::before { content: counter(s) ". "; opacity: .5; }
ol.steps li.ok { background: var(--lime); }
ol.steps li.now { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
ol.steps li.bad { background: var(--red); color: #fff; }
ol.steps li.skip { opacity: .35; }
.sheets { display: grid; gap: 10px; }
.sheets figure { margin: 0; }
.sheets img { width: 100%; border: 3px solid var(--ink); border-radius: 10px; }
.sheets figcaption { font-weight: 800; font-size: 13px; opacity: .6; }
.player { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; }
.player video { width: 300px; max-width: 100%; aspect-ratio: 9 / 16; background: #000; border: 4px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); }
.grid2.tight { gap: 16px; margin-top: 14px; }
.grid2.tight form { display: grid; gap: 8px; align-content: start; }