/* ==========================================================================
   11 · QOIDALAR TIZIMI (koʻrinishi)
   [data-rule="rule"] — 📘 oddiy qoida (koʻk)
   [data-rule="gold"] — 🏆 oltin qoida (eng muhimi)
   [data-rule="warn"] — ⚠️ diqqat / tipik xato (qizil)

   DIQQAT: bu fayl ATAYLAB oxirida ulanadi. Qoida belgisi qoʻyilgan blok
   .rule-box / .warn / .card kabi klasslarga ham ega boʻladi; ular bilan
   ogʻirligi teng boʻlgani uchun, keyin turgani ustun keladi. Ilgari
   .rule-box oltin qoidaning fonini va hoshiyasini bosib ketardi.
   ========================================================================== */

[data-rule] {
  position: relative;
  scroll-margin-top: calc(var(--topbar-h) + 42px);
}
[data-rule]::before {
  content: attr(data-label);
  position: absolute;
  top: -14px;
  left: 20px;
  padding: 5px 15px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

/* ---- 📘 ODDIY QOIDA ---- */
[data-rule="rule"] {
  background: linear-gradient(160deg, #eef4ff 0%, var(--surface) 55%);
  border: 2px solid #b9d0f7;
  border-left: 7px solid var(--blue);
  box-shadow: 0 8px 22px rgba(47, 111, 237, .12);
}
[data-rule="rule"]::before {
  background: linear-gradient(135deg, var(--blue), #4f8bff);
  color: #fff;
  box-shadow: 0 4px 10px rgba(47, 111, 237, .35);
}

/* ---- 🏆 OLTIN QOIDA ---- */
[data-rule="gold"] {
  background:
    radial-gradient(circle at 88% -12%, rgba(255, 208, 102, .55), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, transparent 40%),
    linear-gradient(160deg, #fff3d0 0%, #fffaf0 60%, var(--surface) 100%);
  border: 3px solid #f0b429;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px rgba(240, 180, 41, .28), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
[data-rule="gold"]::before {
  background: linear-gradient(135deg, #f7b733 0%, #fc9d1c 100%);
  color: #fff;
  box-shadow: 0 5px 14px rgba(240, 180, 41, .5);
}
[data-rule="gold"] h3 { font-size: 1.35rem; color: #8a5a06; letter-spacing: -.01em; }
[data-rule="gold"] p { color: #6f5426; }
[data-rule="gold"] .big-eq,
[data-rule="gold"] .step-eq {
  background: rgba(255, 255, 255, .8);
  border: 2px dashed #f0b429;
  color: #7a4f05;
}
[data-rule="gold"] .mini-note { background: rgba(255, 255, 255, .78); border: 1px solid #f3d79a; }

/* ---- ⚠️ DIQQAT / XATO ---- */
[data-rule="warn"] {
  background: linear-gradient(160deg, #fff0f0 0%, var(--surface) 58%);
  border: 2px solid #f3bcbc;
  border-left: 7px solid var(--red);
  box-shadow: 0 8px 22px rgba(224, 82, 82, .12);
}
[data-rule="warn"]::before {
  background: linear-gradient(135deg, #e05252, #f27272);
  color: #fff;
  box-shadow: 0 4px 10px rgba(224, 82, 82, .35);
}
[data-rule="warn"] h3 { color: #a52f2f; }

/* kartochka koʻrinishidagi qoidalar uchun tepadan joy */
.card[data-rule], .conv[data-rule], .warn[data-rule] { margin-top: 22px; padding-top: 30px; }
.rule-box[data-rule] { padding-top: 28px; }

/* panelidan oʻtganda yonib koʻrsatish */
@keyframes ruleFlash {
  0%, 100% { box-shadow: 0 8px 22px rgba(47, 111, 237, .12); }
  20%, 60% { box-shadow: 0 0 0 6px rgba(240, 180, 41, .55), 0 12px 34px rgba(240, 180, 41, .35); }
}
.rule-flash { animation: ruleFlash 1.6s ease-in-out 2; }

/* tungi rejim moslashuvi */
html[data-theme="dark"] [data-rule="rule"] { background: linear-gradient(160deg, #1b2740 0%, var(--surface) 55%); border-color: #2e4470; }
html[data-theme="dark"] [data-rule="gold"] {
  background:
    radial-gradient(circle at 88% -12%, rgba(255, 190, 60, .18), transparent 46%),
    linear-gradient(160deg, #3a2f12 0%, #241d0d 65%, var(--surface) 100%);
  border-color: #b8860b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] [data-rule="gold"] h3 { color: #ffd77a; }
html[data-theme="dark"] [data-rule="gold"] p { color: #e2cf9c; }
html[data-theme="dark"] [data-rule="gold"] .big-eq,
html[data-theme="dark"] [data-rule="gold"] .step-eq { background: rgba(0, 0, 0, .25); color: #ffd77a; }
html[data-theme="dark"] [data-rule="gold"] .mini-note { background: rgba(0, 0, 0, .22); border-color: #6b5518; }
html[data-theme="dark"] [data-rule="warn"] { background: linear-gradient(160deg, #3a1d1d 0%, var(--surface) 58%); border-color: #6d3232; }
html[data-theme="dark"] [data-rule="warn"] h3 { color: #ff9d9d; }