:root { --ink:#11131a;--muted:#687083;--line:#dfe3ea;--fog:#f5f7fa;--blue:#2878ff;--violet:#7758ff;--pink:#ed5aa9;--grad:linear-gradient(120deg,var(--blue),var(--violet) 54%,var(--pink));font-family:Inter,"Noto Sans JP",system-ui,sans-serif;color:var(--ink);background:var(--fog);line-height:1.5; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, textarea { font: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, tr:focus-visible { outline: 3px solid #2b6df3; outline-offset: 2px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 10; background: white; padding: .7rem; }
.skip-link:focus { top: 1rem; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.55rem; }
h2 { margin-bottom: .4rem; font-size: 1.15rem; }
.eyebrow { margin-bottom: .2rem; color: #678; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.button, .icon-button { border: 0; border-radius: 9px; cursor: pointer; background: #245fc5; color: white; padding: .65rem 1rem; font-weight: 700; }
.button.secondary { color: #20304f; background: #e7edf8; }
.button.danger { background: #c62d42; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.connection { padding: 1.2rem; background: #f3f0ff; }
.connection form, .period-form { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; }
label { display: grid; gap: .3rem; font-size: .82rem; font-weight: 700; }
input, textarea { min-width: 220px; padding: .58rem; border: 1px solid #b9c5da; border-radius: 7px; background: white; }
main { padding: 1.25rem clamp(1rem, 5vw, 4rem) 3rem; max-width: 1500px; margin: auto; }
.alert { padding: .75rem 1rem; margin-bottom: 1rem; border-radius: 8px; background: #e8eef8; }
.alert-link { display: inline-block; margin-left: .35rem; color: #245fc7; font-weight: 800; text-underline-offset: .18em; }
.alert-link:hover, .alert-link:focus-visible { color: #163f91; text-decoration-thickness: 2px; }
[data-page][hidden] { display: none !important; }
[data-campaign-page][hidden] { display: none !important; }
[data-referral-page][hidden] { display: none !important; }
[data-webcx-page][hidden] { display: none !important; }
[data-organization-page][hidden] { display: none !important; }
.referral-overview__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.referral-overview__grid a{display:grid;gap:.45rem;min-height:140px;padding:1.25rem;border:1px solid var(--line);border-radius:18px;color:var(--ink);background:#fff;text-decoration:none}
.referral-overview__grid a:hover,.referral-overview__grid a:focus-visible{border-color:var(--violet);box-shadow:0 14px 35px rgba(63,51,160,.12)}
.referral-overview__grid strong{font-size:1.1rem}.referral-overview__grid p{margin:0;color:var(--muted);line-height:1.7}
@media(max-width:720px){.referral-overview__grid{grid-template-columns:1fr}}
.campaign-review dl { display: grid; gap: .7rem; }
.campaign-review dl div { display: grid; grid-template-columns: minmax(8rem, .35fr) 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.campaign-review dt { color: var(--muted); font-weight: 800; }
.campaign-review dd { margin: 0; overflow-wrap: anywhere; }
.alert.success { color: #135b3c; background: #dff5e9; }.alert.warning { color: #704e00; background: #fff2c8; }.alert.error { color: #842235; background: #ffe2e7; }
.stop-panel, .panel { background: white; border: 1px solid #dbe2ed; border-radius: 14px; box-shadow: 0 8px 25px rgba(32,48,79,.06); }
.stop-panel { padding: 1.2rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-left: 5px solid #e44a5f; }
.stop-actions { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-block; border-radius: 100px; padding: .25rem .65rem; background: #e7edf8; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.pill.active { color: #08613d; background: #d8f4e6; }.pill.stopped, .pill.stopped { color: #8a1f32; background: #ffe0e5; }.pill.unknown { color: #654c05; background: #fff1c1; }
.pill.draft, .pill.review { color: #53427a; background: #eee7ff; }.pill.paused { color: #76510a; background: #ffefc7; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.panel { padding: 1.2rem; }
.section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.icon-button { font-size: 1.2rem; padding: .45rem .75rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem .65rem; text-align: left; border-bottom: 1px solid #e5eaf2; font-size: .86rem; }
th { color: #62708a; font-size: .75rem; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr[aria-selected="true"] { background: #f0f5ff; }
td small { display: block; color: #78849a; }
.empty { padding: 2rem; text-align: center; color: #778399; }
.phone { width: 235px; height: 475px; margin: 1rem auto; padding: 10px; border: 7px solid #172033; border-radius: 38px; background: #172033; position: relative; box-shadow: 0 18px 35px rgba(0,0,0,.18); }
.speaker { position: absolute; top: 8px; left: 50%; width: 72px; height: 18px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #172033; z-index: 2; }
.phone-screen { height: 100%; overflow: hidden; position: relative; border-radius: 25px; background: #fafbfc; }
.shop-header { padding: 2.3rem .7rem .7rem; font-size: .6rem; letter-spacing: .16em; text-align: center; border-bottom: 1px solid #ddd; }
.product-image { height: 175px; margin: 1rem; border-radius: 8px; background: linear-gradient(135deg,#dfe8f1,#a6bcd1); }
.product-name { padding: 0 1rem; font-size: .75rem; font-weight: 700; }
.bottom-sheet { position: absolute; bottom: 0; width: 100%; padding: .8rem 1rem 1.25rem; border-radius: 18px 18px 0 0; background: white; box-shadow: 0 -5px 20px rgba(0,0,0,.15); font-size: .7rem; }
.bottom-sheet p { margin: .35rem 0 .7rem; color: #52617b; }
.handle { display: block; width: 38px; height: 4px; margin: 0 auto .7rem; border-radius: 3px; background: #ccd2dc; }
.preview-cta { display: block; padding: .55rem; border-radius: 7px; text-align: center; color: white; background: #245fc5; font-weight: 800; }
.hint { margin: .45rem 0 0; color: #69768d; font-size: .78rem; }
.section-actions { display: flex; align-items: center; gap: .6rem; }
[data-webcx-page][hidden] { display: none !important; }
.analytics { margin-top: 1rem; }
.creative-editor-panel { margin-top: 1rem; }
.advanced-settings { display: grid; gap: 1rem; margin-top: 1rem; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1rem; }
.metrics article { padding: 1rem; border-radius: 10px; background: #f4f7fb; }
.metrics span { display: block; color: #68758c; font-size: .75rem; }
.metrics strong { display: block; margin-top: .35rem; font-size: 1.45rem; }
dialog { max-width: 480px; border: 0; border-radius: 14px; padding: 1.5rem; box-shadow: 0 20px 70px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(10,18,35,.65); }
dialog textarea { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
@media (max-width: 850px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .stop-panel { align-items: stretch; flex-direction: column; }
  .stop-actions { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr; }
  .period-form label, .period-form input { width: 100%; }
  th:nth-child(4), td:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* Static adaptation of the SPARTA X AppShell, navigation, badge, form,
   task panel and metrics patterns. Product identity remains キャンペーン管理くん. */
.button,.icon-button{min-height:44px;border-radius:999px;font-weight:800}.button.secondary{color:var(--ink);background:#fff;border:1px solid var(--line)}
.badge,.pill{display:inline-flex;border-radius:999px;padding:.4rem .65rem;font-size:.68rem;font-weight:850;white-space:nowrap}.badge.running{color:#246bd6;background:#eaf2ff}
.connection{border-color:var(--line)}input,textarea{min-height:44px;border-color:#a99cf1;border-radius:11px;outline:3px solid rgba(119,88,255,.06)}
.app-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side-navigation{position:sticky;top:76px;height:calc(100vh - 76px);padding:1.25rem .85rem;border-right:1px solid var(--line);background:#fff}
.side-navigation a{display:flex;min-height:44px;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:11px;color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:750}
.side-navigation a span{display:grid;width:24px;place-items:center;color:var(--violet);font-weight:900}
.side-navigation a:hover,.side-navigation a:focus-visible,.side-navigation a.current{color:var(--ink);background:#f1efff}
.nav-note{position:absolute;right:.85rem;bottom:1.25rem;left:.85rem;display:grid;padding:.85rem;border:1px dashed #a99cf1;border-radius:12px;background:#f8f6ff}.nav-note b{font-size:.72rem}.nav-note span{color:var(--muted);font-size:.65rem}
main{min-width:0;width:100%;margin:0 auto;padding:1.5rem clamp(1rem,4vw,3.5rem) 3rem}
.page-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);gap:2rem;align-items:end;padding:1.25rem 0 2rem}.page-heading h1{max-width:760px;margin:.45rem 0 0;font-size:clamp(2rem,4vw,4rem);font-weight:500;line-height:1.05;letter-spacing:-.055em}.page-heading p:last-child{color:var(--muted);line-height:1.8}
.stop-panel,.panel{border-color:var(--line);border-radius:22px;box-shadow:0 20px 60px rgba(31,38,67,.07)}.task-panel{position:relative;overflow:hidden}.task-panel::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--grad)}
.metrics article{border:1px solid var(--line);border-radius:16px;background:#fff}.metrics article::after{content:"";display:block;width:68%;height:5px;margin-top:.8rem;border-radius:8px;background:var(--grad)}
dialog{border:1px solid var(--line);border-radius:22px}
@media(max-width:1023px){.app-shell{grid-template-columns:76px minmax(0,1fr)}.side-navigation a{justify-content:center;padding-inline:.5rem;font-size:0}.side-navigation a span{font-size:1rem}.nav-note{display:none}}
@media(max-width:520px){.app-shell{display:block}.side-navigation{position:sticky;z-index:10;top:0;display:flex;height:auto;overflow-x:auto;padding:.35rem .6rem;border-right:0;border-bottom:1px solid var(--line)}.side-navigation a{min-width:52px}.page-heading{grid-template-columns:1fr;gap:.6rem}.page-heading h1{font-size:2.3rem}main{padding-inline:.8rem}}
@media(max-width:767px){.app-shell{display:block}}