/* Comment Agent — panel.  Rang: berry glaze + pistachio, kaghazi order-tickets. */
:root {
  --bg: #EEF1EA;
  --paper: #FFFFFF;
  --ink: #2A1E26;
  --ink-2: #625764;
  --line: #D8DCD0;
  --line-strong: #B9BEAF;
  --berry: #A8325A;
  --berry-hover: #8E2649;
  --berry-bg: #F6DDE5;
  --berry-ink: #8A2449;
  --pista-bg: #E3ECD5;
  --pista-ink: #43601F;
  --butter-bg: #F8EBC2;
  --butter-ink: #6B5310;
  --sky-bg: #DFE8EF;
  --sky-ink: #2F5470;
  --muted-bg: #ECEBEA;
  --c1: #7A54A0;
  --c2: #5E7F32;
  --c3: #C0761A;
  --focus: #2F6FA8;
  --shadow: 0 1px 0 rgba(42, 30, 38, .06);
  --glow: 0 10px 30px -18px rgba(168, 50, 90, .45);
  --radius: 10px;
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  --urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;
  color-scheme: light;
}

/* Theme: Auto (computer ki setting) / Light / Dark — data-theme <html> pe lagta hai */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141114; --paper: #1F1A1E; --ink: #F1E9EE; --ink-2: #B4A9B1; --line: #352D33; --line-strong: #514650;
    --berry: #E0719A; --berry-hover: #EC8DAE; --berry-bg: #45202F; --berry-ink: #F6B3CA;
    --pista-bg: #27341C; --pista-ink: #B6D48C; --butter-bg: #3D331A; --butter-ink: #EDD38F;
    --sky-bg: #1C2D3B; --sky-ink: #A9C8E0; --muted-bg: #2A2429;
    --c1: #A887CC; --c2: #86A853; --c3: #E5A14F; --focus: #8CC0F0;
    --shadow: 0 1px 0 rgba(0,0,0,.4); --glow: 0 10px 30px -18px rgba(224,113,154,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #141114; --paper: #1F1A1E; --ink: #F1E9EE; --ink-2: #B4A9B1; --line: #352D33; --line-strong: #514650;
    --berry: #E0719A; --berry-hover: #EC8DAE; --berry-bg: #45202F; --berry-ink: #F6B3CA;
    --pista-bg: #27341C; --pista-ink: #B6D48C; --butter-bg: #3D331A; --butter-ink: #EDD38F;
    --sky-bg: #1C2D3B; --sky-ink: #A9C8E0; --muted-bg: #2A2429;
    --c1: #A887CC; --c2: #86A853; --c3: #E5A14F; --focus: #8CC0F0;
    --shadow: 0 1px 0 rgba(0,0,0,.4); --glow: 0 10px 30px -18px rgba(224,113,154,.55);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font);
}
a { color: var(--sky-ink); text-underline-offset: 2px; }
a:hover { color: var(--berry); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: 1.75rem; margin: 0 0 .25rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.02rem; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; max-width: 72ch; }
small, .quiet { color: var(--ink-2); }
.quiet { font-size: .92rem; }
code { font-size: .9em; background: var(--muted-bg); padding: 1px 5px; border-radius: 4px; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh;
  background: linear-gradient(to right, var(--paper) 235px, var(--line) 235px, var(--line) 236px, transparent 236px); }
.side {
  background: var(--paper); border-right: 1px solid var(--line); padding: 20px 14px; align-self: start;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand-mark { font-family: var(--display); font-weight: 700; font-size: 1.15rem; padding: 0 10px 16px; }
.brand-mark span { display: block; font-family: var(--font); font-weight: 400; font-size: .82rem; color: var(--ink-2); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .96rem;
}
.nav a:hover { background: var(--muted-bg); color: var(--ink); }
.nav a.on { background: var(--berry-bg); color: var(--berry-ink); font-weight: 700; }
.nav .sep { height: 1px; background: var(--line); margin: 10px 6px; }
.badge {
  min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--berry); color: #fff;
  font-size: .78rem; font-weight: 700; text-align: center; line-height: 20px;
}
.badge.soft { background: var(--butter-bg); color: var(--butter-ink); }
main { padding: 24px 32px 64px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; }
.live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c2); }
.live.stopped::before { background: var(--berry); }
.banner {
  background: var(--butter-bg); color: var(--butter-ink); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px; font-size: .95rem;
}
.banner.berry { background: var(--berry-bg); color: var(--berry-ink); }
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 10px; background: var(--pista-bg); color: var(--pista-ink); }
.flash.warn { background: var(--berry-bg); color: var(--berry-ink); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; background: none; }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .brand-mark { padding: 0 4px 8px; }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .nav a { white-space: nowrap; }
  .nav .sep { display: none; }
  main { padding: 16px 16px 48px; }
}

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 .95rem/1 var(--font); padding: 10px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-2); color: var(--ink); }
.btn.primary { background: var(--berry); border-color: var(--berry); color: #fff; }
.btn.primary:hover { background: var(--berry-hover); border-color: var(--berry-hover); color: #fff; }
.btn.quiet-btn { border-color: transparent; background: transparent; color: var(--ink-2); padding: 10px 8px; }
.btn.quiet-btn:hover { color: var(--berry); }
.btn.small { padding: 7px 11px; font-size: .88rem; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; }
label { display: block; font-weight: 700; font-size: .93rem; margin: 0 0 6px; }
label .hint { font-weight: 400; color: var(--ink-2); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 6px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--berry); }
.field { margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 14px; }

/* ---------- pills ---------- */
.pill { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--muted-bg); color: var(--ink-2); }
.pill.done { background: var(--pista-bg); color: var(--pista-ink); }
.pill.wait { background: var(--butter-bg); color: var(--butter-ink); }
.pill.alert { background: var(--berry-bg); color: var(--berry-ink); }
.pill.info { background: var(--sky-bg); color: var(--sky-ink); }

/* ---------- aaj ka strip ---------- */
.ledger { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ledger div { padding: 16px 18px; border-left: 1px solid var(--line); }
.ledger div:first-child { border-left: 0; }
.ledger b { display: block; font: 700 2.1rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ledger span { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 900px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger div { border-left: 0; border-top: 1px solid var(--line); }
  .ledger div:nth-child(-n+2) { border-top: 0; }
  .ledger div:nth-child(even) { border-left: 1px solid var(--line); }
}

/* ---------- tickets (sawal, manzoori, shikayat) ---------- */
.rail { border-top: 3px solid var(--line-strong); padding-top: 18px; margin-top: 8px; display: grid; gap: 18px; }
.ticket {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 6px 6px var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.ticket::before { /* clip jis se ticket rail pe latka hai */
  content: ""; position: absolute; top: -21px; left: 28px; width: 34px; height: 14px;
  border: 3px solid var(--line-strong); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.ticket .t-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px 0; color: var(--ink-2); font-size: .9rem; }
.ticket .t-head strong { color: var(--ink); font-size: 1rem; }
.ticket .t-body { padding: 10px 18px 16px; }
.ticket .said { font-size: 1.12rem; line-height: 1.5; margin: 4px 0 8px; }
.ticket .tear {
  position: relative; border-top: 2px dashed var(--line-strong); margin: 0 14px;
}
.ticket .tear::before, .ticket .tear::after {
  content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
}
.ticket .tear::before { left: -24px; clip-path: inset(0 0 0 50%); }
.ticket .tear::after { right: -24px; clip-path: inset(0 50% 0 0); }
.ticket .t-foot { padding: 16px 18px 18px; }
.ticket.complaint { border-left: 4px solid var(--berry); }
.reply-box { background: var(--muted-bg); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.reply-box .who { font-size: .82rem; color: var(--ink-2); display: block; margin-bottom: 2px; }
.meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.empty { padding: 40px 18px; text-align: center; color: var(--ink-2); }
.empty strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.15rem; margin-bottom: 4px; }

/* Urdu script: Nastaliq, right-to-left */
.ur { font-family: var(--urdu); direction: rtl; text-align: right; line-height: 2.1; }

/* ---------- attention stubs ---------- */
.stubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 6px; }
.stub {
  display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px;
}
.stub:hover { border-color: var(--berry); color: var(--ink); }
.stub b { font: 700 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.stub.hot b { color: var(--berry); }
@media (max-width: 700px) { .stubs { grid-template-columns: 1fr; } }

/* ---------- 7 din ka chart ---------- */
.chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 190px; padding: 6px 4px 0; border-bottom: 1px solid var(--line-strong); }
.chart .day { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 100%; position: relative; }
.chart .bar { width: min(22px, 40%); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart .bar.c1 { background: var(--c1); }
.chart .bar.c2 { background: var(--c2); }
.chart .bar.c3 { background: var(--c3); }
.chart .day:has(.c3) .bar { width: min(14px, 30%); }
/* ---------- report ---------- */
.split { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--muted-bg); }
.split .s-ai { background: var(--c2); } .split .s-team { background: var(--c3); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.dot.c2 { background: var(--c2); } .dot.c3 { background: var(--c3); }
.big { font: 700 1.8rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.sat-good { color: var(--pista-ink); } .sat-mid { color: var(--butter-ink); } .sat-low { color: var(--berry-ink); }
svg.growth { width: 100%; height: 120px; margin-top: 14px; overflow: visible; }
.chart .day:hover .bar { filter: brightness(1.08); }
.chart .tip {
  display: none; position: absolute; bottom: calc(100% - 30px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); font-size: .8rem; padding: 6px 9px; border-radius: 6px; white-space: nowrap; z-index: 2;
}
.chart .day:hover .tip, .chart .day:focus-within .tip, .chart .day:focus .tip { display: block; }
.chart-x { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; text-align: center; font-size: .82rem; color: var(--ink-2); padding-top: 6px; }
.legend { display: flex; gap: 16px; font-size: .88rem; color: var(--ink-2); margin-bottom: 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; color: var(--ink-2); font-size: .85rem; background: var(--paper); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.clip { max-width: 360px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filters > * { flex: 1 1 160px; }
.filters .btn { flex: 0 0 auto; }

/* ---------- memory ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
  font: 600 .95rem var(--font); background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--ink-2);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs button[aria-selected=true] { color: var(--berry-ink); border-bottom-color: var(--berry); }
.tabpanel[hidden] { display: none; }
.mem-row .q { font-weight: 700; }
.mem-row .a { margin: 2px 0 6px; }
pre.format { background: var(--muted-bg); padding: 10px 12px; border-radius: 8px; font-size: .88rem; white-space: pre-wrap; margin: 0 0 12px; }

/* ---------- test ---------- */
.verdict { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.verdict.auto { background: var(--pista-bg); color: var(--pista-ink); }
.verdict.approval, .verdict.pending { background: var(--butter-bg); color: var(--butter-ink); }
.verdict.complaint, .verdict.flag { background: var(--berry-bg); color: var(--berry-ink); }
.verdict.like, .verdict.ignore { background: var(--muted-bg); color: var(--ink-2); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; font-size: .95rem; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(380px, 100%); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* ================= smart look ================= */
body { transition: background-color .25s ease, color .25s ease; }
.panel, .ledger, .stub, .insight { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .25s ease; }
.stub:hover, .insight.link:hover { transform: translateY(-2px); box-shadow: var(--glow); }
main > * { animation: rise .35s ease both; }
main > *:nth-child(2) { animation-delay: .04s; } main > *:nth-child(3) { animation-delay: .08s; }
main > *:nth-child(4) { animation-delay: .12s; } main > *:nth-child(5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main > * { animation: none; } * { transition: none !important; } }

/* brand */
.brand-mark { display: flex; gap: 10px; align-items: center; }
.brand-mark .logo { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--berry), var(--c1)); color: #fff; box-shadow: var(--glow); }
.brand-mark .logo svg { width: 19px; height: 19px; }
.brand-mark .txt { display: block; }

/* nav icons */
.nav a .lbl { display: inline-flex; align-items: center; gap: 10px; }
.nav a svg.ico { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.nav a.on svg.ico, .nav a:hover svg.ico { opacity: 1; }
.nav a.on { box-shadow: inset 3px 0 0 var(--berry); }

/* sidebar footer: theme switch */
.side { display: flex; flex-direction: column; }
.side-foot { margin-top: auto; padding: 14px 6px 4px; }
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 10px;
  background: var(--muted-bg); border: 1px solid var(--line); }
.theme-switch button { all: unset; cursor: pointer; text-align: center; font-size: .78rem; font-weight: 700; padding: 6px 0;
  border-radius: 8px; color: var(--ink-2); display: inline-flex; gap: 5px; justify-content: center; align-items: center; }
.theme-switch button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.theme-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.theme-switch button:focus-visible { outline: 2px solid var(--focus); }
.side-foot .hint { display: block; font-size: .75rem; color: var(--ink-2); margin: 6px 4px 0; }

/* live dot pulse */
.live::before { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c2) 60%, transparent); animation: pulse 2s infinite; }
.live.stopped::before { animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* greeting */
.hello { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hello h1 { margin: 0; }
.clock { font: 600 1rem/1 var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums;
  padding: 5px 10px; border-radius: 999px; background: var(--muted-bg); }

/* KPI deltas */
.ledger div { position: relative; }
.delta { display: inline-block; margin-left: 6px; font: 700 .78rem/1 var(--font); padding: 3px 6px; border-radius: 999px; vertical-align: middle; }
.delta.up { background: var(--pista-bg); color: var(--pista-ink); }
.delta.down { background: var(--berry-bg); color: var(--berry-ink); }
.delta.flat { background: var(--muted-bg); color: var(--ink-2); }
.ledger b { display: inline-block; }
.ledger .sub { display: block; font-size: .78rem; color: var(--ink-2); margin-top: 2px; }

/* smart insights */
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 6px; }
.insight { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.insight .ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sky-bg); color: var(--sky-ink); }
.insight .ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.insight.good .ic { background: var(--pista-bg); color: var(--pista-ink); }
.insight.warn .ic { background: var(--butter-bg); color: var(--butter-ink); }
.insight.bad .ic { background: var(--berry-bg); color: var(--berry-ink); }
.insight strong { display: block; font-size: .98rem; line-height: 1.3; }
.insight span { display: block; font-size: .84rem; color: var(--ink-2); margin-top: 2px; }
.insight.link:hover { border-color: var(--berry); color: var(--ink); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-title small a { font-weight: 700; }
.brand-mark .txt { font: 700 1.08rem/1.15 var(--display); color: var(--ink); }
.brand-mark .txt span { display: block; font: 400 .78rem/1.3 var(--font); color: var(--ink-2); margin-top: 2px; }
.brand-mark .logo { font-size: 0; }
.ledger > div > span:not(.delta) { display: block; }
.ledger > div > span:not(.delta):not(.sub) { margin-top: 4px; }
.nav a .lbl { line-height: 1.25; }

/* ================= v3: team, tasks, events ================= */
:root { --plum: #7A54A0; --plum-bg: #ECE3F5; --teal: #2C7A73; --teal-bg: #D9EEEA; --amber: #A86A12; --amber-bg: #FBEFD5;
  --olive: #4F6F22; --olive-bg: #E3ECD5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --plum: #C3A6E6; --plum-bg: #33264A; --teal: #86D1C8; --teal-bg: #173A36; --amber: #EDC37A; --amber-bg: #3D2F15;
  --olive: #B6D48C; --olive-bg: #27341C; } }
:root[data-theme="dark"] { --plum: #C3A6E6; --plum-bg: #33264A; --teal: #86D1C8; --teal-bg: #173A36; --amber: #EDC37A;
  --amber-bg: #3D2F15; --olive: #B6D48C; --olive-bg: #27341C; }

.nav .grp { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
  padding: 14px 10px 4px; opacity: .85; }
@media (max-width: 900px) { .nav .grp { display: none; } }

.bell { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.bell svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell i { position: absolute; top: -6px; right: -6px; font-style: normal; background: var(--berry); color: #fff; font-size: .7rem;
  font-weight: 700; border-radius: 999px; padding: 1px 6px; line-height: 16px; }
.bell.on, .bell:hover { border-color: var(--berry); color: var(--berry-ink); }
.me-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 700;
  font-size: .9rem; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 4px 12px 4px 5px; }
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700;
  font-size: .8rem; background: var(--berry); flex: 0 0 auto; }
.av.sm { width: 20px; height: 20px; font-size: .62rem; }
.av.lg { width: 40px; height: 40px; font-size: 1rem; }
.c-berry { background: var(--berry); } .c-plum { background: var(--plum); } .c-teal { background: var(--teal); }
.c-sky { background: var(--sky-ink); } .c-amber { background: var(--amber); } .c-olive { background: var(--olive); }
.c-muted { background: var(--ink-2); }

/* segmented control (Hidden / View only / Can act) */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg label { margin: 0; font-weight: 600; font-size: .82rem; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 5px 10px; color: var(--ink-2); border-left: 1px solid var(--line); }
.seg label:first-child span { border-left: 0; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:checked + span.v { background: var(--sky-ink); color: var(--paper); }
.seg input:checked + span.a { background: var(--pista-ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }

/* team */
.team-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: 1fr; } }
.people a { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.people a:hover { background: var(--muted-bg); color: var(--ink); }
.people a.on { background: var(--berry-bg); }
.people .sub { display: block; font-size: .8rem; color: var(--ink-2); }
.people .right { margin-left: auto; font-size: .78rem; color: var(--ink-2); text-align: right; }
.people .off { opacity: .55; }
.acc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.tag-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--berry-ink); margin-bottom: 4px; }
.sec-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sec-row:last-child { border-bottom: 0; }
.sec-row small { display: block; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }

/* tasks */
.cal-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cal-head h2 { margin: 0; font-size: 1.15rem; }
.tabs-inline { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--paper); }
.tabs-inline a { padding: 6px 12px; font-size: .88rem; font-weight: 600; color: var(--ink-2); text-decoration: none; border-left: 1px solid var(--line); }
.tabs-inline a:first-child { border-left: 0; }
.tabs-inline a.on { background: var(--ink); color: var(--paper); }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: 1fr; } }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .week { grid-template-columns: 1fr; } }
.wd { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 220px; min-width: 0; }
.wd.today { border-color: var(--berry); box-shadow: 0 0 0 1px var(--berry); }
.wd h4 { margin: 0 0 6px; font: 700 .75rem/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: baseline; }
.wd h4 b { font: 700 1rem var(--display); color: var(--ink); letter-spacing: 0; }
.tk { display: block; text-decoration: none; color: var(--ink); border-radius: 8px; padding: 7px 8px; margin-bottom: 6px;
  font-size: .82rem; line-height: 1.3; border-left: 3px solid var(--line-strong); background: var(--muted-bg); }
.tk:hover { color: var(--ink); filter: brightness(.98); }
.tk b { display: block; font-size: .85rem; margin-bottom: 3px; overflow-wrap: anywhere; }
.tk .row { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: .74rem; }
.tk.done b { text-decoration: line-through; opacity: .6; }
.tk.t-berry { background: var(--berry-bg); border-color: var(--berry); } .tk.t-plum { background: var(--plum-bg); border-color: var(--plum); }
.tk.t-teal { background: var(--teal-bg); border-color: var(--teal); } .tk.t-sky { background: var(--sky-bg); border-color: var(--sky-ink); }
.tk.t-amber { background: var(--amber-bg); border-color: var(--amber); } .tk.t-olive { background: var(--olive-bg); border-color: var(--olive); }
.st { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--paper); color: var(--ink-2); }
.st.done { color: var(--pista-ink); } .st.doing { color: var(--sky-ink); } .st.review { color: var(--butter-ink); } .st.late { color: var(--berry-ink); }
.dayev { font-size: .7rem; font-weight: 700; color: var(--teal); margin-bottom: 4px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dayev.own { color: var(--berry-ink); }
.bar { height: 8px; border-radius: 999px; background: var(--muted-bg); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--c2); border-radius: 999px; }

/* month calendar */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  background: var(--paper); border-radius: 10px; overflow: hidden; }
.month > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 104px; padding: 6px; font-size: .8rem; min-width: 0; }
.month > .h { min-height: 0; background: var(--muted-bg); font-weight: 700; color: var(--ink-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.month > .out { background: var(--bg); color: var(--ink-2); }
.month > .today { box-shadow: inset 0 0 0 2px var(--berry); }
.month > .sel { background: var(--berry-bg); }
.month .dn { font-weight: 700; display: block; margin-bottom: 4px; text-decoration: none; color: inherit; }
.ev { display: block; border-radius: 5px; padding: 2px 6px; margin-bottom: 3px; font-weight: 600; font-size: .72rem; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: var(--ink); background: var(--muted-bg); }
.ev.cat-baking, .ev.cat-cakes { background: var(--teal-bg); color: var(--teal); }
.ev.cat-cafe { background: var(--plum-bg); color: var(--plum); }
.ev.cat-dairy { background: var(--sky-bg); color: var(--sky-ink); }
.ev.cat-healthy, .ev.cat-national { background: var(--olive-bg); color: var(--olive); }
.ev.cat-festival { background: var(--amber-bg); color: var(--amber); }
.ev.cat-sale { background: var(--berry-bg); color: var(--berry-ink); }
.ev.cat-islamic { background: var(--pista-bg); color: var(--pista-ink); }
.ev.own { background: var(--berry); color: #fff; }
.ev.own.k-plum { background: var(--plum); } .ev.own.k-teal { background: var(--teal); } .ev.own.k-sky { background: var(--sky-ink); }
.ev.own.k-amber { background: var(--amber); } .ev.own.k-olive { background: var(--olive); }
@media (max-width: 700px) { .month > div { min-height: 64px; padding: 3px; } .ev { font-size: .62rem; padding: 1px 3px; } }
.idea { background: var(--muted-bg); border-radius: 9px; padding: 10px 12px; margin-top: 8px; }
.idea .cap { color: var(--ink-2); font-size: .88rem; margin-top: 4px; }
.ai-card { background: linear-gradient(135deg, var(--berry-bg), var(--plum-bg)); border: 0; }
.mini-list > div { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.mini-list > div:first-child { border-top: 0; }
.items-table input, .items-table select { padding: 6px 8px; }
.notif { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.notif:hover { background: var(--muted-bg); color: var(--ink); }
.notif.unread { background: var(--berry-bg); }
.notif .when { margin-left: auto; color: var(--ink-2); font-size: .8rem; white-space: nowrap; }
.kind-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--ink-2); }
.k-task { background: var(--plum); } .k-reminder, .k-complaint { background: var(--berry); } .k-lead { background: var(--c3); }
.k-health, .k-security { background: var(--berry-hover); } .k-event { background: var(--teal); } .k-report { background: var(--c2); }
.reply-out { background: var(--paper); border-radius: 10px; padding: 12px 14px; font-size: 1.02rem; line-height: 1.6; white-space: pre-wrap; }
.repeat-note { font-size: .82rem; background: var(--sky-bg); color: var(--sky-ink); border-radius: 8px; padding: 6px 10px; margin: 6px 0; display: inline-block; }

.grid2 > .panel + .panel, .grid3 > .panel + .panel, .team-grid .panel + .panel { margin-top: 0; }
.team-grid > div > .panel + .panel, .team-grid > div > form + .panel { margin-top: 14px; }
.nav a { padding: 7px 10px; }

/* High alert (raat ke sawal) */
.ticket.urgent { border: 2px solid var(--berry); box-shadow: 0 0 0 3px var(--berry-bg); }
.urgent-bar { background: var(--berry); color: #fff; font-weight: 700; font-size: .85rem; padding: 7px 18px; border-radius: 4px 4px 0 0; letter-spacing: .02em; }
.badge.urgent { background: var(--berry); animation: pulse-b 1.6s infinite; }
@keyframes pulse-b { 50% { box-shadow: 0 0 0 5px var(--berry-bg); } }
.k-urgent { background: var(--berry); box-shadow: 0 0 0 3px var(--berry-bg); }
@media (prefers-reduced-motion: reduce) { .badge.urgent { animation: none; } }

/* Logo: panel ke naam ka pehla harf (har company ke naam ke saath khud badal jata hai) */
.brand-mark .logo.mono { font: 800 1.15rem/1 var(--display); color: #fff; letter-spacing: -.02em; }

.badge { white-space: nowrap; }

/* ---- Paid Ads ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.steps-list { margin: 8px 0 0; padding-left: 22px; line-height: 1.7; }
.advice { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--line-strong); background: var(--muted-bg); margin-bottom: 8px; }
.advice span { color: var(--ink-2); font-size: .92rem; }
.advice.bad { border-left-color: var(--berry-ink); background: var(--berry-bg); }
.advice.warn { border-left-color: var(--butter-ink); background: var(--butter-bg); }
.advice.good { border-left-color: var(--pista-ink); background: var(--pista-bg); }
.ticket .t-foot.advice { margin: 0 18px 16px; }
.pace { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.pace:last-of-type { border-bottom: 0; }
.pace-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pace-top span { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pace-bar { position: relative; height: 10px; border-radius: 999px; background: var(--muted-bg); overflow: visible; }
.pace-bar span { display: block; height: 100%; border-radius: 999px; background: var(--pista-ink); }
.pace-bar span.over { background: var(--berry-ink); }
.pace-bar span.under { background: var(--butter-ink); }
.pace-bar i { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); }
.pace-in { max-width: 220px; }
.ad-body { display: flex; gap: 14px; align-items: flex-start; }
.ad-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); flex: none; }
.ad-nums { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 18px 14px; border: 1px solid var(--line); border-radius: 10px; }
.ad-nums div { padding: 8px 12px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.ad-nums div:nth-child(4n+1) { border-left: 0; }
.ad-nums div:nth-child(-n+4) { border-top: 0; }
.ad-nums dt { font-size: .78rem; color: var(--ink-2); }
.ad-nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .ad-nums { grid-template-columns: repeat(2, 1fr); }
  .ad-nums div { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .ad-nums div:nth-child(-n+2) { border-top: 0 !important; }
  .ad-nums div:nth-child(2n) { border-left: 1px solid var(--line) !important; }
}
.res-list { list-style: none; margin: 0; padding: 0; }
.res-list li { color: var(--ink-2); font-size: .9rem; }
.res-list li b { display: inline; font: 700 1.35rem/1.25 var(--display); color: var(--ink); }

/* ---- YouTube Studio ---- */
.chg { font-size: .78rem; font-weight: 700; line-height: 1; font-family: inherit; padding: 3px 7px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.ledger b .chg { font-size: .9rem; }
.chg.up { background: var(--pista-bg); color: var(--pista-ink); }
.chg.down { background: var(--berry-bg); color: var(--berry-ink); }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--berry-ink); margin: 0 0 6px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.yt-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.yt-side { display: grid; gap: 16px; }
.yt-side .panel + .panel { margin-top: 0; }
.yt-table td { vertical-align: middle; }
.yt-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yt-vid { display: flex; gap: 12px; align-items: center; min-width: 260px; }
.yt-vid img, .yt-ph { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; background: var(--muted-bg); display: grid; place-items: center; color: var(--ink-2); }
.yt-vid small { display: block; margin-top: 2px; }
.tipline { color: var(--berry-ink); }
.dem { margin: 10px 0; }
.dem-top { display: flex; justify-content: space-between; gap: 8px; }
.dem-top span { color: var(--ink-2); font-size: .9rem; white-space: nowrap; }
.dem-bar { height: 8px; border-radius: 999px; background: var(--muted-bg); margin: 5px 0 2px; }
.dem-bar span { display: block; height: 100%; border-radius: 999px; background: var(--berry); }
.yt-next { background: var(--berry-bg); border-color: transparent; }
.yt-task { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.yt-task select { width: auto; flex: 1; min-width: 140px; }
@media (max-width: 1000px) { .yt-grid { grid-template-columns: 1fr; } }
.stubs.growth { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stub .sub { display: block; font-size: .82rem; color: var(--ink-2); }
.stubs.growth .stub { flex-wrap: wrap; row-gap: 4px; }
.stubs.growth .stub .sub { flex-basis: 100%; }
.yt-table td:first-child { width: 62%; }
.yt-vid { min-width: 300px; }
.yt-vid a b { font-weight: 700; }
.yt-vid a { text-decoration: none; color: var(--ink); }
.yt-vid a:hover { text-decoration: underline; }
.yt-table { table-layout: fixed; }
.yt-table th:nth-child(2), .yt-table th:nth-child(3), .yt-table th:nth-child(4) { width: 76px; }
.yt-table th:nth-child(5) { width: 112px; }
.yt-table td:first-child, .yt-table th:first-child { width: auto; }
.yt-vid { min-width: 0; }
.yt-vid > div { min-width: 0; }
@media (max-width: 700px) { .yt-table th:nth-child(3), .yt-table td:nth-child(3), .yt-table th:nth-child(4), .yt-table td:nth-child(4) { display: none; } .yt-vid img, .yt-ph { width: 64px; height: 36px; } }
.yt-connect { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; }
.yt-connect > div { display: grid; gap: 2px; max-width: 900px; }
.dem-src { margin: 4px 0 8px; }
.dem-src a { font-size: .85rem; padding: 4px 10px; }

/* ---- task proof / check ---- */
.proof, .verify, .finish { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 12px; display: grid; gap: 6px; background: var(--paper); }
.verify { border-color: var(--butter-ink); background: var(--butter-bg); }
.finish textarea, .verify input { width: 100%; }
b.ontime { color: var(--pista-ink); }
b.late { color: var(--berry-ink); }
.perf tr.sel td { background: var(--berry-bg); }
.perf td.bad { color: var(--berry-ink); font-weight: 700; }
.score { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.score .bar { width: 70px; height: 8px; border-radius: 999px; background: var(--muted-bg); display: inline-block; overflow: hidden; }
.score .bar i { display: block; height: 100%; background: var(--pista-ink); }
.budget-bar { height: 14px; }
.budget-bar span.ok { background: var(--pista-ink); }
td.num.bad { color: var(--berry-ink); font-weight: 700; }
details.plan summary { cursor: pointer; font-size: .85rem; color: var(--berry-ink); font-weight: 700; margin-top: 4px; }
.plan-form { display: grid; gap: 6px; margin-top: 6px; }
/* ---- post designer ---- */
.designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.design-card { display: grid; gap: 10px; align-content: start; }
.d-head { display: flex; gap: 8px; align-items: center; }
.d-art svg { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: var(--shadow); }
.d-cap textarea { width: 100%; font-size: .9rem; }
.d-cap { display: grid; gap: 6px; }
.d-task { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.d-task select, .d-task input { width: auto; flex: 1; min-width: 120px; }
details.d-edit summary { cursor: pointer; font-weight: 700; color: var(--berry-ink); font-size: .9rem; }
.design-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.design-form select { width: auto; }
@media (max-width: 1100px) { .designs { grid-template-columns: 1fr; max-width: 560px; } }
.d-tabs { display: flex; gap: 4px; }
.d-tabs button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .8rem; cursor: pointer; color: var(--ink-2); }
.d-tabs button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.d-more { font-size: .88rem; margin: 4px 0 0; }
.linkbtn { border: 0; background: none; color: var(--berry-ink); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: 0 2px; }
.qr { width: 200px; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--line); margin: 6px 0 10px; }
.qr svg { width: 100%; height: auto; display: block; }
code.key { font-size: .95rem; letter-spacing: .04em; background: var(--muted-bg); padding: 2px 6px; border-radius: 6px; user-select: all; }
.checks { display: grid; gap: 8px; }
.chk { display: flex; gap: 10px; align-items: flex-start; }
.chk > b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .85rem; }
.chk.ok > b { background: var(--pista-bg); color: var(--pista-ink); }
.chk.bad > b { background: var(--butter-bg); color: var(--butter-ink); }
.chk > div { display: grid; }

/* ---------- v6: Instagram, WhatsApp, Google Reviews, phone app, Setup ---------- */
.plat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.plat-tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper);
  color: var(--ink-2); font-size: .9rem; font-weight: 700; text-decoration: none; }
.plat-tabs a:hover { border-color: var(--berry); color: var(--ink); }
.plat-tabs a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.plat-tabs a.out { border-style: dashed; }

.pill.ch { background: var(--sky-bg); color: var(--sky-ink); }
.pill.ch-instagram, .pill.ch-ig_dm { background: var(--berry-bg); color: var(--berry-ink); }
.pill.ch-whatsapp { background: var(--pista-bg); color: var(--pista-ink); }

.setup-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.setup-ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font: 700 1.1rem/1 var(--display);
  background: var(--berry-bg); color: var(--berry-ink); }
.setup-ico.wa { background: var(--pista-bg); color: var(--pista-ink); }
.setup-ico.g { background: var(--sky-bg); color: var(--sky-ink); }
.setup-card h3 { margin-top: 2px; }
.wa-steps li.ok::marker { color: var(--pista-ink); font-weight: 700; }
.copy-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.copy-row input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.lbl-like { display: block; font-weight: 700; font-size: .93rem; margin-bottom: 6px; min-width: 96px; }
.copy-row .lbl-like { margin: 0; }

.wa-num { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.wa-num:first-of-type { border-top: 0; padding-top: 0; }
.wa-num small { display: block; }
.wa-num select { min-width: 0; flex: 1 1 140px; }
ul.tight { margin: 0; padding-left: 18px; line-height: 1.6; }
.bad { color: var(--berry-ink); }
.acc-follow { margin: 2px 0; font-size: .92rem; }

.review { border-left: 4px solid var(--line-strong); }
.review.low { border-left-color: var(--berry); }
.review textarea { width: 100%; min-height: 76px; margin: 8px 0; }
.stars { color: #C98A10; letter-spacing: 1px; font-size: 1rem; white-space: nowrap; }
.stars i { font-style: normal; color: var(--line-strong); }

.swatches { display: flex; gap: 8px; }
.swatches input[type=color] { width: 46px; height: 38px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); }

.setup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0 0 18px; }
.setup-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.setup-step:hover { border-color: var(--berry); }
.setup-step .tick { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--muted-bg); color: var(--ink-2); }
.setup-step.done .tick { background: var(--pista-bg); color: var(--pista-ink); }
.setup-step small { display: block; margin-top: 3px; font-size: .84rem; }
.setup-step .pill { margin-left: 4px; }

@media (max-width: 640px) {
  .setup-card { grid-template-columns: 1fr; }
  .setup-ico { width: 44px; height: 44px; }
}
.ig-table th:nth-child(n+2) { width: 70px; }
.ig-table th:nth-child(6) { width: 104px; }
.ig-table th:nth-child(4) { width: 80px; }
@media (max-width: 700px) { .ig-table th:nth-child(5), .ig-table td:nth-child(5) { display: none; } }
.ig-table th:nth-child(3) { width: 92px; }
.ig-table .yt-vid img, .ig-table .yt-ph { width: 52px; height: 52px; }
.ig-table th:nth-child(2), .ig-table th:nth-child(5) { width: 64px; }
.ig-table th:nth-child(6) { width: 96px; }
.budget-bar.split { display: flex; }
.budget-bar.split span { display: block; height: 100%; border-radius: 0; }
.budget-bar.split .ev { background: var(--berry); }
.budget-bar.split .ad { background: var(--c3); }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.key.ev { background: var(--berry); }
.key.ad { background: var(--c3); }
.budget-bar.split { overflow: hidden; }
.ai-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ai-bar .ai-ref img, .ai-bar .ai-ref .yt-ph { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; font-size: 1.6rem; }
.ai-bar .ai-txt { flex: 1 1 260px; min-width: 0; }
.ai-bar .ai-txt small { display: block; margin-top: 2px; }
.d-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.d-wait { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(110deg, var(--muted-bg) 30%, var(--paper) 50%, var(--muted-bg) 70%); background-size: 300% 100%;
  animation: shimmer 1.6s linear infinite; color: var(--ink-2); font-weight: 700; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* copyright */
.legal{margin:36px 0 8px;padding-top:14px;border-top:1px solid var(--line, #e4dcd3);font-size:.78rem;color:var(--ink-2, #6b6370);text-align:center}

.ev-design{display:block;margin-top:2px;font-size:.72rem;font-weight:700;color:var(--berry, #a8325a);text-decoration:none}
.ev-design:hover{text-decoration:underline}
.coach{margin:0;padding-left:20px;line-height:1.55}
.coach li{margin:0 0 8px}
.coach.ok li::marker{color:var(--good, #2f7d4f)}
.coach.no li::marker{color:var(--berry, #a8325a)}
.seo-row{display:flex;gap:8px;align-items:center;margin:0 0 8px;flex-wrap:wrap}
.seo-row input{flex:1;min-width:240px}