/* Общие стили страниц сайта (Tailwind подключён из CDN, здесь — повторяющиеся элементы) */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.field {
    background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; font-size: .875rem;
    border-radius: .5rem; padding: .45rem .6rem; outline: none; min-width: 0;
}
.field:focus { border-color: #6366f1; box-shadow: 0 0 0 2px #e0e7ff; }

.btn-primary, .btn-ghost, .chip {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    border-radius: .5rem; font-size: .875rem; font-weight: 600; padding: .45rem .8rem;
    transition: background-color .15s, color .15s, border-color .15s; white-space: nowrap;
}
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #4338ca; }
.btn-ghost { background: #fff; color: #475569; border: 1px solid #e2e8f0; }
.btn-ghost:hover { background: #f1f5f9; }
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

.chip { background: #fff; color: #475569; border: 1px solid #e2e8f0; font-weight: 500; }
.chip:hover { background: #f1f5f9; }
.chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }

.tabs { display: inline-flex; background: #f1f5f9; border-radius: .6rem; padding: 3px; gap: 2px; flex-wrap: wrap; }
.tabs button { font-size: .8rem; font-weight: 600; color: #64748b; padding: .3rem .7rem; border-radius: .45rem; }
.tabs button:hover { color: #334155; }
.tabs button.active { background: #fff; color: #312e81; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.tabs button:disabled { opacity: .4; cursor: not-allowed; }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.card-title { font-size: 1rem; font-weight: 700; color: #0f172a; }
.card-sub { font-size: .8rem; color: #64748b; margin-top: .15rem; }
.chart-box { position: relative; width: 100%; transition: opacity .2s; }
.loading .chart-box, .loading .tbl, .loading #kpis, .loading #heatmap { opacity: .45; }

.kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem; min-width: 0; }
.kpi-label { font-size: .78rem; color: #64748b; font-weight: 500; }
.kpi-value { font-size: 1.6rem; font-weight: 700; color: #0f172a; line-height: 1.2; margin-top: .25rem; }
.kpi-hint { font-size: .75rem; color: #64748b; margin-top: .2rem; }
.kpi.hero .kpi-value { font-size: 2.25rem; }
a.kpi:hover { border-color: #a5b4fc; }

.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tbl th { position: sticky; top: 0; background: #f8fafc; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; padding: .55rem .75rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.tbl td { padding: .55rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr:hover td { background: #f8fafc; }

.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: .375rem; white-space: nowrap; }

.heat { border-collapse: separate; border-spacing: 2px; font-size: .7rem; width: 100%; min-width: 560px; }
.heat th { color: #64748b; font-weight: 600; padding: 0 2px; text-align: center; }
.heat td { height: 26px; border-radius: 3px; text-align: center; font-variant-numeric: tabular-nums; cursor: default; }
.heat td:hover { outline: 2px solid #0f172a; outline-offset: -1px; }
.heat-tip { position: fixed; z-index: 60; pointer-events: none; background: #0b0b0b; color: #fff; font-size: .78rem; padding: .4rem .6rem; border-radius: .4rem; }

.progress { height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; }
.progress > div { height: 100%; background: #4f46e5; transition: width .2s; }

.note { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; border-radius: .75rem; padding: .75rem 1rem; }
.note-info { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.note-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.note-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Свой анализ */
.step-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #0f172a; font-size: .95rem; }
.step-num { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 9999px; background: #eef2ff; color: #4f46e5; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.tpl { display: flex; gap: .65rem; align-items: flex-start; text-align: left; border: 1px solid #e2e8f0; border-radius: .75rem; padding: .7rem .8rem; background: #fff; transition: border-color .15s, background-color .15s; min-width: 0; }
.tpl:hover { border-color: #a5b4fc; }
.tpl.active { border-color: #4f46e5; background: #eef2ff; }
.bar { height: .55rem; background: #f1f5f9; border-radius: 9999px; overflow: hidden; }
.bar > div { height: 100%; background: #6366f1; border-radius: 9999px; transition: width .2s; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: center; width: 100%; text-align: left; padding: .35rem .5rem; border-radius: .5rem; }
.bar-row:hover { background: #f8fafc; }
.bar-row.active { background: #eef2ff; }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }