@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #172016;
  --muted: #667064;
  --muted-2: #8c9589;
  --paper: #f7f8f3;
  --panel: rgba(255, 255, 255, 0.78);
  --line: rgba(23, 32, 22, 0.1);
  --lime: #a7f000;
  --lime-deep: #79bd00;
  --pink: #f16b9e;
  --pink-soft: #fff0f6;
  --blue: #7997ff;
  --blue-soft: #eef1ff;
  --shadow: 0 20px 55px rgba(48, 59, 41, 0.11);
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 6% 2%, rgba(167, 240, 0, 0.16), transparent 25rem),
    radial-gradient(circle at 93% 12%, rgba(241, 107, 158, 0.14), transparent 28rem),
    var(--paper);
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.45;
}

body.auth-locked .shell,
body.auth-locked .lightbox { display: none; }
.shell[hidden] { display: none !important; }

.auth-gate { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.auth-gate[hidden] { display: none !important; }
.auth-card { width: min(100%, 520px); padding: clamp(28px, 5vw, 52px); border-radius: var(--radius-lg); text-align: left; }
.auth-brand-name { margin-bottom: 28px; font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; font-size: 34px; font-weight: 500; letter-spacing: .1em; line-height: .95; }
.auth-card h1 { max-width: none; font-size: clamp(34px, 6vw, 58px); }
.auth-credit { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.auth-credit img { display: block; width: 72px; height: auto; mix-blend-mode: multiply; opacity: .86; }
.auth-description { margin: 16px 0 28px; color: var(--muted); font-size: 16px; }
.auth-form label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-input-wrap { display: flex; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .68); }
.auth-input-wrap input { min-width: 0; flex: 1; padding: 11px 12px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.auth-input-wrap:focus-within { border-color: var(--lime-deep); box-shadow: 0 0 0 4px rgba(167, 240, 0, .23); }
.auth-input-wrap button { padding: 11px 15px; border: 0; border-radius: 11px; background: var(--ink); color: #fff; cursor: pointer; font-weight: 700; white-space: nowrap; }
.auth-input-wrap button:hover { background: #2c392b; }
.auth-error { margin: 12px 0 0; color: #b54673; font-size: 13px; font-weight: 700; }

button, select { font: inherit; }
button { color: inherit; }

.ambient { position: fixed; z-index: -1; pointer-events: none; filter: blur(55px); opacity: .48; border-radius: 999px; }
.ambient-lime { width: 19rem; height: 19rem; top: 15vh; left: -11rem; background: var(--lime); }
.ambient-pink { width: 23rem; height: 23rem; right: -13rem; top: 48vh; background: var(--pink); }

.shell { width: min(100% - 36px, 1440px); margin: 18px auto 48px; }
.glass-panel, .card {
  border: 1px solid rgba(255, 255, 255, .72);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hero { padding: clamp(24px, 4vw, 52px); border-radius: var(--radius-lg); }
.hero-topline, .hero-content, .footer, .kpi-top, .card-heading, .table-caption, .media-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.hero-topline { align-items: flex-start; }
.brand-lockup { display: flex; align-items: center; }
.brand-name { font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; font-size: 31px; font-weight: 500; line-height: .95; letter-spacing: .1em; }
.brand-subtitle { margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hero-top-meta { display: flex; align-items: center; gap: 22px; }
.report-credit { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.report-credit img { display: block; width: 76px; height: auto; mix-blend-mode: multiply; opacity: .86; }
.hero-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-deep); box-shadow: 0 0 0 5px rgba(167, 240, 0, .2); }
.hero-content { align-items: flex-end; margin-top: clamp(42px, 8vw, 96px); }
.eyebrow { margin: 0 0 12px; color: var(--pink); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, h4 { margin: 0; font-family: 'Space Grotesk', 'DM Sans', sans-serif; letter-spacing: -.035em; }
h1 { max-width: 780px; font-size: clamp(38px, 6vw, 82px); line-height: .96; }
h2 { font-size: clamp(22px, 2.3vw, 31px); line-height: 1.05; }
h3 { font-size: 20px; line-height: 1.1; }
h4 { font-size: 16px; }
.hero-description { max-width: 720px; margin: 20px 0 0; color: #526050; font-size: clamp(16px, 2vw, 20px); }
.period-control { width: min(100%, 280px); padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .58); }
.period-control label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.period-control select { width: 100%; padding: 10px 12px; border: 1px solid rgba(23, 32, 22, .18); border-radius: 12px; background: #fff; color: var(--ink); font-weight: 700; outline: none; }
.period-control select:focus { border-color: var(--lime-deep); box-shadow: 0 0 0 4px rgba(167, 240, 0, .23); }
.update-date { margin: 9px 0 0; color: var(--muted); font-size: 12px; }

.tabs { position: sticky; z-index: 5; top: 12px; display: flex; gap: 5px; width: fit-content; max-width: 100%; margin: 16px auto; padding: 6px; border-radius: 999px; overflow-x: auto; }
.tab { flex: 0 0 auto; padding: 11px 17px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; transition: background .2s ease, color .2s ease, transform .2s ease; }
.tab:hover { color: var(--ink); transform: translateY(-1px); }
.tab.is-active { background: var(--ink); color: #fff; box-shadow: 0 6px 14px rgba(23, 32, 22, .16); }
.tab:focus-visible, .media-button:focus-visible, .lightbox-close:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.dashboard-view { display: none; animation: rise .35s ease both; }
.dashboard-view.is-active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.stack { display: grid; gap: 18px; }
.content-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }
.card { min-width: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-md); }
.card.soft-pink { background: linear-gradient(140deg, rgba(255, 240, 246, .9), rgba(255, 255, 255, .68)); }
.card.soft-blue { background: linear-gradient(140deg, rgba(238, 241, 255, .9), rgba(255, 255, 255, .68)); }
.card.soft-lime { background: linear-gradient(140deg, rgba(229, 255, 179, .85), rgba(255, 255, 255, .68)); }
.card-heading { align-items: flex-start; margin-bottom: 20px; }
.card-heading p, .sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.card-heading p { max-width: 680px; }
.current-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.current-status-item { min-width: 0; padding: 15px 16px; border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 15px; background: rgba(255,255,255,.62); }
.current-status-item.blue { border-top-color: var(--blue); }
.current-status-item.lime { border-top-color: var(--lime-deep); }
.current-status-item.pink { border-top-color: var(--pink); }
.current-status-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.current-status-channel { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; }
.current-status-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-align: right; text-transform: uppercase; }
.current-status-item p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi-card { min-height: 142px; padding: 21px; border-radius: var(--radius-md); }
.kpi-card small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kpi-card strong { display: block; margin-top: 12px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -.06em; }
.kpi-card span { display: block; margin-top: 11px; color: var(--muted); font-size: 12px; }
.accent-lime { background: var(--lime); }
.accent-pink { background: var(--pink-soft); }
.accent-blue { background: var(--blue-soft); }
.accent-ink { background: var(--ink); color: #fff; }
.accent-ink small, .accent-ink span { color: rgba(255, 255, 255, .68); }
.frequency-layout { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr); gap: 18px; }
.frequency-target-box { display: flex; min-height: 150px; flex-direction: column; justify-content: center; padding: 20px; border-radius: 18px; background: var(--lime); }
.frequency-target-box small { color: rgba(23, 32, 22, .68); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.frequency-target-box strong { margin-top: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 42px; line-height: 1; letter-spacing: -.06em; }
.frequency-target-box span { margin-top: 11px; color: rgba(23, 32, 22, .7); font-size: 12px; }
.frequency-month-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.frequency-month { padding: 16px; border: 1px solid rgba(23, 32, 22, .08); border-radius: 16px; background: rgba(255,255,255,.6); }
.frequency-month h3 { margin-bottom: 14px; font-size: 18px; }
.frequency-row + .frequency-row { margin-top: 15px; }
.frequency-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.frequency-row-head b { color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 16px; }
.frequency-track { height: 9px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #e7ede0; }
.frequency-fill { display: block; height: 100%; min-width: 4px; border-radius: inherit; }
.frequency-fill.pink { background: linear-gradient(90deg, #e85a91, var(--pink)); }
.frequency-fill.lime { background: linear-gradient(90deg, var(--lime-deep), var(--lime)); }
.frequency-status { display: block; margin-top: 5px; color: var(--muted-2); font-size: 10px; }
.frequency-empty { display: block; color: var(--muted); font-size: 12px; }

.pill { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 7px 10px; border-radius: 999px; background: #edf3e6; color: #4f6447; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pill.pink { background: var(--pink-soft); color: #aa3968; }
.pill.blue { background: var(--blue-soft); color: #5269c4; }
.pill.lime { background: #eaffb6; color: #4c7600; }
.pill.neutral { background: #f0f2ee; color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.dot.pink { background: var(--pink); }
.dot.blue { background: var(--blue); }
.dot.lime { background: var(--lime-deep); }
.channel-label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }

.summary-list { display: grid; gap: 11px; }
.summary-item { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.summary-item:last-child { border-bottom: 0; padding-bottom: 0; }
.summary-item p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.summary-item ul { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 17px; color: #4f5b4e; font-size: 14px; }

.bar-track { height: 11px; overflow: hidden; border-radius: 999px; background: #e9ede5; }
.bar-fill { height: 100%; min-width: 5px; border-radius: inherit; background: var(--ink); }
.bar-fill.pink { background: var(--pink); }
.bar-fill.blue { background: var(--blue); }
.bar-fill.lime { background: var(--lime-deep); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.empty-state { display: grid; place-items: center; min-height: 174px; padding: 22px; border: 1px dashed rgba(23, 32, 22, .18); border-radius: 17px; background: rgba(255,255,255,.35); color: var(--muted); text-align: center; }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--ink); }

.comparison-card { margin: 0 0 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.58); box-shadow: var(--shadow); }
.comparison-card .card-heading { margin-bottom: 14px; }
.comparison-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.comparison-item { min-width: 0; padding: 13px 14px; border-radius: 14px; background: rgba(242, 245, 239, .78); }
.comparison-item > small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.change-badge { display: block; font-size: 13px; font-weight: 700; }
.change-badge.positive { color: #4d7900; }
.change-badge.negative { color: #bd4b79; }
.change-badge.neutral { color: var(--muted); }
.change-detail { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.comparison-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 16px 20px; border: 1px dashed rgba(23,32,22,.16); border-radius: 16px; background: rgba(255,255,255,.42); color: var(--muted); font-size: 12px; }
.comparison-note strong { color: var(--ink); font-size: 13px; }

.trend-board { padding: 16px 0 8px; }
.trend-board + .trend-board { margin-top: 8px; padding-top: 19px; border-top: 1px solid var(--line); }
.trend-board-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.trend-board-heading strong { font-size: 13px; }
.trend-board-heading span { color: var(--muted); font-size: 11px; }
.trend-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); align-items: end; gap: 14px; min-height: 180px; }
.trend-column { display: grid; grid-template-rows: 30px 1fr 22px; gap: 7px; min-width: 0; height: 180px; text-align: center; }
.trend-value { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.trend-track { display: flex; align-items: end; justify-content: center; height: 100%; overflow: hidden; border-radius: 12px 12px 5px 5px; background: rgba(233,237,229,.72); }
.trend-fill { width: min(44px, 58%); min-height: 6px; border-radius: 10px 10px 4px 4px; background: var(--ink); transition: height .35s ease; }
.trend-fill.blue { background: var(--blue); }
.trend-fill.lime { background: linear-gradient(180deg, var(--lime), var(--lime-deep)); }
.trend-fill.pink { background: var(--pink); }
.trend-column small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.mini-stat-list { display: grid; gap: 12px; margin-top: 18px; }
.mini-stat-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mini-stat-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.mini-stat-list span { color: var(--muted); font-size: 12px; }
.mini-stat-list strong { font-family: 'Space Grotesk', sans-serif; font-size: 17px; letter-spacing: -.04em; }

.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stage-card { padding: 19px; border: 1px solid rgba(23, 32, 22, .08); border-radius: 18px; background: rgba(255, 255, 255, .58); }
.stage-card h3 { margin-top: 13px; font-size: 18px; }
.stage-card p { min-height: 42px; margin: 8px 0 15px; color: var(--muted); font-size: 13px; }
.target-list { display: flex; flex-wrap: wrap; gap: 7px; }
.target { padding: 6px 8px; border-radius: 9px; background: #eef3e9; color: #4d5e48; font-size: 11px; font-weight: 700; }

.kpi-scorecard { background: linear-gradient(140deg, rgba(238, 241, 255, .88), rgba(255, 255, 255, .7)); }
.kpi-scorecard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpi-scorecard-stage { min-width: 0; padding: 18px; border: 1px solid rgba(23, 32, 22, .08); border-top: 4px solid var(--blue); border-radius: 17px; background: rgba(255,255,255,.62); }
.kpi-scorecard-stage.lime { border-top-color: var(--lime-deep); }
.kpi-scorecard-stage.blue { border-top-color: var(--blue); }
.kpi-scorecard-stage.pink { border-top-color: var(--pink); }
.kpi-scorecard-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 91px; }
.kpi-scorecard-stage-head h3 { max-width: 260px; margin-top: 12px; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.kpi-scorecard-stage-head > strong { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 700; text-align: right; text-transform: uppercase; }
.kpi-evaluation-list { display: grid; margin-top: 12px; }
.kpi-evaluation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(135px, .9fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.kpi-evaluation > div:first-child strong { display: block; font-size: 13px; }
.kpi-evaluation > div:first-child span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.kpi-evaluation-result { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.kpi-evaluation-result b { color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 13px; letter-spacing: -.03em; }
.kpi-evaluation-result small { color: var(--muted); font-size: 10px; line-height: 1.25; }
.kpi-status { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 7px; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.kpi-status.lime { background: #efffcf; color: #4c7600; }
.kpi-status.blue { background: var(--blue-soft); color: #5269c4; }
.kpi-status.pink { background: var(--pink-soft); color: #aa3968; }
.kpi-status.neutral { background: #f0f2ee; color: var(--muted); }

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 14px 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); background: rgba(242, 245, 239, .8); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td strong { font-weight: 700; }
.table-total-row td { border-top: 2px solid rgba(137, 201, 0, .28); background: rgba(239, 255, 207, .54); }
.table-total-row td strong { font-family: 'Space Grotesk', sans-serif; }
.secondary-highlight { color: var(--ink); font-weight: 800; }
.keyword-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 13px; }
.keyword-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.keyword-method > div { padding: 12px 13px; border-radius: 13px; background: rgba(255,255,255,.56); }
.keyword-method strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 14px; }
.keyword-method span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.keyword-name { display: flex; align-items: center; gap: 9px; }
.keyword-rank { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 8px; background: var(--ink); color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; }
.keyword-result, .keyword-ctr { min-width: 94px; padding: 10px 12px; border-radius: 11px; }
.keyword-result { background: #efffcf; }
.keyword-ctr { background: var(--pink-soft); }
.keyword-result strong, .keyword-ctr strong { display: block; color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 17px; letter-spacing: -.04em; }
.keyword-result small, .keyword-ctr small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.keyword-table { min-width: 780px; }
.keyword-match-note { display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: start; margin-top: 14px; padding: 14px 15px; border: 1px solid rgba(23, 32, 22, .08); border-radius: 14px; background: rgba(255, 255, 255, .62); color: var(--muted); font-size: 12px; line-height: 1.45; }
.keyword-match-note > strong { color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 14px; }
.keyword-match-note b { color: var(--ink); }
.primary-result { min-width: 145px; padding: 11px 14px; border-radius: 12px; text-align: right; }
.primary-result span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; line-height: 1.1; text-transform: uppercase; }
.primary-result strong { display: block; color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 18px; letter-spacing: -.04em; }
.primary-result.lime { background: #efffcf; }
.primary-result.blue { background: var(--blue-soft); }
.primary-result.pink { background: var(--pink-soft); }
.meta-retention-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 18px; }
.meta-retention-table-wrap, .meta-retention-total { min-width: 0; }
.retention-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.retention-section-label strong { font-family: 'Space Grotesk', sans-serif; font-size: 16px; }
.retention-section-label span { color: var(--muted); font-size: 11px; text-align: right; }
.meta-retention-table { min-width: 620px; }
.retention-video-name { display: flex; align-items: center; gap: 9px; }
.meta-retention-table td.num { min-width: 90px; padding: 10px 12px; border-radius: 11px; }
.meta-retention-table td.num strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 16px; letter-spacing: -.04em; }
.meta-retention-table td.num small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.meta-retention-table td.retention-primary-cell { background: #efffcf; }
.meta-retention-total { padding: 20px; border: 1px solid rgba(23, 32, 22, .08); border-radius: 18px; background: rgba(255, 255, 255, .64); }
.retention-total-count { display: block; margin-top: 19px; font-family: 'Space Grotesk', sans-serif; font-size: 42px; line-height: 1; letter-spacing: -.06em; }
.retention-total-label { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.retention-total-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
.retention-total-stat { padding: 12px; border-radius: 13px; background: #f0f3ed; }
.retention-total-stat.is-primary { background: #efffcf; }
.retention-total-stat small, .retention-total-stat span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.retention-total-stat strong { display: block; margin: 5px 0 2px; font-family: 'Space Grotesk', sans-serif; font-size: 20px; letter-spacing: -.04em; }
.meta-retention-total p { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.row-note { max-width: 290px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.table-caption { margin-bottom: 14px; align-items: flex-end; }
.table-caption .sub { max-width: 680px; }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.metric-strip.tiktok-metric-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric-box { padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55); }
.metric-box small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.metric-box strong { display: block; margin-top: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 23px; letter-spacing: -.05em; }
.metric-box span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.metric-box.highlight { background: var(--lime); border-color: transparent; }
.metric-box.highlight small, .metric-box.highlight span { color: rgba(23, 32, 22, .68); }

.campaign-grid, .creative-grid, .visual-grid, .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.campaign-card { padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .54); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.campaign-card:hover, .campaign-card:focus-within { transform: translateY(-3px); border-color: rgba(137, 201, 0, .42); background: rgba(255, 255, 255, .72); box-shadow: 0 14px 30px rgba(23, 32, 22, .10); }
.campaign-card .kpi-top { align-items: flex-start; }
.campaign-card h3 { margin-top: 11px; }
.campaign-card .interpretation { min-height: 41px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.campaign-kpis { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.campaign-kpi { padding: 7px 9px; border-radius: 10px; background: #f0f3ed; font-size: 11px; font-weight: 700; }
.campaign-kpi b { color: var(--muted); font-weight: 500; }
.cost-good { color: #4c7600; }

.creative-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .64); }
.horizontal-creative { display: grid; grid-template-columns: minmax(150px, .82fr) 1.18fr; align-items: stretch; }
.horizontal-creative .creative-media { height: 285px; min-height: 100%; }
.horizontal-creative.video-card .creative-media { height: 285px; }
.horizontal-creative .creative-body { display: flex; flex-direction: column; justify-content: center; }
.creative-media { display: grid; height: 184px; place-items: center; padding: 15px; background: linear-gradient(145deg, #eef3e8, #fff); }
.creative-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
.media-button { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.creative-body { padding: 17px; }
.creative-body h3 { margin-top: 10px; }
.creative-primary { margin-top: 15px; font-family: 'Space Grotesk', sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -.04em; }
.creative-primary small { display: block; margin-bottom: 4px; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.creative-secondary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.creative-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; }

.visual-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.65); }
.visual-card .creative-media { height: 210px; }
.visual-card p { margin: 0; padding: 12px 15px 15px; color: var(--muted); font-size: 12px; font-weight: 700; }
.google-visual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.google-visuals-card .card-heading { margin-bottom: 14px; }
.google-visuals-card .visual-card { border-radius: 12px; }
.google-visuals-card .visual-card .creative-media { height: 96px; padding: 7px; }
.google-visuals-card .visual-card p { min-height: 34px; padding: 8px 9px 10px; font-size: 10px; line-height: 1.25; }

.retention-chart { display: grid; gap: 15px; padding: 4px 0; }
.retention-row { display: grid; grid-template-columns: 105px 1fr auto; gap: 12px; align-items: center; }
.retention-row label { color: var(--muted); font-size: 12px; font-weight: 700; }
.retention-track { height: 14px; overflow: hidden; border-radius: 999px; background: #e8ede4; }
.retention-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); }
.retention-row b { font-size: 13px; white-space: nowrap; }
.video-card .creative-media { height: 150px; }
.video-card .creative-body { padding: 15px; }
.video-card .creative-primary { font-size: 21px; }
.rate-badge { display: inline-flex; margin-top: 10px; padding: 5px 8px; border-radius: 8px; background: #eff4e9; color: #4d6544; font-size: 11px; font-weight: 700; }

.completion-matrix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.completion-stage { min-width: 0; padding: 13px 11px 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.48); }
.completion-stage-heading { margin: 0 3px 10px; }
.completion-stage-heading h3 { font-size: 18px; }
.completion-stage-heading span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.completion-rows { display: grid; gap: 5px; }
.completion-row { display: grid; grid-template-columns: minmax(64px, .9fr) minmax(44px, 1.2fr) auto; align-items: center; gap: 7px; width: 100%; padding: 8px 5px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; transition: background .2s ease, transform .2s ease; }
.completion-row:hover { background: rgba(167,240,0,.12); transform: translateY(-1px); }
.completion-row.is-selected { background: rgba(167,240,0,.19); box-shadow: inset 0 0 0 1px rgba(121,189,0,.18); }
.completion-row.is-leader .completion-name, .completion-row.is-leader .completion-value { color: var(--ink); }
.completion-name { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.completion-track { height: 9px; overflow: hidden; border-radius: 999px; background: #e9ede5; }
.completion-fill { display: block; height: 100%; min-width: 5px; border-radius: inherit; background: var(--ink); transition: width .35s ease; }
.completion-fill.lime { background: linear-gradient(90deg, var(--lime-deep), var(--lime)); }
.completion-fill.pink { background: var(--pink); }
.completion-fill.blue { background: var(--blue); }
.completion-value { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tiktok-completion-total { margin-top: 16px; padding: 17px; border: 1px solid rgba(23, 32, 22, .08); border-radius: 17px; background: linear-gradient(140deg, rgba(229, 255, 179, .62), rgba(255, 255, 255, .6)); }
.tiktok-completion-total-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tiktok-completion-total-head h3 { margin-top: 7px; font-size: 18px; }
.tiktok-completion-total-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 15px; }
.tiktok-completion-total-stat { padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .62); }
.tiktok-completion-total-stat.is-primary { background: #efffcf; }
.tiktok-completion-total-stat small, .tiktok-completion-total-stat span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.tiktok-completion-total-stat strong { display: block; margin: 5px 0 2px; font-family: 'Space Grotesk', sans-serif; font-size: 20px; letter-spacing: -.04em; }
.tiktok-completion-total p { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.video-quick-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.video-quick-button { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.58); cursor: pointer; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.video-quick-button:hover { border-color: var(--lime-deep); transform: translateY(-1px); }
.video-quick-button.is-selected { border-color: var(--lime-deep); box-shadow: 0 0 0 3px rgba(167,240,0,.16); }
.video-quick-button img { width: 54px; height: 70px; object-fit: cover; border-radius: 8px; }
.video-quick-button strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.video-quick-button span span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.completion-row:focus-visible, .video-quick-button:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.source-list { display: grid; gap: 14px; }
.source-line { display: grid; grid-template-columns: minmax(120px, 1.3fr) minmax(80px, 2fr) auto; gap: 11px; align-items: center; }
.source-name { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.source-line .bar-track { height: 9px; }
.source-line b { font-size: 12px; white-space: nowrap; }
.source-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.source-filter-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.source-filter-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.6); color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.source-filter-button:hover { border-color: var(--lime-deep); color: var(--ink); transform: translateY(-1px); }
.source-filter-button.is-active { border-color: transparent; background: var(--ink); color: #fff; }
.table-sort-button { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.table-sort-button:hover, .table-sort-button.is-active { color: var(--ink); }
.active-sort-cell { background: rgba(239, 255, 207, .38); }
.warning-card { border-color: rgba(241, 107, 158, .32); background: linear-gradient(140deg, rgba(255, 240, 246, .94), rgba(255,255,255,.68)); }
.warning-card h2 { margin-top: 12px; }
.warning-card p { margin: 12px 0 0; color: #596255; font-size: 14px; }
.compact-warning-card { align-self: start; padding: 20px 22px; }
.compact-warning-card h2 { max-width: 420px; margin-top: 10px; font-size: clamp(20px, 2.1vw, 29px); line-height: 1.08; }
.compact-warning-card p { margin-top: 9px; font-size: 12px; line-height: 1.45; }
.note-box { margin-top: 16px; padding: 13px 14px; border-radius: 13px; background: rgba(255,255,255,.7); color: #576153; font-size: 12px; }
.note-box.lime { background: #efffcf; }

.footer { justify-content: center; margin-top: 24px; color: var(--muted-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.footer > span:first-child { font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.error-state { padding: 30px; border: 1px solid rgba(241, 107, 158, .4); border-radius: var(--radius-md); background: var(--pink-soft); }
.error-state p { margin: 8px 0 0; color: #6e5260; }
.noscript-message { position: fixed; inset: 20px; z-index: 20; padding: 22px; border-radius: 20px; background: var(--lime); color: var(--ink); font-weight: 700; }

.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 26px; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(15, 20, 15, .78); backdrop-filter: blur(14px); }
.lightbox-dialog { position: relative; z-index: 1; max-width: min(92vw, 1100px); max-height: 92vh; padding: 14px; border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 24px 80px rgba(0,0,0,.32); }
.lightbox-dialog img { display: block; max-width: 100%; max-height: 82vh; border-radius: 15px; object-fit: contain; }
.lightbox-title { margin: 3px 6px 12px; color: var(--muted); font-size: 12px; font-weight: 700; }
.lightbox-close { position: absolute; z-index: 2; top: -15px; right: -15px; display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.22); cursor: pointer; font-size: 25px; line-height: 1; }

@media (max-width: 1100px) {
  .span-3 { grid-column: span 6; }
  .span-4, .span-5, .span-7, .span-8 { grid-column: span 6; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .current-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-scorecard-grid { grid-template-columns: 1fr; }
  .metric-strip.tiktok-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 22px, 680px); margin-top: 10px; }
  .hero-content { display: grid; align-items: start; }
  .hero-top-meta { gap: 12px; }
  .report-credit { font-size: 10px; }
  .report-credit img { width: 72px; }
  .period-control { width: 100%; }
  .tabs { justify-content: flex-start; width: 100%; border-radius: 20px; }
  .content-grid { display: grid; grid-template-columns: 1fr; }
  .current-status-grid { grid-template-columns: 1fr; }
  .frequency-layout { grid-template-columns: 1fr; }
  .meta-retention-layout { grid-template-columns: 1fr; }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: 1; }
  .stage-grid, .campaign-grid, .creative-grid, .visual-grid, .video-grid { grid-template-columns: 1fr; }
  .horizontal-creative { grid-template-columns: minmax(150px, .8fr) 1.2fr; }
  .completion-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiktok-completion-total-grid { grid-template-columns: repeat(2, 1fr); }
  .video-quick-list { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: repeat(2, 1fr); }
  .comparison-note, .trend-board-heading { align-items: flex-start; flex-direction: column; }
  .retention-section-label { align-items: flex-start; flex-direction: column; }
  .retention-section-label span { text-align: left; }
  .source-filter-bar { align-items: flex-start; flex-direction: column; }
  .source-filter-buttons { justify-content: flex-start; }
  .kpi-scorecard-stage-head { min-height: 0; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric-strip.tiktok-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keyword-summary, .keyword-method { grid-template-columns: 1fr; }
  .keyword-match-note { grid-template-columns: 1fr; }
  .hero-meta { display: none; }
}

@media (max-width: 460px) {
  .shell { width: min(100% - 14px, 440px); }
  .hero, .card { border-radius: 20px; }
  .hero { padding: 21px; }
  .brand-name { font-size: 25px; }
  h1 { font-size: 42px; }
  .kpi-grid, .metric-strip { grid-template-columns: 1fr; }
  .metric-strip.tiktok-metric-strip { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .kpi-card { min-height: 120px; }
  .kpi-evaluation { grid-template-columns: 1fr; }
  .kpi-evaluation-result { align-items: flex-start; text-align: left; }
  .retention-total-grid { grid-template-columns: repeat(2, 1fr); }
  .retention-row { grid-template-columns: 80px 1fr; }
  .horizontal-creative { grid-template-columns: 1fr; }
  .horizontal-creative .creative-media { height: 260px; min-height: 0; }
  .horizontal-creative.video-card .creative-media { height: 260px; }
  .completion-matrix { grid-template-columns: 1fr; }
  .tiktok-completion-total-head { flex-direction: column; }
  .retention-row b { grid-column: 2; }
  .source-line { grid-template-columns: 1fr auto; }
  .source-line .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .footer { flex-wrap: wrap; gap: 7px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-card { transition: none; }
  .campaign-card:hover, .campaign-card:focus-within { transform: none; }
}