/* ECHO B2B Admin Console — Components (fallback) */
.alert-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;font-size:12px;font-weight:500;margin-bottom:20px}
.alert-banner.danger{background:#FEF2F2;color:#DC2626;border:1px solid #FECACA}
.alert-banner.warning{background:#FFFBEB;color:#D97706;border:1px solid #FDE68A}
.alert-banner.info{background:#EFF6FF;color:#2563EB;border:1px solid #BFDBFE}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.5;cursor:pointer;transition:all 150ms ease;border:1px solid transparent;white-space:nowrap;text-decoration:none}
.btn-primary{background:#2563EB;color:#fff;border-color:#2563EB}
.btn-primary:hover{background:#1D4ED8}
.btn-secondary{background:#fff;color:#334155;border-color:#E2E8F0}
.btn-secondary:hover{background:#F8FAFC}
.btn-ghost{background:transparent;color:#475569}
.btn-ghost:hover{background:#F1F5F9}
.btn-danger{background:#DC2626;color:#fff;border-color:#DC2626}
.btn-success{background:#059669;color:#fff;border-color:#059669}
.btn-sm{padding:4px 12px;font-size:11px}
.btn-lg{padding:12px 24px;font-size:14px}
.card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #E2E8F0}
.card-title{font-size:14px;font-weight:600;color:#1E293B}
.card-body{padding:20px}
.card-footer{padding:12px 20px;border-top:1px solid #E2E8F0;background:#F8FAFC;border-radius:0 0 12px 12px}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:24px}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);padding:20px;display:flex;flex-direction:column;gap:8px}
.kpi-card-unit{font-size:16px;font-weight:600;margin-left:2px}
.kpi-card-sub{font-size:11px;color:#94A3B8;margin-top:2px}
.kpi-card-label{font-size:12px;font-weight:500;color:#64748B}
.kpi-card-value{font-size:32px;font-weight:700;color:#0F172A;line-height:1;letter-spacing:-0.02em}
.kpi-card-change{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.kpi-card-change.up{color:#059669;background:#ECFDF5}
.kpi-card-change.down{color:#DC2626;background:#FEF2F2}
.tabs{display:flex;border-bottom:2px solid #E2E8F0;gap:0;margin-bottom:24px}
.tab-btn{padding:12px 20px;font-size:12px;font-weight:500;color:#64748B;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color 150ms ease,border-color 150ms ease;cursor:pointer;white-space:nowrap;background:none}
.tab-btn:hover{color:#1E293B}
.tab-btn.active{color:#2563EB;border-bottom-color:#2563EB;font-weight:600}
.tab-panel{display:none}
.tab-panel.active{display:block}
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;margin-bottom:16px}
.filter-label{font-size:12px;font-weight:500;color:#64748B;white-space:nowrap}
.filter-select{padding:4px 12px;border:1px solid #E2E8F0;border-radius:8px;font-size:12px;color:#334155;background:#fff;cursor:pointer;outline:none}
.table-wrapper{overflow-x:auto;border-radius:12px;border:1px solid #E2E8F0;width:100%;min-width:0}
.data-table{width:100%;min-width:800px;border-collapse:collapse;font-size:12px}
.data-table thead{background:#F8FAFC;border-bottom:1px solid #E2E8F0}
.data-table th{padding:12px 16px;font-weight:600;color:#64748B;text-align:left;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap}
.data-table td{padding:12px 16px;color:#334155;border-bottom:1px solid #F1F5F9;vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:#F8FAFC}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-dot{width:6px;height:6px;border-radius:999px;flex-shrink:0}
.badge.active{background:#ECFDF5;color:#059669}
.badge.active .badge-dot{background:#059669}
.badge.inactive{background:#F1F5F9;color:#64748B}
.badge.inactive .badge-dot{background:#94A3B8}
.badge.stagnant{background:#FFFBEB;color:#D97706}
.badge.stagnant .badge-dot{background:#D97706}
.badge.alert{background:#FEF2F2;color:#DC2626}
.badge.alert .badge-dot{background:#DC2626}
.badge.pending{background:#EFF6FF;color:#2563EB}
.badge.pending .badge-dot{background:#2563EB}
.health-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600}
.health-badge.good{background:#ECFDF5;color:#059669}
.health-badge.caution{background:#FFFBEB;color:#D97706}
.health-badge.stagnant{background:#FEF2F2;color:#DC2626}
.progress-bar{height:6px;background:#E2E8F0;border-radius:999px;overflow:hidden}
.progress-fill{height:100%;border-radius:999px;transition:width .6s ease}
.progress-fill.blue{background:#2563EB}
.progress-fill.teal{background:#0D9488}
.progress-fill.green{background:#059669}
.progress-fill.orange{background:#D97706}
.progress-fill.red{background:#DC2626}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-label{font-size:12px;font-weight:600;color:#334155}
.form-input,.form-select,.form-textarea{padding:8px 12px;border:1px solid #E2E8F0;border-radius:8px;font-size:14px;color:#1E293B;background:#fff;outline:none;width:100%;transition:border-color 150ms ease}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#3B82F6;box-shadow:0 0 0 3px rgba(59,130,246,0.25)}
.form-textarea{resize:vertical;min-height:100px}
.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#CBD5E1;border-radius:999px;transition:background 150ms ease}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:999px;transition:transform 150ms ease;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.toggle-switch input:checked+.toggle-slider{background:#2563EB}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:500;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity 200ms ease}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:16px;box-shadow:0 10px 15px rgba(0,0,0,0.08);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform 200ms ease}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #E2E8F0}
.modal-title{font-size:16px;font-weight:600;color:#1E293B}
.modal-close{width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#94A3B8;cursor:pointer;transition:all 150ms ease}
.modal-close:hover{background:#F1F5F9;color:#1E293B}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid #E2E8F0;display:flex;justify-content:flex-end;gap:12px}
.insight-box{background:linear-gradient(135deg,#EFF6FF,#EEF2FF);border:1px solid #C7D2FE;border-radius:12px;padding:16px 20px}
.insight-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.insight-title{font-size:12px;font-weight:600;color:#2563EB}
.insight-list{display:flex;flex-direction:column;gap:8px}
.insight-item{font-size:12px;color:#334155;display:flex;align-items:flex-start;gap:8px;line-height:1.7}
.insight-item::before{content:'•';color:#2563EB;font-weight:bold;flex-shrink:0;margin-top:1px}
.score-bars{display:flex;flex-direction:column;gap:12px}
.score-bar-row{display:flex;align-items:center;gap:12px}
.score-bar-label{font-size:12px;color:#475569;width:60px;flex-shrink:0}
.score-bar-track{flex:1;height:8px;background:#E2E8F0;border-radius:999px;overflow:hidden}
.score-bar-fill{height:100%;border-radius:999px;background:#2563EB;transition:width .6s ease}
.score-bar-value{font-size:12px;font-weight:600;color:#334155;width:36px;text-align:right;flex-shrink:0}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:3px 10px;background:#F1F5F9;color:#475569;border-radius:999px;font-size:11px;font-weight:500}
.tag.danger-tag{background:#FEF2F2;color:#DC2626}
.content-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;overflow:hidden}
.content-card:hover{box-shadow:0 4px 6px rgba(0,0,0,0.07)}
.content-card-header{padding:16px;background:#F8FAFC;border-bottom:1px solid #E2E8F0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.content-card-title{font-size:14px;font-weight:600;color:#1E293B}
.content-card-body{padding:16px}
.content-card-footer{padding:12px 16px;border-top:1px solid #E2E8F0;display:flex;align-items:center;justify-content:space-between}
.diff-badge{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.diff-badge.beginner{background:#ECFDF5;color:#059669}
.diff-badge.mid{background:#FFFBEB;color:#D97706}
.diff-badge.advanced{background:#FEF2F2;color:#DC2626}
.cat-badge{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500;background:#EFF6FF;color:#2563EB}
.compare-hero{background:linear-gradient(135deg,#050f1e 0%,#1E3A6E 100%);border-radius:16px;padding:24px;color:#fff;margin-bottom:24px}
.compare-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.compare-score{font-size:48px;font-weight:700;line-height:1;letter-spacing:-0.03em}
.compare-score.before{color:rgba(255,255,255,0.6)}
.compare-score.after{color:#fff}
.compare-delta{background:rgba(13,148,136,0.3);color:#5EEAD4;padding:8px 16px;border-radius:999px;font-size:18px;font-weight:700;text-align:center;margin-top:16px;border:1px solid rgba(94,234,212,0.3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.text-danger{color:#DC2626}
.text-success{color:#059669}
.text-warning{color:#D97706}
.text-muted{color:#64748B}
.text-sm{font-size:12px}
.text-xs{font-size:11px}
.text-bold{font-weight:700}
.text-semibold{font-weight:600}
.improve-value{font-weight:600;font-variant-numeric:tabular-nums}
.improve-value.positive{color:#0D9488}
.improve-value.negative{color:#DC2626}
.improve-value.neutral{color:#64748B}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid #E2E8F0;background:#F8FAFC;border-radius:0 0 12px 12px}
.pagination-info{font-size:12px;color:#64748B}
.page-btn{width:32px;height:32px;border-radius:8px;font-size:12px;font-weight:500;color:#475569;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 150ms ease;border:1px solid transparent}
.page-btn:hover{background:#F1F5F9}
.page-btn.active{background:#2563EB;color:#fff;border-color:#2563EB}
.plan-card{background:linear-gradient(135deg,#050f1e 0%,#1E3A6E 100%);border-radius:16px;padding:24px;color:#fff}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #F1F5F9}
.stat-row:last-child{border-bottom:none}
.stat-row-label{font-size:12px;color:#64748B}
.stat-row-value{font-size:12px;font-weight:600;color:#1E293B}

/* ── KPI Card extended ── */
.kpi-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
.kpi-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi-card-icon svg{width:20px;height:20px;flex-shrink:0}
.kpi-card-icon.red{background:#FEF2F2;color:#DC2626}
.kpi-card-icon.blue{background:#EFF6FF;color:#2563EB}
.kpi-card-icon.teal{background:#F0FDFA;color:#0D9488}
.kpi-card-icon.navy{background:#EFF6FF;color:#050f1e}
.kpi-card-icon.orange{background:#FFFBEB;color:#D97706}
.kpi-card-icon.green{background:#ECFDF5;color:#059669}
.kpi-card-icon.purple{background:#F5F3FF;color:#7C3AED}
.kpi-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.kpi-card-desc{font-size:11px;color:#94A3B8}
.kpi-card-change svg{width:12px;height:12px;flex-shrink:0}
.unit{font-size:16px;font-weight:500;color:#64748B;margin-left:2px}
/* ── KPI Card emphasis variants ── */
.kpi-card.emphasis-danger{border-color:#FECACA;background:linear-gradient(135deg,#FEF2F2 0%,#fff 60%)}
.kpi-card.emphasis-blue{border-color:#BFDBFE;background:linear-gradient(135deg,#EFF6FF 0%,#fff 60%)}
/* ── Alert Banner ── */
.alert-banner svg{width:16px;height:16px;flex-shrink:0}
.alert-banner-link{margin-left:auto;color:inherit;font-weight:600;text-decoration:underline;white-space:nowrap;font-size:12px}
/* ── Page subtitle ── */
.page-subtitle{font-size:13px;color:#64748B;margin-top:4px}
.page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ── Table user info ── */
.table-user-info{display:flex;flex-direction:column;gap:2px}
.table-user-name{font-weight:600;color:#1E293B;font-size:13px}
.table-user-sub{font-size:11px;color:#94A3B8}
.col-score{text-align:right;font-variant-numeric:tabular-nums}
.score-value{font-weight:700;color:#1E293B}
.col-action{text-align:right}
/* ── Improve value ── */
.improve-value{font-size:12px;font-weight:600}
.improve-value.positive{color:#059669}
.improve-value.negative{color:#DC2626}
.improve-value.neutral{color:#64748B}
/* ── Insight box ── */
.insight-box{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:20px}
.insight-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.insight-header svg{width:16px;height:16px;color:#2563EB;flex-shrink:0}
.insight-title{font-size:13px;font-weight:600;color:#1E293B}
.insight-list{display:flex;flex-direction:column;gap:8px}
.insight-item{font-size:13px;color:#475569;line-height:1.6;padding-left:12px;border-left:3px solid #2563EB}
/* ── Content card desc/meta ── */
.content-card-desc{font-size:13px;color:#475569;line-height:1.5;margin-bottom:12px}
.content-card-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:#64748B}
.content-meta-item{display:flex;align-items:center;gap:4px}
.content-meta-item svg{width:13px;height:13px;flex-shrink:0}
.cat-badge{display:inline-block;background:#EFF6FF;color:#2563EB;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.04em}
.diff-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.diff-badge.beginner{color:#059669;border-color:#059669}
.diff-badge.mid{color:#2563EB;border-color:#2563EB}
.diff-badge.advanced{color:#7C3AED;border-color:#7C3AED}
/* ── Sortable table headers ── */
.sortable{cursor:pointer;user-select:none}
.sortable:hover{background:#F1F5F9}
/* ── Modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:500;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.2);width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #E2E8F0}
.modal-title{font-size:16px;font-weight:600;color:#1E293B}
.modal-close{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#64748B;transition:background .15s}
.modal-close:hover{background:#F1F5F9}
.modal-close svg{width:16px;height:16px}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid #E2E8F0;display:flex;justify-content:flex-end;gap:8px}
/* ── Form ── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px}
.form-input{width:100%;padding:8px 12px;border:1px solid #E2E8F0;border-radius:8px;font-size:13px;color:#1E293B;outline:none;transition:border-color .15s}
.form-input:focus{border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
/* ── Chart area ── */
.chart-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:20px}

.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-sm svg { width: 12px; height: 12px; }

/* ── サイドバーナビバッジ ── */
.sidebar-nav-badge {
  margin-left: auto;
  background: var(--color-danger, #dc2626);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  position: relative;
  cursor: default;
}
.sidebar-nav-badge[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #0f172a;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}