/* Foydali bo'limlar: qonun viktorinasi, ota-onalar, byudjet, orzular xaritasi, QR oyna, Telegram kartochkasi */
.tools-grid { order: 7; margin: 18px 0 4px; }
.tools-grid h2 { font-family: var(--serif); color: var(--wine); font-size: 22px; margin: 0 0 10px; text-align: center; }
.tools-grid > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .tools-grid > div { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool { display: grid; gap: 4px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--glass, rgba(255,255,255,.7)); border: 1px solid var(--glass-line, rgba(255,255,255,.9)); box-shadow: var(--shadow); transition: transform .15s; }
.tool:active { transform: scale(.97); }
.tool i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--wine-2), var(--wine)); }
.tool i svg { width: 22px; height: 22px; }
.tool b { font-size: 14.5px; line-height: 1.25; }
.tool small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.tool.tg i { background: linear-gradient(135deg, #37aee2, #1e96c8); }
.home .how { order: 8; }
.home .footer { order: 9; }

.tool-page { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.tool-page .tag { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .4px; }
.tool-page .tag svg { width: 16px; height: 16px; }
.tool-page .tabs { margin: 0; }

/* Viktorina */
.quiz-top { display: flex; justify-content: space-between; align-items: center; }
.quiz-top b { color: var(--muted); font-size: 14px; }
.quiz .meter { margin: 10px 0 4px; }
.quiz-q { font: 700 21px/1.35 var(--serif); color: var(--ink); margin: 14px 0; }
.quiz .opt { width: 100%; }
.quiz .opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, white); }
.quiz .opt.right .k { background: var(--ok); color: #fff; }
.quiz .opt.wrong { border-color: #b3261e; background: color-mix(in srgb, #b3261e 10%, white); }
.quiz .opt.wrong .k { background: #b3261e; color: #fff; }
.quiz .opt:disabled { cursor: default; opacity: 1; }
.explain { margin: 14px 0; padding: 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; background: rgba(201, 151, 63, .12); }
.explain.ok b { color: var(--ok); } .explain.no b { color: #b3261e; }
.explain small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }

/* Ota-onalar */
.tips { display: grid; gap: 12px; }
@media (min-width: 768px) { .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tip { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.tip > i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--wine); background: #fbeef0; }
.tip > i svg { width: 22px; height: 22px; }
.tip h3 { margin: 0 0 4px; font: 700 16px var(--serif); color: var(--wine); }
.tip p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }

/* Byudjet */
.money { display: grid; gap: 4px; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.money-in { position: relative; display: block; }
.money-in input { width: 100%; padding-right: 64px; font-weight: 700; font-size: 16px; }
.money-in em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: var(--muted); }
.sum { margin: 14px 0; padding: 16px; border-radius: 16px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--wine-2), var(--wine)); }
.sum.neg { background: linear-gradient(135deg, #c0392b, #8e1b14); }
.sum span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; opacity: .85; }
.sum b { display: block; font: 700 28px var(--serif); margin: 4px 0; }
.sum small { opacity: .85; font-size: 12.5px; }
.compact { padding: 14px; border-radius: 16px; border: 1px dashed var(--gold); background: rgba(201, 151, 63, .07); }
.compact .h3 { display: flex; gap: 6px; align-items: center; color: var(--wine); }
.compact .h3 svg { width: 18px; height: 18px; color: var(--gold); }
.compact p { font-size: 14.5px; margin: 8px 0 0; }
.spend-bars { display: grid; gap: 8px; margin: 10px 0; }
.spend-bars div { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center; font-size: 13px; }
.spend-bars i { display: block; height: 10px; border-radius: 4px; background: var(--gold); min-width: 2px; }
.tipline { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 8px 0; }
.tipline svg { flex: none; width: 18px; height: 18px; color: var(--gold); margin-top: 2px; }

/* Orzular xaritasi */
.dreams .field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.dreams .tabs button b { margin-left: 4px; color: var(--gold); }
.chips.goals { margin: 10px 0 12px; }
.poster { width: 100%; max-width: 420px; border-radius: 16px; box-shadow: var(--shadow); }

/* QR oyna */
.qr-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20, 6, 10, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.qr-modal .card { width: min(360px, 100%); }
.qr-modal img { width: 240px; height: 240px; margin: 8px auto; display: block; border-radius: 12px; background: #fff; padding: 8px; }
.qr-modal .code { font: 700 24px var(--serif); letter-spacing: 2px; color: var(--wine); margin: 4px 0 12px; }

/* Telegram va keyingi qadamlar */
.tg-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); }
.tg-card > i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #37aee2, #1e96c8); }
.tg-card > i svg { width: 22px; height: 22px; }
.tg-card small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.next-steps h3 { font: 700 18px var(--serif); color: var(--wine); margin: 0 0 6px; }
.next-steps a { display: grid; grid-template-columns: 22px 1fr 18px; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.next-steps a svg { width: 20px; height: 20px; color: var(--gold); }

/* Faktlar: eng faol tumanlar */
.places ol { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.places li { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.places li span { font-weight: 600; }
.places li small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.places li em { font-style: normal; font-weight: 800; color: var(--wine); }

/* Telegram ichida: tepadagi bo'shliq kamroq */
html.tg .shell { padding-top: 8px; }

/* Tungi rejim */
html.dark .tool { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: var(--ink); }
html.dark .tools-grid h2, html.dark .tip h3, html.dark .next-steps h3, html.dark .compact .h3, html.dark .qr-modal .code { color: #f3b9c3; }
html.dark .quiz-q, html.dark .tip p, html.dark .tg-card, html.dark .next-steps a { color: var(--ink); }
html.dark .tip > i { background: #3a2027; color: #f3b9c3; }
html.dark .quiz .opt.right { background: rgba(46, 125, 79, .25); }
html.dark .quiz .opt.wrong { background: rgba(179, 38, 30, .25); }
html.dark .places li em { color: #f3b9c3; }