/* AKJ PaisaGyan - "Gullu ki kahani" card under calculator results (assets/js/calc-story.js, texts: config/calculator-story.php) */
.cstory { border-radius: 22px !important; overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(251, 191, 36, .10), rgba(244, 114, 182, .10)); border: 1px solid rgba(251, 191, 36, .35) !important; }
.cstory-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 6px; }
.cstory-av { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, #fde68a, #fbcfe8); object-fit: contain; padding: 3px; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); flex: 0 0 auto; }
.cstory-by { font-size: .72rem; font-weight: 800; letter-spacing: .03em; color: #b45309; }
.cstory-title { font-size: 1.15rem; font-weight: 800; margin: 0; }
.cstory-beats { list-style: none; margin: 0; padding: 6px 22px 6px; }
.cstory-beats li { padding: 9px 14px; margin: 8px 0; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(0, 0, 0, .06); line-height: 1.7; font-size: .95rem; animation: cstory-in .5s both; }
.cstory-beats li:nth-child(2) { animation-delay: .08s; } .cstory-beats li:nth-child(3) { animation-delay: .16s; } .cstory-beats li:nth-child(4) { animation-delay: .24s; } .cstory-beats li:nth-child(5) { animation-delay: .32s; }
.cstory-beats b { color: var(--cs-a, #4f46e5); white-space: nowrap; }
.cstory-what { padding: 6px 22px 8px; }
.cstory-wl { font-weight: 800; font-size: .85rem; margin-bottom: 8px; }
.cstory-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cstory-chip { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; padding: 7px 14px; border-radius: 14px; border: 1.5px dashed rgba(180, 83, 9, .5); background: rgba(255, 255, 255, .85); color: inherit; cursor: pointer; font-size: .82rem; font-weight: 700; transition: transform .15s, box-shadow .15s, background .15s; }
.cstory-chip small { font-weight: 600; opacity: .75; }
.cstory-chip:hover, .cstory-chip:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .4); background: #fff; outline: none; }
.cstory-chip.on { border-style: solid; border-color: #b45309; background: #fff7ed; }
.cstory-reset { border: 0; background: none; text-decoration: underline; font-size: .8rem; font-weight: 700; padding: 7px 4px; cursor: pointer; color: inherit; opacity: .8; }
.cstory-res { margin-top: 10px; font-size: .9rem; font-weight: 700; min-height: 1.4em; }
.cstory-res .up { color: #15803d; } .cstory-res .down { color: #b91c1c; }
.cstory-note { padding: 4px 22px 16px; margin: 0; opacity: .75; }
@keyframes cstory-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html[data-theme="dark"] .cstory, html[data-theme="ocean"] .cstory { background: rgba(251, 191, 36, .06); }
html[data-theme="dark"] .cstory-beats li, html[data-theme="ocean"] .cstory-beats li, html[data-theme="dark"] .cstory-chip, html[data-theme="ocean"] .cstory-chip { background: rgba(15, 23, 42, .6); color: #e2e8f0; border-color: rgba(255, 255, 255, .18); }
html[data-theme="dark"] .cstory-by, html[data-theme="ocean"] .cstory-by { color: #fcd34d; }
@media (prefers-reduced-motion: reduce) { .cstory-beats li { animation: none; } .cstory-chip { transition: none; } }
@media print { .cstory-chips, .cstory-what { display: none; } }
.cstory-beats.noanim li { animation: none; }