/* 見込みドットAI（営業AI 管理画面）。デザインはA（コックピット：紺と水色）に決定（2026-11-02） */
:root {
  /* A：コックピット（紺と水色） */
  --bg:#0b1220; --panel:#131c2e; --panel2:#1a2540; --line:#25324d; --text:#e6edf7; --sub:#8a98b0;
  --accent:#3fa9f5; --accent-text:#fff; --hot:#22d27a; --hot-text:#04170d; --warn:#f5b83f; --bad:#ff7a7a; --op:#c9a2ff;
  --radius:16px; --font:-apple-system,"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  /* 立体感：上の縁にうっすら光、下に影 */
  --card-bg:linear-gradient(180deg,#17223a 0%,#121b2d 100%);
  --edge:rgba(130,170,230,.16);
  --lift:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(63,169,245,.55), 0 6px 18px -4px rgba(63,169,245,.55);
  --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--text); font-family:var(--font); font-size:17px; line-height:1.55; min-height:100dvh;
  background:radial-gradient(900px 520px at 88% -12%, rgba(63,169,245,.11), transparent 62%),
             radial-gradient(760px 460px at -12% 112%, rgba(34,210,122,.06), transparent 60%), var(--bg);
  background-attachment:fixed; }
button, input, select, textarea { font:inherit; color:inherit; }
.hidden { display:none !important; }

/* 上の帯とタブ */
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; position:sticky; top:0; z-index:5;
  background:rgba(11,18,32,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(63,169,245,.10), 0 8px 20px -12px rgba(0,0,0,.7); }

/* ロゴ：見込みドットAI（印＋文字） */
.logo { display:flex; align-items:center; gap:11px; }
.logo .mark { width:38px; height:38px; flex:none; filter:drop-shadow(0 0 8px rgba(63,169,245,.35)); }
.logo .words { display:flex; flex-direction:column; line-height:1.15; }
.logo .name { font-size:20px; font-weight:800; letter-spacing:.06em; white-space:nowrap; }
.logo .name .w2 { font-weight:500; color:#b9c7dc; letter-spacing:.02em; }
.logo .name .w3 { margin-left:1px; font-weight:900; letter-spacing:.04em; background:linear-gradient(100deg,#6cc8ff 0%,#3fa9f5 45%,#22d27a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo small { display:block; font-size:11px; letter-spacing:.22em; color:var(--sub); font-weight:600; margin-top:2px; }
.login .logo { justify-content:center; }
.login .logo .mark { width:48px; height:48px; }
.login .logo .name { font-size:26px; }

.who { display:flex; align-items:center; gap:10px; color:var(--sub); font-size:15px; }
nav { display:flex; gap:6px; padding:10px 16px; overflow-x:auto; border-bottom:1px solid var(--line); }
nav button { flex:none; background:none; border:1px solid transparent; color:var(--sub); padding:10px 16px; border-radius:999px; font-size:16px; font-weight:700; cursor:pointer;
  transition:color .2s var(--ease), background-color .2s var(--ease); }
nav button:hover { color:var(--text); background:rgba(255,255,255,.04); }
nav button.on { color:#fff; background:linear-gradient(180deg,#4db6ff,#2e93e6); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--glow); }
main { padding:18px 20px 60px; max-width:1180px; margin:0 auto; }
h2 { font-size:22px; margin:6px 0 14px; }
.muted { color:var(--sub); }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.grow { flex:1; }

/* ボタン */
.btn { border-radius:12px; padding:12px 20px; font-weight:800; font-size:17px; cursor:pointer; color:var(--text);
  background:linear-gradient(180deg,#1e2a45,#18223a); border:1px solid var(--edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px -2px rgba(0,0,0,.6);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease); }
.btn:hover:not(:disabled) { border-color:rgba(130,170,230,.32); transform:translateY(-1px); }
.btn:active:not(:disabled) { transform:translateY(0); filter:brightness(.95); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(63,169,245,.45); }
.btn.primary { color:#fff; border-color:rgba(120,200,255,.55); background:linear-gradient(180deg,#52b9ff 0%,#2f93e6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(63,169,245,.75); }
.btn.primary:hover:not(:disabled) { box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px -8px rgba(63,169,245,.9); }
.btn.big { padding:18px 28px; font-size:20px; border-radius:14px; }
.btn.danger { background:rgba(255,122,122,.05); color:var(--bad); border-color:rgba(255,122,122,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px -10px rgba(255,122,122,.6); }
.btn.hotbtn { color:var(--hot-text); border-color:rgba(140,255,200,.7); font-size:22px; padding:16px 28px; background:linear-gradient(180deg,#3de894,#1fc370);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -8px rgba(34,210,122,.85); }
.btn:disabled { opacity:.45; cursor:default; }
.btn.small { padding:7px 12px; font-size:14px; border-radius:10px; }

/* カード：角を少し丸く、上の縁の光と影で立体感 */
.card { background:var(--card-bg); border:1px solid var(--edge); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--lift); }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-bottom:22px; }

/* 数のまとめ（数字は変わるときに軽くカウントアップ） */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0 18px; }
.stat { background:var(--card-bg); border:1px solid var(--edge); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--lift); }
.stat b { display:block; font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.stat span { color:var(--sub); font-size:14px; font-weight:700; }
.stat.hot { border-color:rgba(34,210,122,.55); box-shadow:var(--lift), 0 0 0 1px rgba(34,210,122,.18), 0 8px 24px -10px rgba(34,210,122,.55); }
.stat.hot b { color:var(--hot); text-shadow:0 0 16px rgba(34,210,122,.35); }
.stat b.bump { animation:bump .7s var(--ease); }
@keyframes bump { 0% { text-shadow:0 0 0 transparent; } 35% { text-shadow:0 0 14px rgba(108,200,255,.75); } 100% { text-shadow:0 0 0 transparent; } }
.stat.hot b.bump { animation-name:bumphot; }
@keyframes bumphot { 0%, 100% { text-shadow:0 0 16px rgba(34,210,122,.35); } 35% { text-shadow:0 0 22px rgba(34,210,122,.9); } }

/* 状態の札 */
.pill { display:inline-block; padding:3px 12px; border-radius:999px; font-size:14px; font-weight:800; background:rgba(255,255,255,.03); color:var(--sub); border:1px solid var(--line); white-space:nowrap; }
.pill.s-通話中, .pill.s-発信中 { color:var(--accent); border-color:rgba(63,169,245,.7); background:rgba(63,169,245,.08); }
.pill.s-見込みあり, .pill.s-保留中 { background:var(--hot); color:var(--hot-text); border-color:var(--hot); }
.pill.s-担当者通話中 { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.pill.s-不在, .pill.s-留守電, .pill.s-話し中, .pill.s-折り返し { color:var(--warn); border-color:var(--warn); }
.pill.s-断り { color:var(--bad); border-color:var(--bad); }

/* 通話のカード */
.call { display:flex; flex-direction:column; gap:8px; }
.call .top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.call .co { font-size:19px; font-weight:800; }
.call .tel { color:var(--sub); font-size:14px; }
.call .last { color:var(--sub); font-size:15px; min-height:2.6em; }
.call .acts { display:flex; gap:8px; flex-wrap:wrap; }
.call.is-hot { border-color:rgba(34,210,122,.8); animation:hotglow-card 2.4s ease-in-out infinite; animation-delay:var(--phase, 0s); }
@keyframes hotglow-card {
  0%, 100% { box-shadow:var(--lift), 0 0 0 1px rgba(34,210,122,.45), 0 0 18px -2px rgba(34,210,122,.25); }
  50% { box-shadow:var(--lift), 0 0 0 1px rgba(34,210,122,.85), 0 0 30px 2px rgba(34,210,122,.45); } }
.timer { font-variant-numeric:tabular-nums; color:var(--sub); font-size:14px; }

/* 見込みあり：ひと目で分かるように、画面の上に大きく出す。点滅ではなく、ふわっと光る（約2.4秒でゆっくり明るく・暗く）。
   画面は1.5秒ごとに作り直すので、光る動きの位置は --phase（時計から計算）で続きから始める */
#hotZone { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.hot-banner { position:relative; overflow:hidden; display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--hot-text); border-radius:20px; padding:20px 22px;
  background:linear-gradient(135deg,#43ec9c 0%,#25d27d 48%,#1cbf6e 100%); border:1px solid rgba(190,255,220,.75);
  animation:hotglow 2.4s ease-in-out infinite; animation-delay:var(--phase, 0s); }
.hot-banner::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.35), transparent 45%); }
.hot-banner::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:35%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg);
  animation:sheen 4.8s ease-in-out infinite; animation-delay:var(--phase, 0s); }
.hot-banner > * { position:relative; }
@keyframes hotglow {
  0%, 100% { box-shadow:0 0 0 1px rgba(34,210,122,.35), 0 10px 26px -10px rgba(34,210,122,.55); filter:brightness(1); }
  50% { box-shadow:0 0 0 4px rgba(34,210,122,.22), 0 0 46px 6px rgba(34,210,122,.45); filter:brightness(1.06); } }
@keyframes sheen { 0%, 55% { left:-40%; } 85%, 100% { left:120%; } }
.hot-banner .big { font-size:30px; font-weight:900; letter-spacing:.04em; }
.hot-banner .co { font-size:22px; font-weight:800; }
.hot-banner .sub { font-size:15px; font-weight:700; opacity:.85; }
.hot-banner .timer { color:inherit; font-size:15px; }
.hot-banner .btn { background:linear-gradient(180deg,#0b2a1a,#03150b); color:#5ff0a6; border:1px solid rgba(4,23,13,.6); font-size:24px; padding:18px 30px; border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px -8px rgba(2,30,15,.75); }
.hot-banner .btn.small { background:rgba(4,23,13,.12); color:var(--hot-text); border:2px solid rgba(4,23,13,.75); font-size:16px; padding:12px 16px; box-shadow:none; }

/* 動きを減らす設定の端末では、光る・数える動きを止める */
@media (prefers-reduced-motion: reduce) {
  .hot-banner, .hot-banner::after, .call.is-hot, .stat b.bump { animation:none !important; }
  .btn, nav button { transition:none; }
}

/* 表 */
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--sub); font-weight:700; font-size:14px; }
.table-wrap { overflow-x:auto; }
tr:hover td { background:rgba(255,255,255,.015); }

/* 入力 */
input[type=text], input[type=password], input[type=number], select, textarea { background:#0f1829; border:1px solid var(--line); border-radius:12px; padding:12px; font-size:17px; width:100%;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
input:focus, select:focus, textarea:focus { outline:none; border-color:rgba(63,169,245,.75); box-shadow:inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 3px rgba(63,169,245,.22); }
textarea { min-height:420px; font-size:15px; line-height:1.6; }
label.f { display:block; margin:10px 0; font-weight:700; color:var(--sub); font-size:15px; }
label.f input, label.f select { margin-top:6px; color:var(--text); }

/* ログイン */
.login { max-width:420px; margin:9vh auto 0; padding:0 18px; }
.login .card { padding:26px; box-shadow:var(--lift), 0 0 0 1px rgba(63,169,245,.08), 0 30px 60px -30px rgba(63,169,245,.35); }
.err { color:var(--bad); font-weight:700; min-height:1.5em; }
.ok { color:var(--hot); font-weight:700; }
.note { background:rgba(63,169,245,.06); border:1px solid rgba(63,169,245,.16); border-left:4px solid var(--accent); padding:10px 14px; border-radius:12px; color:var(--sub); font-size:15px; }
.secret-box { font-size:22px; font-weight:800; letter-spacing:.06em; background:var(--panel2); padding:12px 16px; border-radius:10px; user-select:all; }

/* 担当者が台本や通話記録をコピーしにくくする（完全には防げない。画面の写真は撮れる） */
.nocopy { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.nocopy textarea, .nocopy input { -webkit-user-select:text; user-select:text; }

/* メモ：AIのメモ（水色の点線・「AI」の札）と、担当者のメモ（紫の太い線・「自分」の札）と、CSVのメモ（灰色）を見た目で分ける */
.memos { display:flex; flex-direction:column; gap:6px; }
.memo { display:flex; gap:8px; align-items:flex-start; font-size:15px; line-height:1.45; padding:7px 10px; border-radius:8px; color:var(--text); }
.memo .tag { flex:none; font-size:12px; font-weight:900; padding:2px 8px; border-radius:999px; margin-top:1px; white-space:nowrap; }
.memo.ai { background:rgba(63,169,245,.10); border:1px dashed var(--accent); }
.memo.ai .tag { background:var(--accent); color:#04121f; }
.memo.op { background:rgba(201,162,255,.12); border:1px solid rgba(201,162,255,.35); border-left:5px solid var(--op); font-weight:700; }
.memo.op .tag { background:var(--op); color:#1a0b2e; }
.memo.csv { background:transparent; border:1px solid var(--line); color:var(--sub); }
.memo.csv .tag { background:var(--panel2); color:var(--sub); border:1px solid var(--line); }
.memo.empty { color:var(--sub); border:1px dashed var(--line); background:transparent; }
.hot-banner .memo.ai { background:rgba(4,23,13,.12); border-color:var(--hot-text); color:var(--hot-text); font-weight:800; }
.hot-banner .memo.ai .tag { background:var(--hot-text); color:var(--hot); }
.hot-banner .memo.op { background:rgba(4,23,13,.85); color:#fff; }

/* 通話のくわしい記録とメモを書く窓 */
dialog { background:var(--card-bg); color:var(--text); border:1px solid var(--edge); border-radius:20px; box-shadow:var(--lift), 0 30px 80px -20px rgba(0,0,0,.8); padding:20px; width:min(640px, calc(100vw - 24px)); max-height:calc(100dvh - 40px); }
dialog::backdrop { background:rgba(3,7,14,.66); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
dialog h3 { margin:0 0 4px; font-size:21px; }
dialog textarea.memo-input { min-height:120px; font-size:17px; margin-top:6px; }
.log { list-style:none; padding:0; margin:8px 0; font-size:14px; color:var(--sub); }
.log li { padding:4px 0; border-bottom:1px solid var(--line); }
.log li.them { color:var(--text); }

/* 発信の数のお知らせ */
.dialinfo { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:4px 0 0; }
.dialinfo .pill { font-size:15px; }
.pill.paused { color:var(--warn); border-color:var(--warn); }
.seg { display:inline-flex; border:1px solid var(--edge); border-radius:999px; overflow:hidden; background:#0f1829; box-shadow:inset 0 1px 2px rgba(0,0,0,.45); }
.seg button { background:none; border:none; padding:8px 18px; font-weight:800; font-size:16px; color:var(--sub); cursor:pointer; }
.seg button.on { background:linear-gradient(180deg,#4db6ff,#2e93e6); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

/* デザインの見本の名札 */
.design-tag { position:fixed; right:14px; bottom:14px; background:var(--accent); color:var(--accent-text); padding:8px 14px; border-radius:999px; font-weight:800; z-index:9; }

@media (max-width:640px) {
  header { padding:12px 14px; }
  main { padding:14px 14px 60px; }
  .cards { grid-template-columns:1fr; }
  .hot-banner { padding:16px; }
  .hot-banner .big { font-size:26px; }
  .hot-banner .btn:not(.small) { width:100%; }
  .hot-banner .btn.small { flex:1; }
  .btn.big { width:100%; }
  .who .name { display:none; }
  header .logo .mark { width:32px; height:32px; }
  header .logo .name { font-size:17px; letter-spacing:.03em; }
  header .logo small { display:none; }
  .table-wrap table { min-width:640px; }  /* 表は細くつぶさず、横にずらして見る */
}
td .memos { min-width:200px; }

/* ---------- ログインとパスワード変更の画面（2026-11-04、利用者「紹介ページに合わせて白を基調に」） ----------
   見た目だけ。body に auth の印があるときだけ効く（ログインのあとの管理画面は今までどおり）。
   色・フォント・ロゴは紹介ページ（lp.css）と同じ。フォントは自分のサーバーに置いたもの（admin/static/fonts） */
@font-face { font-family:"Inter"; src:url("/static/fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/static/fonts/inter-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Zen Kaku Gothic New"; src:url("/static/fonts/zen-kaku-gothic-new-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Zen Kaku Gothic New"; src:url("/static/fonts/zen-kaku-gothic-new-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
body.auth {
  --navy:#102b3c; --green:#126c49; --lp-line:#c6d0d3;
  --text:var(--navy); --sub:#4b6271; --line:var(--lp-line); --bad:#b3261e;
  --font:"Inter","Segoe UI","Helvetica Neue",Arial,"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  color:var(--navy); font-family:var(--font); -webkit-font-smoothing:antialiased;
  background:radial-gradient(760px 420px at 100% 0%, rgba(131,207,234,.16), transparent 64%),
             radial-gradient(680px 420px at 0% 100%, rgba(124,221,176,.12), transparent 62%), #fff;
  background-attachment:fixed; }
body.auth .login { max-width:440px; margin:11vh auto 48px; }
body.auth .auth-brand { display:flex; align-items:center; justify-content:center; gap:12px; }
body.auth .auth-mark { display:block; width:auto; height:44px; }
body.auth .auth-words { display:flex; flex-direction:column; line-height:1.2; }
body.auth .auth-name { font-size:28px; font-weight:700; letter-spacing:-.06em; white-space:nowrap; }
body.auth .auth-name span { font-weight:400; }
body.auth .auth-name b { margin-left:3px; color:var(--green); font-weight:700; }
body.auth .auth-words small { margin-top:4px; font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--sub); }
body.auth .login .card { background:#fff; border:1px solid var(--lp-line); border-top:3px solid var(--navy); border-radius:20px;
  box-shadow:0 1px 2px rgba(16,43,60,.06), 0 22px 48px -26px rgba(16,43,60,.32); padding:28px 28px 26px; }
body.auth label.f { color:var(--navy); font-size:15px; font-weight:700; }
body.auth label.f input { color:var(--navy); }
body.auth input[type=text], body.auth input[type=password] { background:#f6f9fa; border:1px solid var(--lp-line); border-radius:12px; box-shadow:none; }
body.auth input:focus { background:#fff; border-color:var(--green); box-shadow:0 0 0 3px rgba(18,108,73,.16); }
body.auth .note { color:var(--navy); background:#eef6f2; border:1px solid rgba(18,108,73,.28); border-radius:12px; padding:10px 12px; }
body.auth .err { color:var(--bad); }
body.auth .muted { color:var(--sub); text-align:center; font-size:14px; }
body.auth .btn { color:var(--navy); background:#fff; border:1px solid var(--lp-line); box-shadow:none; }
body.auth .btn:hover:not(:disabled) { border-color:var(--navy); }
body.auth .btn.primary { width:100%; color:#fff; background:var(--navy); border:1px solid var(--navy); border-radius:999px;
  box-shadow:0 14px 28px -16px rgba(16,43,60,.55), 0 0 0 0 rgba(131,207,234,0); }
body.auth .btn.primary:hover:not(:disabled) { background:#173d55; box-shadow:0 16px 30px -16px rgba(16,43,60,.6), 0 0 0 4px rgba(131,207,234,.28); }
body.auth .btn:focus-visible { box-shadow:0 0 0 3px rgba(18,108,73,.35); }
body.auth .row .btn.primary { width:auto; flex:1; }
@media (max-width:480px) {
  body.auth .login { margin-top:7vh; }
  body.auth .auth-name { font-size:24px; }
  body.auth .auth-mark { height:38px; }
  body.auth .login .card { padding:22px 18px; }
}