/* Base */
:root {
  --slate-900: #0f172a;
  --slate-800: #1f2937;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --primary: #2a2f45;
  --accent: #5b6bff;
}

* { box-sizing: border-box; }
body.app { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--slate-800); background: #fff; }

.app-container { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }

/* Header */
.app-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--slate-200); position: sticky; top: 0; background: #fff; z-index: 10; backdrop-filter: saturate(180%) blur(6px); }
.header-left { display: flex; align-items: center; gap: 12px; }
.brand-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.brand { font-weight: 700; font-size: 18px; color: var(--primary); letter-spacing: 0.4px; }
.header-right { display: flex; justify-content: flex-end; gap: 8px; }
.header-right .header-export { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--slate-200); color: var(--slate-700); background: #fff; cursor: pointer; }
.icon-btn:hover { background: var(--slate-100); }
.icon-btn svg { width: 18px; height: 18px; }

/* Content */
.content { padding: 20px 24px; max-width: 1920px; width: 100%; margin: 0 auto; display: grid; gap: 16px; box-sizing: border-box; }
.panel { border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; }
.panel { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.panel h2 { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--slate-200); font-size: 18px; color: var(--primary); }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--slate-200); }
.panel-head .head-left { display: inline-flex; align-items: center; gap: 8px; }
.panel-head .head-left .ico { width: 18px; height: 18px; color: var(--slate-700); }

/* Main header navigation (shadcn-ui like) */
.main-nav { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px; border: 1px solid var(--slate-200); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.main-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: var(--slate-700); text-decoration: none; line-height: 1; font-weight: 600; }
.main-nav a:hover { background: var(--slate-100); }
.main-nav a.active { background: var(--slate-900); color: #fff; }
.main-nav .nav-ico { width: 16px; height: 16px; }

/* Filters */
.filters-form { padding: 16px; display: grid; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font-size: 12px; color: var(--slate-600); }
select, input[type="text"] { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--slate-200); font-size: 14px; color: var(--slate-800); background: #fff; }
.actions { display: flex; justify-content: flex-end; }
.primary { background: var(--primary); color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.primary:hover { opacity: 0.92; }
.secondary { background: #fff; color: var(--primary); border: 1px solid var(--slate-200); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.secondary:disabled { cursor: not-allowed; opacity: 0.5; }

/* Radio choice cards */
.choice-group { display: grid; gap: 6px; }
.choice-group legend { font-size: 12px; color: var(--slate-600); }
.legend-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--slate-700); font-size: 18px; }
.legend-title .ico { width: 18px; height: 18px; color: var(--slate-600); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.choice-card { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--slate-200); border-radius: 12px; cursor: pointer; background: #fff; color: var(--slate-800); user-select: none; box-shadow: 0 1px 1px rgba(0,0,0,0.02); }
.choice-card:hover { background: var(--slate-100); }
.choice-card input[type="radio"], .choice-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.choice-card span { font-size: 14px; font-weight: 500; }
.choice-card:has(input[type="radio"]:checked), .choice-card:has(input[type="checkbox"]:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,107,255,0.2) inset; background: #f6f7ff; }
.choice-card:has(input[type="radio"]:focus-visible), .choice-card:has(input[type="checkbox"]:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-card:has(input[disabled]) { opacity: 0.45; cursor: not-allowed; }

/* Left sidebar + main layout for components menu */
.components-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.components-layout .panel h2 { position: sticky; top: 0; background: #fff; z-index: 1; }
.sidebar { padding-bottom: 12px; }
.sidebar fieldset { border: 0; margin: 0; padding: 0; }
.sidebar .choice-group { padding: 14px 16px; }
.sidebar .choice-group.first { padding-top: 26px; margin-top: 10px; }
.sidebar .choice-group + .choice-group { border-top: 1px dashed var(--slate-200); padding-top: 16px; margin-top: 4px; }
.sidebar .actions { padding: 0 16px 16px; gap: 8px; display: flex; flex-direction: column; align-items: flex-start; }
.sidebar .actions .hint { font-size: 12px; color: var(--slate-500); }
.muted { color: var(--slate-500); font-size: 12px; }

.main { padding-bottom: 0; }
.main-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; padding-bottom: 8px; }
.empty-state { display: grid; place-items: center; height: 360px; color: var(--slate-500); font-size: 18px; }
.chart-wrap { padding: 10px 12px 14px; }
.chart-wrap .k { font-size: 15px; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.spec-table .group td { background: var(--slate-100); font-weight: 600; color: var(--slate-700); }
.spec-table .group.values td { background: var(--slate-100); }
table.data-table.compact.spec-table td, table.data-table.compact.spec-table th { font-size: 14px; }

/* Responsive */
@media (max-width: 1100px) {
  .components-layout { grid-template-columns: 1fr; }
  .main-grid { grid-template-columns: 1fr; }
}

/* Table */
.table-wrap { overflow: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data-table th, table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--slate-200); text-align: left; white-space: nowrap; }
table.data-table thead th { background: var(--slate-100); color: var(--slate-700); font-weight: 600; }
table.data-table tr:hover td { background: #fafafa; }
table.data-table.compact th, table.data-table.compact td { padding: 8px 10px; }
.matrix-table thead th { font-size: 13px; }
.matrix-table tbody td { font-size: 13px; }
.fixed-col { background: #f6f7fb; color: var(--slate-700); font-weight: 600; }

/* Modal */
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.modal[aria-hidden="false"] { visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.modal-dialog { position: relative; background: #fff; border-radius: 12px; width: min(1024px, 95vw); max-height: 90vh; overflow: hidden; border: 1px solid var(--slate-200); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--slate-200); }
.modal-body { padding: 14px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--slate-200); }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }
.chart-placeholder { background: repeating-linear-gradient(135deg, #f5f7fb 0, #f5f7fb 10px, #eef2f9 10px, #eef2f9 20px); border: 1px dashed var(--slate-200); border-radius: 8px; height: 260px; display: grid; place-items: center; color: var(--slate-500); }

/* Scroll lock when modal open */
body.modal-open { overflow: hidden; }

/* (removed) export floating action button */


/* Dashboard */
.dashboard-panel { display: grid; gap: 20px; padding-bottom: 16px; }
.dashboard-section { display: grid; gap: 12px; }
.section-meta { font-size: 13px; color: var(--slate-500); padding-right: 16px; }
.dashboard-grid { display: grid; gap: 16px; padding: 0 16px 16px; grid-template-columns: 1fr; }
.dashboard-card { border: 1px solid var(--slate-200); border-radius: 12px; background: #f8fafc; display: grid; gap: 12px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.dashboard-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.dashboard-card-head h3 { margin: 0; font-size: 18px; color: var(--primary); }
.dashboard-card .muted { font-size: 12px; }
.dashboard-empty { display: grid; place-items: center; min-height: 120px; color: var(--slate-500); font-size: 14px; background: #fff; border-radius: 8px; border: 1px dashed var(--slate-200); }
.dashboard-table th, .dashboard-table td { white-space: nowrap; }
.gap-indicator { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.traffic-light { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #cbd5f5; }
.traffic-light.positive { background: #22c55e; }
.traffic-light.negative { background: #ef4444; }
.traffic-light.neutral { background: #d4d4d8; }
.trend-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #f1f5f9; }
.trend-badge.trend-up { color: #15803d; background: rgba(34,197,94,0.14); }
.trend-badge.trend-down { color: #b91c1c; background: rgba(248,113,113,0.18); }
.trend-badge.neutral { color: var(--slate-500); background: #f1f5f9; }
.dashboard-subsection { display: grid; gap: 10px; }
.dashboard-subsection h4 { margin: 0; font-size: 15px; color: var(--slate-700); }
.num-col { text-align: right; }
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}


.dashboard-gap-section { gap: 10px; }
.dashboard-gap-grid { display: grid; gap: 12px; padding: 0 16px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-gap-card { border: 1px solid var(--slate-200); border-radius: 12px; background: #f8fafc; padding: 14px; display: grid; gap: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.dashboard-gap-head h3 { margin: 0; font-size: 17px; color: var(--primary); }
.dashboard-gap-table th, .dashboard-gap-table td { white-space: nowrap; font-size: 13px; }
.dashboard-gap-table .rank-col { width: 46px; text-align: center; }
.dashboard-gap-table tbody tr:nth-child(odd) { background: rgba(241, 245, 249, 0.6); }

.dashboard-tabs-section { display: grid; gap: 16px; }
.dashboard-tabs-bar { display: inline-flex; gap: 8px; padding: 0 16px; }
.dashboard-tab { border: 1px solid var(--slate-200); background: #fff; color: var(--slate-700); border-radius: 999px; padding: 6px 20px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.dashboard-tab:hover { background: var(--slate-100); }
.dashboard-tab.active { background: var(--slate-900); color: #fff; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.18); }
.dashboard-tab-panel { display: none; gap: 18px; padding: 0 16px 16px; }
.dashboard-tab-panel.active { display: grid; }
.dashboard-subsection-block { display: grid; gap: 12px; }

@media (max-width: 1200px) {
  .dashboard-gap-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .dashboard-tabs-bar { flex-wrap: wrap; }
}


/* Analysis */
.analysis-panel { display: grid; gap: 10px; padding: 6px 0 12px; }
.analysis-search { display: grid; gap: 10px; padding: 0 12px 2px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.analysis-search section { border: 1px solid var(--slate-200); border-radius: 12px; background: #f8fafc; padding: 8px 12px; display: grid; gap: 6px; }
.analysis-search header h3 { margin: 0; font-size: 15px; color: var(--primary); }
.analysis-search header p { margin: 0; font-size: 12px; color: var(--slate-500); }
.fast-search-fields { display: flex; gap: 8px; align-items: center; }
.fast-search-fields input[type="text"] { flex: 1; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
.fast-search-fields .primary { padding: 6px 14px; }
.analysis-exact-form .exact-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.analysis-exact-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.analysis-exact-form legend { font-weight: 700; color: var(--slate-700); margin-bottom: 6px; }
.analysis-exact-form .actions { justify-content: flex-end; gap: 8px; margin-top: 5px; }
.analysis-exact-form .empty-hint { font-size: 13px; color: var(--slate-500); }
.analysis-exact-form .helper-note { font-size: 12px; color: var(--slate-500); margin: -4px 0 0; }
.analysis-results { padding: 0 16px 16px; display: grid; gap: 12px; }
.analysis-results-head { font-size: 14px; color: var(--slate-600); }
.analysis-table .select-col { width: 42px; text-align: center; }
.analysis-actions { display: flex; justify-content: center; padding-top: 12px; }
.analysis-table thead .group-col { text-align: center; font-size: 13px; background: #eef2ff; }
.analysis-table thead .subhead th { font-size: 12px; font-weight: 600; background: #f8fafc; }
.analysis-table tbody td { white-space: nowrap; font-size: 13px; }
.analysis-table tbody td:nth-child(n+10):nth-child(-n+17) { text-align: center; }
.analysis-table tbody td:nth-child(2),
.analysis-table tbody td:nth-child(8),
.analysis-table tbody td:nth-child(9),
.analysis-table tbody td:nth-child(20),
.analysis-table tbody td:nth-child(21),
.analysis-table tbody td:nth-child(22) { white-space: normal; }
.compare-btn { background: linear-gradient(135deg, #0f172a, #334155); color: #fff; border: 0; border-radius: 999px; padding: 10px 28px; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; }
.compare-btn:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.compare-btn:not(:disabled):hover { transform: translateY(-1px); }
.analysis-compare { display: grid; gap: 12px; padding: 0 16px 16px; }
.comparison-table th:first-child, .comparison-table td:first-child { position: sticky; left: 0; background: #fff; box-shadow: 2px 0 0 rgba(148, 163, 184, 0.18); }
.diff { font-weight: 700; }
.diff.higher { color: #15803d; }
.diff.lower { color: #dc2626; }
.diff.neutral { color: var(--slate-500); }
.analysis-compare-error { margin: 0 16px 16px; padding: 12px 14px; border-radius: 10px; background: rgba(248,113,113,0.16); color: #b91c1c; font-weight: 600; }
@media (max-width: 680px) {
  .fast-search-fields { flex-direction: column; }
  .compare-btn { width: 100%; text-align: center; }
}


/* Cost */
.cost-panel { padding-bottom: 24px; }
.cost-panel .analysis-search { gap: 10px; padding: 0 12px 2px; align-items: start; }
.cost-panel .analysis-search section { padding: 8px 12px; gap: 6px; }
.cost-panel .analysis-search header h3 { font-size: 15px; }
.cost-panel .analysis-search header p { margin: 0; font-size: 12px; }
.cost-panel .fast-search-fields { gap: 8px; }
.cost-panel .fast-search-fields input[type="text"] { padding: 6px 10px; font-size: 13px; }
.cost-panel .fast-search-fields .primary { padding: 6px 14px; }
.cost-exact-form fieldset { gap: 6px; }
.cost-exact-form legend { margin: 0 0 6px; font-size: 13px; }
.cost-exact-form .choices { gap: 6px; }
.cost-actions { padding-top: 12px; display: flex; justify-content: center; }
.cost-table th { padding: 6px 8px; font-size: 12px; white-space: normal; line-height: 1.3; word-break: keep-all; }
.cost-table td { padding: 6px 8px; font-size: 12px; vertical-align: middle; }
.cost-table thead th { white-space: normal; }
.cost-table thead .group-col { text-align: center; font-size: 13px; background: #eef2ff; }
.cost-table thead .subhead th { font-size: 12px; font-weight: 600; background: #f8fafc; }
.cost-table tbody td { white-space: nowrap; font-size: 13px; }
.cost-table tbody tr.cost-row-l { background: #fdf2f8; }
.cost-table tbody tr.cost-row-l:hover { background: #fce7f3; }
.cost-table tbody td:nth-child(2),
.cost-table tbody td:nth-child(17),
.cost-table tbody td:nth-child(21),
.cost-table tbody td:nth-child(25),
.cost-table tbody td:nth-child(26) { white-space: normal; }
.cost-table tbody td:nth-child(n+7):nth-child(-n+14) { text-align: center; }
.cost-compare-detail { display: grid; gap: 16px; padding: 0 12px 20px; justify-items: center; }
.cost-compare-meta { display: grid; gap: 6px 12px; padding: 0 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); font-size: 13px; color: var(--slate-600); }
.cost-compare-meta .meta-label { display: block; font-weight: 600; color: var(--slate-500); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.cost-compare-meta .meta-value { display: block; font-size: 14px; color: var(--slate-800); }
.cost-compare-controls { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px; justify-content: center; width: min(100%, 1920px); box-sizing: border-box; }
.cost-period-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.button-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.button-group.compare-period-buttons { display: flex; justify-content: center; width: 100%; }
.chip { border: 1px solid var(--slate-200); background: #fff; color: var(--slate-700); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.chip:hover { background: var(--slate-100); }
.chip.active { background: var(--slate-900); border-color: var(--slate-900); color: #fff; }
.cost-period.manual { margin-left: auto; }
.manual-range-fields { display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; font-size: 13px; }
.manual-range-fields label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--slate-600); min-width: 140px; }
.manual-range-fields input[type="month"] { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--slate-200); font-size: 13px; color: var(--slate-800); }
.manual-range-fields .secondary { height: 36px; align-self: flex-end; }
.range-sep { color: var(--slate-400); font-weight: 600; }
.cost-chart-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; width: 100%; box-sizing: border-box; }
.cost-chart { border: 1px solid var(--slate-200); border-radius: 12px; background: #f8fafc; padding: 12px; min-height: 340px; height: clamp(320px, 40vh, 460px); width: min(100%, 1920px); margin: 0 auto; display: block; box-sizing: border-box; }
.cost-chart-svg { width: 100%; height: 100%; min-height: 320px; }
.chart-grid { stroke: rgba(148, 163, 184, 0.2); stroke-width: 1; }
.chart-grid.vertical { stroke-dasharray: 4 4; }
.chart-axis { stroke: rgba(15, 23, 42, 0.65); stroke-width: 1.2; }
.chart-x-label, .chart-y-label { font-size: 12px; fill: var(--slate-600); }
.chart-x-label { text-transform: uppercase; }
.chart-line { mix-blend-mode: multiply; }
.chart-point { }
.cost-chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; color: var(--slate-600); padding: 0 4px; width: min(100%, 1920px); justify-content: center; box-sizing: border-box; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--swatch-color, #0f172a); border: 1px solid rgba(15,23,42,0.3); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.7); }
.cost-monthly-table { padding: 0 16px 8px; width: min(100%, 1920px); margin: 0 auto; box-sizing: border-box; }
.cost-monthly-table table { width: 100%; }
.cost-monthly-table th, .cost-monthly-table td { white-space: nowrap; font-size: 13px; }
.competitiveness-status { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 18px; }
.status-light { width: 14px; height: 14px; border-radius: 50%; background: var(--slate-200); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); }
.status-light.red { background: #ef4444; }
.status-light.orange { background: #f97316; }
.status-light.blue { background: #3b82f6; }
.competitiveness-status.red { color: #b91c1c; }
.competitiveness-status.orange { color: #c2410c; }
.competitiveness-status.blue { color: #1d4ed8; }

@media (max-width: 920px) {
  .cost-compare-controls { flex-direction: column; align-items: flex-start; }
  .cost-period.manual { margin-left: 0; }
}

@media (max-width: 640px) {
  .cost-compare-meta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .manual-range-fields { width: 100%; justify-content: space-between; }
  .manual-range-fields label { flex: 1; }
  .manual-range-fields label input { width: 100%; }
}
.trend-badge { white-space: nowrap; }