/* ==========================================================================
   Tahlilchi — дизайн тизими
   Палитра: зумрад (ислом молияси анъанаси) + қум-тилла акцент
   ========================================================================== */

:root {
  /* ранглар */
  --bg: #f4f6f2;
  --bg-alt: #eef2ed;
  --card: #ffffff;
  --ink: #0c1f1b;
  --ink-2: #1c3a32;
  --muted: #5c6b66;
  --muted-2: #8a9993;
  --line: #e2e8e3;
  --line-strong: #cfd9d2;

  --brand: #0e7c66;
  --brand-2: #0a6353;
  --brand-ink: #073f35;
  --brand-soft: #e6f3ef;
  --gold: #b8912f;
  --gold-soft: #f7efd8;

  --pass: #0e7c66;
  --pass-bg: #e8f6f1;
  --pass-line: #b6e3d4;
  --warn: #a06a13;
  --warn-bg: #fdf5e6;
  --warn-line: #f0dcb4;
  --fail: #b42318;
  --fail-bg: #fdecea;
  --fail-line: #f4c3bd;
  --info: #1d5b8c;
  --info-bg: #eaf3fa;
  --info-line: #c4ddf0;
  --na: #4b5a55;
  --na-bg: #eef1ef;

  /* шакл */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* соя */
  --sh-1: 0 1px 2px rgba(12, 31, 27, .05);
  --sh-2: 0 1px 2px rgba(12, 31, 27, .04), 0 8px 24px -14px rgba(12, 31, 27, .28);
  --sh-3: 0 2px 4px rgba(12, 31, 27, .05), 0 18px 40px -20px rgba(12, 31, 27, .35);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI Variable Display", "Segoe UI", Inter, -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -.022em; line-height: 1.2; font-weight: 750; }
a { color: var(--brand); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--brand-2); text-decoration: none; }
code, pre { font-family: "Cascadia Code", Consolas, "SF Mono", monospace; }

.wrap { width: min(1140px, 100% - 32px); margin-inline: auto; }

/* ============================ ҲЕАДЕР ===================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 66px; }

.logo { display: flex; align-items: center; gap: 11px; font-weight: 800; color: var(--ink); font-size: 17px; letter-spacing: -.02em; }
.logo:hover { color: var(--ink); }
.logo-mark {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, #12907a 0%, #0a5f4f 100%);
  color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 16px -8px rgba(14, 124, 102, .9), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.logo small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; }

.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a {
  color: var(--muted); padding: 8px 12px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav a:hover { background: var(--brand-soft); color: var(--brand-2); }
.nav a.active { background: var(--brand-soft); color: var(--brand-2); }
.nav-cta { background: var(--brand); color: #fff !important; box-shadow: 0 6px 14px -8px rgba(14, 124, 102, .9); }
.nav-cta:hover { background: var(--brand-2) !important; }

.lang-select {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: var(--r-pill); padding: 8px 12px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: border-color .16s var(--ease);
}
.lang-select:hover { border-color: var(--line-strong); }

.user-chip {
  font-size: 12.5px; font-weight: 700; color: var(--brand-2); background: var(--brand-soft);
  border-radius: var(--r-pill); padding: 6px 12px; max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ============================ ТУГМАЛАР ================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 13px 24px; font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; background: #fff; color: var(--brand-2);
  transition: transform .12s var(--ease), box-shadow .2s var(--ease),
              background .16s var(--ease), border-color .16s var(--ease);
  white-space: nowrap;
}
.btn:hover { box-shadow: var(--sh-2); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(150deg, #12a186 0%, #0a6b58 100%);
  color: #fff; box-shadow: 0 10px 24px -12px rgba(10, 107, 88, .85);
}
.btn-primary:hover { box-shadow: 0 14px 28px -12px rgba(10, 107, 88, .95); }
.btn-solid { background: var(--brand); color: #fff; }
.btn-solid:hover { background: var(--brand-2); }
.btn-outline { background: #fff; color: var(--fail); border-color: var(--fail-line); }
.btn-outline:hover { background: var(--fail-bg); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.link-btn {
  background: none; border: 0; padding: 8px 10px; border-radius: var(--r-pill);
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.link-btn:hover { background: var(--brand-soft); color: var(--brand-2); }
.link-btn.danger:hover { background: var(--fail-bg); color: var(--fail); }
.inline-form { display: inline; margin: 0; }

/* ============================ HERO ====================================== */
.hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 64px 0 56px;
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(38, 208, 173, .38) 0%, transparent 60%),
    radial-gradient(700px 320px at 92% 10%, rgba(201, 162, 39, .26) 0%, transparent 62%),
    linear-gradient(155deg, #07211c 0%, #0a3d33 48%, #0c5949 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image:
    linear-gradient(30deg, rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 56px 96px;
  mask-image: radial-gradient(circle at 70% 20%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 70% 20%, #000 0%, transparent 72%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #a7f3d5;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
  padding: 6px 13px; border-radius: var(--r-pill); margin-bottom: 20px;
}
.hero h1 {
  margin: 0 0 14px; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.08;
  letter-spacing: -.035em; max-width: 17ch; font-weight: 800;
}
.hero h1 em { font-style: normal; color: #7de6c6; }
.hero p.sub { margin: 0 0 26px; color: #b9d8cf; max-width: 62ch; font-size: 15.5px; }

.search {
  display: flex; gap: 10px; max-width: 660px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  padding: 8px; border-radius: var(--r-lg); backdrop-filter: blur(6px);
}
.search input {
  flex: 1 1 240px; min-width: 180px; border: 0; border-radius: var(--r);
  padding: 14px 18px; font-size: 16px; font-family: inherit; font-weight: 600;
  background: #fff; color: var(--ink); text-transform: uppercase; letter-spacing: .06em;
}
.search input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted-2); }
.search input:focus { outline: 3px solid rgba(125, 230, 198, .5); outline-offset: 1px; }
.search .btn-primary { border-radius: var(--r); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.chips .label { font-size: 13px; color: #9dc4b8; font-weight: 600; }
.chip {
  display: inline-block; padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; color: #eafff8;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  transition: background .16s var(--ease), transform .12s var(--ease);
}
.chip:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }

/* ============================ БЎЛИМЛАР ================================= */
.section { padding: 56px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.section h2 { font-size: clamp(21px, 2.6vw, 28px); margin: 0; }
.section .lead { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; max-width: 70ch; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), border-color .18s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-strong); }

.mini { position: relative; padding-top: 20px; }
.mini .num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand-2); font-size: 13px; font-weight: 800;
  margin-bottom: 12px;
}
.mini h3 { font-size: 15.5px; margin: 0 0 8px; font-weight: 700; }
.mini p { margin: 0; font-size: 13.5px; color: var(--muted); }
.criterion {
  display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .02em; color: var(--fail); background: var(--fail-bg);
  border: 1px solid var(--fail-line); border-radius: var(--r-pill); padding: 3px 10px;
}

.notice {
  border: 1px solid var(--warn-line); background: var(--warn-bg); color: #6b4a10;
  border-radius: var(--r); padding: 16px 18px; font-size: 13.5px; line-height: 1.6;
}
.notice b { display: block; margin-bottom: 4px; font-size: 13.5px; }
.toast {
  border: 1px solid var(--pass-line); background: var(--pass-bg); color: var(--pass);
  padding: 12px 16px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; margin-bottom: 16px;
}

/* ============================ НАТИЖА ==================================== */
.result-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; padding: 32px 0 8px; }
.result-head h1 { margin: 0; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -.03em; }
.ticker-pill {
  display: inline-block; background: var(--ink); color: #fff; border-radius: 9px;
  padding: 3px 10px; font-size: 14px; font-weight: 800; vertical-align: middle;
  margin-left: 10px; letter-spacing: .06em;
}
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.meta span {
  font-size: 12.5px; font-weight: 600; color: var(--muted); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px;
}
.meta span.pill { padding: 4px 12px; }

.verdict {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  border-radius: var(--r-lg); padding: 26px 28px; border: 1px solid var(--line);
  background: #fff; box-shadow: var(--sh-2); margin: 20px 0 6px;
  position: relative; overflow: hidden;
}
.verdict::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; }
.verdict.strong { background: linear-gradient(135deg, #f2fbf7 0%, #ffffff 62%); border-color: var(--pass-line); }
.verdict.strong::before { background: var(--pass); }
.verdict.medium { background: linear-gradient(135deg, #fffaf0 0%, #ffffff 62%); border-color: var(--warn-line); }
.verdict.medium::before { background: var(--warn); }
.verdict.weak { background: linear-gradient(135deg, #fff5f4 0%, #ffffff 62%); border-color: var(--fail-line); }
.verdict.weak::before { background: var(--fail); }
.verdict h2 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.03em; }
.verdict.strong h2 { color: var(--pass); }
.verdict.medium h2 { color: var(--warn); }
.verdict.weak h2 { color: var(--fail); }
.verdict p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.verdict-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 8px;
}
.verdict .failed { margin-top: 12px; font-size: 13px; color: #7f1d1d; line-height: 1.55; }
.verdict .failed b { font-weight: 700; }

/* балл донаси */
.score { text-align: center; min-width: 128px; }
.score-ring { position: relative; width: 108px; height: 108px; margin-inline: auto; }
.score-ring svg { transform: rotate(-90deg); overflow: visible; }
.score-ring .track { stroke: #e6ebe7; }
.score-ring .fill { stroke: #0e7c66; stroke-linecap: round; }
.score-ring .val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 24px; font-weight: 800; letter-spacing: -.04em;
}
.score-ring .val small { font-size: 13px; font-weight: 700; color: var(--muted-2); }
.score .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-top: 8px; }

/* қадамлар */
.steps { display: grid; gap: 14px; margin-top: 22px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-1); overflow: hidden; position: relative;
  transition: box-shadow .2s var(--ease), border-color .18s var(--ease);
}
.step:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); }
.step::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--line-strong); }
.step.pass::before { background: var(--pass); }
.step.warn::before { background: var(--warn); }
.step.fail::before { background: var(--fail); }
.step.na::before { background: #9aa8a2; }
.step.info::before { background: var(--info); }
.step-inner { padding: 20px 22px 20px 24px; }

.step-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.step-num {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px;
  border-radius: 9px; background: var(--bg-alt); color: var(--muted); font-size: 13px; font-weight: 800;
}
.step.pass .step-num { background: var(--pass-bg); color: var(--pass); }
.step.warn .step-num { background: var(--warn-bg); color: var(--warn); }
.step.fail .step-num { background: var(--fail-bg); color: var(--fail); }
.step.info .step-num { background: var(--info-bg); color: var(--info); }
.step h3 { margin: 0; font-size: 16.5px; flex: 1 1 auto; font-weight: 700; }
.badge-filter {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800;
  color: var(--muted-2); border: 1px dashed var(--line-strong); border-radius: 6px; padding: 2px 7px;
}
.pill {
  font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: var(--r-pill);
  white-space: nowrap; border: 1px solid transparent;
}
.pill.pass, .pill.strong, .pill.halal { background: var(--pass-bg); color: var(--pass); border-color: var(--pass-line); }
.pill.warn, .pill.medium, .pill.doubtful { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.pill.fail, .pill.weak, .pill.haram { background: var(--fail-bg); color: var(--fail); border-color: var(--fail-line); }
.pill.na { background: var(--na-bg); color: var(--na); border-color: var(--line); }
.pill.info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }

.step-value { font-size: 27px; font-weight: 800; letter-spacing: -.035em; margin: 14px 0 6px; }
.step-value.pass { color: var(--pass); }
.step-value.warn { color: var(--warn); }
.step-value.fail { color: var(--fail); }
.step-value.info { color: var(--info); }
.step-msg { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.step-crit { font-size: 12.5px; color: var(--muted); }
.step-crit b { color: var(--ink-2); font-weight: 700; }

/* нисбат ўлчови */
.meter { margin-top: 12px; }
.meter-bar { position: relative; height: 8px; border-radius: var(--r-pill); background: #edf1ee; overflow: hidden; }
.meter-bar i {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #12a186, #0a6b58);
}
.meter.warn .meter-bar i { background: linear-gradient(90deg, #e0a53a, #b4761a); }
.meter.info .meter-bar i { background: linear-gradient(90deg, #4f9ad0, #1d5b8c); }
.meter.fail .meter-bar i { background: linear-gradient(90deg, #e05a4b, #b42318); }
.meter-cap { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted-2); margin-top: 5px; font-weight: 600; }

.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.metric { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.metric .k { color: var(--muted); }
.metric .v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

details.hint { margin-top: 12px; }
details.hint summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--brand); list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
details.hint summary::-webkit-details-marker { display: none; }
details.hint summary::before {
  content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-2); font-size: 10px; font-weight: 800;
}
details.hint p { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.65; }

.trend { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.trend div { font-size: 11.5px; color: var(--muted); background: var(--bg-alt); border-radius: var(--r-sm); padding: 5px 10px; font-weight: 600; }
.trend b { color: var(--ink); }

/* сектор жадвали */
.bench {
  margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; box-shadow: var(--sh-1);
}
.bench h3 { margin: 0 0 14px; font-size: 15px; }
.bench table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bench th, .bench td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.bench tr:last-child td { border-bottom: 0; }
.bench th { color: var(--muted-2); font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; }
.bench td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 4px; align-items: center; }
.actions .btn { background: #fff; color: var(--brand-2); border-color: var(--line); box-shadow: var(--sh-1); }
.actions .btn:hover { background: var(--brand-soft); border-color: var(--brand-soft); }
.actions .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ============================ ҲАЛОЛЛИК ================================= */
.halal {
  margin-top: 22px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden;
}
.halal-head {
  display: flex; gap: 18px; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.halal.halal-ok .halal-head { background: linear-gradient(120deg, #eafaf4 0%, #ffffff 78%); border-bottom-color: var(--pass-line); }
.halal.halal-doubtful .halal-head { background: linear-gradient(120deg, #fdf6e7 0%, #ffffff 78%); border-bottom-color: var(--warn-line); }
.halal.halal-haram .halal-head { background: linear-gradient(120deg, #fdeeec 0%, #ffffff 78%); border-bottom-color: var(--fail-line); }
.halal-head h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.halal-head .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.halal-verdict { font-size: 22px; font-weight: 800; letter-spacing: -.03em; text-align: right; }
.halal.halal-ok .halal-verdict { color: var(--pass); }
.halal.halal-doubtful .halal-verdict { color: var(--warn); }
.halal.halal-haram .halal-verdict { color: var(--fail); }
.halal-body { padding: 20px 24px 24px; }

.halal-checks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); margin-top: 16px; }
.halal-check {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px;
  background: #fff; position: relative; overflow: hidden;
}
.halal-check::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.halal-check.pass { border-color: var(--pass-line); background: linear-gradient(180deg, #f4fcf9, #fff); }
.halal-check.pass::before { background: var(--pass); }
.halal-check.fail { border-color: var(--fail-line); background: linear-gradient(180deg, #fff7f6, #fff); }
.halal-check.fail::before { background: var(--fail); }
.halal-check.na { background: var(--na-bg); }
.halal-check.info { border-color: var(--info-line); background: linear-gradient(180deg, #f4f9fd, #fff); }
.halal-check.info::before { background: var(--info); }
.halal-check.info .val { color: var(--info); }
.halal-check.na::before { background: #9aa8a2; }
.halal-check .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.halal-check .name { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.halal-check .val { font-size: 19px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.halal-check.pass .val { color: var(--pass); }
.halal-check.fail .val { color: var(--fail); }
.halal-check .lim { font-size: 11.5px; color: var(--muted-2); margin-top: 4px; font-weight: 600; }
.halal-check .meter { margin-top: 10px; }
.halal-check .meter-bar { height: 6px; }
.halal-check.fail .meter-bar { background: #f3e3e1; }

.info-tag {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--info); background: var(--info-bg);
  border: 1px solid var(--info-line); border-radius: 5px; padding: 1px 6px;
}
.halal-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.halal-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.halal-note b { color: var(--ink-2); }

/* ташқи манбалар */
.halal-ext { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.halal-ext-title { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.halal-ext-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.halal-ext-list { display: grid; gap: 8px; margin-top: 14px; }
.halal-ext-row {
  display: grid; grid-template-columns: auto minmax(120px, 190px) 1fr auto auto;
  gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fbfdfc; font-size: 13px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.halal-ext-row:hover { border-color: var(--line-strong); background: #fff; }
.halal-ext-name { font-weight: 700; }
.halal-ext-detail { color: var(--muted); font-size: 12.5px; }
.halal-ext-date { color: var(--muted-2); font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 600; }
.halal-ext-link { font-size: 15px; font-weight: 700; }
.halal-ext-warn {
  margin-top: 12px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 12.5px;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: #6b4a10; font-weight: 600;
}
.halal-ext-links { margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.halal-ext-links a { font-size: 12.5px; font-weight: 700; }

/* ============================ ПОРТФЕЛЬ ================================== */
.stat { padding: 20px 22px; }
.stat .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); font-weight: 800; }
.stat .big { font-size: 27px; font-weight: 800; letter-spacing: -.035em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.muted-sm { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

.table-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh-1);
}
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted-2); background: #f8faf8; padding: 12px 16px;
  border-bottom: 1px solid var(--line); font-weight: 800;
}
table.data td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .14s var(--ease); }
table.data tbody tr:hover { background: #fafcfb; }
.empty { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* ============================ ФОРМАЛАР ================================== */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; box-shadow: var(--sh-1); margin-bottom: 16px;
}
.form-card h3 { margin: 0 0 4px; font-size: 15.5px; }
.form-card .desc { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; color: var(--ink-2); }
.field input[type="number"], .field input[type="text"],
.field input[type="password"], .field input[type="email"], .field select {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 124, 102, .14);
}
.field .hint { font-size: 11.5px; color: var(--muted-2); margin-top: 6px; line-height: 1.5; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.check label { font-weight: 600; cursor: pointer; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.add-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.add-form .field { flex: 1 1 150px; min-width: 128px; }
.add-form .add-submit { flex: 0 0 auto; }

/* auth */
.auth-wrap { display: grid; place-items: center; padding: 56px 16px; }
.auth-card { width: min(440px, 100%); padding: 30px; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.auth-card h1 { margin: 0 0 6px; font-size: 24px; }
.auth-card .auth-sub { margin: 0 0 22px; font-size: 13.5px; color: var(--muted); }
.auth-alt { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.auth-alt a { font-weight: 700; }

/* ============================ ХАТО ====================================== */
.error-box { max-width: 620px; margin: 56px auto; text-align: center; padding: 34px; }
.error-box .emoji { font-size: 44px; line-height: 1; }
.error-box h1 { font-size: 24px; margin: 14px 0 8px; }
.error-box p { color: var(--muted); font-size: 14.5px; }

/* ============================ ФУТЕР ===================================== */
.site-footer {
  border-top: 1px solid var(--line); padding: 28px 0 38px; margin-top: 56px;
  color: var(--muted); font-size: 12.5px; background: #fff;
}
.site-footer .wrap { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.site-footer .brand-line { font-weight: 700; color: var(--ink-2); }

/* ============================ АНИМАЦИЯ ================================== */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.step, .verdict, .halal, .card, .table-card, .form-card { animation: rise .45s var(--ease) both; }
.step:nth-child(2) { animation-delay: .03s; }
.step:nth-child(3) { animation-delay: .06s; }
.step:nth-child(4) { animation-delay: .09s; }
.step:nth-child(5) { animation-delay: .12s; }
.step:nth-child(6) { animation-delay: .15s; }
.step:nth-child(7) { animation-delay: .18s; }
.step:nth-child(8) { animation-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================ МОСЛАШУВ ================================== */
@media (max-width: 860px) {
  .verdict { grid-template-columns: 1fr; }
  .score { text-align: left; display: flex; align-items: center; gap: 16px; }
  .score-ring { margin-inline: 0; }
  .score .lbl { margin-top: 0; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .header-inner { height: auto; padding: 10px 0; flex-wrap: wrap; gap: 10px; }
  .nav { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .hero { padding: 44px 0 38px; }
  .search { padding: 6px; }
  .search .btn-primary { width: 100%; }
  .section { padding: 40px 0; }
  .step-value { font-size: 23px; }
  .metrics, .halal-metrics { grid-template-columns: 1fr; }
  .halal-ext-row { grid-template-columns: auto 1fr auto; }
  .halal-ext-detail { grid-column: 1 / -1; }
  .halal-ext-date { display: none; }
  .result-head h1 { font-size: 24px; }
  .verdict { padding: 20px; }
  .verdict h2 { font-size: 21px; }
  .actions .btn { flex: 1 1 auto; }
}

@media print {
  .site-header, .site-footer, .actions, .lang-select, .search, details.hint summary,
  .hero, .halal-ext-links { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .step, .verdict, .card, .bench, .halal { box-shadow: none; break-inside: avoid; animation: none; }
  .step::before, .halal-check::before, .verdict::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}