/* SEO Learning Hub — flat UI (borders, no shadows). Soft Blue palette. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; src: url(../fonts/instrument-sans-latin-wght-normal.woff2) format("woff2"); }
:root {
  /* Soft Blue palette: #F3F5F9 · #819FA7 · #5B6E74 · #F2F2F0 · #0D0D0D */
  --blue: #5B6E74; --blue-700: #46575C; --blue-800: #36454A; --blue-50: #E8EEF0; --blue-100: #CFDCE0;
  --accent: #819FA7;
  --ink: #0D0D0D; --ink-2: #2B3335; --muted: #5B6E74; --quiet: #8A989C;
  --line: #DCE2E5; --line-2: #E9EDEF; --surface: #F2F2F0; --surface-2: #ECEFF1; --bg: #F3F5F9;
  --green: #2E7D5B; --green-bg: #E5F1EA; --red: #B3261E; --red-bg: #F8E5E3;
  --yellow: #C99A2E; --amber: #7A5600; --amber-bg: #F8F0DC; --orange: #A86A3D; --purple: #819FA7;
  --primary: var(--blue); --primary-600: var(--blue-700); --primary-50: var(--blue-50); --primary-100: var(--blue-100);
  --text: var(--ink); --card: var(--surface); --card-2: #fff; --blue-bg: var(--blue-50); --grad: var(--blue);
  --radius: 10px; --radius-sm: 6px;
  /* Colour tints (background / strong) */
  --sky: #E3EEF8; --sky-ink: #24598A; --mint: #DFF2E7; --mint-ink: #1E6B47; --peach: #FCE8DB; --peach-ink: #9A4A1C;
  --lemon: #FBF1CC; --lemon-ink: #7A5A00; --lilac: #EBE6F8; --lilac-ink: #4E3D96;
  --shadow: none;
  --font: "Instrument Sans", "Segoe UI", Roboto, Arial, Helvetica, sans-serif; --display: "Bricolage Grotesque", "Instrument Sans", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--ink); background: var(--surface); }
a { color: var(--blue-800); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.3; margin: 0 0 .5em; font-weight: 400; }
h1 { font-size: 1.65rem; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; font-weight: 500; } h4 { font-size: .95rem; font-weight: 500; }
p { margin: 0 0 .75em; }
code, pre { font-family: var(--mono); font-size: .85em; }
pre { background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 12px 14px; border-radius: var(--radius-sm); overflow-x: auto; white-space: pre-wrap; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.icon-lg { width: 40px; height: 40px; color: var(--blue); }
.muted { color: var(--muted); } .small, small { font-size: .86em; }
.nowrap { white-space: nowrap; } .break { word-break: break-all; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.text-right{text-align:right}.text-center{text-align:center}.hidden{display:none!important}.inline{display:inline}
.up { color: var(--green); font-weight: 500; } .down { color: var(--red); font-weight: 500; }

/* ---------- App shell (like Search Console) ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 256px; flex: none; background: #fff; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 8px 12px 16px 0; z-index: 40; }
.brand { display: flex; align-items: center; gap: 10px; padding: 10px 16px 14px 20px; color: var(--ink); font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand small { display: block; color: var(--muted); font-size: .75rem; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; flex: none; display: block; }
.brand-mark.big { width: 56px; height: 56px; margin: 0 auto; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 24px 6px; font-weight: 500; }
.nav-link { display: flex; align-items: center; gap: 14px; padding: 0 16px 0 24px; height: 40px; border-radius: 0 20px 20px 0; color: var(--ink-2); font-size: .92rem; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.nav-link:hover { background: var(--surface-2); text-decoration: none; }
.nav-link.active { background: var(--blue-50); color: var(--ink); font-weight: 600; }
.nav-link .icon { width: 20px; height: 20px; color: var(--muted); }
.nav-link.active .icon { color: var(--blue-700); }
.step-no { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--quiet); color: var(--muted); font-size: .72rem; font-weight: 500; display: inline-grid; place-items: center; flex: none; }
.nav-link.active .step-no { border-color: var(--blue-700); background: var(--blue-700); color: #fff; }
.nav-link.done .step-no { border-color: var(--green); background: var(--green); color: #fff; }
.nav-count { margin-left: auto; font-style: normal; background: var(--red); color: #fff; border-radius: 10px; font-size: .72rem; padding: 0 7px; line-height: 18px; }
.nav-logout { margin: 6px 0 0; }
.sidebar-help { margin: auto 12px 0 16px; padding-top: 16px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px; background: rgba(243,245,249,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.topbar-title { font-size: 1.25rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.course-chip { font-size: .8rem; border: 1px solid var(--line); color: var(--muted); padding: 4px 12px; border-radius: 16px; white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 500; }
.menu-btn { display: none; }
.content { padding: 24px 32px 40px; max-width: 1180px; width: 100%; }
.footer { padding: 16px 32px; color: var(--quiet); font-size: .78rem; border-top: 1px solid var(--line-2); margin-top: auto; }
.sidebar-backdrop { display: none; }

/* ---------- Components ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card.white { background: #fff; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.eyebrow { font-size: .75rem; color: var(--muted); margin-bottom: 2px; font-weight: 500; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 500; font-size: .875rem; letter-spacing: .01em; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.btn:hover { text-decoration: none; background: var(--blue-50); border-color: var(--blue-100); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primary, .btn-grad { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: #2B3335; color: #fff; }
.btn-primary:hover, .btn-grad:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-bg); }
.btn-ghost { border-color: transparent; }
.btn-sm { height: 30px; padding: 0 12px; font-size: .8rem; }
.btn-lg { height: 42px; padding: 0 22px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn-whatsapp { background: #fff; color: var(--green); border-color: var(--line); }
.btn-whatsapp:hover { background: var(--green-bg); color: var(--green); }
.btn-instagram { background: #fff; color: #c13584; border-color: var(--line); }
.btn-instagram:hover { background: #fdf0f6; color: #c13584; }
.icon-btn { background: none; border: 0; padding: 8px; border-radius: 50%; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: var(--surface-2); }
.link-sm { font-size: .85rem; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 500; padding: 2px 10px; border-radius: 12px; white-space: nowrap; line-height: 20px; }
.badge-gray { background: var(--surface-2); color: var(--muted); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-blue, .badge-purple { background: var(--blue-50); color: var(--blue-700); }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: .9rem; border: 1px solid transparent; }
.alert > div { flex: 1; }
.alert-success { background: var(--green-bg); color: #0d652d; }
.alert-error { background: var(--red-bg); color: #a50e0e; }
.alert-warning { background: var(--amber-bg); color: #8a4b00; }
.alert-info { background: var(--blue-50); color: var(--blue-800); }
.alert-close { background: none; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }

/* Forms (Material outlined fields) */
.form-group { margin-bottom: 16px; }
label, .label { display: block; font-weight: 500; font-size: .82rem; margin-bottom: 6px; color: var(--ink-2); }
.hint { font-size: .78rem; color: var(--muted); margin-top: 4px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=month], input[type=datetime-local], input[type=tel], input[type=search], select, textarea {
  width: 100%; height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: .92rem; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
textarea { height: auto; min-height: 88px; resize: vertical; line-height: 1.45; }
input:hover, select:hover, textarea:hover { border-color: var(--quiet); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
input[type=file] { font-size: .86rem; max-width: 100%; }
.input-sm { height: 32px !important; padding: 4px 8px !important; font-size: .85rem !important; }
.form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
.counter { font-size: .75rem; font-weight: 500; color: var(--muted); float: right; }
.counter.good { color: var(--green); } .counter.warn { color: var(--amber); } .counter.bad { color: var(--red); }
.checks { list-style: none; padding: 0; margin: 6px 0 0; font-size: .82rem; display: flex; flex-wrap: wrap; gap: 6px; }
.checks li { padding: 2px 10px; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.checks li.ok { background: var(--green-bg); color: var(--green); } .checks li.ok::before { content: "✓ "; }
.checks li.no { background: var(--red-bg); color: var(--red); } .checks li.no::before { content: "✕ "; }

/* Tables (GSC data table) */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: .875rem; background: #fff; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.table th { font-weight: 500; font-size: .78rem; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line); }
.table tr:hover td { background: var(--surface); }
.table tr.is-selected td { background: var(--blue-50); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.url-cell { max-width: 360px; word-break: break-all; }
.map-table td.full-url { word-break: break-all; min-width: 220px; max-width: 420px; }

/* Progress & metric tiles (Performance report style) */
.progress { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .4s; }
.progress.sm { height: 4px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; border-top: 4px solid var(--blue); }
.grid > .stat:nth-child(2) { border-top-color: var(--purple); }
.grid > .stat:nth-child(3) { border-top-color: #0D0D0D; }
.grid > .stat:nth-child(4) { border-top-color: #a9bcc1; }
.stat .stat-label { font-size: .8rem; color: var(--muted); }
.stat .stat-value { font-size: 1.75rem; font-weight: 400; }
.stat .stat-sub { font-size: .78rem; color: var(--muted); }

/* Hero → simple page intro */
.hero { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; }
.hero h1 { margin: 0 0 4px; font-size: 1.5rem; }
.hero p { color: var(--muted); margin: 0; }
.hero .progress { margin-top: 14px; max-width: 520px; }
.hero-meta { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 14px; font-size: .82rem; color: var(--muted); }
.hero-meta strong { font-size: 1.4rem; display: block; color: var(--ink); font-weight: 400; }
.hero .eyebrow { color: var(--muted) !important; }

/* Journey */
.journey { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.journey-step { flex: none; min-width: 112px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; color: var(--ink); }
.journey-step:hover { text-decoration: none; border-color: var(--blue); }
.journey-step .js-num { font-size: .72rem; color: var(--muted); font-weight: 500; }
.journey-step .js-title { font-size: .82rem; line-height: 1.3; margin-top: 2px; }
.journey-step.completed { background: var(--green-bg); border-color: var(--green-bg); }
.journey-step.completed .js-num { color: var(--green); }
.journey-step.current { border: 2px solid var(--blue); }
.journey-step.current .js-num { color: var(--blue-700); }
.journey-step.locked { opacity: .5; }
.journey-step.submitted, .journey-step.under_review { background: var(--blue-50); border-color: var(--blue-50); }
.journey-step.needs_improvement { background: var(--red-bg); border-color: var(--red-bg); }

.steps-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .78rem; }
.steps-chips span { padding: 3px 10px; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.steps-chips span.done { background: var(--green-bg); color: var(--green); }
.steps-chips span.now { background: var(--blue); color: #fff; }
.steps-chips i { color: var(--quiet); font-style: normal; }

/* Course flow */
.flow-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; position: relative; padding-bottom: 16px; }
.flow-item::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line-2); }
.flow-item:last-child::before { display: none; }
.flow-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; background: #fff; border: 2px solid var(--line); color: var(--muted); z-index: 1; }
.flow-item.done .flow-num { background: var(--green); border-color: var(--green); color: #fff; }
.flow-item.active .flow-num { background: var(--blue); border-color: var(--blue); color: #fff; }
.flow-body { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.flow-item.active .flow-body { border-color: var(--blue); }
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.lesson-row:first-of-type { border-top: 0; }
.lesson-row .lr-main { flex: 1; min-width: 0; }
.lesson-row .lr-title { color: var(--ink); }
.lesson-row .lr-meta { font-size: .8rem; color: var(--muted); }

/* Lesson */
.lesson-steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.lesson-steps a { text-align: center; padding: 8px 2px 10px; font-size: .78rem; color: var(--muted); border-bottom: 3px solid transparent; }
.lesson-steps a b { display: block; font-size: .9rem; font-weight: 500; color: var(--muted); }
.lesson-steps a:hover { text-decoration: none; color: var(--blue-700); }
.lesson-steps a.done { color: var(--green); } .lesson-steps a.done b { color: var(--green); }
.lesson-section { scroll-margin-top: 80px; }
.lesson-section > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 500; }
.lesson-section > h2 .sn { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .85rem; flex: none; }
.concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.concept { background: var(--surface); border-radius: var(--radius); padding: 14px; }
.concept h4 { margin-bottom: 4px; color: var(--blue-700); }
.concept p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.rich ul, .rich ol { padding-left: 20px; margin: 0 0 .6em; }
.rich li { margin-bottom: 6px; }
.rich ol { counter-reset: s; list-style: none; padding-left: 0; }
.rich ol > li { counter-increment: s; position: relative; padding-left: 36px; min-height: 26px; margin-bottom: 10px; }
.rich ol > li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); font-weight: 500; display: grid; place-items: center; font-size: .8rem; }
.flow-mini { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.flow-mini span { background: var(--blue-50); color: var(--blue-700); padding: 4px 10px; border-radius: 12px; font-size: .8rem; }
.why-box { background: var(--surface); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.why-box .sn { background: var(--orange) !important; }
.task-box { background: #fff; border: 1px solid var(--blue); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.feedback { background: var(--surface); border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 14px; margin: 10px 0; }
.feedback p { margin: 4px 0 0; }

.learn-box { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.learn-box summary { cursor: pointer; padding: 12px 16px; color: var(--blue-700); list-style: none; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.learn-box summary::-webkit-details-marker { display: none; }
.learn-box summary::after { content: "Show"; margin-left: auto; font-size: .78rem; color: var(--muted); font-weight: 400; }
.learn-box[open] summary::after { content: "Hide"; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 0 16px 16px; }
.learn-item { background: var(--surface); border-radius: var(--radius); padding: 12px; }
.learn-item h4 { margin-bottom: 3px; }
.learn-item p { margin: 0; font-size: .85rem; color: var(--ink-2); }

.site-switcher { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.site-switcher label { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--muted); font-weight: 400; }
.site-switcher select { width: auto; min-width: 220px; height: 36px; border-radius: 18px; padding: 0 14px; }
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state p { color: var(--muted); max-width: 420px; margin: 6px auto 16px; }

/* Scores */
.score-ring { --val: 0; --col: var(--blue); width: 140px; height: 140px; border-radius: 50%; background: conic-gradient(var(--col) calc(var(--val) * 1%), var(--line-2) 0); display: grid; place-items: center; flex: none; }
.score-ring > div { width: 112px; height: 112px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; }
.score-ring strong { font-size: 2.1rem; font-weight: 400; line-height: 1; display: block; }
.score-ring small { color: var(--muted); }
.score-ring.good { --col: var(--green); } .score-ring.ok { --col: var(--yellow); } .score-ring.bad { --col: var(--red); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; flex: 1; }
.cat { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.cat .cat-name { font-size: .78rem; color: var(--muted); }
.cat .cat-score { font-size: 1.35rem; }
.cat .cat-score.good { color: var(--green); } .cat .cat-score.ok { color: var(--amber); } .cat .cat-score.bad { color: var(--red); }
.issue { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px; border-left: 4px solid var(--line); }
.issue.critical { border-left-color: var(--red); } .issue.warning { border-left-color: var(--yellow); } .issue.passed { border-left-color: var(--green); }
.issue-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.issue-title { font-weight: 500; }
.issue-pfw { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; font-size: .86rem; }
.issue-pfw div { background: var(--surface); border-radius: 4px; padding: 8px 10px; }
.issue-pfw b { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.issue-urls { margin-top: 8px; font-size: .82rem; }
.issue-urls summary { cursor: pointer; color: var(--blue-700); }
.issue-urls ul { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow: auto; }
.issue-urls li { word-break: break-all; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab { padding: 12px 18px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; font-size: .875rem; }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.tab-panel { display: none; } .tab-panel.active { display: block; }

.crawl-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.crawl-log { font-family: var(--mono); font-size: .75rem; background: var(--surface); color: var(--muted); border-radius: 4px; padding: 8px 12px; max-height: 140px; overflow: auto; margin-top: 10px; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--blue-100); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.chip { display: inline-flex; align-items: center; height: 28px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); border-radius: 14px; padding: 0 12px; font-size: .8rem; margin: 2px 4px 2px 0; cursor: pointer; font-family: inherit; }
.chip:hover { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
.pagetype { font-size: .72rem; padding: 1px 8px; border-radius: 10px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pagetype.home, .pagetype.service, .pagetype.product, .pagetype.landing { background: var(--blue-50); color: var(--blue-700); }

/* Step pages */
.step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.step-badge { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 1.1rem; font-weight: 500; flex: none; }
.step-badge small { display: none; }
.step-head-text { flex: 1; min-width: 0; }
.step-head h1 { margin: 0; font-size: 1.5rem; }
.step-head p { margin: 0; color: var(--muted); }
.step-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.todo-box { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 0; background: none; border: 0; }
.todo-box strong { display: none; }
.todo-box ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: t; }
.todo-box li { counter-increment: t; background: var(--surface); border-radius: 16px; padding: 4px 14px 4px 6px; font-size: .84rem; color: var(--ink-2); margin: 0; }
.todo-box li::before { content: counter(t); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; font-size: .72rem; margin-right: 8px; }
.step-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.review-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; font-size: .88rem; }
.review-bar .rb-fb { flex-basis: 100%; color: var(--ink-2); }
.dl-menu { position: relative; }
.dl-menu summary { list-style: none; }
.dl-menu summary::-webkit-details-marker { display: none; }
.dl-menu .dl-items { position: absolute; right: 0; top: 40px; background: #fff; border-radius: 4px; border: 1px solid var(--line); min-width: 170px; padding: 6px 0; z-index: 20; }
.dl-menu .dl-items a { display: block; padding: 8px 16px; color: var(--ink); }
.dl-menu .dl-items a:hover { background: var(--surface-2); text-decoration: none; }

.next-card { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; }
.next-card .nc-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); display: grid; place-items: center; flex: none; }
.next-card .nc-icon .icon { width: 24px; height: 24px; }
.next-card .nc-body { flex: 1; min-width: 0; }
.next-card h2 { margin: 2px 0 4px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.steps-grid a { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.steps-grid a:hover { border-color: var(--blue); text-decoration: none; background: var(--blue-50); }
.steps-grid .sg-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--quiet); color: var(--muted); display: grid; place-items: center; font-size: .78rem; flex: none; }
.steps-grid .sg-t { font-size: .9rem; }
.steps-grid .sg-s { display: none; }
.steps-grid a.done .sg-n { background: var(--green); border-color: var(--green); color: #fff; }

.kw-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; }
.kw-card.saved { border-left: 4px solid var(--green); }
.kw-card.todo { border-left: 4px solid var(--yellow); }
.kw-url { font-size: .95rem; word-break: break-all; }
.kw-meta { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.kw-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.kw-grid label { font-size: .78rem; font-weight: 400; color: var(--muted); }
.kw-ideas { margin-top: 10px; font-size: .82rem; }
.kw-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-tabs a { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 16px; border: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.filter-tabs a.active { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-50); font-weight: 500; }
.filter-tabs a:hover { text-decoration: none; background: var(--surface-2); }
.kw-pill { display: inline-block; background: var(--surface-2); color: var(--ink-2); border-radius: 12px; padding: 2px 10px; margin: 2px 4px 2px 0; font-size: .8rem; }
.kw-pill.primary { background: var(--blue-50); color: var(--blue-700); font-weight: 500; }
.help-step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.help-step:first-of-type { border-top: 0; }
.help-step .hs-n { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 500; }
.help-step h3 { margin: 0 0 2px; }
.help-step p { margin: 0; color: var(--muted); }

/* Login */
.auth-page { min-height: 100vh; display: grid; place-items: center; background: var(--surface); padding: 24px; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 40px 36px 32px; }
.auth-card h2 { font-size: 1.5rem; text-align: center; }
.auth-card > p.muted { text-align: center; }
.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.support-box { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.support-box .row { justify-content: center; margin-top: 10px; }
.pw-wrap { position: relative; }
.pw-wrap button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--blue-700); font-size: .8rem; cursor: pointer; font-weight: 500; }

.report-doc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; font-size: .9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.shot-grid a { display: block; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--surface); }
.shot-grid img { width: 100%; height: 100%; object-fit: cover; }
.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li { padding: 10px 0; border-top: 1px solid var(--line-2); }
.list-clean li:first-child { border-top: 0; }

/* Public site (home + blog) */
.pub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.pub-top nav { display: flex; gap: 6px; align-items: center; }
.pub-top nav a.plain { color: var(--ink-2); padding: 8px 12px; border-radius: 4px; }
.pub-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.pub-hero { text-align: center; padding: 64px 0 40px; }
.pub-hero h1 { font-size: 2.6rem; margin-bottom: 12px; letter-spacing: -.5px; }
.pub-hero p { font-size: 1.1rem; color: var(--muted); max-width: 620px; margin: 0 auto 24px; }
.pub-section { padding: 40px 0; border-top: 1px solid var(--line-2); }
.pub-section h2 { font-size: 1.6rem; text-align: center; margin-bottom: 24px; }
.price { font-size: 2rem; color: var(--ink); }
.post-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; color: var(--ink); height: 100%; }
.post-card:hover { text-decoration: none; border-color: var(--blue); }
.post-card h3 { color: var(--blue-700); }
.article { max-width: 760px; margin: 0 auto; padding: 40px 24px; font-size: 1.02rem; line-height: 1.7; }
.article h1 { font-size: 2.1rem; line-height: 1.25; }
.article h2 { font-size: 1.4rem; margin-top: 1.6em; font-weight: 500; }
.article h3 { font-size: 1.15rem; margin-top: 1.3em; }
.article img { max-width: 100%; height: auto; }
.article table { width: 100%; border-collapse: collapse; } .article td, .article th { border: 1px solid var(--line); padding: 8px; }
.pub-footer { border-top: 1px solid var(--line); padding: 24px; color: var(--muted); font-size: .85rem; text-align: center; margin-top: 40px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kw-grid { grid-template-columns: 1fr 1fr; } .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s; }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(32,33,36,.4); z-index: 35; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 12px; height: 56px; }
  .topbar-title { font-size: 1.05rem; }
  .content { padding: 16px 16px 32px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .lesson-steps { grid-template-columns: repeat(4, 1fr); }
  .issue-pfw { grid-template-columns: 1fr; }
  .course-chip { display: none; }
  .pub-hero h1 { font-size: 1.9rem; }
  .pub-top nav a.plain { display: none; }
}
@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .kw-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .next-card { flex-direction: column; align-items: flex-start; }
  .kv { grid-template-columns: 1fr; }
  .score-ring { width: 116px; height: 116px; } .score-ring > div { width: 92px; height: 92px; } .score-ring strong { font-size: 1.6rem; }
  .card { padding: 16px; }
  .step-head { align-items: flex-start; flex-wrap: wrap; }
  .auth-card { padding: 28px 20px; }
}
@media print { .sidebar, .topbar, .footer, .no-print, .btn { display: none !important; } .content { padding: 0; } }
.rich-article ul, .rich-article ol { padding-left: 22px; }
.rich-article li { margin-bottom: 6px; }
.rich-article table { margin: 12px 0; font-size: .95rem; }
.rich-article th { background: var(--surface); text-align: left; }
.step-head { flex-wrap: wrap; }
.step-head-text { min-width: 180px; }
@media (max-width: 700px) { .step-actions { width: 100%; } .step-actions .btn { flex: 1; } .step-head h1 { font-size: 1.3rem; } }

/* ---------- Task panel (Download format → Do → Upload) ---------- */
.task-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow); }
.task-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.task-panel > summary::-webkit-details-marker { display: none; }
.task-panel > summary .tp-title { flex: 1; min-width: 0; font-weight: 600; }
.task-panel > summary .tp-title small { display: block; font-weight: 400; color: var(--muted); }
.task-panel > summary::after { content: "▾"; color: var(--muted); }
.task-panel[open] > summary::after { content: "▴"; }
.task-body { padding: 0 20px 18px; }
.task-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.task-step { background: var(--bg); border-radius: var(--radius); padding: 14px; }
.task-step h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .92rem; font-weight: 600; }
.task-step h4 .n { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .75rem; flex: none; }
.task-step.done h4 .n { background: var(--green); }
.tpl-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; color: var(--ink); font-size: .86rem; }
.tpl-link:hover { text-decoration: none; border-color: var(--accent); }
.ftype { font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--blue-50); color: var(--blue-800); text-transform: uppercase; flex: none; }
.ftype.pdf { background: #F8E5E3; color: #8C1D18; } .ftype.doc, .ftype.docx { background: #E3ECF7; color: #1F4E8C; } .ftype.xls, .ftype.xlsx, .ftype.csv { background: #E5F1EA; color: #1E5E41; } .ftype.png, .ftype.jpg, .ftype.jpeg, .ftype.webp { background: #F8F0DC; color: #7A5600; }
.file-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: .86rem; }
.file-row:first-child { border-top: 0; }
.file-row a.fname { flex: 1; min-width: 0; word-break: break-all; }
.thread { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 360px; overflow-y: auto; }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: .88rem; }
.msg .meta { font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.msg.admin { align-self: flex-start; background: var(--blue-50); border-top-left-radius: 4px; }
.msg.student { align-self: flex-end; background: var(--surface); border-top-right-radius: 4px; }
.msg-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.msg-form textarea { flex: 1; min-height: 44px; height: 44px; min-width: 200px; }
.dot { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: .7rem; text-align: center; font-style: normal; }
@media (max-width: 900px) { .task-steps { grid-template-columns: 1fr; } .msg { max-width: 95%; } }

/* ---------- Admin: tasks, templates, review ---------- */
form.inline { display: inline; }
.review-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.review-side { position: sticky; top: 76px; }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } .review-side { position: static; } }
.preview-img { display: block; max-width: 100%; max-height: 420px; border-radius: 8px; border: 1px solid var(--line); margin: 6px 0 10px; }
.preview-pdf { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0 10px; background: var(--surface); }
pre.snap { background: var(--bg); color: var(--ink); max-height: 520px; overflow: auto; font-size: .8rem; white-space: pre-wrap; }
.link-btn { background: none; border: 0; padding: 0; margin-left: 6px; color: var(--muted); font-size: .72rem; cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--red); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.badge-btn { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .74rem; font-weight: 600; cursor: pointer; }
.badge-btn.on { background: #E5F1EA; color: #1E5E41; border-color: #C9E2D3; }
.badge-btn.off { background: var(--surface); color: var(--muted); }
.table tr.row-muted td { opacity: .6; }
.table tr.row-unread td { background: var(--blue-50); }
.tpl-link.plain { border: 0; background: none; padding: 0; margin: 0; }
.tpl-link small { display: block; font-size: .74rem; }
.tpl-before { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--blue-50); border: 1px dashed var(--accent); border-radius: 10px; margin-bottom: 14px; }
/* Admin view: the trainer's own messages on the right */
.thread.admin-view .msg.admin { align-self: flex-end; border-top-left-radius: 12px; border-top-right-radius: 4px; }
.thread.admin-view .msg.student { align-self: flex-start; border-top-right-radius: 12px; border-top-left-radius: 4px; background: var(--surface); }

/* ================= Tasks: progress, next task, list ================= */
.tasks-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.tasks-meter { height: 8px; background: var(--line-2); border-radius: 8px; overflow: hidden; min-width: 220px; flex: 1; max-width: 360px; }
.dash-tasks .tasks-meter { max-width: none; }
.tasks-meter span { display: block; height: 100%; background: var(--green); border-radius: 8px; }
.next-task { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); }
.next-task:hover { text-decoration: none; background: var(--blue-50); }
.next-task .nt-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.next-task .nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.next-task .nt-body small { color: var(--muted); font-size: .78rem; }
.next-task .nt-body b { font-size: 1rem; font-weight: 600; }
.next-task.fix { border-color: var(--red); } .next-task.fix .nt-ic { background: var(--red); }
.next-task.done-all { border-color: var(--line); } .next-task.done-all .nt-ic { background: var(--green); }
.next-task.done-all .nt-body span { color: var(--muted); font-size: .84rem; }
.dash-tasks { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.task-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.task-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line-2); color: var(--ink); }
.task-row:first-child { border-top: 0; }
.task-row:hover { text-decoration: none; background: var(--bg); }
.task-row .tr-n { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .8rem; font-weight: 600; color: var(--muted); flex: none; }
.task-row.tr-done .tr-n { background: var(--green); border-color: var(--green); color: #fff; }
.task-row.tr-review .tr-n { border-color: var(--accent); color: var(--blue-700); }
.task-row.tr-fix .tr-n { border-color: var(--red); color: var(--red); }
.task-row.is-next { background: var(--blue-50); }
.task-row.is-next .tr-n { background: var(--ink); border-color: var(--ink); color: #fff; }
.task-row .tr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-row .tr-body b { font-weight: 500; }
.task-row.tr-done .tr-body b { color: var(--muted); }
.task-row .tr-body small { color: var(--muted); }
.task-row .tr-go { font-size: .84rem; font-weight: 600; color: var(--blue-800); min-width: 42px; text-align: right; }
.tp-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.b-todo { background: var(--surface-2); color: var(--ink-2); }
.b-review { background: var(--blue-50); color: var(--blue-800); }
.b-fix { background: var(--red-bg); color: var(--red); }
.b-done { background: var(--green-bg); color: var(--green); }

/* Task panel states */
.task-panel { box-shadow: none; }
.task-panel .tp-state { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.task-panel.tp-done .tp-state { background: var(--green); color: #fff; }
.task-panel.tp-fix { border-color: #E4B4AF; } .task-panel.tp-fix .tp-state { background: var(--red-bg); color: var(--red); }
.task-panel.tp-review .tp-state { background: var(--blue-50); color: var(--blue-800); }
.tp-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: .88rem; }
.tp-banner .icon { margin-top: 1px; }
.tp-banner.ok { background: var(--green-bg); color: #1E5E41; }
.tp-banner.wait { background: var(--blue-50); color: var(--blue-800); }
.tp-banner.fix { background: var(--red-bg); color: #8C1D18; }
.tp-instr { font-size: .88rem; color: var(--ink-2); background: var(--bg); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 0 8px 8px 0; }
.tpl-link .icon:last-child { margin-left: auto; color: var(--muted); }
.drop { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px dashed var(--accent); border-radius: 10px; background: #fff; cursor: pointer; margin-bottom: 8px; font-size: .86rem; position: relative; }
.drop:hover, .drop.has-files { border-color: var(--blue); background: var(--blue-50); }
.drop span { display: flex; flex-direction: column; min-width: 0; }
.drop small { color: var(--muted); font-size: .74rem; word-break: break-all; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.task-step textarea { min-height: 52px; margin-bottom: 8px; }
.tp-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.tp-section h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: .9rem; font-weight: 600; }
.tp-section h5 a { margin-left: auto; font-weight: 500; }

/* ================= Chat ================= */
.chat { display: flex; flex-direction: column; gap: 6px; }
.chat-day { text-align: center; margin: 10px 0 4px; }
.chat-day span { font-size: .72rem; color: var(--muted); background: var(--surface-2); padding: 2px 10px; border-radius: 10px; }
.bubble { max-width: 78%; display: flex; flex-direction: column; }
.bubble .b-text { padding: 9px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; word-wrap: break-word; }
.bubble .b-meta { font-size: .7rem; color: var(--muted); margin-top: 3px; padding: 0 4px; }
.bubble.mine { align-self: flex-end; align-items: flex-end; }
.bubble.mine .b-text { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.bubble.mine .chat-file { background: rgba(255,255,255,.15); color: #fff; }
.bubble.theirs { align-self: flex-start; }
.bubble.theirs .b-text { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-file { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: .82rem; }
.chat-event { align-self: stretch; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 9px 12px; background: #fff; font-size: .86rem; margin: 4px 0; }
.chat-event .ev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-event .ev-head span { color: var(--muted); font-size: .74rem; margin-left: auto; }
.chat-event .ev-body { margin-top: 4px; color: var(--ink-2); }
.ev-submit { border-left-color: var(--accent); } .ev-submit .icon { color: var(--blue); }
.ev-approved { border-left-color: var(--green); background: var(--green-bg); } .ev-approved .icon { color: var(--green); }
.ev-needs_improvement { border-left-color: var(--red); background: #FCF3F2; } .ev-needs_improvement .icon { color: var(--red); }
.ev-under_review { border-left-color: var(--accent); }
.chat-empty { text-align: center; color: var(--muted); padding: 18px; font-size: .88rem; }
.chat-empty .icon { width: 28px; height: 28px; color: var(--accent); }
.chat-empty.big { margin: auto; padding: 40px 20px; max-width: 360px; }
.chat-empty.big .icon { width: 44px; height: 44px; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chat-form textarea { flex: 1; min-width: 160px; min-height: 42px; height: 42px; resize: none; border-radius: 21px; padding: 10px 16px; }
.chat-form .btn { height: 42px; border-radius: 21px; padding: 0 20px; }
.chat-attach { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; background: #fff; color: var(--muted); position: relative; flex: none; }
.chat-attach:hover { color: var(--ink); border-color: var(--accent); }
.chat-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chat-file-name { flex-basis: 100%; }
.chat-file-name:empty { display: none; }
.link-btn { margin-left: 8px; }

/* ================= Messages (two panes) ================= */
.msgs { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 64px - 48px); min-height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.msgs-list { border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
.msgs-head { padding: 16px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; background: #fff; z-index: 1; }
.msgs-head h1 { font-size: 1.3rem; margin: 0; }
.msgs-none { padding: 16px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.seg a { padding: 5px 14px; font-size: .82rem; color: var(--ink-2); }
.seg a.on { background: var(--ink); color: #fff; }
.seg a:hover { text-decoration: none; }
.conv { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.conv:hover { text-decoration: none; background: var(--bg); }
.conv.active { background: var(--blue-50); box-shadow: inset 3px 0 0 var(--blue); }
.conv-ic, .conv-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 600; }
.conv-av { background: var(--ink); color: #fff; font-size: .9rem; }
.conv-ic.b-todo, .conv-ic.b-review { background: var(--blue-50); color: var(--blue-800); }
.conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv-body b { font-weight: 500; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-body i { font-style: normal; font-size: .78rem; color: var(--blue-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-body small { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.unread .conv-body b, .conv.unread .conv-body small { font-weight: 700; color: var(--ink); }
.conv-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.conv-side small { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.msgs-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.thread-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.thread-head .th-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thread-head .th-title b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-head .th-title small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgs-back { display: none; }
.thread-files { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 18px; border-bottom: 1px solid var(--line-2); background: #fff; font-size: .82rem; }
.thread-files a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); }
.thread-scroll { flex: 1; overflow-y: auto; padding: 14px 18px; min-height: 0; }
.msgs-thread > .chat-form { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); background: #fff; }
.card .thread-scroll { max-height: 460px; padding: 6px 0; }
@media (max-width: 860px) {
  .msgs { grid-template-columns: 1fr; height: calc(100vh - 64px - 24px); }
  .msgs.has-open .msgs-list { display: none; }
  .msgs:not(.has-open) .msgs-thread { display: none; }
  .msgs-back { display: grid; }
  .thread-head { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .thread-head .btn { display: none; }
  .bubble { max-width: 90%; }
  .next-task { flex-wrap: wrap; } .next-task > .btn { width: 100%; }
  .task-row { padding: 12px; gap: 10px; } .task-row .tr-go { display: none; }
}

/* Dashboard message alert */
.msg-alert { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--ink); color: #fff; margin-bottom: 16px; }
.msg-alert:hover { text-decoration: none; background: #1F2628; }
.msg-alert .ma-ic { position: relative; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; flex: none; }
.msg-alert .ma-ic .dot { position: absolute; top: -4px; right: -4px; }
.msg-alert .ma-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-alert .ma-body small { color: #B9C7CB; font-size: .78rem; }
.msg-alert .ma-body b { font-weight: 500; }
.msg-alert .btn { background: #fff; color: var(--ink); border-color: #fff; }

/* ================= Admin: blog editor ================= */
.live-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 16px; flex-wrap: wrap; }
.live-bar .lb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--quiet); flex: none; }
.live-bar.is-live { border-color: #BFDCCB; background: var(--green-bg); }
.live-bar.is-live .lb-dot { background: var(--green); outline: 4px solid rgba(46,125,91,.18); }
.live-bar .lb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.live-bar .lb-text a { word-break: break-all; font-size: .88rem; }
.post-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.pe-side { position: sticky; top: 76px; }
.pe-side .card { padding: 16px 18px; }
.pe-side h3 { font-size: .95rem; font-weight: 600; margin-bottom: 12px; }
.slug-field { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; }
.slug-field span { padding: 0 8px; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.slug-field span:last-child { padding-left: 0; }
.slug-field input { border: 0; border-radius: 0; background: #fff; flex: 1; min-width: 80px; }
.pe-toolbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface); }
.pe-toolbar .chip { margin: 0; }
.chip-dark { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip-dark .icon { width: 15px; height: 15px; }
.chip-dark.busy { opacity: .6; pointer-events: none; }
.pe-text { border-radius: 0 0 8px 8px !important; font-family: var(--mono); font-size: .84rem; line-height: 1.6; min-height: 460px; }
.pe-preview { border: 1px solid var(--line); border-radius: 0 0 8px 8px; padding: 20px 24px; min-height: 460px; background: #fff; font-size: 1rem; line-height: 1.7; }
.pe-preview img { max-width: 100%; height: auto; border-radius: 8px; }
.pe-preview figcaption { font-size: .85rem; color: var(--muted); }
.cover-drop { display: grid; place-items: center; aspect-ratio: 1200 / 630; border: 1.5px dashed var(--accent); border-radius: 10px; background: var(--bg); cursor: pointer; overflow: hidden; position: relative; text-align: center; font-size: .86rem; color: var(--ink-2); }
.cover-drop:hover { border-color: var(--blue); }
.cover-drop.has-img { border-style: solid; border-color: var(--line); }
.cover-drop img { width: 100%; height: 100%; object-fit: cover; }
.cover-drop span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cover-drop small { color: var(--muted); font-size: .74rem; }
.cover-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.post-thumb { width: 72px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.post-thumb.empty { display: grid; place-items: center; background: var(--surface); color: var(--quiet); }
@media (max-width: 1000px) { .post-editor { grid-template-columns: 1fr; } .pe-side { position: static; } }


/* ================= Home: one clear next step ================= */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.home-head h1 { font-size: 1.9rem; margin: 0 0 2px; }
.home-meter { display: flex; align-items: center; gap: 10px; min-width: 240px; flex: 0 1 340px; }
.home-meter .tasks-meter { max-width: none; }
.home-meter b { font-family: var(--display); font-size: 1.2rem; }
.now-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: center; padding: 24px; border-radius: 16px; margin-bottom: 16px; border: 1px solid transparent; }
.now-card .now-n { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font: 800 1.6rem/1 var(--display); color: #fff; }
.now-card .now-n .icon { width: 26px; height: 26px; }
.now-card small { font-size: .82rem; font-weight: 600; }
.now-card h2 { font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; margin: 2px 0 6px; }
.now-card p { margin: 0; color: var(--ink-2); }
.now-card .now-fb { background: rgba(255,255,255,.7); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.now-steps { list-style: none; counter-reset: ns; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 0; }
.now-steps li { counter-increment: ns; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.75); border-radius: 16px; padding: 4px 12px 4px 4px; font-size: .84rem; }
.now-steps li::before { content: counter(ns); width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
.now-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tint-sky { background: var(--sky); border-color: #C9DCEE; } .tint-sky .now-n { background: var(--sky-ink); } .tint-sky small { color: var(--sky-ink); }
.tint-mint { background: var(--mint); border-color: #C3E3D0; } .tint-mint .now-n { background: var(--mint-ink); } .tint-mint small { color: var(--mint-ink); }
.tint-peach { background: var(--peach); border-color: #F2CDB5; } .tint-peach .now-n { background: var(--peach-ink); } .tint-peach small { color: var(--peach-ink); }
.tint-lilac { background: var(--lilac); border-color: #D6CDF0; } .tint-lilac .now-n { background: var(--lilac-ink); } .tint-lilac small { color: var(--lilac-ink); }
.live-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--lemon) !important; border-color: #EEDC9C !important; }
.task-row.tr-locked { background: var(--bg); cursor: default; }
.task-row.tr-locked .tr-n { border-style: dashed; color: var(--quiet); }
.task-row.tr-locked .tr-n .icon { width: 14px; height: 14px; }
.task-row.tr-locked b { color: var(--quiet); font-weight: 500; }
.task-row.tr-locked small { color: var(--quiet); }
.task-row.tr-review .tr-n { background: var(--lilac); border-color: var(--lilac-ink); color: var(--lilac-ink); }
.task-row.tr-fix .tr-n { background: var(--peach); border-color: var(--peach-ink); color: var(--peach-ink); }
.task-row.is-next { background: var(--sky); }
.task-row.is-next .tr-n { background: var(--sky-ink); border-color: var(--sky-ink); }
.task-row.is-next .tr-go { color: var(--sky-ink); }
.b-review { background: var(--lilac); color: var(--lilac-ink); }
.b-fix { background: var(--peach); color: var(--peach-ink); }
.b-done { background: var(--mint); color: var(--mint-ink); }

/* Locked step / inline lock */
.locked-step { max-width: 560px; margin: 40px auto; text-align: center; padding: 36px 28px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.locked-step .ls-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--lemon); color: var(--lemon-ink); display: grid; place-items: center; margin: 0 auto 16px; }
.locked-step .ls-ic .icon { width: 28px; height: 28px; }
.locked-step h1 { font-size: 1.4rem; }
.locked-step p { color: var(--muted); margin-bottom: 20px; }
.locked-inline { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg); color: var(--muted); }
.locked-inline div { flex: 1; display: flex; flex-direction: column; }
.locked-inline b { color: var(--ink-2); }
.nav-link.locked { color: var(--quiet); }
.nav-link.locked .step-no { border-style: dashed; color: var(--quiet); background: transparent; }
.nav-link.locked .step-no .icon { width: 11px; height: 11px; }

/* Task panel: 4 steps with colours */
.task-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.task-step:nth-child(1) { background: var(--lilac); } .task-step:nth-child(1) h4 .n { background: var(--lilac-ink); }
.task-step:nth-child(2) { background: var(--sky); } .task-step:nth-child(2) h4 .n { background: var(--sky-ink); }
.task-step:nth-child(3) { background: var(--lemon); } .task-step:nth-child(3) h4 .n { background: var(--lemon-ink); }
.task-step:nth-child(4) { background: var(--mint); } .task-step:nth-child(4) h4 .n { background: var(--mint-ink); }
.task-step .small a, .ts-notes > a.small { display: inline-block; margin-top: 4px; }
@media (max-width: 1100px) { .task-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .task-steps { grid-template-columns: 1fr; } .now-card { grid-template-columns: auto 1fr; padding: 18px; } .now-card > .btn, .now-actions { grid-column: 1 / -1; } .now-card > .btn { width: 100%; } .now-card .now-n { width: 44px; height: 44px; font-size: 1.3rem; } }

/* Notes viewer */
.notes-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.notes-frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #525659; }
.notes-frame iframe { display: block; width: 100%; height: calc(100vh - 220px); min-height: 520px; border: 0; }
.notes-admin { background: var(--lilac); border-radius: 12px; padding: 14px 16px; }
.notes-admin .check-grid { background: #fff; }
.now-card .btn-primary { border-color: transparent; }
.tint-sky .btn-primary { background: var(--sky-ink); } .tint-peach .btn-primary { background: var(--peach-ink); } .tint-lilac .btn-primary { background: var(--lilac-ink); }
.now-card .btn-primary:hover { background: var(--ink); }
.now-steps a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.notes-read { padding: 28px 32px; }
.notes-read .rpt { font-family: var(--font); font-size: 15px; line-height: 1.65; }
.notes-read .rpt-head { background: var(--lilac); color: var(--ink); }
.notes-read .rpt-head p, .notes-read .rpt-brand { color: var(--lilac-ink); opacity: 1; }
.notes-read .rpt h2 { font-family: var(--display); color: var(--ink); border-bottom-color: var(--line); }
.notes-read .rpt-meta div { background: var(--bg); }
.notes-bottom { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .notes-read { padding: 16px; } }

/* "What to submit" */
.tp-deliver { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: #FFF4E0; border: 1.5px solid #F5C77A; margin-bottom: 12px; }
.tp-deliver .td-ic { width: 40px; height: 40px; border-radius: 10px; background: #E08A00; color: #fff; display: grid; place-items: center; flex: none; }
.tp-deliver small { display: block; font-weight: 700; color: #9A5B00; font-size: .78rem; margin-bottom: 2px; }
.tp-deliver p { margin: 0; font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
.tp-more { margin: 0 0 14px; font-size: .88rem; }
.tp-more summary { cursor: pointer; color: var(--blue-800); font-weight: 500; }
.tp-more p { margin: 8px 0 0; color: var(--ink-2); background: var(--bg); padding: 10px 14px; border-radius: 8px; }
.now-card .now-deliver { background: rgba(255,255,255,.8); border-radius: 10px; padding: 10px 14px; margin: 4px 0 6px; font-size: .92rem; }
.deliver-admin { background: #FFF4E0; border-radius: 12px; padding: 14px 16px; }

/* ===== 4-step guide: Notes → Format → Task → Send for review ===== */
.guide4 { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.guide4 li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: relative; background: var(--bg); border: 1px solid var(--line); margin-left: -1px; }
.guide4 li:first-child { border-radius: 12px 0 0 12px; margin-left: 0; } .guide4 li:last-child { border-radius: 0 12px 12px 0; }
.guide4 .gn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem var(--display); background: #fff; border: 2px solid var(--line); color: var(--quiet); flex: none; }
.guide4 .gl { display: flex; flex-direction: column; min-width: 0; }
.guide4 .gl b { font-size: .95rem; } .guide4 .gl small { font-size: .76rem; color: var(--muted); }
.guide4 li.g-done { background: var(--mint); border-color: #C3E3D0; } .guide4 li.g-done .gn { background: var(--green); border-color: var(--green); color: #fff; }
.guide4 li.g-now { background: #fff; border: 2px solid var(--ink); z-index: 1; }
.guide4 li.g-now .gn { background: var(--ink); border-color: var(--ink); color: #fff; }
.guide4 li.g-now small { color: var(--ink); font-weight: 700; }
.guide4 li.g-next .gl b { color: var(--muted); }
.do-now { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; margin-bottom: 14px; }
.do-now.gs1 { background: var(--lilac); } .do-now.gs2 { background: var(--sky); } .do-now.gs3 { background: var(--lemon); }
.dn-text { flex: 1; min-width: 240px; }
.dn-text small { font-weight: 700; font-size: .78rem; text-transform: none; }
.do-now.gs1 small { color: var(--lilac-ink); } .do-now.gs2 small { color: var(--sky-ink); } .do-now.gs3 small { color: var(--lemon-ink); }
.dn-text b { display: block; font: 700 1.3rem var(--display); margin: 2px 0 4px; }
.dn-text p { margin: 0; color: var(--ink-2); }
.dn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.do-now.gs1 .btn-primary { background: var(--lilac-ink); border-color: var(--lilac-ink); } .do-now.gs2 .btn-primary { background: var(--sky-ink); border-color: var(--sky-ink); } .do-now.gs3 .btn-primary { background: var(--lemon-ink); border-color: var(--lemon-ink); }
.btn-ask { background: #fff; border-color: var(--line); }
.btn-ask:hover { border-color: var(--ink); }
.task-step.is-now { outline: 3px solid var(--ink); outline-offset: -3px; }
.task-step.is-done { opacity: .85; } .task-step.is-done h4 .n { background: var(--green) !important; }
.task-step.is-next { }
.task-step > p.small { margin: -2px 0 8px; color: var(--ink-2); }
.send-lock { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.75); font-size: .86rem; margin-bottom: 8px; }
.send-lock .icon { color: var(--lemon-ink); margin-top: 2px; }
.ask-box { transition: background .3s; border-radius: 12px; }
.ask-box.flash { background: var(--lemon); }
@media (max-width: 760px) {
  .guide4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .guide4 li, .guide4 li:first-child, .guide4 li:last-child { border-radius: 12px; margin-left: 0; }
  .dn-actions .btn { flex: 1; }
}
.now-steps li.ok::before { content: "✓"; background: var(--green); }
.now-steps li.cur { background: #fff; outline: 2px solid var(--ink); font-weight: 600; }
.guide4 li.g-skip { background: var(--bg); } .guide4 li.g-skip .gn { border-style: dashed; } .guide4 li.g-skip .gl b { color: var(--quiet); }
.task-step.is-skip { opacity: .75; } .task-step.is-skip h4 .n { background: var(--quiet) !important; }

/* Blog: automatic cover — live preview + 24 colour swatches */
.cover-live { position: relative; aspect-ratio: 1200 / 630; border-radius: 10px; background: var(--cv-bg); color: var(--cv-fg); padding: 7% 6%; display: flex; flex-direction: column; gap: 8px; overflow: hidden; margin: 10px 0 12px; }
.cover-live::after { content: ""; position: absolute; right: -14%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: currentColor; opacity: .08; }
.cl-cat { align-self: flex-start; background: var(--cv-ac); color: var(--cv-bg); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 99px; }
.cl-title { font: 800 1.02rem/1.15 var(--display, inherit); letter-spacing: -.02em; max-width: 72%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cl-brand { margin-top: auto; font-size: .66rem; font-weight: 700; opacity: .85; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.sw { position: relative; cursor: pointer; }
.sw input { position: absolute; opacity: 0; }
.sw span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-size: .68rem; font-weight: 700; border: 1px solid rgba(0,0,0,.08); }
.sw input:checked + span { outline: 3px solid var(--blue, #2E5BFF); outline-offset: 2px; }
.sw input:focus-visible + span { outline: 3px dashed var(--blue, #2E5BFF); outline-offset: 2px; }

/* Task flow: ① Notes → ② Task text → ③ Format → ④ Do & submit (stacked, in order) */
.tflow { display: grid; gap: 12px; margin-bottom: 14px; counter-reset: none; }
.tstep { border-radius: 14px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.tstep-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.tstep-h .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem var(--display); color: #fff; flex: none; }
.tstep-h b { display: block; font-size: 1rem; } .tstep-h small { color: var(--muted); font-size: .8rem; }
.tstep-b { padding: 0 16px 16px 60px; }
.tstep-b > .tpl-link { margin-bottom: 6px; }
.ts1 .tstep-h { background: var(--lilac); } .ts1 .n { background: var(--lilac-ink); }
.ts2 .tstep-h { background: var(--sky); } .ts2 .n { background: var(--sky-ink); }
.ts3 .tstep-h { background: var(--lemon); } .ts3 .n { background: var(--lemon-ink); }
.ts4 .tstep-h { background: var(--mint); } .ts4 .n { background: var(--mint-ink); }
.tstep .tstep-b { padding-top: 14px; }
.tstep.is-now { border: 2px solid var(--ink); }
.tstep.is-done .n { background: var(--green) !important; }
.tstep.is-skip { opacity: .7; } .tstep.is-skip .n { background: var(--quiet) !important; }
.tstep.is-next .tstep-h b { color: var(--ink-2); }
.tstep .send-lock { background: var(--bg); margin: 0; }
.task-text { font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--bg); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; max-height: 70vh; overflow: auto; }
.task-text p { margin: 0 0 12px; } .task-text p:last-child { margin-bottom: 0; }
.task-text ul, .task-text ol { margin: 0 0 12px; padding-left: 22px; } .task-text li { margin-bottom: 4px; }
.task-text h5 { font-size: 1rem; margin: 14px 0 6px; } .task-text h5:first-child { margin-top: 0; }
.task-text a { word-break: break-all; }
.tstep form .btn { margin-top: 2px; }
.tstep .drop { margin-bottom: 8px; }
.tstep textarea { min-height: 52px; margin-bottom: 8px; }
.do-now.gs4 { background: var(--mint); } .do-now.gs4 small { color: var(--mint-ink); } .do-now.gs4 .btn-primary { background: var(--mint-ink); border-color: var(--mint-ink); }
.tp-ref { display: grid; gap: 8px; margin-top: 10px; }
@media (max-width: 640px) { .tstep-b { padding: 12px 14px 14px; } .task-text { padding: 14px; } }
/* Admin task designer: numbered steps */
.step-lab { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.step-lab .sn { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .78rem; flex: none; }
.step-lab .muted { font-weight: 400; }
.task-admin textarea { font-size: .95rem; line-height: 1.6; min-height: 320px; }
.task-admin, .format-admin, .notes-admin { padding: 14px 16px; border-radius: 12px; background: var(--bg); }
.ts2 .btn-primary { background: var(--sky-ink); border-color: var(--sky-ink); } .ts4 .btn-primary { background: var(--mint-ink); border-color: var(--mint-ink); }

/* ================= Google Ads tools ================= */
.ads-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.ads-side.sticky { position: sticky; top: 78px; }
.ads-side .card { margin-bottom: 12px; }
@media (max-width: 1080px) { .ads-two { grid-template-columns: 1fr; } .ads-side.sticky { position: static; } }
.ads-h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-family: var(--display); font-size: 1.1rem; letter-spacing: -.01em; }
.ah-n { width: 28px; height: 28px; border-radius: 8px; background: var(--ads-ink, #1a5fd0); color: #fff; display: grid; place-items: center; font-size: .82rem; flex: none; }
:root { --ads: #E8F0FE; --ads-ink: #1a5fd0; --ads-yellow: #FBBC04; --ads-green: #188038; --ads-red: #D93025; }
.fld { position: relative; }
.fld input { padding-right: 52px; }
.fld .cc { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .72rem; color: var(--quiet); font-variant-numeric: tabular-nums; pointer-events: none; }
.fld .cc.full { color: var(--green); } .fld .cc.over { color: var(--red); font-weight: 700; } .fld .cc.short { color: var(--amber); }
.fld input:has(+ .cc.over) { border-color: var(--red); background: #FFF7F6; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-top: 8px; }
.fld.hl { display: flex; align-items: center; gap: 6px; }
.fld.hl .hl-n { width: 22px; font-size: .72rem; color: var(--quiet); text-align: right; flex: none; }
.fld.hl input { flex: 1; min-width: 0; padding-right: 48px; }
.fld.hl .cc { right: 74px; }
.fld.hl .pin { width: 64px; flex: none; padding: 6px; font-size: .78rem; }
.fld.dl { margin-bottom: 8px; }
.path-row { display: flex; align-items: center; gap: 6px; } .path-row > span { color: var(--muted); font-size: .85rem; white-space: nowrap; } .path-row .fld { flex: 1; min-width: 0; }
.tabs-line { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.tabs-line a { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.tabs-line a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabs-line a .icon { width: 14px; height: 14px; color: var(--green); } .tabs-line a.on .icon { color: #7CF0B8; }
/* preview */
.prev-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--quiet); margin: 10px 0 4px; }
.adprev { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; font-family: Arial, Helvetica, sans-serif; }
.adprev.mobile { max-width: 380px; }
.ap-top { display: flex; gap: 10px; align-items: center; }
.ap-fav { width: 28px; height: 28px; border-radius: 50%; background: #F1F3F4; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #3c4043; flex: none; }
.ap-src { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .ap-src b { font-size: .86rem; color: #202124; font-weight: 400; } .ap-src small { color: #4d5156; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-spons { font-size: .78rem; font-weight: 700; color: #202124; margin: 6px 0 2px; }
.ap-h { color: #1a0dab; font-size: 1.15rem; line-height: 1.35; margin-bottom: 4px; }
.adprev.mobile .ap-h { font-size: 1.05rem; }
.ap-d { color: #4d5156; font-size: .86rem; line-height: 1.5; }
.ap-co { color: #4d5156; font-size: .82rem; margin-top: 4px; }
.ap-sl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ap-sl span { color: #1a0dab; font-size: .84rem; border: 1px solid #dadce0; border-radius: 99px; padding: 4px 12px; }
.adprev.desktop .ap-sl span { border: 0; padding: 0 12px 0 0; }
.adprev-static { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; font-family: Arial, sans-serif; display: grid; gap: 2px; margin-top: 8px; }
.adprev-static small { font-weight: 700; } .adprev-static b { color: #1a0dab; font-weight: 400; font-size: 1.05rem; } .adprev-static span { color: #4d5156; font-size: .86rem; }
/* strength meter */
.strength { display: grid; gap: 4px; } .strength small { color: var(--quiet); }
.st-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .st-bar i { display: block; height: 100%; border-radius: 99px; background: var(--quiet); }
.s-poor .st-bar i, .s-incomplete .st-bar i { background: var(--ads-red); } .s-average .st-bar i { background: var(--ads-yellow); } .s-good .st-bar i { background: #34A853; } .s-excellent .st-bar i { background: var(--ads-green); }
.s-poor b { color: var(--ads-red); } .s-good b, .s-excellent b { color: var(--ads-green); } .s-average b { color: #9a6700; }
/* issues */
.ads-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ads-issues li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: .86rem; line-height: 1.45; }
.ads-issues li b { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; flex: none; margin-top: 1px; }
.ai-error { background: #FDECEA; } .ai-error b { background: var(--ads-red); color: #fff; }
.ai-warning { background: #FEF7E0; } .ai-warning b { background: #F9AB00; color: #3c2a00; }
.ai-info { background: var(--ads); } .ai-info b { background: var(--ads-ink); color: #fff; }
.ads-ok { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--mint); color: var(--mint-ink); border-radius: 8px; font-weight: 600; }
/* plan */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.type-card { position: relative; cursor: pointer; }
.type-card input { position: absolute; opacity: 0; }
.type-card span { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; height: 100%; background: #fff; }
.type-card b { font-size: .95rem; } .type-card small { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.type-card input:checked + span { border-color: var(--ads-ink); background: var(--ads); box-shadow: inset 0 0 0 1px var(--ads-ink); }
.type-card input:focus-visible + span { outline: 3px solid var(--ads-yellow); }
.check-row { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 12px; } .check-row.col { flex-direction: column; gap: 8px; }
.radio-line { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; font-weight: 400; cursor: pointer; } .radio-line input { margin-top: 4px; }
.ads-score { display: flex; gap: 16px; align-items: center; }
.sc-ring { --p: 0; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--ads-ink) calc(var(--p) * 1%), var(--surface-2) 0); display: grid; place-items: center; position: relative; flex: none; }
.sc-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.sc-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sc-ring b, .sc-ring small { position: relative; line-height: 1.1; } .sc-ring b { font: 800 1.2rem var(--display); } .sc-ring small { font-size: .62rem; color: var(--muted); } .sc-ring.big { width: 104px; height: 104px; } .sc-ring.big b { font-size: 1.7rem; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); font-size: .9rem; } .kv b { font-variant-numeric: tabular-nums; }
.kv.total { border-bottom: 0; font-size: 1rem; } .kv.total b { font-family: var(--display); font-size: 1.1rem; }
.tint-card { background: var(--ads) !important; border-color: #D2E3FC !important; }
.tint-card h4 { display: flex; gap: 6px; align-items: center; color: var(--ads-ink); }
/* keywords */
.ads-stats { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ads-stats > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; min-width: 110px; }
.ads-stats b { font: 800 1.3rem var(--display); } .ads-stats span { font-size: .76rem; color: var(--muted); }
.ads-stats .btn { margin-left: auto; }
.kw-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.kw-group { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg); }
.kg-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.kg-n { width: 30px; height: 30px; border-radius: 8px; background: var(--ads); color: var(--ads-ink); display: grid; place-items: center; flex: none; }
.kg-name { font-weight: 700; }
.kw-group textarea { font-family: var(--mono); font-size: .84rem; }
textarea[data-kw].is-focus { outline: 2px solid var(--ads-ink); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips .chip { cursor: pointer; } .chips .chip.used { opacity: .45; text-decoration: line-through; }
.match-help .mt-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 6px 0; font-size: .84rem; border-bottom: 1px dashed var(--line-2); }
/* assets */
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sl-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.sl-card .fld:first-child input { font-weight: 700; color: #1a0dab; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
/* landing */
.lp-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.lp-rows { display: grid; gap: 6px; }
.lp-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.lp-row b { display: block; font-size: .92rem; } .lp-row small { color: var(--ink-2); font-size: .82rem; }
.lp-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: 3px 8px; border-radius: 6px; flex: none; min-width: 48px; text-align: center; }
.lp-pass .lp-badge { background: var(--ads-green); color: #fff; } .lp-fix .lp-badge { background: var(--ads-red); color: #fff; } .lp-check .lp-badge { background: var(--ads-yellow); color: #3c2a00; }
.lp-fix { background: #FDECEA; }
/* tracking */
.detect { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--ads) !important; border-color: #D2E3FC !important; }
.conv-table input, .conv-table select { min-width: 0; padding: 7px 8px; font-size: .84rem; }
.conv-table td { padding: 6px; } .conv-table td:first-child input { min-width: 150px; }
.flow-v { display: grid; gap: 4px; } .flow-v span { position: relative; padding: 8px 12px; background: var(--bg); border-radius: 8px; font-size: .84rem; }
.flow-v span:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -12px; color: var(--quiet); font-size: .8rem; z-index: 1; }
.flow-v span:last-child { background: var(--mint); color: var(--mint-ink); font-weight: 600; }
/* budget */
.inp-unit { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.inp-unit input { border: 0; flex: 1; min-width: 0; } .inp-unit span { padding: 0 10px; color: var(--muted); font-weight: 600; background: var(--surface); align-self: stretch; display: grid; place-items: center; }
.need { padding: 10px 12px; background: var(--ads); border-radius: 8px; } .need > b { display: block; font: 800 1.3rem var(--display); color: var(--ads-ink); } .need span { font-size: .82rem; }
.fc h3 { margin-bottom: 10px; }
.fc-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.fc-big > div { background: var(--ads); border-radius: 10px; padding: 10px; } .fc-big small { display: block; font-size: .7rem; color: var(--ads-ink); font-weight: 600; } .fc-big b { font: 800 1.15rem var(--display); }
.fc-verdict { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; font-size: .86rem; font-weight: 600; }
.fc-verdict.good { background: var(--mint); color: var(--mint-ink); } .fc-verdict.warn { background: #FEF7E0; color: #7a5600; } .fc-verdict.bad { background: #FDECEA; color: var(--ads-red); }
.sc-table td, .sc-table th { padding: 6px 8px; font-size: .82rem; font-variant-numeric: tabular-nums; } .sc-table td:nth-child(3) { font-weight: 700; }
/* pmax */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.media-grid label { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: .78rem; font-weight: 600; }
.media-grid input { width: 70px; text-align: center; }
.mg-shape { display: block; background: var(--ads); border: 1.5px dashed var(--ads-ink); border-radius: 4px; }
.mg-shape.land { width: 57px; height: 30px; } .mg-shape.sq { width: 34px; height: 34px; } .mg-shape.port { width: 30px; height: 37px; } .mg-shape.logo { width: 30px; height: 30px; border-radius: 50%; } .mg-shape.vid { width: 50px; height: 30px; background: var(--ads-ink); }
.pm-req { display: grid; gap: 4px; font-size: .86rem; } .pm-req div { display: flex; gap: 6px; align-items: center; color: var(--muted); } .pm-req .icon { width: 16px; height: 16px; color: var(--ads-red); }
.pm-req .ok { color: var(--ink); } .pm-req .ok .icon { color: var(--ads-green); }
/* report */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.kpi { background: var(--bg); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.kpi small { color: var(--muted); font-size: .76rem; } .kpi b { font: 800 1.35rem var(--display); font-variant-numeric: tabular-nums; }
.kpi span { font-size: .78rem; font-weight: 600; } .kpi .up { color: var(--ads-green); } .kpi .down { color: var(--ads-red); }
.insights { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.st-waste td { background: #FFF7F6; } .st-keep td { background: #F1FAF4; }
.tag-keep, .tag-waste, .tag-watch { font-size: .66rem; text-transform: uppercase; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .04em; }
.tag-keep { background: var(--ads-green); color: #fff; } .tag-waste { background: var(--ads-red); color: #fff; } .tag-watch { background: var(--surface-2); color: var(--muted); }
.num-in { max-width: 130px; text-align: right; margin-left: auto; }
textarea.mono { font-family: var(--mono); font-size: .84rem; }
/* upsell (tool not in the student's course) */
.locked-step.upsell .ls-ic { background: var(--ads); color: var(--ads-ink); }
/* sidebar: Google Ads section */
.nav-label.ads { color: var(--ads-ink); }
.ads-main, .ads-side { min-width: 0; }
.sync-card { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; background: var(--sky) !important; border-color: #C9DDF0 !important; } .sync-card b { display: flex; gap: 8px; align-items: center; }
.rebuild-card summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; } .rebuild-card[open] summary { margin-bottom: 8px; }

/* ================= Meta Ads tools ================= */
:root { --meta: #E7F0FF; --meta-ink: #0866FF; --ig: #D62976; }
.ads-h.meta .ah-n, .sc-ring.meta { --ads-ink: var(--meta-ink); }
.ads-h.meta .ah-n { background: linear-gradient(135deg, #0866FF, #7A3CF0); }
.type-card.meta input:checked + span { border-color: var(--meta-ink); background: var(--meta); box-shadow: inset 0 0 0 1px var(--meta-ink); }
.tint-card.meta { background: var(--meta) !important; border-color: #CFE0FF !important; } .tint-card.meta h4 { color: var(--meta-ink); }
.detect.meta { background: var(--meta) !important; border-color: #CFE0FF !important; }
.fc-big.meta > div { background: var(--meta); } .fc-big.meta small { color: var(--meta-ink); }
.fld textarea { padding-right: 56px; } .fld textarea + .cc { top: auto; bottom: 8px; transform: none; }
.fld .cc.soft { color: var(--amber); font-weight: 700; }
.mp-tabs { margin-bottom: 12px; }
.mprev { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; max-width: 380px; }
.mp-head { display: flex; gap: 10px; align-items: center; padding: 12px 12px 8px; }
.mp-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #0866FF, #7A3CF0); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.mprev.ig .mp-av { background: linear-gradient(135deg, #FEDA75, #D62976 55%, #4F5BD5); }
.mp-head b { display: block; font-size: .88rem; color: #050505; } .mp-head small { color: #65676B; font-size: .74rem; }
.mp-text { padding: 0 12px 10px; margin: 0; font-size: .86rem; color: #050505; white-space: pre-line; line-height: 1.4; }
.mprev.ig .mp-text { padding-top: 10px; }
.mp-more { color: #65676B; font-weight: 600; }
.mp-media { aspect-ratio: 1 / 1; background: repeating-linear-gradient(45deg, #EEF3FF, #EEF3FF 12px, #E3EBFF 12px, #E3EBFF 24px); display: grid; place-items: center; color: #5A6B95; font-size: .8rem; font-weight: 600; }
.mp-media.reel, .mp-media.video { aspect-ratio: 4 / 5; }
.mp-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; background: #F0F2F5; }
.mprev.ig .mp-foot { background: #fff; border-bottom: 1px solid #EFEFEF; }
.mp-foot small { display: block; color: #65676B; font-size: .7rem; } .mp-foot b { font-size: .9rem; color: #050505; }
.mp-cta { background: #E4E6EB; color: #050505; font-weight: 600; font-size: .8rem; padding: 7px 12px; border-radius: 6px; white-space: nowrap; }
.mprev.ig .mp-cta { background: var(--meta-ink); color: #fff; }
.mp-reel { aspect-ratio: 9 / 16; max-height: 520px; background: linear-gradient(180deg, #3a3f63 0%, #11131f 100%); color: #fff; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; }
.mp-reel .mp-sp { position: absolute; top: 12px; left: 14px; font-size: .74rem; opacity: .85; }
.mp-reel-bottom b { display: flex; gap: 8px; align-items: center; font-size: .86rem; } .mp-reel-bottom p { font-size: .82rem; margin: 6px 0 10px; opacity: .92; }
.mp-reel .mp-cta { display: block; text-align: center; background: rgba(255,255,255,.92); }
.lf-prev { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; max-width: 360px; }
.lf-top { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .lf-top b { font-size: .88rem; }
.lf-prev h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.lf-field { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; } .lf-field small { display: block; color: var(--muted); font-size: .72rem; } .lf-field span { font-size: .84rem; }
.lf-priv { font-size: .72rem; color: var(--muted); margin: 8px 0; }
.lf-btn { display: block; text-align: center; background: var(--meta-ink); color: #fff; border-radius: 8px; padding: 9px; font-weight: 600; }
.wa-prev { margin-top: 12px; background: #EFE7DD; border-radius: 12px; padding: 12px; display: grid; gap: 6px; max-width: 360px; font-size: .84rem; }
.wa-in { justify-self: end; background: #D9FDD3; padding: 7px 10px; border-radius: 8px; max-width: 85%; }
.wa-out { background: #fff; padding: 7px 10px; border-radius: 8px; max-width: 85%; }
.wa-qr { display: flex; gap: 6px; flex-wrap: wrap; } .wa-qr span { background: #fff; color: #00A884; border-radius: 99px; padding: 4px 10px; font-weight: 600; font-size: .78rem; }
.access-box { margin-top: 12px; background: var(--mint); border-radius: 10px; padding: 12px 14px; } .access-box b { display: flex; gap: 6px; align-items: center; color: var(--mint-ink); } .access-box pre { background: #fff; border: 0; margin: 8px 0; } .assign-site h3 { display: flex; gap: 8px; align-items: center; }

/* v14 — 12 numbered steps per part, sub-steps, logo */
.nav-link { min-height: 40px; height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; }
.step-no .icon { width: 13px !important; height: 13px !important; color: inherit !important; }
.step-no.ic { border-color: transparent; }
.nav-link.done .step-no.ic, .nav-link.active .step-no.ic { border-color: var(--green); }
.nav-link.nav-sub { padding-left: 44px; font-size: .86rem; min-height: 34px; color: var(--muted); }
.nav-link.nav-sub .step-no { width: 16px; height: 16px; font-size: 0; border-width: 1.5px; }
.nav-link.nav-sub .step-no::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.nav-link.nav-sub.locked .step-no::after { display: none; }
.nav-link.nav-sub.locked .step-no { font-size: .6rem; }
.step-badge .icon { width: 22px; height: 22px; }
.step-head .eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.logo-img { object-fit: contain; }
.brand { align-items: center; }
.step-nav .btn { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; text-align: left; }
@media (max-width: 640px) { .step-nav { flex-direction: column-reverse; align-items: stretch; gap: 8px; } .step-nav .btn { justify-content: center; text-align: center; } }

/* v16 — task videos (YouTube or uploaded), admin video library */
.vids { display: grid; gap: 12px; margin-bottom: 14px; }
.vids.many { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
.vid-stage { min-width: 0; }
.vid-item[hidden] { display: none; }
.vid-yt, .vid-frame, .vid-file { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #0D0D0D; }
.vid-yt { position: relative; cursor: pointer; background-size: cover; background-position: center; padding: 0; }
.vid-yt::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: rgba(13,13,13,.18); transition: background .15s; }
.vid-yt:hover::after { background: rgba(13,13,13,.05); }
.vid-play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 14px; background: #FF0033; color: #fff; display: grid; place-items: center; }
.vid-file { object-fit: contain; }
.vid-cap { padding: 8px 2px 0; }
.vid-cap b { font-size: .98rem; }
.vid-cap p { margin: 4px 0 0; font-size: .88rem; color: var(--muted); }
.vid-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.vid-list button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; color: var(--ink); }
.vid-list button:hover { border-color: var(--quiet); }
.vid-list button.on { border-color: var(--ink); background: var(--blue-50); }
.vl-n { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.vl-n .icon { width: 14px; height: 14px; color: var(--green); }
.vl-t { font-size: .88rem; line-height: 1.3; min-width: 0; } .vl-t small { display: block; color: var(--muted); font-size: .74rem; }
.tstep.has-vids .tstep-b { display: block; }
@media (max-width: 900px) { .vids.many { grid-template-columns: 1fr; } .vid-list { max-height: none; } }
/* admin */
.video-admin { border: 1px dashed var(--line); border-radius: 12px; padding: 14px; background: #FAFBFC; }
.video-admin .step-lab .sn .icon { width: 13px; height: 13px; }
.vid-admin-list { display: grid; gap: 6px; margin-bottom: 12px; }
.va-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.va-ord { display: flex; align-items: center; gap: 6px; } .va-ord input { width: 70px; }
.va-add { display: grid; gap: 12px; }
.va-yt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; margin-top: 6px; }
.va-src { display: inline-block; font-size: .68rem; font-weight: 700; border-radius: 5px; padding: 2px 6px; vertical-align: middle; }
.va-src.youtube { background: #FFE5E9; color: #C4002B; } .va-src.file { background: var(--blue-50); color: var(--blue-700); }
.vid-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vid-edit-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.vtask-pick details { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; background: #fff; }
.vtask-pick summary { cursor: pointer; }
.vthumb { width: 112px; height: 63px; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-2); }
.vthumb.file { display: grid; place-items: center; color: var(--muted); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.text-red { color: var(--red); }
@media (max-width: 800px) { .vid-add-grid, .vid-edit-grid, .va-yt { grid-template-columns: 1fr; } }
.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bk-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
@media (max-width: 900px) { .bk-grid { grid-template-columns: 1fr; } }
.sb-follow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.soc { display: flex; gap: 6px; flex-wrap: wrap; }
.soc-a { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; text-decoration: none; }
.soc-a .soc-ic { width: 14px; height: 14px; }
.soc-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.soc-facebook { background: #1877F2; } .soc-linkedin { background: #0A66C2; } .soc-youtube { background: #FF0000; } .soc-whatsapp { background: #25D366; }
.founder-card { border: 1px solid var(--line); }
.founder-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.founder-empty { aspect-ratio: 16 / 9; border: 1px dashed var(--line); border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.founder-empty .icon { width: 30px; height: 30px; }
.fvid { margin: 0; }
.fvid-yt, .fvid video, .fvid-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #0B1F4B center / cover no-repeat; position: relative; cursor: pointer; padding: 0; }
.fvid-portrait .fvid-yt, .fvid-portrait video { aspect-ratio: 9 / 16; max-height: 420px; width: auto; }
.fvid-square .fvid-yt, .fvid-square video { aspect-ratio: 1 / 1; }
.fvid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: #FF0033; display: grid; place-items: center; }
.fvid-cta { position: absolute; left: 12px; bottom: 10px; color: #fff; font-weight: 700; font-size: .85rem; }
.fvid figcaption { font-size: .82rem; color: var(--muted); margin-top: 8px; }
@media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr; } }
.review-page { max-width: 760px; }
.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label { font-size: 2rem; line-height: 1; color: #D5DBDE; cursor: pointer; }
.star-pick input:checked ~ label, .star-pick label:hover, .star-pick label:hover ~ label { color: #F5A623; }
.star-pick input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.my-review { margin: 12px 0 0; padding: 14px 16px; background: var(--surface-2); border-radius: 10px; color: var(--ink); }
.my-review { font-size: .95rem; } .my-review small { color: var(--muted); }
.review-nudge { display: flex; align-items: center; gap: 14px; background: #FFF8E6; border: 1px solid #F5D78E; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.review-nudge > div { flex: 1; } .review-nudge small { display: block; color: var(--muted); }
.rn-stars { color: #F5A623; letter-spacing: 2px; }
@media (max-width: 600px) { .review-nudge { flex-wrap: wrap; } }
/* bulk upload */
.bulk-opts { display: grid; gap: 8px; margin: 6px 0 4px; }
.bulk-opts .check { align-items: flex-start; } .bulk-opts small { display: block; }
.bulk-table td { vertical-align: top; }
.bulk-table tr.row-new { background: #F4F8FF; }
.bulk-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.bulk-stats div { background: var(--surface-2); border-radius: 10px; padding: 12px; } .bulk-stats b { display: block; font-size: 1.5rem; } .bulk-stats span { font-size: .8rem; color: var(--muted); }
.bulk-guide-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.bulk-tree { background: #0D0D0D; color: #E6EDEF; border-radius: 12px; padding: 16px; font-size: .8rem; line-height: 1.55; overflow-x: auto; margin: 0; }
@media (max-width: 900px) { .bulk-guide-grid { grid-template-columns: 1fr; } .bulk-stats { grid-template-columns: repeat(3, 1fr); } }
.bulk-step2 { display: flex; gap: 12px; align-items: flex-start; background: #FFF4E0; border: 1px solid #F5C77A; color: #5B3B00; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.bulk-step2 .icon { width: 20px; height: 20px; flex: none; color: #B76A00; }