:root {
  --font-heading: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --ink: #17231c;
  --muted: #66736b;
  --green: #315e44;
  --green-dark: #173c2a;
  --green-soft: #e8f0eb;
  --cream: #f5f3ed;
  --paper: #fff;
  --line: #dfe5e1;
  --danger: #a14336;
  --danger-soft: #f8e9e6;
  --shadow: 0 20px 60px rgba(22, 48, 33, .09);
  font-family: var(--font-body);
  color: var(--ink);
  background: #f4f6f4;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px; background: var(--green-dark); color: #fff; display: flex; flex-direction: column; }
.brand-block { display: flex; align-items: center; gap: 12px; padding: 0 8px 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark, .mini-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #d8e6dc; color: var(--green-dark); font: 700 13px Georgia, serif; }
.brand-block strong { display: block; font: 600 15px Georgia, serif; letter-spacing: .08em; }
.brand-block span { display: block; margin-top: 4px; font-size: 11px; color: rgba(255,255,255,.55); }
.sidebar nav { display: grid; gap: 7px; margin-top: 28px; }
.nav-item { width: 100%; padding: 13px 14px; color: rgba(255,255,255,.67); background: transparent; border: 0; border-radius: 10px; text-align: left; cursor: pointer; transition: .2s; }
.nav-item span { display: inline-block; width: 28px; color: #aac0b0; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,.1); }
.sidebar-foot { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.62); font-size: 11px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #83c99a; box-shadow: 0 0 0 4px rgba(131,201,154,.12); }
.main-content { min-width: 0; padding: 32px 40px 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.topbar h1 { margin: 2px 0 0; font: 500 clamp(24px,3vw,34px) Georgia, "Yu Mincho", serif; }
.eyebrow { margin: 0; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.top-actions, .dialog-actions, .draft-actions { display: flex; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 17px; border: 1px solid transparent; border-radius: 9px; text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(49,94,68,.16); }
.button.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.button.small { min-height: 34px; padding: 0 12px; font-size: 12px; }
.view { display: none; }
.view.active { display: block; animation: enter .28s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(7px); } }
.notice { margin-bottom: 18px; padding: 13px 16px; border: 1px solid #cad9cf; border-radius: 10px; background: #eef4f0; color: #4e6556; font-size: 12px; line-height: 1.7; }
.notice strong { color: var(--green-dark); }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; }
.metric-card, .panel, .link-card, .survey-card { background: var(--paper); border: 1px solid #e3e8e4; border-radius: 16px; box-shadow: 0 8px 30px rgba(22,48,33,.04); }
.metric-card { position: relative; padding: 20px; }
.metric-card span, .metric-card small { display: block; color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; margin: 8px 0 7px; font: 500 31px Georgia, serif; }
.metric-icon { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 700; }
.content-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(250px,.8fr); gap: 18px; margin-bottom: 18px; }
.panel { padding: 22px; margin-bottom: 18px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel h2 { margin: 4px 0 0; font: 500 19px Georgia, "Yu Mincho", serif; }
.muted { color: var(--muted); font-size: 11px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 10px 12px; color: #869188; font-size: 10px; text-align: left; border-bottom: 1px solid var(--line); }
td { padding: 14px 12px; border-bottom: 1px solid #edf0ee; }
tr:last-child td { border-bottom: 0; }
.rating, .stars { color: #ad7e28; letter-spacing: .04em; }
.number-alert { color: var(--danger); font-weight: 700; }
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.badge.danger { color: var(--danger); background: var(--danger-soft); }
.badge.good { color: #2f6b45; background: #e9f3ec; }
.badge.neutral { color: #657068; background: #eef1ef; }
.text-button { padding: 0; border: 0; background: none; color: var(--green); font-size: 11px; font-weight: 700; cursor: pointer; }
.topic-list { display: grid; gap: 16px; }
.topic-row > div:first-child { display: flex; justify-content: space-between; font-size: 11px; }
.bar { height: 5px; margin-top: 7px; overflow: hidden; background: #edf1ee; border-radius: 9px; }
.bar i { display: block; width: var(--bar-fill, 0%); height: 100%; background: #6a9278; border-radius: 9px; }
.review-list { display: grid; gap: 12px; }
.review-list.compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
.review-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.review-card.attention { background: var(--danger-soft); }
.review-meta, .review-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.review-meta .stars { margin-left: 8px; font-size: 11px; }
.review-meta time { color: #939b96; font-size: 10px; }
.review-body { padding: 14px 0 16px; }
.review-body strong { font-size: 12px; }
.review-body p { margin: 7px 0 0; color: #526058; font-size: 12px; line-height: 1.8; }
.status-label { color: #8d695f; font-size: 10px; font-weight: 700; }
.status-label.done { color: #4b7c5c; }
.filter-row { display: flex; gap: 8px; margin-bottom: 16px; }
.chip { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; cursor: pointer; }
.chip.active { background: var(--green); color: #fff; border-color: var(--green); }
.split-hero { display: grid; grid-template-columns: 1.4fr .8fr; gap: 25px; padding: 35px; margin-bottom: 18px; border-radius: 18px; background: var(--green-dark); color: #fff; }
.split-hero .eyebrow { color: #a9c2b1; }
.split-hero h2 { margin: 9px 0 14px; font: 400 clamp(28px,4vw,43px)/1.35 Georgia, "Yu Mincho", serif; }
.split-hero p { max-width: 610px; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.9; }
.post-hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); gap: 30px; padding: 34px; margin-bottom: 18px; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg,#173c2a,#315e44); color: #fff; }
.post-hero .eyebrow { color: #b9d2c0; }
.post-hero h2 { margin: 8px 0 12px; font: 400 clamp(28px,4vw,43px)/1.35 Georgia, "Yu Mincho", serif; }
.post-hero p:last-child { max-width: 620px; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.9; }
.post-hero-flow { display: grid; align-self: center; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.post-hero-flow span { padding: 13px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); font-size: 10px; font-weight: 700; }
.post-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.post-brief { grid-column: 1/-1; }
.post-brief textarea { min-height: 125px; line-height: 1.8; }
.post-options { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 15px 0; }
.post-check { display: flex; grid-template-columns: none; align-items: center; gap: 8px; cursor: pointer; }
.post-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.post-store-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.post-store-choice { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 9px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; cursor: pointer; }
.post-store-choice:has(input:checked) { border-color: #8aac95; background: var(--green-soft); box-shadow: 0 0 0 2px rgba(49,94,68,.05); }
.post-store-choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.post-store-choice span,.post-store-choice strong,.post-store-choice small { min-width: 0; display: block; }
.post-store-choice strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.post-store-choice small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.post-store-choice em { display: block; margin-top: 5px; overflow: hidden; color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.post-store-choice.cta-missing em { color: var(--danger); }
.post-campaign-list { display: grid; gap: 14px; }
.post-campaign { padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfb; }
.post-campaign.draft { border-color: #b9cdbf; background: #fff; box-shadow: 0 10px 25px rgba(22,48,33,.05); }
.post-campaign-head { display: grid; grid-template-columns: 1fr 116px; gap: 18px; align-items: start; margin-bottom: 16px; }
.post-campaign-head h3 { margin: 8px 0 4px; font: 500 17px Georgia,"Yu Mincho",serif; }
.post-campaign-head small { color: var(--muted); font-size: 9px; }
.post-campaign-image,.post-image-placeholder { width: 116px; height: 116px; border-radius: 11px; }
.post-campaign-image { object-fit: cover; border: 1px solid var(--line); }
.post-image-placeholder { display: grid; align-content: center; justify-items: center; gap: 5px; padding: 9px; color: var(--muted); background: #edf1ee; text-align: center; }
.post-image-placeholder span { font-size: 10px; font-weight: 700; }
.post-image-placeholder small { font-size: 8px; line-height: 1.5; }
.post-campaign textarea { font-size: 12px; line-height: 1.8; }
.post-variable-note { margin: 8px 0 14px; color: var(--muted); font-size: 9px; line-height: 1.7; }
.post-variable-note code { padding: 2px 5px; color: var(--green-dark); background: var(--green-soft); border-radius: 4px; }
.post-draft-settings { display: grid; grid-template-columns: 1fr .8fr .8fr 1.4fr; gap: 10px; }
.cta-preview { margin-top: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cta-preview summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--ink); font-size: 10px; font-weight: 700; cursor: pointer; }
.cta-preview-list { display: grid; border-top: 1px solid var(--line); }
.cta-preview-row { display: grid; grid-template-columns: minmax(130px,.8fr) minmax(90px,.45fr) minmax(0,1.5fr); gap: 10px; align-items: center; padding: 9px 13px; border-bottom: 1px solid #edf0ee; font-size: 9px; }
.cta-preview-row:last-child { border-bottom: 0; }
.cta-preview-row strong { font-size: 10px; }
.cta-preview-row span { color: var(--green); font-weight: 700; }
.cta-preview-row code { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cta-preview-row.invalid { background: var(--danger-soft); }
.cta-preview-row.invalid span,.cta-preview-row.invalid code { color: var(--danger); }
.post-store-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.post-store-chips span { padding: 5px 8px; color: #52665a; background: #edf2ee; border-radius: 999px; font-size: 9px; }
.post-campaign-summary { margin: 0; padding: 14px; color: #4e5e54; background: #fff; border: 1px solid #edf0ee; border-radius: 9px; font-size: 11px; line-height: 1.8; white-space: pre-wrap; }
.post-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.post-progress span { padding: 9px 10px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.post-progress strong { display: block; margin-top: 2px; color: var(--ink); font: 500 18px Georgia,serif; }
.post-errors { margin-top: 12px; padding: 10px 12px; color: var(--danger); background: var(--danger-soft); border-radius: 8px; }
.post-errors p { margin: 0 0 5px; font-size: 9px; line-height: 1.6; }
.post-errors p:last-child { margin-bottom: 0; }
.post-errors strong { margin-right: 7px; }
.post-campaign-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.operations-hero { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr); gap: 28px; padding: 34px; margin-bottom: 18px; border: 1px solid #cbd9cf; border-radius: 18px; background: linear-gradient(135deg,#edf4ef,#fff 72%); }
.operations-hero h2 { margin: 8px 0 12px; font: 400 clamp(27px,4vw,42px)/1.35 Georgia, "Yu Mincho", serif; }
.operations-hero p:last-child { max-width: 650px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.operations-actions { display: grid; align-content: center; gap: 9px; }
.operations-actions .button { width: 100%; }
.cta-coverage { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid #c4d8ca; border-radius: 12px; background: #fff; }
.cta-coverage span { color: var(--muted); font-size: 9px; font-weight: 700; }
.cta-coverage strong { color: var(--green-dark); font: 500 25px Georgia,serif; }
.cta-coverage small { color: var(--muted); font: 600 10px Inter,sans-serif; }
.cta-coverage i { height: 5px; overflow: hidden; background: #e7ede9; border-radius: 999px; }
.cta-coverage b { display: block; width: var(--bar-fill, 0%); height: 100%; background: var(--green); border-radius: inherit; }
.operations-grid { grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr); align-items: start; }
.funnel-flow { display: grid; grid-template-columns: repeat(9,auto); align-items: center; gap: 9px; }
.funnel-stage { min-width: 0; padding: 16px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fafcfb; }
.funnel-stage span, .funnel-stage strong, .funnel-stage b, .funnel-stage small { display: block; }
.funnel-stage span { color: #839087; font-size: 9px; }
.funnel-stage strong { min-height: 32px; margin-top: 5px; font-size: 11px; line-height: 1.45; }
.funnel-stage b { margin: 10px 0 3px; color: var(--green-dark); font: 500 27px Georgia, serif; }
.funnel-stage small { color: var(--muted); font-size: 9px; }
.funnel-arrow { color: #91a298; font-style: normal; }
.route-split-head { display: flex; align-items: center; gap: 7px; margin: 15px 0 9px; }
.route-split-head h3 { margin: 0; font-size: 13px; }
.route-split { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.health-score { display: inline-flex; align-items: baseline; gap: 5px; min-width: 54px; font: 600 18px Georgia, serif; }
.health-score small { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 9px Inter,sans-serif; }
.grade-a { color: #2d7347; }.grade-a small { background: #e2f2e7; }
.grade-b { color: #61743c; }.grade-b small { background: #eef2df; }
.grade-c { color: #9a6d28; }.grade-c small { background: #f7ecd9; }
.grade-d { color: var(--danger); }.grade-d small { background: var(--danger-soft); }
.task-title { display: block; color: var(--danger); font-size: 11px; }
.recommendation-list { display: grid; gap: 9px; }
.recommendation-item { padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.recommendation-item.priority-high { background: #fff0ee; }
.recommendation-item.priority-medium { background: #fbf1dd; }
.recommendation-item span, .recommendation-item strong { display: block; }
.recommendation-item span { color: var(--muted); font-size: 9px; }
.recommendation-item strong { margin-top: 3px; font-size: 12px; }
.recommendation-item p { margin: 5px 0 0; color: #657068; font-size: 10px; line-height: 1.65; }
.rank-number { color: var(--green); font: 600 17px Georgia, serif; }
.rank-keyword-list,.rank-competitor-list { display: grid; gap: 8px; min-width: 180px; }
.rank-competitor-list { min-width: 360px; }
#rankTable td:first-child { min-width: 120px; vertical-align: top; }
#rankTable td:first-child strong,.rank-keyword-item > span { white-space: nowrap; }
.rank-keyword-item,.rank-competitor-item { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rank-keyword-item:last-child,.rank-competitor-item:last-child { padding-bottom: 0; border-bottom: 0; }
.rank-keyword-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rank-keyword-item > span,.rank-competitor-item > strong { display: block; color: var(--ink); font-size: 11px; font-weight: 700; }
.rank-competitor-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.compliance-card { padding: 20px; align-self: center; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); }
.compliance-card ul { margin: 12px 0 0; padding-left: 18px; color: rgba(255,255,255,.72); font-size: 11px; line-height: 2.1; }
.compliance-card ol { margin: 12px 0 0; padding-left: 20px; color: rgba(255,255,255,.72); font-size: 11px; line-height: 2.1; }
.link-grid, .settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.link-card { padding: 18px; }
.link-card span, .link-card strong { display: block; }
.link-card span { color: var(--muted); font-size: 10px; }
.link-card strong { margin-top: 3px; font-size: 14px; }
.link-card code { display: block; margin: 14px 0; padding: 9px; overflow: hidden; background: #f5f7f5; color: #657068; border-radius: 7px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.link-card > div:last-child { display: flex; gap: 8px; }
.settings-card { margin: 0; }
.store-cta-section { padding: 16px; border: 1px solid #c8d9ce; border-radius: 12px; background: var(--green-soft); }
.store-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.store-section-head strong,.store-section-head small { display: block; }
.store-section-head strong { color: var(--green-dark); font-size: 12px; }
.store-section-head small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.55; }
.store-section-head .post-check { flex: 0 0 auto; }
.store-cta-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 11px; }
.store-cta-help { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.store-settings-divider { height: 1px; margin: 22px 0; background: var(--line); }
.tone-heading { margin-bottom: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
label { display: grid; gap: 7px; color: #55625a; font-size: 11px; font-weight: 600; }
label.full { grid-column: 1/-1; }
input, textarea, select { width: 100%; padding: 11px 12px; color: var(--ink); background: #fafbfa; border: 1px solid #dce3de; border-radius: 8px; outline: none; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: #6f9c7f; box-shadow: 0 0 0 3px rgba(85,127,99,.1); }
input:disabled, select:disabled { color: #9aa39d; background: #eef1ef; cursor: not-allowed; }
.panel-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.invite-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 12px; }
.invite-result { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 17px 18px; border: 1px solid #bfd2c5; border-radius: 12px; background: var(--green-soft); }
.invite-result > div { min-width: 0; }
.invite-result span, .invite-result strong, .invite-result small { display: block; }
.invite-result span { color: var(--muted); font-size: 10px; }
.invite-result strong { margin: 5px 0; font: 600 25px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.invite-result small { color: var(--muted); font-size: 10px; }
.table-note { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.scope-primary { display: block; color: var(--green-dark); font-size: 12px; }
.scope-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.scope-list span { padding: 4px 7px; color: var(--green); background: var(--green-soft); border-radius: 999px; font-size: 9px; white-space: nowrap; }
.scope-actions { display: grid; justify-items: start; gap: 5px; }
.scope-remove { font-size: 9px; white-space: nowrap; }
.empty-row { padding: 24px 8px; color: var(--muted); text-align: center; font-size: 11px; }
.dialog { width: min(680px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 18px; box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(11,27,18,.62); backdrop-filter: blur(4px); }
.dialog-card { position: relative; padding: 28px; }
.dialog-card h2 { margin: 5px 0 18px; font: 500 24px Georgia, serif; }
.dialog-close { position: absolute; top: 15px; right: 17px; border: 0; background: none; font-size: 25px; cursor: pointer; }
.source-review { padding: 15px; margin-bottom: 17px; background: #f4f7f5; border-radius: 10px; }
.source-review span, .source-review strong { display: block; font-size: 11px; }
.source-review p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.policy-note, .survey-policy, .copy-hint { color: #7a857e; font-size: 10px; line-height: 1.7; }
.dialog-actions { justify-content: flex-end; margin-top: 18px; }
.login-dialog { width: min(470px, calc(100vw - 28px)); }
.login-copy { margin: -7px 0 19px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.login-button { width: 100%; margin-top: 16px; }
.login-error { margin: 9px 0 0; color: var(--danger); font-size: 10px; }
.toast { position: fixed; z-index: 99; left: 50%; bottom: 25px; padding: 12px 17px; color: #fff; background: #1d4430; border-radius: 9px; font-size: 12px; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #943f34; }
.empty-state { padding: 50px; text-align: center; color: var(--muted); }
.empty-state strong, .empty-state span { display: block; }
.empty-state span { margin-top: 6px; font-size: 11px; }

.survey-body { min-height: 100vh; background: var(--cream); }
.survey-shell { width: min(690px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 70px; }
.survey-header { display: flex; align-items: center; gap: 11px; }
.survey-header span, .survey-header strong { display: block; }
.survey-header span { color: var(--muted); font-size: 10px; }
.survey-header strong { margin-top: 2px; font: 500 14px Georgia, serif; }
.survey-intro { padding: 65px 12px 30px; }
.survey-intro h1 { margin: 9px 0 17px; font: 400 clamp(35px,8vw,56px)/1.35 Georgia, "Yu Mincho", serif; letter-spacing: .02em; }
.survey-intro > p:last-child { max-width: 490px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.survey-card { padding: clamp(22px,5vw,40px); }
.step { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 21px 0; border-bottom: 1px solid #e9edea; }
.step:first-child { padding-top: 0; }
.step > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 700; }
.step em { color: #a75246; font-size: 9px; font-style: normal; }
.step small { color: var(--muted); font-size: 9px; font-weight: 500; }
.choice-step { min-width: 0; margin: 0; border: 0; border-bottom: 1px solid #e9edea; }
.choice-question { min-width: 0; }
.choice-question legend { width: 100%; margin: 0 0 13px; padding: 0; font-size: 13px; font-weight: 700; line-height: 1.65; }
.choice-grid { display: grid; gap: 8px; }
.choice-option { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 10px; min-height: 45px; padding: 10px 13px; border: 1px solid #dfe6e1; border-radius: 11px; background: #fff; color: #435048; font-size: 12px; font-weight: 500; line-height: 1.55; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.choice-option:hover { border-color: #a8bcae; background: #f9fbf9; }
.choice-option:has(input:checked) { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 2px rgba(58,92,69,.08); }
.choice-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.confirm-row { display: grid; grid-template-columns: 19px 1fr; gap: 10px; margin: 24px 0; font-weight: 400; line-height: 1.7; }
.confirm-row input { width: 17px; height: 17px; margin-top: 2px; }
.survey-submit { width: 100%; min-height: 55px; justify-content: space-between; padding: 0 21px; }
.survey-policy { margin: 15px 4px 0; text-align: center; }
.draft-card { margin-top: 17px; }
.draft-card h2 { margin: 6px 0 8px; font: 500 24px Georgia, serif; }
.draft-card > p:not(.eyebrow):not(.copy-hint) { color: var(--muted); font-size: 12px; line-height: 1.8; }
.draft-card textarea { margin: 15px 0; font-size: 14px; line-height: 1.85; }
.google-login-note { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; margin: 0 0 14px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 13px; background: #eef1ee; box-shadow: inset 2px 2px 5px rgba(123,137,128,.12), inset -2px -2px 5px rgba(255,255,255,.9); }
.google-login-note > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #315d43; background: #dce9df; font-size: 11px; font-weight: 700; }
.google-login-note p { margin: 0; color: #566159; font-size: 13px; line-height: 1.65; }
.google-login-note strong { display: block; margin-bottom: 2px; color: #29332d; font-size: 14px; }
.draft-actions .button { flex: 1; }
.draft-actions #openGoogle { width: 100%; }
.copy-hint { text-align: center; }
.website-review-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 15px; }
.website-review-fields label:last-child { grid-column: 1 / -1; }
.website-review-fields small { color: var(--muted); font-size: 9px; font-weight: 500; }
.website-review-fields em, .website-rating-field em { color: #a75246; font-size: 9px; font-style: normal; }
.website-rating-field { display: grid; gap: 7px; align-content: start; color: #55625a; font-size: 11px; font-weight: 600; }
.website-star-picker { display: flex; gap: 3px; min-height: 42px; align-items: center; }
.website-star-picker button { padding: 2px; color: #d7dcd9; background: transparent; border: 0; font-size: 27px; line-height: 1; cursor: pointer; transition: color .15s, transform .15s; }
.website-star-picker button.active { color: #e4a72a; }
.website-star-picker button:hover { transform: translateY(-1px); }
.website-button { width: 100%; min-height: 50px; color: #fff; background: #a08968; }

/* 下書き後の3択（Google／ホームページ／今回は投稿しない） */
.review-routes { display: grid; gap: 13px; margin-top: 20px; }
.review-routes-lead { margin: 0; color: #55625a; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.review-route { margin: 0; padding: 17px 17px 15px; border: 1px solid #e0e6e2; border-radius: 14px; background: #fff; }
.review-route[hidden] { display: none; }
.review-route-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.review-route-number { display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 7px; background: #eef2ef; color: #55625a; font: 700 11px Inter, sans-serif; letter-spacing: .04em; }
.review-route h3 { margin: 0; font: 600 16px var(--font-heading, Georgia), "Yu Mincho", serif; color: #29332d; }
.review-route-note { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.review-route-highlight { margin: -7px 0 13px; padding: 10px 12px; border-radius: 10px; background: #f1f6f2; color: #35503f; font-size: 13px; font-weight: 600; line-height: 1.7; }
.review-route-button { width: 100%; min-height: 50px; }
.review-route .copy-hint { margin: 9px 0 0; }
.review-route-skip { background: #f6f8f6; }
.review-route-skip .review-route-button { color: #4a564e; }

/* Googleへ移る前の2ステップ案内（①文章をコピー ②貼り付け方）＝画面を覆うポップアップで出す */
.paste-modal { padding: 0; border: 0; background: transparent; }
.paste-modal:not([open]) { display: none; }
.paste-modal[open] {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 12px;
  background: rgba(17,32,24,.55);
  overscroll-behavior: contain;
}
.paste-modal::backdrop { background: rgba(17,32,24,.55); }
body.paste-modal-open { overflow: hidden; }
.paste-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(440px, 100%);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border-radius: 18px;
  background: #f6f8f6;
  box-shadow: 0 24px 60px rgba(13,32,21,.34);
}
.paste-modal-bar { display: flex; justify-content: flex-end; padding: 6px 6px 0; }
.paste-modal-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4b5650; font-size: 26px; line-height: 1; cursor: pointer; }
.paste-modal-close:hover { background: #e7ece8; }
.paste-modal-body { padding: 0 18px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.paste-modal-step { display: grid; gap: 14px; }
.paste-modal-step[hidden] { display: none; }
.paste-modal-title { margin: 0; color: #22302a; font-size: 19px; font-weight: 700; line-height: 1.5; }
.paste-modal-title:focus { outline: none; }
.paste-modal-lead { margin: -8px 0 0; color: #4f5b54; font-size: 14px; line-height: 1.7; }
.paste-modal-preview { max-height: 34vh; padding: 13px; border: 1px solid #dde5e0; border-radius: 12px; background: #fff; color: #3c4741; font-size: 15px; line-height: 1.85; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.paste-modal-error { margin: 0; padding: 12px 13px; border: 1px solid #e0c4bd; border-radius: 11px; background: #f8ece9; color: #7b493f; font-size: 14px; line-height: 1.7; }
.paste-modal-error[hidden] { display: none; }
.paste-modal-primary { width: 100%; min-height: 56px; font-size: 16px; }
.paste-modal-recopy { width: 100%; min-height: 48px; }
.paste-modal-fallback { margin: 0; text-align: center; }
.paste-modal-fallback[hidden] { display: none; }
.paste-modal-link { padding: 8px 4px; border: 0; border-radius: 8px; background: none; color: #35654b; font-size: 14px; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.paste-modal-link:hover { color: #214832; }
.paste-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: paste-step; }
.paste-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 11px; color: #2b352e; font-size: 15px; font-weight: 600; line-height: 1.6; counter-increment: paste-step; }
.paste-steps li::before { content: counter(paste-step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #39744f; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }
.paste-steps li > span { min-width: 0; text-wrap: balance; line-break: strict; }
.paste-steps strong { padding: 1px 4px; border-radius: 5px; background: #dcecdf; color: #1f5236; white-space: nowrap; }
.paste-voice-note { margin: -3px 0 0; padding: 12px 13px; border-radius: 11px; background: #e9f0eb; color: #3d4f45; font-size: 14px; line-height: 1.7; }
.paste-figure { margin: 0; }
.paste-figure-art { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.paste-figure figcaption { margin-top: 8px; color: #5e6a63; font-size: 13px; line-height: 1.6; text-align: center; }
.thanks-card { margin-top: 17px; text-align: center; }
.thanks-card h2 { margin: 6px 0 10px; font-family: Georgia, "Yu Mincho", serif; font-weight: 500; font-size: clamp(18px, 5vw, 24px); line-height: 1.5; text-wrap: balance; }
.thanks-card > p:not(.eyebrow) { margin: 0 auto 20px; max-width: 30em; color: var(--muted); font-size: 13px; line-height: 1.9; }

/* Mobile-first, one-question-at-a-time survey */
.survey-stepper-page {
  min-height: 100dvh;
  background: #edf0ed;
}
.survey-stepper-page .survey-shell {
  width: min(620px, calc(100% - 20px));
  padding: 16px 0 calc(42px + env(safe-area-inset-bottom));
}
.survey-stepper-page .survey-header {
  gap: 10px;
  padding: 0 4px;
}
.survey-stepper-page .survey-header .mini-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.survey-stepper-page .survey-header span { font-size: 11px; }
.survey-stepper-page .survey-header strong {
  margin-top: 1px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
}
.survey-stepper-page .survey-intro {
  padding: 28px 6px 20px;
}
.survey-stepper-page .survey-intro .eyebrow {
  font-size: 11px;
  letter-spacing: .08em;
}
.survey-stepper-page .survey-intro h1 {
  margin: 8px 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(30px, 9.3vw, 43px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0;
}
.survey-stepper-page .survey-intro > p:last-child {
  margin: 0;
  color: #59645d;
  font-size: 13px;
  line-height: 1.7;
}
.survey-progress {
  position: sticky;
  z-index: 8;
  top: 0;
  margin: 0 -2px 12px;
  padding: 13px 14px 12px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 15px;
  background: rgba(244,246,244,.94);
  box-shadow: 7px 7px 16px rgba(166,176,169,.28), -6px -6px 15px rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}
.survey-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.survey-progress-copy strong {
  color: #254b35;
  font-size: 14px;
  letter-spacing: .04em;
}
.survey-progress-copy span {
  color: #657069;
  font-size: 12px;
  font-weight: 600;
}
.survey-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #d8ded9;
  box-shadow: inset 2px 2px 4px rgba(142,153,146,.28), inset -2px -2px 4px rgba(255,255,255,.8);
}
.survey-progress-track span {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: #39744f;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.32);
  transition: width .28s ease;
}
.survey-stepper-page .survey-stepper-card {
  min-height: 455px;
  padding: 22px 17px 16px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 20px;
  background: #f6f8f6;
  box-shadow: 10px 10px 24px rgba(153,164,157,.28), -9px -9px 22px rgba(255,255,255,.92);
}
.survey-step-panel {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  animation: survey-step-forward .24s ease-out;
}
.survey-step-panel.is-backward { animation-name: survey-step-back; }
.survey-step-panel[hidden],
.survey-stepper-card[hidden],
.survey-progress[hidden],
.survey-stepper-page .survey-intro[hidden],
.survey-step-actions .button[hidden] { display: none !important; }
.survey-question-kicker {
  margin: 0 0 8px;
  color: #39744f;
  font-size: 12px;
  font-weight: 800;
}
.survey-stepper-page .choice-step {
  border: 0;
}
.survey-stepper-page .choice-question legend,
.survey-final-step legend {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  color: #202823;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.55;
}
.survey-stepper-page .choice-question legend em {
  display: inline-flex;
  margin-left: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #7b493f;
  background: #f4e7e3;
  font-size: 10px;
  font-style: normal;
  vertical-align: 2px;
}
.survey-stepper-page .choice-grid { gap: 10px; }
.survey-stepper-page .choice-option {
  grid-template-columns: 22px 1fr;
  gap: 11px;
  min-height: 61px;
  padding: 13px 14px;
  border: 1px solid #d7ded9;
  border-radius: 14px;
  background: #f8faf8;
  color: #303a33;
  box-shadow: 4px 4px 9px rgba(169,178,172,.19), -4px -4px 9px rgba(255,255,255,.9);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.48;
}
.survey-stepper-page .choice-option:hover {
  border-color: #b7c3bb;
  background: #fbfcfb;
}
.survey-stepper-page .choice-option:has(input:checked) {
  border-color: #6b967a;
  background: #e4eee7;
  box-shadow: inset 3px 3px 7px rgba(134,157,142,.22), inset -3px -3px 7px rgba(255,255,255,.8);
}
.survey-stepper-page .choice-option input {
  width: 20px;
  height: 20px;
}
.survey-final-step small {
  color: #657069;
  font-size: 11px;
  font-weight: 600;
}
.survey-final-step textarea {
  min-height: 116px;
  resize: vertical;
  font-size: 16px;
  line-height: 1.65;
}
/* 自由記入欄まわりの注意書き＝地の文として静かに置く（枠・背景・強調なし／コントラスト比4.5:1以上） */
.survey-input-note {
  margin: 10px 2px 0;
  color: #5e6a63;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}
.survey-data-note {
  margin: 9px 2px 0;
}
.survey-data-note > summary {
  color: #657069;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  cursor: pointer;
}
.survey-data-note > summary::marker { color: #8d968f; font-size: 11px; }
.survey-data-note[open] > summary { margin-bottom: 2px; }
.survey-data-note-body p {
  margin: 6px 0 0;
  color: #5e6a63;
  font-size: 12px;
  line-height: 1.75;
}
.survey-stepper-page .confirm-row {
  grid-template-columns: 23px 1fr;
  gap: 11px;
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 13px;
  background: #edf1ee;
  color: #4b5650;
  font-size: 12px;
  line-height: 1.65;
  cursor: pointer;
}
.survey-stepper-page .confirm-row input {
  width: 21px;
  height: 21px;
  margin: 1px 0 0;
  accent-color: #39744f;
}
.survey-step-actions {
  position: sticky;
  z-index: 6;
  bottom: max(8px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(94px,.7fr) minmax(0,1.5fr);
  gap: 9px;
  margin: 22px -5px 0;
  padding: 8px 5px;
  border-radius: 14px;
  background: rgba(246,248,246,.95);
  backdrop-filter: blur(10px);
}
.survey-step-actions .button {
  min-height: 55px;
  border-radius: 13px;
  font-size: 13px;
}
.survey-step-actions .survey-next,
.survey-step-actions .survey-submit {
  justify-content: space-between;
  padding: 0 16px;
}
.survey-step-actions .survey-back[hidden] + .survey-next { grid-column: 1 / -1; }
.survey-step-actions .survey-submit { width: 100%; }
.survey-step-actions .survey-next:disabled,
.survey-step-actions .survey-submit:disabled {
  color: #77817a;
  background: #dce1dd;
  box-shadow: inset 2px 2px 5px rgba(151,161,154,.24);
  cursor: not-allowed;
  opacity: 1;
}
.survey-stepper-page .survey-policy {
  margin: 10px 5px 0;
  font-size: 10px;
  line-height: 1.6;
}
@keyframes survey-step-forward {
  from { opacity: 0; transform: translateX(14px); }
}
@keyframes survey-step-back {
  from { opacity: 0; transform: translateX(-14px); }
}
@media (min-width: 621px) {
  .survey-stepper-page .survey-shell { padding-top: 26px; }
  .survey-stepper-page .survey-intro { padding: 38px 10px 24px; }
  .survey-stepper-page .survey-stepper-card { min-height: 485px; padding: 30px 32px 20px; }
  .survey-stepper-page .choice-question legend,
  .survey-final-step legend { font-size: 21px; }
  .survey-stepper-page .choice-option { padding: 13px 16px; font-size: 14px; }
  .paste-modal-title { font-size: 21px; }
  .paste-steps li { font-size: 16px; }
}
@media (max-width: 620px) {
  .survey-stepper-page .survey-stepper-card { padding-bottom: 100px; }
  .survey-stepper-page .survey-step-actions {
    position: fixed;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 10px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.84);
    box-shadow: 6px 6px 18px rgba(133,145,137,.28), -5px -5px 16px rgba(255,255,255,.86);
  }
}
@media (prefers-reduced-motion: reduce) {
  .survey-step-panel,
  .survey-step-panel.is-backward { animation: none; }
  .survey-progress-track span { transition: none; }
}

.reply-shell { width: min(620px, calc(100% - 24px)); }
.reply-intro { padding-top: 48px; }
.reply-intro h1 { font-size: clamp(34px, 8vw, 50px); }
.reply-loading { color: var(--muted); text-align: center; font-size: 12px; }
.reply-error h2, .reply-success h2 { margin: 7px 0 10px; font: 500 25px Georgia, "Yu Mincho", serif; }
.reply-error > p:last-child, .reply-success > p:last-child { color: var(--muted); font-size: 12px; line-height: 1.8; }
.reply-review-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.reply-reviewer { display: block; font-size: 14px; }
.reply-comment { margin: 8px 0 24px; padding-bottom: 22px; color: #526058; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.9; }
.reply-text-label { font-size: 12px; }
.reply-text-label textarea { margin-top: 3px; font-size: 14px; line-height: 1.85; }
.reply-confirm { margin-bottom: 18px; }
.reply-policy { margin: 14px 4px 0; text-align: center; }
.reply-success { text-align: center; }
.reply-success-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; color: #fff; background: var(--green); border-radius: 50%; font-size: 25px; }

.report-body { background: #e9eeea; }
.report-page { width: min(1120px,calc(100% - 32px)); margin: 28px auto; padding: 44px; background: #fff; box-shadow: var(--shadow); }
.report-header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.report-header h1 { margin: 5px 0 4px; font: 600 25px Georgia,serif; letter-spacing: .08em; }
.report-header p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.report-header-actions { display: flex; gap: 8px; align-items: flex-start; }
.report-title { padding: 54px 0 38px; }
.report-title span { color: var(--green); font-size: 11px; font-weight: 700; }
.report-title h2 { margin: 8px 0 14px; font: 400 clamp(36px,6vw,62px)/1.22 Georgia,"Yu Mincho",serif; }
.report-title p { max-width: 660px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.report-metrics { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.report-metrics article { padding: 19px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.report-metrics span,.report-metrics small,.report-metrics strong { display: block; }
.report-metrics span,.report-metrics small { color: var(--muted); font-size: 9px; }
.report-metrics strong { margin: 7px 0 5px; font: 500 28px Georgia,serif; }
.report-section { padding: 34px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.report-section-head { margin-bottom: 17px; }
.report-section-head h3 { margin: 4px 0 0; font: 500 22px Georgia,"Yu Mincho",serif; }
.report-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.report-actions article { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 14px; background: #f6f8f6; border-radius: 9px; }
.report-actions article > span { color: var(--green); font: 600 15px Georgia,serif; }
.report-actions strong { font-size: 11px; }
.report-actions p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.report-footer { padding-top: 20px; color: var(--muted); font-size: 9px; text-align: right; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .report-body { background: #fff; }
  .report-page { width: 100%; margin: 0; padding: 0; box-shadow: none; }
  .report-header-actions { display: none; }
  .report-title { padding: 32px 0 26px; }
  .report-title h2 { font-size: 42px; }
  .report-section { padding: 24px 0; }
  .funnel-stage { padding: 10px; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 20; right: 12px; bottom: 12px; left: 12px; top: auto; width: auto; height: auto; padding: 8px; border-radius: 14px; box-shadow: var(--shadow); }
  .brand-block, .sidebar-foot { display: none; }
  .sidebar nav { grid-template-columns: repeat(7,1fr); gap: 4px; margin: 0; }
  .nav-item { padding: 10px 5px; text-align: center; font-size: 9px; }
  .nav-item span { display: block; width: auto; margin-bottom: 3px; }
  .main-content { padding: 24px 18px 100px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .content-grid { grid-template-columns: 1fr; }
  .operations-hero { grid-template-columns: 1fr; }
  .post-hero { grid-template-columns: 1fr; }
  .post-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .post-store-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .post-brief { grid-column: 1/-1; }
  .funnel-flow { grid-template-columns: 1fr; }
  .route-split { grid-template-columns: 1fr; }
  .funnel-arrow { transform: rotate(90deg); text-align: center; }
  .review-list.compact { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .invite-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .topbar { align-items: flex-start; }
  .top-actions { flex-direction: column; }
  .top-actions .button { min-height: 36px; padding: 0 10px; font-size: 10px; }
  .metric-grid { gap: 9px; }
  .metric-card { padding: 16px; }
  .metric-card strong { font-size: 25px; }
  .metric-icon { top: 13px; right: 13px; }
  .panel { padding: 17px; }
  .split-hero { grid-template-columns: 1fr; padding: 25px; }
  .post-hero { padding: 25px; }
  .post-hero-flow,.post-form-grid,.post-store-grid,.post-draft-settings { grid-template-columns: 1fr; }
  .cta-preview-row { grid-template-columns: 1fr; gap: 3px; }
  .store-cta-grid { grid-template-columns: 1fr; }
  .store-section-head { align-items: flex-start; }
  .post-brief { grid-column: auto; }
  .post-campaign-head { grid-template-columns: 1fr 82px; }
  .post-campaign-image,.post-image-placeholder { width: 82px; height: 82px; }
  .post-progress { grid-template-columns: 1fr 1fr 1fr; }
  .link-grid, .form-grid { grid-template-columns: 1fr; }
  .invite-form { grid-template-columns: 1fr; }
  .invite-result { align-items: stretch; flex-direction: column; }
  label.full { grid-column: auto; }
  .draft-actions { flex-direction: column; }
  .website-review-fields { grid-template-columns: 1fr; }
  .website-review-fields label:last-child { grid-column: auto; }
  .review-route { padding: 15px 14px 13px; }
  .review-route h3 { font-size: 15px; }
  .paste-modal[open] { padding: 8px; }
  .paste-modal-body { padding: 0 14px 18px; }
  .paste-steps li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .paste-steps li::before { width: 30px; height: 30px; font-size: 14px; }
  .report-page { width: 100%; margin: 0; padding: 22px 16px; }
  .report-header { align-items: flex-start; flex-direction: column; }
  .report-header-actions { width: 100%; }
  .report-header-actions .button { flex: 1; }
  .report-metrics { grid-template-columns: repeat(2,1fr); }
  .report-actions { grid-template-columns: 1fr; }
}

/* SALON VOICE operator UI — restrained, information-first administration */
.admin-body {
  --ink: #252b27;
  --muted: #626b65;
  --green: #315b43;
  --green-dark: #202823;
  --green-soft: #eef2ef;
  --paper: #fff;
  --line: #d9dedb;
  min-height: 100vh;
  color: var(--ink);
  background: #f3f4f2;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
}
.admin-body .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
.admin-body .sidebar {
  padding: 24px 16px 20px;
  background: #202823;
  border-right: 1px solid #303a33;
}
.admin-body .brand-block {
  gap: 10px;
  padding: 0 8px 22px;
  border-bottom-color: rgba(255,255,255,.09);
}
.admin-body .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  color: #263329;
  background: #eef1ee;
  font: 700 10px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  letter-spacing: .04em;
}
.admin-body .brand-block strong {
  font: 700 13px/1.3 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  letter-spacing: .045em;
}
.admin-body .brand-block span { margin-top: 3px; color: rgba(255,255,255,.47); font-size: 10px; }
.admin-body .sidebar nav { gap: 2px; margin-top: 18px; }
.admin-body .nav-item {
  position: relative;
  padding: 10px 12px;
  border-radius: 3px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 500;
  transition: color .12s, background .12s;
}
.admin-body .nav-item:hover { color: #fff; background: rgba(255,255,255,.055); }
.admin-body .nav-item.active { color: #1f2922; background: #f3f5f3; font-weight: 700; }
.admin-body .sidebar-foot { padding: 15px 8px 0; border-top-color: rgba(255,255,255,.09); color: #5f696f; font-size: 10px; }
.admin-body .status-dot { width: 6px; height: 6px; margin-right: 6px; box-shadow: none; }
.admin-body .main-content { padding: 25px 32px 52px; }
.admin-body .topbar {
  min-height: 58px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d5d9d6;
}
.admin-body .topbar h1 {
  margin-top: 3px;
  font: 700 24px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;
  letter-spacing: 0;
}
.admin-body .eyebrow {
  color: #737b76;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .025em;
}
.admin-body .button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 12px;
  transition: border-color .12s, background .12s;
}
.admin-body .button:hover { transform: none; }
.admin-body .button.primary { color: #fff; background: #315b43; box-shadow: none; }
.admin-body .button.primary:hover { background: #274b36; }
.admin-body .button.ghost { color: #303732; background: #fff; border-color: #cfd4d0; }
.admin-body .button.ghost:hover { border-color: #aeb6b0; background: #f8f9f7; }
.admin-body .button.small { min-height: 32px; padding: 0 11px; }
.admin-body .view.active { animation: none; }
.admin-body .notice {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid #d2d9d4;
  border-radius: 3px;
  color: #526057;
  background: #f8faf8;
  font-size: 11px;
  line-height: 1.65;
}
.admin-body .metric-grid { gap: 10px; margin-bottom: 14px; }
.admin-body .metric-card,
.admin-body .panel,
.admin-body .link-card,
.admin-body .survey-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}
.admin-body .metric-card { padding: 16px; }
.admin-body .metric-card strong {
  margin: 6px 0 5px;
  font: 700 28px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  letter-spacing: -.025em;
}
.admin-body .metric-icon { display: none; }
.admin-body .content-grid { gap: 14px; margin-bottom: 14px; }
.admin-body .panel { padding: 19px; margin-bottom: 14px; }
.admin-body .panel-head { gap: 14px; margin-bottom: 15px; }
.admin-body .panel h2,
.admin-body .post-campaign-head h3,
.admin-body .dialog-card h2 {
  margin-top: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
.admin-body .panel h2 { font-size: 16px; line-height: 1.4; }
.admin-body table { font-size: 11px; }
.admin-body th {
  padding: 9px 11px;
  color: #59635c;
  background: #f7f8f6;
  border-top: 1px solid #e3e6e3;
  border-bottom-color: #d9dedb;
  font-size: 10px;
  font-weight: 600;
}
.admin-body td { padding: 12px 11px; }
.admin-body .badge,
.admin-body .chip,
.admin-body .scope-list span,
.admin-body .post-store-chips span { border-radius: 3px; }
.admin-body .chip { padding: 7px 11px; font-size: 10px; }
.admin-body .chip.active { background: #315b43; }
.admin-body .review-list { gap: 9px; }
.admin-body .review-card { padding: 15px; border-radius: 4px; }
.admin-body .review-card.attention { background: #fff1ef; }
.admin-body .review-body { padding: 11px 0 13px; }
.admin-body .bar,
.admin-body .bar i { border-radius: 2px; }
.admin-body .split-hero,
.admin-body .post-hero,
.admin-body .operations-hero {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  gap: 24px;
  padding: 23px;
  margin-bottom: 14px;
  overflow: visible;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.admin-body .split-hero .eyebrow,
.admin-body .post-hero .eyebrow { color: #737b76; }
.admin-body .split-hero h2,
.admin-body .post-hero h2,
.admin-body .operations-hero h2 {
  margin: 5px 0 8px;
  font: 700 22px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;
  letter-spacing: 0;
}
.admin-body .split-hero p,
.admin-body .post-hero p:last-child,
.admin-body .operations-hero p:last-child {
  max-width: 720px;
  margin-bottom: 0;
  color: #626b65;
  font-size: 11px;
  line-height: 1.8;
}
.admin-body .post-hero-flow {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}
.admin-body .post-hero-flow span {
  padding: 11px 12px;
  color: #475149;
  background: #f6f7f5;
  border: 1px solid #dde1de;
  border-radius: 3px;
  font-size: 10px;
}
.admin-body .compliance-card {
  padding: 16px 17px;
  color: var(--ink);
  background: #f6f7f5;
  border: 1px solid #dde1de;
  border-radius: 4px;
}
.admin-body .compliance-card strong { font-size: 11px; }
.admin-body .compliance-card ul,
.admin-body .compliance-card ol { margin-top: 9px; color: #626b65; font-size: 10px; line-height: 1.9; }
.admin-body .operations-actions { grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: 7px; }
.admin-body .operations-actions .muted { grid-column: 1/-1; }
.admin-body .cta-coverage {
  grid-column: 1/-1;
  padding: 11px 13px;
  border-color: #d7ddd8;
  border-radius: 4px;
}
.admin-body .cta-coverage strong,
.admin-body .funnel-stage b,
.admin-body .health-score,
.admin-body .rank-number,
.admin-body .post-progress strong {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-weight: 700;
}
.admin-body .cta-coverage strong { font-size: 22px; }
.admin-body .funnel-flow { gap: 7px; }
.admin-body .funnel-stage { padding: 13px 11px; border-radius: 4px; background: #fafbfa; }
.admin-body .funnel-stage b { margin-top: 8px; font-size: 24px; }
.admin-body .recommendation-item { border-radius: 3px; background: #fff; }
.admin-body .post-store-grid { gap: 6px; }
.admin-body .post-store-choice {
  padding: 10px 11px;
  background: #fff;
  border-radius: 4px;
}
.admin-body .post-store-choice:has(input:checked) { background: #f1f5f2; border-color: #7d9b86; box-shadow: none; }
.admin-body .post-campaign { padding: 17px; border-radius: 5px; background: #fafbfa; }
.admin-body .post-campaign.draft { border-color: #9daf9f; box-shadow: none; }
.admin-body .post-campaign-head h3 { font-size: 15px; }
.admin-body .post-campaign-image,
.admin-body .post-image-placeholder { border-radius: 4px; }
.admin-body .cta-preview,
.admin-body .post-campaign-summary,
.admin-body .post-progress span,
.admin-body .post-errors { border-radius: 3px; }
.admin-body .settings-grid,
.admin-body .link-grid { gap: 10px; }
.admin-body .link-card { padding: 15px; }
.admin-body .link-card code { margin: 11px 0; border-radius: 3px; }
.admin-body .store-cta-section {
  padding: 14px;
  background: #f6f8f6;
  border-color: #d8ded9;
  border-radius: 4px;
}
.admin-body input,
.admin-body textarea,
.admin-body select {
  padding: 10px 11px;
  color: #252b27;
  background: #fff;
  border-color: #cfd5d0;
  border-radius: 4px;
}
.admin-body input:focus,
.admin-body textarea:focus,
.admin-body select:focus { border-color: #53765e; box-shadow: 0 0 0 2px rgba(49,91,67,.09); }
.admin-body .invite-result,
.admin-body .source-review { border-radius: 4px; }
.admin-body .dialog { border: 1px solid #cfd5d0; border-radius: 6px; box-shadow: 0 18px 50px rgba(22,28,24,.18); }
.admin-body .dialog::backdrop { background: rgba(20,25,22,.55); backdrop-filter: none; }
.admin-body .dialog-card h2 { font-size: 21px; }
.admin-body .toast { border-radius: 4px; box-shadow: 0 10px 30px rgba(22,28,24,.16); }

@media (max-width: 900px) {
  .admin-body .app-shell { grid-template-columns: 1fr; }
  .admin-body .sidebar {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    top: auto;
    width: 100%;
    height: auto;
    padding: 7px 8px;
    border: 0;
    border-top: 1px solid #303a33;
    border-radius: 0;
    box-shadow: none;
  }
  .admin-body .sidebar nav { display: flex; gap: 3px; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .admin-body .sidebar nav::-webkit-scrollbar { display: none; }
  .admin-body .nav-item { flex: 0 0 auto; min-width: 88px; padding: 9px 8px; text-align: center; font-size: 9px; }
  .admin-body .main-content { padding: 20px 17px 82px; }
  .admin-body .split-hero,
  .admin-body .post-hero,
  .admin-body .operations-hero { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .admin-body .topbar { align-items: flex-start; }
  .admin-body .topbar h1 { font-size: 21px; }
  .admin-body .top-actions { flex-direction: row; }
  .admin-body .top-actions .button { min-height: 34px; font-size: 9px; }
  .admin-body .panel { padding: 15px; }
  .admin-body .split-hero,
  .admin-body .post-hero,
  .admin-body .operations-hero { padding: 17px; }
  .admin-body .split-hero h2,
  .admin-body .post-hero h2,
  .admin-body .operations-hero h2 { font-size: 19px; }
  .admin-body .operations-actions { grid-template-columns: 1fr; }
  .admin-body .operations-actions .muted,
  .admin-body .cta-coverage { grid-column: auto; }
}

/* Soft-neumorphism layer: quiet depth with Google-inspired functional colors */
.admin-body {
  --google-blue: #1a73e8;
  --google-red: #d93025;
  --google-yellow: #f9ab00;
  --google-green: #188038;
  --neu-bg: #e9eef2;
  --neu-light: rgba(255,255,255,.88);
  --neu-dark: rgba(176,186,194,.52);
  --neu-control-raised: 5px 5px 11px rgba(174,184,191,.5), -5px -5px 11px rgba(255,255,255,.9);
  --neu-control-hover: 7px 7px 15px rgba(174,184,191,.52), -7px -7px 15px rgba(255,255,255,.94);
  --neu-control-pressed: inset 4px 4px 10px rgba(174,184,191,.52), inset -4px -4px 10px rgba(255,255,255,.84);
  background: var(--neu-bg);
}
.admin-body .sidebar {
  color: #30363b;
  background: #e7ecef;
  border-right: 0;
  box-shadow: inset -8px 0 18px rgba(174,184,191,.28), 7px 0 18px rgba(255,255,255,.4);
}
.admin-body .brand-block { border-bottom-color: rgba(115,126,134,.16); }
.admin-body .brand-mark {
  color: #fff;
  background: linear-gradient(135deg,var(--google-blue) 0 25%,var(--google-red) 25% 50%,var(--google-yellow) 50% 75%,var(--google-green) 75%);
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 6px 6px 12px rgba(154,165,173,.52), -5px -5px 11px rgba(255,255,255,.92), inset -3px -3px 7px rgba(47,57,65,.2), inset 3px 3px 7px rgba(255,255,255,.22);
}
.admin-body .brand-block strong { color: #343b40; }
.admin-body .brand-block span { color: #5f696f; }
.admin-body .nav-item {
  color: #59636b;
  transform: translateY(0) scale(1);
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.admin-body .nav-item:nth-child(1) { --nav-accent: var(--google-blue); }
.admin-body .nav-item:nth-child(2) { --nav-accent: var(--google-red); }
.admin-body .nav-item:nth-child(3) { --nav-accent: var(--google-yellow); }
.admin-body .nav-item:nth-child(4) { --nav-accent: var(--google-green); }
.admin-body .nav-item:nth-child(5) { --nav-accent: var(--google-blue); }
.admin-body .nav-item:nth-child(6) { --nav-accent: var(--google-red); }
.admin-body .nav-item:nth-child(7) { --nav-accent: var(--google-yellow); }
.admin-body .nav-item:hover {
  color: #333b40;
  background: rgba(255,255,255,.34);
  box-shadow: var(--neu-control-hover);
  transform: translateY(-1px);
}
.admin-body .nav-item:active:not(.active) {
  background: #e6ebef;
  box-shadow: var(--neu-control-pressed);
  transform: translateY(1px) scale(.985);
}
.admin-body .nav-item.active {
  color: #fff;
  background: var(--nav-accent);
  box-shadow: inset 4px 4px 10px rgba(36,61,85,.26), inset -4px -4px 10px rgba(255,255,255,.20), 1px 1px 2px rgba(117,128,137,.2);
  transform: translateY(0);
}
.admin-body .nav-item:nth-child(3).active,
.admin-body .nav-item:nth-child(7).active { color: #493807; }
.admin-body .nav-item.active::before { display: none; }
.admin-body .sidebar-foot { border-top-color: rgba(115,126,134,.16); color: #5f696f; }
.admin-body .status-dot { background: var(--google-green); }
.admin-body .main-content { background: transparent; }
.admin-body .topbar { border-bottom: 0; }
.admin-body .topbar .eyebrow::before { display: none; }
.admin-body .eyebrow { --label-accent: var(--google-blue); width: fit-content; padding: 7px 13px; display: inline-flex; align-items: center; color: #fff; background: var(--label-accent); border: 1px solid rgba(255,255,255,.46); border-radius: 6px 17px 17px 6px; box-shadow: 4px 4px 9px rgba(154,165,173,.42), -3px -3px 8px rgba(255,255,255,.8), inset -2px -2px 5px rgba(42,69,96,.16); letter-spacing: .08em; }
.admin-body .eyebrow::before {
  display: none;
}
.admin-body #view-dashboard { --section-accent: var(--google-blue); }
.admin-body #view-surveys { --section-accent: var(--google-yellow); }
.admin-body #view-posts { --section-accent: var(--google-green); }
.admin-body #view-operations { --section-accent: var(--google-blue); }
.admin-body #view-recipients { --section-accent: var(--google-red); }
.admin-body #view-stores { --section-accent: var(--google-yellow); }
.admin-body .view .eyebrow { --label-accent: var(--section-accent,var(--google-blue)); }
.admin-body #view-surveys .eyebrow,
.admin-body #view-stores .eyebrow { color: #493807; }
.admin-body #view-posts .post-hero .eyebrow,
.admin-body #view-recipients .split-hero .eyebrow { color: #fff; }
.admin-body .button {
  border-color: transparent;
  background: #e9eef2;
  box-shadow: var(--neu-control-raised);
  transform: translateY(0) scale(1);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.admin-body .button:hover {
  box-shadow: var(--neu-control-hover);
  transform: translateY(-1px);
}
.admin-body .button:active:not(:disabled) {
  box-shadow: var(--neu-control-pressed);
  transform: translateY(1px) scale(.985);
}
.admin-body .button.primary {
  color: #fff;
  background: #3f6f54;
  box-shadow: 5px 5px 10px rgba(153,164,157,.48), -4px -4px 9px rgba(255,255,255,.82);
}
.admin-body .button.primary:hover {
  background: #356348;
  box-shadow: 7px 7px 15px rgba(146,158,150,.5), -6px -6px 14px rgba(255,255,255,.84);
}
.admin-body .button.primary:active:not(:disabled) {
  background: #386349;
  box-shadow: inset 4px 4px 10px rgba(31,67,46,.48), inset -4px -4px 10px rgba(255,255,255,.16);
  transform: translateY(1px) scale(.985);
}
.admin-body .button.ghost { color: #364047; background: #e9eef2; border-color: rgba(255,255,255,.52); }
.admin-body .notice {
  border: 1px solid rgba(255,255,255,.62);
  background: #dfeee4;
  box-shadow: 5px 5px 11px rgba(174,184,191,.4), -5px -5px 11px rgba(255,255,255,.82), inset -2px -2px 5px rgba(61,104,75,.08);
}
.admin-body .metric-card,
.admin-body .panel,
.admin-body .link-card,
.admin-body .survey-card,
.admin-body .split-hero,
.admin-body .post-hero,
.admin-body .operations-hero {
  background: #e9eef2;
  border-color: rgba(255,255,255,.66);
  border-radius: 14px;
  box-shadow: 9px 9px 18px var(--neu-dark), -9px -9px 18px var(--neu-light);
}
.admin-body .metric-card { overflow: hidden; }
.admin-body .metric-card::before {
  display: none;
}
.admin-body .metric-card:nth-child(1) { --metric-color: var(--google-blue); }
.admin-body .metric-card:nth-child(2) { --metric-color: var(--google-red); }
.admin-body .metric-card:nth-child(3) { --metric-color: var(--google-yellow); }
.admin-body .metric-card:nth-child(4) { --metric-color: var(--google-green); }
.admin-body .metric-card:nth-child(1) { background: #e2ebfb; }
.admin-body .metric-card:nth-child(2) { background: #f6e3e1; }
.admin-body .metric-card:nth-child(3) { background: #f8edcf; }
.admin-body .metric-card:nth-child(4) { background: #dfefe4; }
.admin-body .metric-card:nth-child(1) .metric-icon { color: #fff; background: var(--google-blue); }
.admin-body .metric-card:nth-child(2) .metric-icon { color: #fff; background: var(--google-red); }
.admin-body .metric-card:nth-child(3) .metric-icon { color: #493807; background: var(--google-yellow); }
.admin-body .metric-card:nth-child(4) .metric-icon { color: #fff; background: var(--google-green); }
.admin-body .metric-icon { width: 40px; height: 40px; border-radius: 10px 20px 20px 10px; box-shadow: 4px 4px 9px rgba(139,151,160,.38), -3px -3px 8px rgba(255,255,255,.72), inset -2px -2px 5px rgba(39,60,83,.16); }
.admin-body .panel { overflow: hidden; }
.admin-body .panel-head { position: relative; }
.admin-body th { background: rgba(255,255,255,.34); border-top-color: rgba(255,255,255,.52); }
.admin-body td { border-bottom-color: rgba(173,183,190,.28); }
.admin-body .badge { box-shadow: inset 2px 2px 4px rgba(166,176,183,.18), inset -2px -2px 4px rgba(255,255,255,.68); }
.admin-body .chip {
  color: #59636b;
  background: #e9eef2;
  border-color: transparent;
  box-shadow: 3px 3px 7px rgba(174,184,191,.42), -3px -3px 7px rgba(255,255,255,.8);
  transform: translateY(0) scale(1);
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.admin-body .chip:hover:not(.active) { box-shadow: var(--neu-control-hover); transform: translateY(-1px); }
.admin-body .chip:active:not(.active) { box-shadow: var(--neu-control-pressed); transform: translateY(1px) scale(.97); }
.admin-body .chip.active {
  color: #fff;
  background: var(--google-blue);
  box-shadow: inset 3px 3px 7px rgba(37,82,156,.34), inset -3px -3px 7px rgba(255,255,255,.24);
  transform: translateY(0);
}
.admin-body .review-card,
.admin-body .post-store-choice,
.admin-body .post-campaign,
.admin-body .recommendation-item {
  background: #e9eef2;
  border-color: rgba(255,255,255,.6);
  border-radius: 9px;
  box-shadow: 4px 4px 9px rgba(174,184,191,.34), -4px -4px 9px rgba(255,255,255,.66);
}
.admin-body .review-card.attention { border: 1px solid rgba(255,255,255,.58); background: #f6e3e1; }
.admin-body .bar { background: rgba(174,184,191,.36); box-shadow: inset 2px 2px 3px rgba(157,168,176,.3); }
.admin-body .bar i { background: var(--section-accent,var(--google-blue)); }
.admin-body .post-hero-flow span {
  color: #fff;
  background: var(--flow-color,var(--google-blue));
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 7px 18px 18px 7px;
  box-shadow: 4px 4px 9px rgba(157,168,176,.42), -3px -3px 8px rgba(255,255,255,.76), inset -2px -2px 5px rgba(34,57,81,.16);
}
.admin-body .post-hero-flow span:nth-child(1) { --flow-color: var(--google-blue); }
.admin-body .post-hero-flow span:nth-child(2) { --flow-color: var(--google-red); }
.admin-body .post-hero-flow span:nth-child(3) { --flow-color: var(--google-yellow); }
.admin-body .post-hero-flow span:nth-child(4) { --flow-color: var(--google-green); }
.admin-body .post-hero-flow span:nth-child(3) { color: #493807; }
.admin-body .compliance-card,
.admin-body .store-cta-section,
.admin-body .cta-coverage,
.admin-body .funnel-stage,
.admin-body .source-review {
  background: #e9eef2;
  border-color: rgba(255,255,255,.62);
  border-radius: 8px;
  box-shadow: inset 4px 4px 8px rgba(174,184,191,.30), inset -4px -4px 8px rgba(255,255,255,.7);
}
.admin-body .funnel-stage:nth-child(1) { background: #e2ebfb; }
.admin-body .funnel-stage:nth-child(3) { background: #f6e3e1; }
.admin-body .funnel-stage:nth-child(5) { background: #f8edcf; }
.admin-body .funnel-stage:nth-child(7) { background: #dfefe4; }
.admin-body .funnel-stage:nth-child(9) { background: #e2ebfb; }
.admin-body .post-store-choice:has(input:checked) {
  background: #e9eef2;
  border-color: rgba(66,133,244,.58);
  box-shadow: inset 3px 3px 7px rgba(174,184,191,.36), inset -3px -3px 7px rgba(255,255,255,.72);
}
.admin-body .post-campaign.draft { border: 1px solid rgba(255,255,255,.62); background: #f8edcf; }
.admin-body .settings-card:nth-child(4n+1),.admin-body .link-card:nth-child(4n+1) { background: #e2ebfb; }
.admin-body .settings-card:nth-child(4n+2),.admin-body .link-card:nth-child(4n+2) { background: #f6e3e1; }
.admin-body .settings-card:nth-child(4n+3),.admin-body .link-card:nth-child(4n+3) { background: #f8edcf; }
.admin-body .settings-card:nth-child(4n+4),.admin-body .link-card:nth-child(4n+4) { background: #dfefe4; }
.admin-body input,
.admin-body textarea,
.admin-body select {
  background: #e9eef2;
  border-color: transparent;
  box-shadow: inset 3px 3px 6px rgba(174,184,191,.38), inset -3px -3px 6px rgba(255,255,255,.74);
}
.admin-body input:focus,
.admin-body textarea:focus,
.admin-body select:focus { border-color: rgba(66,133,244,.6); box-shadow: inset 3px 3px 6px rgba(174,184,191,.34), inset -3px -3px 6px rgba(255,255,255,.7), 0 0 0 2px rgba(66,133,244,.10); }
.admin-body input:disabled,
.admin-body select:disabled { background: #e3e8eb; box-shadow: inset 2px 2px 5px rgba(166,176,183,.32); }
.admin-body .dialog { background: #e9eef2; border-color: rgba(255,255,255,.72); box-shadow: 14px 14px 34px rgba(116,126,134,.34), -10px -10px 28px rgba(255,255,255,.72); }
.admin-body .dialog-card { background: transparent; }
.admin-body .toast { box-shadow: 6px 6px 14px rgba(134,145,138,.42), -4px -4px 10px rgba(255,255,255,.72); }

@media (max-width: 900px) {
  .admin-body .sidebar {
    background: #e7ecef;
    border-top: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 -7px 16px rgba(174,184,191,.36);
  }
  .admin-body .nav-item { color: #68727a; }
  .admin-body .metric-card,
  .admin-body .panel,
  .admin-body .split-hero,
  .admin-body .post-hero,
  .admin-body .operations-hero { box-shadow: 6px 6px 13px rgba(174,184,191,.46), -6px -6px 13px rgba(255,255,255,.78); }
}

/* Readability and dimensional-color correction */
.admin-body { font-size: 15px; }
.admin-body .brand-block strong { font-size: 16px; }
.admin-body .brand-block span,
.admin-body .sidebar-foot { font-size: 12px; }
.admin-body .nav-item { font-size: 14px; font-weight: 700; }
.admin-body .eyebrow { font-size: 12px; }
.admin-body .topbar h1 { font-size: clamp(27px,3vw,36px); }
.admin-body .button { min-height: 44px; padding-inline: 18px; font-size: 14px; }
.admin-body .button.small { min-height: 38px; font-size: 13px; }
.admin-body .notice { padding: 16px 18px; font-size: 14px; }
.admin-body .metric-icon { display: grid; }
.admin-body .metric-card { min-height: 150px; padding: 22px; }
.admin-body .metric-card span,
.admin-body .metric-card small,
.admin-body .muted { font-size: 13px; }
.admin-body .metric-card strong { margin: 12px 0 8px; font-size: 34px; }
.admin-body .panel { padding: 23px; }
.admin-body .panel h2 { font-size: 20px; }
.admin-body table { font-size: 13px; }
.admin-body th { padding: 12px; font-size: 12px; }
.admin-body td { padding: 15px 12px; }
.admin-body .badge,
.admin-body .status-label { font-size: 12px; }
.admin-body .chip,
.admin-body .text-button { font-size: 13px; }
.admin-body .topic-row > div:first-child,
.admin-body .review-meta .stars,
.admin-body .review-meta time,
.admin-body .review-body strong { font-size: 13px; }
.admin-body .review-body p { font-size: 14px; }
.admin-body .split-hero p,
.admin-body .post-hero p:last-child,
.admin-body .operations-hero p:last-child { font-size: 15px; }
.admin-body .post-hero-flow span { min-height: 48px; padding: 14px 16px; font-size: 13px; }
.admin-body label,
.admin-body .store-section-head strong { font-size: 13px; }
.admin-body input,
.admin-body textarea,
.admin-body select { font-size: 14px; }
.admin-body small,
.admin-body .store-section-head small,
.admin-body .store-cta-help,
.admin-body .table-note,
.admin-body .copy-hint,
.admin-body .policy-note,
.admin-body .survey-policy { font-size: 12px; }
.admin-body .post-store-choice strong,
.admin-body .post-campaign-head small,
.admin-body .post-campaign textarea,
.admin-body .post-campaign-summary,
.admin-body .cta-preview summary,
.admin-body .cta-preview-row,
.admin-body .cta-preview-row strong,
.admin-body .cta-preview-row code,
.admin-body .post-progress span,
.admin-body .post-errors p,
.admin-body .post-variable-note { font-size: 12px; }
.admin-body .post-store-choice small,
.admin-body .post-store-choice em,
.admin-body .post-store-chips span { font-size: 11px; }
.admin-body .funnel-stage span,
.admin-body .funnel-stage small { font-size: 12px; }
.admin-body .funnel-stage span { color: #626b65; }
.admin-body .funnel-stage strong { font-size: 13px; }
.admin-body .recommendation-item { border: 1px solid rgba(255,255,255,.6); }
.admin-body .recommendation-item.priority-high { background: #f6e3e1; }
.admin-body .recommendation-item.priority-medium { background: #f8edcf; }
.admin-body .recommendation-item span { font-size: 12px; }
.admin-body .recommendation-item strong { font-size: 14px; }
.admin-body .recommendation-item p { font-size: 13px; }
.admin-body .link-card span,
.admin-body .link-card code { font-size: 12px; }
.admin-body,
.admin-body button,
.admin-body input,
.admin-body textarea,
.admin-body select,
.admin-body .cta-coverage small,
.admin-body .health-score small { font-family: var(--font-body); }
.admin-body .brand-mark,
.admin-body .mini-mark,
.admin-body .brand-block strong,
.admin-body .topbar h1,
.admin-body .metric-card strong,
.admin-body .panel h2,
.admin-body .split-hero h2,
.admin-body .post-hero h2,
.admin-body .post-campaign-head h3,
.admin-body .post-progress strong,
.admin-body .operations-hero h2,
.admin-body .cta-coverage strong,
.admin-body .funnel-stage b,
.admin-body .health-score,
.admin-body .rank-number,
.admin-body .dialog-card h2,
.admin-body .survey-header strong,
.admin-body .survey-intro h1,
.admin-body .draft-card h2,
.admin-body .website-review-panel h3,
.admin-body .reply-error h2,
.admin-body .reply-success h2,
.admin-body .report-header h1,
.admin-body .report-title h2,
.admin-body .report-metrics strong,
.admin-body .report-section-head h3,
.admin-body .report-actions article > span { font-family: var(--font-heading); }

@media (max-width: 900px) {
  .admin-body { font-size: 14px; }
  .admin-body .sidebar nav { scroll-snap-type: x proximity; }
  .admin-body .nav-item { width: 104px; min-width: 104px; flex-basis: 104px; padding: 11px 10px; font-size: 12px; scroll-snap-align: start; }
  .admin-body .top-actions .button { min-height: 40px; font-size: 12px; }
  .admin-body .metric-card { min-height: 132px; padding: 18px; }
  .admin-body .metric-card strong { font-size: 30px; }
  .admin-body .panel { padding: 18px; }
  .admin-body table { font-size: 12px; }
}

@media (max-width: 620px) {
  .admin-body .topbar { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .admin-body .top-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .admin-body .top-actions .button { width: 100%; white-space: nowrap; }
  .admin-body #view-posts .panel-head { align-items: stretch; flex-direction: column; }
  .admin-body #view-posts .panel-head > .button { width: 100%; }
}