/* 録画無双 - 共有デザインシステム（外部CDN不使用・オフライン動作） */
:root {
  /* 和モダン：墨(ink) × 藍(indigo) × 金(gold) × 朱(vermilion) */
  --navy: #1b2b40; --navy-deep: #101c2c;
  --blue: #26507e; --blue-600: #1d3f66; --blue-soft: #e9eef5;
  --bg: #f3f4f1; --card: #ffffff; --line: #e4e5df;
  --ink: #23262b; --muted: #6a7280; --muted-2: #9aa1ab;
  --pos: #2f7d54; --neg: #c34635; --warn: #b7791f;
  --gold: #9c7b2e; --gold-600: #816325; --gold-soft: #f2ecd7;
  --brush: #c0432f; --brush-soft: #f6e4df;   /* 朱 */
  --marker: #e7c14a;
  --shadow: 0 1px 2px rgba(20,24,30,.05), 0 10px 28px rgba(20,24,30,.07);
  --radius: 14px;
  --ink-ground: #14171c;   /* 濃い墨（ダーク面用） */
  --font: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, sans-serif;
}
@media (prefers-reduced-motion: no-preference){
  .card, .plan4, .ins, .stat { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes rise { from { opacity:0; transform: translateY(10px); } }
}
* { box-sizing: border-box; margin: 0; }
/* hidden 属性は display 指定より優先させる（.detail 等の display:flex に負けないように） */
[hidden] { display: none !important; }
html, body { height: 100%; }
/* 和紙（washi）：基色＋極薄の繊維テクスチャは html に置く（body を透明にして背景の光を前面へ） */
html {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(156,123,46,.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 74%, rgba(27,43,64,.028) 0 1px, transparent 1.5px);
  background-size: 13px 13px, 17px 17px;
}
body { font-family: var(--font); color: var(--ink); font-size: 14px; line-height: 1.65;
  background: transparent;
}
/* 和のオーロラ：金・桜・藍・若草の光がゆっくり漂う“動く背景”（全ページ共通・カードは白で映える） */
body::before {
  content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36% 42% at 18% 22%, rgba(201,162,75,.52), transparent 60%),   /* 金 */
    radial-gradient(38% 44% at 85% 20%, rgba(192,67,47,.40), transparent 60%),     /* 朱 */
    radial-gradient(44% 50% at 92% 82%, rgba(26,43,64,.42), transparent 60%),      /* 墨藍 */
    radial-gradient(34% 38% at 8% 84%, rgba(201,162,75,.34), transparent 60%),     /* 金 */
    radial-gradient(32% 34% at 52% 50%, rgba(192,67,47,.18), transparent 64%);     /* 朱・中央 */
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference){
  body::before { animation: auroraFloat 30s ease-in-out infinite alternate; }
  @keyframes auroraFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: .9; }
    50%  { transform: translate3d(1.5%, -2%, 0) scale(1.08); opacity: 1; }
    100% { transform: translate3d(-1%, 1.5%, 0) scale(1.04); opacity: .92; }
  }
}
/* 家紋（武田菱）の大きな透かし：背景中央に静的配置（アニメなし＝軽量） */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
  background:
    center / min(72vw, 720px) no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23c9a24b'%3E%3Cpath d='M50 7 L65 26 L50 45 L35 26 Z'/%3E%3Cpath d='M50 55 L65 74 L50 93 L35 74 Z'/%3E%3Cpath d='M26 31 L41 50 L26 69 L11 50 Z'/%3E%3Cpath d='M74 31 L89 50 L74 69 L59 50 Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---- 和柄ユーティリティ ---- */
/* 青海波（せいがいは）：金の線で描く伝統波文。装飾帯として使う */
.wa-seigaiha{
  background-color: var(--ink-ground);
  background-image:
    radial-gradient(circle at 100% 150%, var(--ink-ground) 24%, var(--sei) 25%, var(--sei) 28%, var(--ink-ground) 29%, var(--ink-ground) 36%, var(--sei) 36%, var(--sei) 40%, transparent 40%),
    radial-gradient(circle at 0    150%, var(--ink-ground) 24%, var(--sei) 25%, var(--sei) 28%, var(--ink-ground) 29%, var(--ink-ground) 36%, var(--sei) 36%, var(--sei) 40%, transparent 40%),
    radial-gradient(circle at 50%  100%, var(--sei) 10%, var(--ink-ground) 11%, var(--ink-ground) 23%, var(--sei) 24%, var(--sei) 30%, var(--ink-ground) 31%, var(--ink-ground) 43%, var(--sei) 44%, var(--sei) 50%, var(--ink-ground) 51%, var(--ink-ground) 63%, var(--sei) 64%, var(--sei) 71%, transparent 71%),
    radial-gradient(circle at 100% 50%, var(--ink-ground) 5%, var(--sei) 6%, var(--sei) 15%, var(--ink-ground) 16%, var(--ink-ground) 20%, var(--sei) 21%, var(--sei) 30%, var(--ink-ground) 31%, var(--ink-ground) 35%, var(--sei) 36%, var(--sei) 45%, var(--ink-ground) 46%, var(--ink-ground) 50%, var(--sei) 51%, var(--sei) 60%, var(--ink-ground) 61%, var(--ink-ground) 65%, var(--sei) 66%, var(--sei) 75%, var(--ink-ground) 76%, var(--ink-ground) 80%, var(--sei) 81%, var(--sei) 90%, var(--ink-ground) 91%, var(--ink-ground) 95%, var(--sei) 96%, var(--sei) 100%),
    radial-gradient(circle at 0    50%, var(--ink-ground) 5%, var(--sei) 6%, var(--sei) 15%, var(--ink-ground) 16%, var(--ink-ground) 20%, var(--sei) 21%, var(--sei) 30%, var(--ink-ground) 31%, var(--ink-ground) 35%, var(--sei) 36%, var(--sei) 45%, var(--ink-ground) 46%, var(--ink-ground) 50%, var(--sei) 51%, var(--sei) 60%, var(--ink-ground) 61%, var(--ink-ground) 65%, var(--sei) 66%, var(--sei) 75%, var(--ink-ground) 76%, var(--ink-ground) 80%, var(--sei) 81%, var(--sei) 90%, var(--ink-ground) 91%, var(--ink-ground) 95%, var(--sei) 96%, var(--sei) 100%);
  background-size: 88px 44px;
  --sei: rgba(201,162,75,.5);
}
/* 麻の葉（あさのは）風の区切り線：金の細線＋中央の菱 */
.wa-rule{ display:flex; align-items:center; gap:12px; margin:6px 2px 18px; }
.wa-rule::before,.wa-rule::after{ content:""; height:1px; flex:1; }
.wa-rule::before{ background:linear-gradient(90deg,transparent,rgba(156,123,46,.55)); }
.wa-rule::after{ background:linear-gradient(90deg,rgba(156,123,46,.55),transparent); }
.wa-rule i{ font-style:normal; color:var(--gold); font-size:9px; letter-spacing:.4em; opacity:.85; }
/* 家紋（武田菱）の透かし＋刀の一閃：戦国無双テイスト */
.kamon-mark{ position:absolute; pointer-events:none; z-index:0; color:#c9a24b; opacity:var(--km-o,.07); transform-origin:center; }
@media (prefers-reduced-motion: no-preference){
  .kamon-mark.breathe{ animation:wa-breathe 7s ease-in-out infinite; }
  @keyframes wa-breathe{ 0%,100%{ transform:scale(1); opacity:var(--km-o,.07); } 50%{ transform:scale(1.07); opacity:calc(var(--km-o,.07) * 1.9); } }
  .kamon-mark.spin{ animation:wa-spin 60s linear infinite; }
  @keyframes wa-spin{ to{ transform:rotate(360deg); } }
}
.hero-slash{ position:absolute; top:0; left:0; height:100%; width:70px; pointer-events:none; z-index:2; opacity:0;
  background:linear-gradient(100deg, transparent, rgba(247,217,138,.6) 45%, #fff6df 50%, rgba(247,217,138,.6) 55%, transparent);
  filter:blur(1.5px); transform:translateX(-160%) skewX(-16deg); }
@media (prefers-reduced-motion: no-preference){
  .hero-slash{ animation:wa-slash 1s .25s cubic-bezier(.5,0,.2,1) 1 both; }
  @keyframes wa-slash{ 0%{ transform:translateX(-160%) skewX(-16deg); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateX(320%) skewX(-16deg); opacity:0; } }
}
/* 共通：運営会社フッター（墨・青海波の帯つき） */
.doc-foot{ position:relative; background:var(--ink-ground); color:#cfc7b6; margin-top:48px; padding:42px 20px 46px; overflow:hidden; }
.doc-foot .sei-top{ position:absolute; left:0; right:0; top:0; height:40px; opacity:.5; --sei:rgba(201,162,75,.4);
  background-color:transparent !important;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); }
.doc-foot .inner{ position:relative; max-width:760px; margin:0 auto; }
.doc-foot .ct{ color:var(--gold); font-weight:800; letter-spacing:.14em; font-size:12.5px; margin-bottom:14px;
  display:flex; align-items:center; gap:12px; }
.doc-foot .ct::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.doc-foot dl{ display:grid; grid-template-columns:130px 1fr; gap:0; }
.doc-foot dt{ color:#e2c579; font-size:12px; padding:10px 0; border-top:1px solid #2c323b; font-weight:700; }
.doc-foot dd{ margin:0; font-size:13px; padding:10px 0; border-top:1px solid #2c323b; color:#e5ded0; }
.doc-foot a{ color:#e2c579; }
.doc-foot .cp{ margin-top:20px; font-size:11.5px; color:#8b8676; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- 上部ナビ（全ページ共通・ピル型） ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--navy); color: #fff; min-height: 54px;
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  flex-wrap: nowrap;                       /* 常に1段 */
  overflow-x: auto; -webkit-overflow-scrolling: touch;  /* 収まらない時は横スクロール */
  scrollbar-width: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(16,35,56,.14);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, #c9a24b 22%, #e7c14a 50%, #c9a24b 78%, transparent) 1;
}
.topbar::-webkit-scrollbar { display: none; }
.topbar .logo { font-weight: 800; font-size: 17px; letter-spacing: .02em; color: #fff; margin-right: 2px; flex: none; }
.topbar .logo:hover { text-decoration: none; }
.topbar .logo b { color: var(--blue); }
.topbar .spacer { flex: 1; }
/* 主ナビ（機能）: ピル */
.topbar .nav { display: flex; align-items: center; gap: 1px; flex-wrap: nowrap; flex: none; }
.topbar .nav a { color: #c9dbea; padding: 6px 9px; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; white-space: nowrap; transition: background .12s, color .12s; }
.topbar .nav a:hover { background: rgba(255,255,255,.13); color: #fff; text-decoration: none; }
.topbar .nav a.active { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(43,159,216,.42); }
/* 右側ユーティリティ */
.topbar .util { display: flex; align-items: center; gap: 1px; margin-left: auto; flex: none; }
.topbar .util a { color: #9fbdd4; font-size: 12px; padding: 6px 8px; border-radius: 999px; white-space: nowrap; }
.topbar .util a:hover { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }
.topbar .util a.active { color: #fff; background: rgba(255,255,255,.15); }
.topbar .util .btn { white-space: nowrap; flex: none; }
.topbar .badge { flex: none; }
.topbar a { color: #c9dbea; }         /* 後方互換（旧マークアップのリンク） */
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar .who { color: #9fbdd4; font-size: 12px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
@media (max-width: 900px) {
  .topbar { padding: 8px 10px; }
  .topbar .who { display: none; }      /* 狭い画面では名前を省略（1段は維持・横スクロール） */
}

/* ---- ロゴマーク（墨地に金の筆＋朱の一線・書道テイスト） ---- */
.logo { display: inline-flex; align-items: center; }
.brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 9px; flex: none; margin-right: .46em; overflow: hidden;
  background: linear-gradient(150deg, #14171c 0%, #23262e 70%, #2c2a20 130%);
  box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(201,162,75,.4); }
/* 背後にうっすら青海波 */
.brand-mark::before { content: ""; position: absolute; inset: 0; opacity: .5; --sei: rgba(201,162,75,.5);
  background-image:
    radial-gradient(circle at 50% 100%, transparent 30%, var(--sei) 31%, var(--sei) 40%, transparent 41%),
    radial-gradient(circle at 0% 100%, transparent 30%, var(--sei) 31%, var(--sei) 40%, transparent 41%),
    radial-gradient(circle at 100% 100%, transparent 30%, var(--sei) 31%, var(--sei) 40%, transparent 41%);
  background-size: 10px 10px; }
.brand-mark svg { position: relative; z-index: 2; width: 1.06em; height: 1.06em; display: block; }
.brand-mark .wave { fill: none; stroke: #f3d98a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* 朱の一線 */
.brand-mark::after { content: ""; position: absolute; z-index: 3; left: 20%; right: 18%; bottom: 24%;
  height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #c0432f 20%, #d9694f 55%, #c0432f 85%, transparent); }
/* 商談無双のロゴ文字は明朝で書道感、無双は金 */
.topbar .logo { font-family: "Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP", var(--font);
  letter-spacing: .06em; }
.topbar .logo b { color: #e7c14a; }

/* ---- ボタン ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 10px; padding: 9px 16px;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: #eef1f4; color: var(--ink); transition: filter .15s, background .15s, transform .12s, box-shadow .15s;
  text-decoration: none;
}
.btn:hover { filter: brightness(.98); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(38,80,126,.32); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-600); filter: none; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; border-color: #c9d6e2; color: var(--ink); }
.btn-danger { background: #fdecec; color: var(--neg); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; font-weight: 600; }
.btn-google svg { width: 18px; height: 18px; }

/* ---- バッジ / チップ ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; }
.badge-free { background: #eef2f7; color: var(--muted); }
.badge-pro { background: var(--gold-soft); color: var(--gold); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; }
.chip-done { background: #e7f3ea; color: var(--pos); }
.chip-processing { background: #fff3e0; color: var(--warn); }
.chip-error { background: #fdecec; color: var(--neg); }
.chip-recording { background: #e7f0fb; color: var(--blue-600); }

/* ---- カード ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; }
.card h2 { font-size: 15px; margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--blue-soft); display: flex; align-items: center; gap: 8px; }
.card h2::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }

/* ---- フォーム ---- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.field input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid #cfdae4; border-radius: 10px; padding: 11px 13px; background: #fff;
}
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43,159,216,.15); }
.field select { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid #cfdae4; border-radius: 10px; padding: 11px 13px; background: #fff; }
.field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43,159,216,.15); }

.notice { border-radius: 10px; padding: 10px 13px; font-size: 13px; }
.notice-info { background: var(--blue-soft); color: #1c5a78; }
.notice-warn { background: #fdf3e2; color: var(--warn); }
.notice-error { background: #fdecec; color: var(--neg); }
.muted { color: var(--muted); }
.empty { color: var(--muted); text-align: center; padding: 32px 0; }

/* ---- 分析ビュー: KPI / インサイト / アクション ---- */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-row.wrap { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 1180px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-row { grid-template-columns: 1fr; } }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 16px 18px; }
.kpi .kn { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi .kv { font-size: 30px; font-weight: 800; color: var(--navy); margin-top: 4px; }
.kpi .kv small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.kpi .bar { height: 6px; background: #eef2f7; border-radius: 3px; overflow: hidden; margin-top: 10px; }
.kpi .bar > i { display: block; height: 100%; }
.kpi.hero { background: linear-gradient(135deg, #16324f 0%, #1f6fae 100%); border: 0; color: #fff; }
.kpi.hero .kn { color: #bcd4e6; }
.kpi.hero .kv { color: #fff; font-size: 40px; }
.kpi.hero .kv small { color: #bcd4e6; }

.insight { padding: 11px 0; border-top: 1px solid var(--line); }
.insight:first-child { border-top: 0; padding-top: 2px; }
.insight .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; }
.insight .top b { font-size: 16px; font-variant-numeric: tabular-nums; }
.insight .bar { height: 6px; background: #eef2f7; border-radius: 3px; overflow: hidden; margin: 6px 0; }
.insight .bar > i { display: block; height: 100%; }
.insight .why { font-size: 12px; color: var(--muted); line-height: 1.6; }
.disclaimer { font-size: 11px; color: var(--muted-2); margin-top: 12px; line-height: 1.6; }

.action-card h2 { border-bottom-color: #fde9c8; }
.crm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px dashed var(--line); }
.crm-bar label { font-size: 12px; color: var(--muted); font-weight: 600; }
.crm-bar select { font-family: inherit; font-size: 13px; border: 1px solid #cfdae4;
  border-radius: 8px; padding: 6px 10px; background: #fff; max-width: 240px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  opacity: 0; pointer-events: none; background: var(--navy); color: #fff; padding: 10px 18px;
  border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); z-index: 100;
  transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- CRM: ビュー切替・カンバン・確度バー ---- */
.viewbar { max-width: 1400px; margin: 18px auto 0; padding: 0 20px; display: flex; gap: 8px; }
.vtab { border: 1px solid var(--line); background: #fff; color: var(--muted); font-family: inherit;
  font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 10px; cursor: pointer; }
.vtab.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.kanban { max-width: 1400px; margin: 18px auto; padding: 0 20px; display: grid;
  grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1000px) { .kanban { overflow-x: auto; grid-auto-flow: column;
  grid-template-columns: none; grid-auto-columns: 240px; } }
.kcol { background: #eef2f7; border-radius: 12px; padding: 10px; min-height: 120px; }
.khead { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.khead .kcount { font-size: 11px; color: var(--muted); margin-left: auto; }
.kcards { display: flex; flex-direction: column; gap: 8px; }
.kempty { text-align: center; color: var(--muted-2); font-size: 12px; padding: 16px 0; border: 1px dashed #cbd5e1; border-radius: 8px; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  cursor: grab; box-shadow: var(--shadow); }
.kcard:active { cursor: grabbing; }
.kcard .kn { font-weight: 700; font-size: 13.5px; }
.kcard .kc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.kcard .kp { font-size: 11px; color: var(--muted); margin-top: 5px; }
.kbar, .probbar { height: 6px; background: #eef2f7; border-radius: 3px; overflow: hidden; margin-top: 7px; }
.probbar { margin-top: 8px; }
.kbar > i, .probbar > i { display: block; height: 100%; background: var(--blue); }

/* ---- ダッシュボード サイドバー ウィジェット ---- */
.mini { padding: 13px 15px; }
.mini-h { font-size: 12px; font-weight: 700; color: var(--muted); display: flex;
  justify-content: space-between; align-items: center; margin-bottom: 8px; }
#scoreSpark { width: 100%; height: 54px; display: block; }
.mini-f { font-size: 11px; margin-top: 6px; }
.side-h { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 10px; }
.twi { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.twi:first-child { border-top: 0; }
.twi input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--blue); flex: none; }
.twi .tc { display: block; font-style: normal; font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.act { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.act:first-of-type { border-top: 0; }
.act input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.arow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.arow:first-child { border-top: 0; }

.novideo { min-height: 200px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; border-radius: 10px; line-height: 1.7;
  color: #9fb3c8; background: linear-gradient(135deg, #16324f, #0e2338); font-size: 13px; }

/* ---- モーダル ---- */
.modal-back { position: fixed; inset: 0; background: rgba(14,35,56,.45); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-back.open { display: flex; }
.modal { background: #fff; border-radius: 16px; box-shadow: var(--shadow); width: 100%; max-width: 460px; padding: 24px; }
.modal h3 { font-size: 17px; margin-bottom: 14px; }
.modal-sep { display: flex; align-items: center; gap: 10px; color: var(--muted-2);
  font-size: 12px; margin: 20px 0 12px; }
.modal-sep::before, .modal-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }