/* 勝ち筋AI 管理画面。brand.css の上に重ねる。単色のみ（グラデーション禁止） */
body.app{background:var(--paper);min-height:100vh}
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
/* 左メニュー */
.side{background:var(--navy);color:#C9D6E6;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 14px 16px;z-index:30}
.side .brand{color:#fff;padding:2px 10px 22px}
.side .brand small{color:#8FB4D9}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .cap{font:600 10.5px/1 var(--num);letter-spacing:.22em;color:#6F8BAC;padding:16px 12px 8px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#C9D6E6;font-size:14.5px;font-weight:500;position:relative;transition:background .2s,color .2s}
.nav a svg{width:19px;height:19px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{background:rgba(255,255,255,.1);color:#fff;font-weight:700}
.nav a.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--sakura)}
.nav a .cnt{margin-left:auto;background:var(--sakura-deep);color:#fff;border-radius:999px;font:700 11px/1 var(--num);padding:4px 7px}
.side .foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:14px 10px 0;font-size:12.5px;color:#8FA6C2}
.side .foot b{display:block;color:#fff;font-size:13.5px;margin-bottom:2px}
.side .foot a{color:#8FB4D9}
/* 上の帯 */
.main{min-width:0;display:flex;flex-direction:column}
.top{height:68px;display:flex;align-items:center;gap:16px;padding:0 34px;background:rgba(247,250,252,.92);backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.top h1{font-size:19px;margin:0;color:var(--navy);letter-spacing:.02em}
.top .crumb{font-size:12.5px;color:var(--mute)}
.top .sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pill-test{background:var(--sakura-soft);color:var(--sakura-deep)}
.pill-live{background:#E2F5EE;color:var(--ok)}
.pill-plan{background:var(--sky);color:var(--sea)}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.menu-btn{display:none;border:0;background:none;padding:8px;margin-left:-8px;color:var(--navy)}
.page{padding:28px 34px 80px;max-width:1280px;width:100%}
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h2{font-size:26px;margin:0;color:var(--navy);letter-spacing:.02em;line-height:1.35}
.page-head p{margin:4px 0 0;color:var(--sub);font-size:14px}
.page-head .sp{flex:1}
/* カード */
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:22px 24px;min-width:0}
.card h3{margin:0 0 14px;font-size:15.5px;color:var(--navy);display:flex;align-items:center;gap:10px}
.card h3 .sub{font-weight:500;color:var(--mute);font-size:12.5px}
.card h3 .sp{flex:1}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.mt{margin-top:18px}
/* KPI */
.kpi{position:relative;overflow:hidden}
.kpi .l{font-size:13px;color:var(--sub);font-weight:700;display:flex;align-items:center;gap:8px}
.kpi .l i{width:8px;height:8px;border-radius:3px;background:var(--sea-2);display:inline-block}
.kpi .v{font:700 34px/1.15 var(--num);color:var(--navy);margin-top:8px;letter-spacing:-.02em}
.kpi .v small{font:700 15px var(--font);margin-left:4px;color:var(--sub)}
.kpi .d{font-size:12.5px;color:var(--sub);margin-top:6px}
.kpi .d b{color:var(--ok)}
.kpi.sakura .l i{background:var(--sakura)}
.kpi.navy .l i{background:var(--navy)}
.kpi.ok .l i{background:var(--ok)}
/* 表 */
.tbl-wrap{overflow-x:auto;margin:0 -24px;padding:0 24px}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{font-size:12px;color:var(--mute);font-weight:700;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.04em}
.tbl td{padding:12px;border-bottom:1px solid #EEF3F7;vertical-align:middle}
.tbl tr:hover td{background:#FAFCFE}
.tbl td.n,.tbl th.n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
.tbl .co b{display:block;color:var(--navy);font-weight:700}
.tbl .co span{font-size:12px;color:var(--mute)}
.tbl input[type=checkbox]{width:17px;height:17px;accent-color:var(--sea)}
/* 状態の札 */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.b-new{background:#EEF2F6;color:var(--sub)}
.b-scored,.b-draft{background:var(--sky);color:var(--sea)}
.b-approved,.b-running{background:#E2F5EE;color:var(--ok)}
.b-sent{background:#E8EEF7;color:var(--navy-2)}
.b-reply,.b-review{background:var(--sakura-soft);color:var(--sakura-deep)}
.b-appo{background:var(--sakura-deep);color:#fff}
.b-excluded,.b-skipped,.b-paused{background:#F1F1EF;color:#8A8A85}
.b-error,.b-failed{background:#FBE9EC;color:var(--ng)}
.b-done{background:#E8EEF7;color:var(--navy-2)}
.score{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--num);color:var(--navy)}
.score .bar{width:56px;height:6px;border-radius:6px;background:#E9EFF5;overflow:hidden}
.score .bar i{display:block;height:100%;border-radius:6px;background:var(--sea-2)}
.score.hi .bar i{background:var(--sakura-deep)}
/* 入力 */
label.f{display:block;margin-bottom:16px}
label.f>span{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
label.f>span em{font-style:normal;color:var(--sakura-deep);font-size:11px;margin-left:6px}
label.f small{display:block;color:var(--mute);font-size:12px;margin-top:5px}
input.i,textarea.i,select.i{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:15px/1.6 var(--font);color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
input.i:focus,textarea.i:focus,select.i:focus{outline:0;border-color:var(--sea-2);box-shadow:0 0 0 4px rgba(79,174,227,.18)}
textarea.i{min-height:110px;resize:vertical}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.chk{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:#fff;transition:border-color .2s,background .2s}
.chk:hover{border-color:var(--sea-2)}
.chk input{width:18px;height:18px;accent-color:var(--sea)}
.chk.off{opacity:.55;cursor:not-allowed}
.chk .soon{margin-left:auto;font-size:11px;color:var(--mute)}
/* 進み具合 */
.steps{display:flex;gap:0;margin-bottom:24px;counter-reset:s;flex-wrap:wrap}
.steps div{flex:1;min-width:120px;position:relative;padding:0 0 12px;font-size:13px;color:var(--mute);font-weight:700;border-bottom:3px solid var(--line)}
.steps div::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#E9EFF5;color:var(--sub);font:700 12px var(--num);margin-right:8px}
.steps div.on{color:var(--navy);border-color:var(--sea)}
.steps div.on::before{background:var(--sea);color:#fff}
.steps div.ok{color:var(--sub);border-color:var(--sea-2)}
.steps div.ok::before{content:"✓";background:var(--sky);color:var(--sea)}
.prog{height:8px;border-radius:8px;background:#E9EFF5;overflow:hidden}
.prog i{display:block;height:100%;background:var(--sea);border-radius:8px;transition:width .6s var(--ease)}
/* 空の時 */
.empty{text-align:center;padding:48px 24px}
.empty svg{width:120px;height:120px}
.empty h3{justify-content:center;font-size:18px;margin:14px 0 6px}
.empty p{color:var(--sub);margin:0 0 18px;font-size:14px}
/* 最初にやること */
.todo{display:grid;gap:10px}
.todo a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);color:var(--ink);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.todo a:hover{border-color:var(--sea-2);transform:translateY(-1px);box-shadow:var(--sh)}
.todo .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--sea);font:700 13px var(--num);flex:none}
.todo a.ok .n{background:var(--ok);color:#fff}
.todo a.ok b{text-decoration:line-through;color:var(--mute)}
.todo b{font-size:14.5px;color:var(--navy)}
.todo span{display:block;font-size:12.5px;color:var(--sub)}
.todo .go{margin-left:auto;color:var(--sea);font-size:13px;font-weight:700;white-space:nowrap}
/* 漏斗 */
.funnel{display:grid;gap:10px}
.funnel .r{display:grid;grid-template-columns:88px 1fr 92px;align-items:center;gap:12px;font-size:13.5px}
.funnel .r .t{color:var(--sub);font-weight:700}
.funnel .r .b{height:30px;border-radius:8px;background:#EEF3F8;overflow:hidden}
.funnel .r .b i{display:block;height:100%;border-radius:8px;background:var(--sea-2);transform-origin:left;transition:transform 1s var(--ease)}
.funnel .r:nth-child(3) .b i{background:var(--sakura)}
.funnel .r:nth-child(4) .b i{background:var(--sakura-deep)}
.funnel .r .v{text-align:right;font:700 15px var(--num);color:var(--navy)}
.funnel .r .v small{display:block;font:500 11px var(--num);color:var(--mute)}
/* 棒グラフ */
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:16px;font-size:12px;color:var(--sub);margin-top:8px;flex-wrap:wrap}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
/* 文面チェック */
.review{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.facts{position:sticky;top:88px}
.facts dl{margin:0;font-size:13.5px}
.facts dt{color:var(--mute);font-size:12px;font-weight:700;margin-top:12px}
.facts dd{margin:3px 0 0;color:var(--ink)}
.hook{background:var(--sakura-soft);border-radius:10px;padding:10px 12px;color:#7A3550;font-size:13.5px}
.mails{display:grid;gap:14px}
.mail{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.mail .h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F6F9FC;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--sub);font-weight:700}
.mail .s{padding:12px 14px 0;font-weight:700;color:var(--navy)}
.mail pre{margin:0;padding:10px 14px 16px;white-space:pre-wrap;word-break:break-word;font:14px/1.85 var(--font);color:var(--ink)}
.mail textarea{border:0;border-top:1px dashed var(--line);border-radius:0;min-height:220px}
.sticky-bar{position:sticky;bottom:0;margin:22px -34px -80px;padding:14px 34px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;z-index:10}
.sticky-bar .sp{flex:1}
/* 知らせ */
.note{border-radius:12px;padding:12px 16px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.note.info{background:var(--sky);color:#174E77}
.note.warn{background:#FDF3E2;color:#7A5410}
.note.err{background:#FBE9EC;color:#8B2335}
.note.ok{background:#E2F5EE;color:#1E6B53}
.toast{position:fixed;right:24px;bottom:24px;background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;box-shadow:var(--sh-lg);font-size:14px;z-index:99;animation:pop .35s var(--ease)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:10px 14px;font-size:14px;font-weight:700;color:var(--sub);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a.on{color:var(--navy);border-color:var(--sakura-deep)}
.muted{color:var(--mute)} .small{font-size:12.5px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;font-size:14px;margin:0}
.kv dt{color:var(--mute);font-weight:700;font-size:12.5px;padding-top:2px}
.kv dd{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:#EEF3F8;color:var(--navy-2);border-radius:8px;padding:4px 10px;font-size:12.5px;font-weight:500}
.tag.p{background:var(--sakura-soft);color:#8A3556}
/* ログイン */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#fff}
.auth .art{background:var(--sky);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px}
.auth .art h2{font-size:34px;line-height:1.5;color:var(--navy);margin:0;letter-spacing:.02em;position:relative;z-index:2}
.auth .art h2 em{font-style:normal;color:var(--sakura-deep)}
.auth .art p{color:#2E5577;position:relative;z-index:2;max-width:30em}
.auth .art .sea{position:absolute;left:0;right:0;bottom:0;height:34%;background:#9FD3F0}
.auth .art .sea::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#fff;opacity:.7}
.auth .art .petal{position:absolute;top:-6vh;width:14px;height:11px;background:var(--sakura);border-radius:14px 2px 14px 2px;opacity:.85;animation:petal linear infinite,sway 3.5s ease-in-out infinite}
.auth .art .waves{position:absolute;left:0;bottom:30%;width:200%;height:40px;z-index:1}
.auth .art .waves path{fill:none;stroke:#fff;stroke-width:2;opacity:.8}
.auth .art .waves{animation:wave 16s linear infinite}
.auth .frm{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.auth .box{width:100%;max-width:400px}
.auth .box h1{font-size:26px;color:var(--navy);margin:26px 0 6px}
.auth .box p.l{color:var(--sub);margin:0 0 26px;font-size:14px}
.auth .alt{margin-top:18px;font-size:14px;color:var(--sub);text-align:center}
.demo-bar{background:var(--sakura-soft);color:#7A3550;font-size:13px;padding:8px 34px;display:flex;gap:10px;align-items:center}
/* スマホ */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g21,.g12,.review{grid-template-columns:minmax(0,1fr)}
  .facts{position:static}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:264px;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:var(--sh-lg)}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block}
  .scrim{display:none;position:fixed;inset:0;background:rgba(11,37,69,.35);z-index:25}
  .menu-btn{display:block}
  .top{padding:0 16px;height:60px}
  .top .crumb,.top .pill-plan{display:none}
  .page{padding:20px 16px 72px}
  .page-head h2{font-size:21px}
  .card{padding:18px 16px}
  .tbl-wrap{margin:0 -16px;padding:0 16px}
  .sticky-bar{margin:22px -16px -72px;padding:12px 16px}
  .auth{grid-template-columns:1fr}
  .auth .art{min-height:260px;padding:28px 22px}
  .auth .art h2{font-size:24px}
  .demo-bar{padding:8px 16px}
  .funnel .r{grid-template-columns:70px 1fr 78px}
}
@media (max-width:520px){.g4,.g2{grid-template-columns:minmax(0,1fr)} .kpi .v{font-size:30px}}
/* 小窓（確認・お知らせ）。下からふわっと出す。背景は単色の半透明 */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(11,37,69,.42)}
.modal.open{display:flex;animation:fade .2s ease}
.modal .sheet{background:#fff;border-radius:18px;box-shadow:var(--sh-lg);width:100%;max-width:460px;padding:26px 26px 22px;animation:rise .32s var(--ease)}
.modal .sheet h3{margin:12px 0 8px;font-size:19px;color:var(--navy);line-height:1.5}
.modal .sheet p{margin:0 0 16px;color:var(--sub);font-size:14px;line-height:1.8}
.modal .mi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--sky);color:var(--sea)}
.modal .mi.ok{background:#E2F5EE;color:var(--ok)}
.modal .mi.danger{background:#FBE9EC;color:var(--ng)}
.modal .row.end{margin-top:6px}
.btn-danger{background:var(--ng);color:#fff}
.btn-danger:hover{background:#b83a4e}
code.pw{font:700 17px var(--num);background:var(--sakura-soft);color:#7A3550;padding:4px 10px;border-radius:8px;letter-spacing:.04em}
.side .foot .role{display:inline-block;background:rgba(255,255,255,.1);color:#fff;border-radius:6px;padding:1px 7px;font-size:11.5px;margin-top:4px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
h3.sec{color:var(--navy);font-size:15.5px;margin:28px 0 12px;letter-spacing:.02em}
/* 使い方・サポート */
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.flow>div{background:#F6F9FC;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px}
.flow b{color:var(--navy);font-size:14px}.flow span:last-child{font-size:12px;color:var(--sub)}
details.qa{border-bottom:1px solid #EEF3F7}
details.qa summary{cursor:pointer;padding:12px 4px;font-weight:700;color:var(--navy);font-size:14.5px;list-style:none;display:flex;gap:10px;align-items:center}
details.qa summary::before{content:"Q";font:700 12px var(--num);color:#fff;background:var(--sea-2);border-radius:6px;width:20px;height:20px;display:grid;place-items:center;flex:none}
details.qa summary::-webkit-details-marker{display:none}
details.qa p{margin:0 0 14px 30px;font-size:14px;color:var(--ink);line-height:1.85}
/* 右下の質問窓口 */
.ask-btn{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 18px;background:var(--navy);color:#fff;font:700 14px var(--font);box-shadow:var(--sh-lg);cursor:pointer;transition:transform .25s var(--ease)}
.ask-btn:hover{transform:translateY(-2px)}
.ask-btn svg{color:var(--sakura)}
.ask{position:fixed;right:22px;bottom:22px;z-index:61;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 44px);background:#fff;border-radius:18px;box-shadow:var(--sh-lg);display:none;flex-direction:column;overflow:hidden}
.ask.open{display:flex;animation:rise .3s var(--ease)}
.ask-h{background:var(--navy);color:#fff;padding:14px 16px;display:flex;flex-direction:column;position:relative}
.ask-h .small{color:#9FC0E0}
.ask-x{position:absolute;right:10px;top:10px;border:0;background:rgba(255,255,255,.12);color:#fff;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer}
.ask-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.msg.bot{background:#fff;box-shadow:var(--sh);align-self:flex-start;border-top-left-radius:4px}
.msg.me{background:var(--sea);color:#fff;align-self:flex-end;border-top-right-radius:4px}
.msg a{font-weight:700}
.msg.wait{color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font:500 12.5px var(--font);color:var(--navy);cursor:pointer}
.chips button:hover{border-color:var(--sea-2);color:var(--sea)}
.ask-f{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
@media (max-width:860px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.ask{right:12px;bottom:12px;height:calc(100vh - 90px)}.ask-btn{right:14px;bottom:14px;padding:12px 14px}.ask-btn span{display:none}}
/* 状態の札：緑＝動いている／黄＝気になる／赤＝エラー／灰＝未設定／水色＝お知らせ */
.st-ok{background:#E2F5EE;color:#1E7A5C}.st-warn{background:#FDF3E2;color:#9A6512}.st-err{background:#FBE9EC;color:#B3243C}
.st-off{background:#EEF1F4;color:#7A8796}.st-info{background:var(--sky);color:var(--sea)}
.st-ok i{background:#2A9D78;box-shadow:0 0 0 3px rgba(42,157,120,.18);animation:beat 2.4s ease-in-out infinite}
.st-err i{background:#D2475C;animation:beat 1.2s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
.lights{display:grid;gap:10px}
.light{display:grid;grid-template-columns:14px 200px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.light .dot{width:12px;height:12px;border-radius:50%}
.light.ok .dot{background:#2A9D78;box-shadow:0 0 0 4px rgba(42,157,120,.16)}
.light.warn .dot{background:#E0A030;box-shadow:0 0 0 4px rgba(224,160,48,.18)}
.light.err .dot{background:#D2475C;box-shadow:0 0 0 4px rgba(210,71,92,.18)}
.light.off .dot{background:#C3CCD6}
.light.info .dot{background:var(--sea-2)}
.light.err{border-color:#F2C3CB;background:#FFF8F9}.light.warn{border-color:#F3DDB4;background:#FFFCF6}
.light b{color:var(--navy);font-size:14px}.light span{font-size:13.5px;color:var(--sub)}
@media (max-width:860px){.light{grid-template-columns:14px 1fr;}.light span,.light a{grid-column:2}}
@media (max-width:860px){.top .st-ok,.top .st-warn,.top .st-err{padding:6px 9px;font-size:0}.top [class*=st-] i{width:9px;height:9px}}
/* ポイントを買う */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pack{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px;font-family:var(--font);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.pack:hover{border-color:var(--sea-2);transform:translateY(-2px);box-shadow:var(--sh)}
.pack.best{border:2px solid var(--sakura-deep)}
.pack .pn{font-size:12px;font-weight:700;color:var(--sub)}
.pack b{font-size:24px;color:var(--navy)}.pack b small{font-size:12px}
.pack .pb{font-size:12px;color:var(--sakura-deep);font-weight:700}.pack .pp{font-size:12.5px;color:var(--sub)}
.spin{width:38px;height:38px;border-radius:50%;border:4px solid var(--sky);border-top-color:var(--sea);margin:0 auto;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:101;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:8px;border-radius:10px 2px 10px 2px;animation:petal 2.6s ease-in forwards}
@media (max-width:520px){.packs{grid-template-columns:1fr}}
.toast{right:auto;left:50%;transform:translateX(-50%);bottom:24px;max-width:calc(100vw - 32px)}
@keyframes pop{0%{transform:translateX(-50%) scale(.92);opacity:0}100%{transform:translateX(-50%);opacity:1}}
.side .foot{line-height:1.7}
.side .foot .links{display:flex;gap:10px;margin-top:6px;font-size:12px}
/* スマホの上の帯：見出しは1行で切る・札は点だけ */
.top>div:nth-child(2){min-width:0;flex:1}
.top h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-bar{display:block}
.demo-bar svg{vertical-align:-3px;margin-right:4px}
@media (max-width:860px){
  .top .sp{display:none}
  .top .pill-test,.top .pill-live,.top a.pill-plan{padding:6px 9px;font-size:0;gap:0}
  .top .pill-test i,.top .pill-live i{width:9px;height:9px}
  .top a.pill-plan{display:none}
  .top h1{font-size:16px}
  .page-head .row,.page-head>div:last-child{width:100%}
}
@media (max-width:520px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .kpi{padding:14px}
  .kpi .v{font-size:24px!important}
  .kpi .d{font-size:11.5px}
  .page-head h2{font-size:20px}
}
.tbl td.n{white-space:nowrap}