* { font-family: 'Noto Sans JP', sans-serif; box-sizing: border-box; }
body { background: #f8f9fa; margin: 0; color: #1a1a2e; }

/* Sidebar */
.sidebar { width: 260px; min-height: 100vh; background: linear-gradient(180deg, #c41e3a 0%, #1a1a2e 100%); color: #fff; position: fixed; left: 0; top: 0; z-index: 50; display: flex; flex-direction: column; }
.sidebar-logo { width: 48px; height: 48px; background: rgba(255,255,255,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.sidebar-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; border-radius: 8px; margin: 2px 12px; transition: all 0.2s; font-size: 14px; }
.sidebar-item:hover { background: rgba(255,255,255,0.12); }
.sidebar-item.active { background: rgba(255,255,255,0.2); font-weight: 600; }

/* Main */
.main-content { margin-left: 260px; padding: 24px 32px; min-height: 100vh; }
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.3s ease; }

/* Cards */
.kpi-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; border-top: 3px solid #c41e3a; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,30,58,0.15); }
.card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Badges */
.badge { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-crimson { background: #fce4ec; color: #c41e3a; }
.badge-orange { background: #fed7aa; color: #9a3412; }
.badge-gray { background: #e5e7eb; color: #374151; }
.badge-purple { background: #f3e8ff; color: #7c3aed; }

/* Tables */
.table-container { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.table-container table { width: 100%; border-collapse: collapse; }
.table-container th { background: #fafafa; padding: 12px 16px; text-align: left; font-size: 13px; color: #64748b; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.table-container td { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.table-container tr:hover { background: #fef2f4; }

/* Modal */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(26,26,46,0.55); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal-content { background: #fff; border-radius: 16px; max-width: 900px; width: 90%; max-height: 85vh; overflow-y: auto; padding: 32px; position: relative; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; background: #f1f5f9; border-radius: 8px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }

/* Chat */
.chat-bubble { padding: 12px 16px; border-radius: 12px; max-width: 80%; font-size: 14px; line-height: 1.6; }
.chat-user { background: #c41e3a; color: #fff; margin-left: auto; }
.chat-ai { background: #f3f4f6; color: #1a1a2e; border: 1px solid #e5e7eb; }

/* Buttons */
.btn-primary { background: linear-gradient(135deg, #c41e3a, #8b1428); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: opacity 0.2s; }
.btn-primary:hover { opacity: 0.92; box-shadow: 0 4px 12px rgba(196,30,58,0.3); }
.btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.btn-secondary:hover { background: #e5e7eb; }

/* Tabs */
.tab-btn { padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; border: none; background: transparent; color: #64748b; font-weight: 500; }
.tab-btn.active { background: #c41e3a; color: #fff; font-weight: 600; }

/* Progress */
.progress-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.8s; background: linear-gradient(90deg, #c41e3a, #e85d75); }

/* Chart */
.chart-container { position: relative; height: 240px; }

/* Pipeline */
.pipeline-col { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); min-height: 420px; }
.pipeline-card { background: #fafafa; border-left: 3px solid #c41e3a; padding: 10px 12px; border-radius: 6px; margin-bottom: 8px; font-size: 13px; cursor: pointer; }
.pipeline-card:hover { background: #fef2f4; }
.stage-lead { border-left-color: #94a3b8; }
.stage-proposal { border-left-color: #f59e0b; }
.stage-negotiation { border-left-color: #c41e3a; }
.stage-won { border-left-color: #16a34a; }

/* AI Pulse */
.ai-pulse { width: 8px; height: 8px; background: #16a34a; border-radius: 50%; display: inline-block; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,0.6)} 70%{box-shadow:0 0 0 8px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }

/* Metrics */
.metric-up { color: #16a34a; }
.metric-down { color: #dc2626; }

/* Inventory categories */
.inventory-cat { cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }
.inventory-cat.active-cat { border-color: #c41e3a; }
.inventory-cat:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Inputs */
input[type="text"], input[type="number"], input[type="date"], input[type="email"], textarea, select {
  border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 12px; font-size: 14px; width: 100%; box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: #c41e3a; box-shadow: 0 0 0 3px rgba(196,30,58,0.12); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Typing dots */
.typing-dots::after { content: ''; animation: dots 1.5s infinite; }
@keyframes dots { 0%,20%{content:'.'} 40%{content:'..'} 60%,100%{content:'...'} }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation: fadeIn 0.3s ease; }

/* Brand card */
.brand-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-left: 4px solid #c41e3a; transition: all 0.2s; }
.brand-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.brand-card.own-brand { border-left-color: #0ea5e9; }

/* Seasonal chart legend */
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }