/* Ajan simülatörü · hareketli anlatım (sim-film.ts). Yalnızca CSS; 16 sn döngü; ölçek kapsayıcı genişliğine göre (cqw). */
.sf-sec { padding: clamp(64px, 8vw, 110px) clamp(16px, 4vw, 56px); border-bottom: 1px solid #E4E4EA; background: #F6F6F8; }
.sf-head { text-align: center; max-width: 760px; margin: 0 auto; }
.sf-badge { display: inline-flex; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .08em; padding: 4px 10px; border-radius: 6px; background: #FFFFFF; border: 1px solid #DCD8F5; color: #3B2BC4; }
.sf-head h2 { font-weight: 600; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.03em; margin: 18px 0 0; text-wrap: balance; }
.sf-head p { font-size: 17px; line-height: 1.6; color: #5D5C6B; margin: 16px auto 0; max-width: 620px; text-wrap: pretty; }
.sf { max-width: 1120px; margin: 44px auto 0; display: grid; gap: 12px; justify-items: center; }
.sf-toggle { position: absolute; opacity: 0; pointer-events: none; }
.sf-window { width: 100%; background: #FFFFFF; border: 1px solid #E4E4EA; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(43, 26, 158, .35); }
.sf-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #EEEEF2; background: #FAFAFC; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .04em; color: #5D5C6B; }
.sf-dots { display: flex; gap: 6px; } .sf-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E4E4EA; }
.sf-url { position: relative; flex: 1; height: 16px; overflow: hidden; }
.sf-url > span { position: absolute; inset: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.sf-tag { color: #3B2BC4; white-space: nowrap; }
@media (max-width: 640px) { .sf-tag { display: none; } }

/* Sahne: sol mağaza (%63), sağ günlük (%37), üstte rapor katmanı. Bütün ölçüler sahne genişliğine göre. */
.sf-stage { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; background: #FBFAFF; font-family: 'Quicksand', system-ui, sans-serif; color: #0F0E1A; }
.sf-shop { position: absolute; left: 0; top: 0; bottom: 0; width: 63%; overflow: hidden; background: #FFFFFF; border-right: 1px solid #EEEEF2; }
.sf-top { position: absolute; left: 0; right: 0; top: 0; height: 9cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 2.4cqw; border-bottom: 1px solid #F0EFF5; font-size: 1.5cqw; }
.sf-top > b { font-size: 1.9cqw; letter-spacing: -.02em; }
.sf-search { position: relative; flex: 1; height: 4.2cqw; border-radius: 1cqw; border: 1px solid #E4E4EA; background: #FAFAFC; display: flex; align-items: center; padding: 0 1.4cqw; color: #8A8999; overflow: hidden; }
.sf-type { color: #0F0E1A; white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid #4F3CF0; }
.sf-ph { position: absolute; left: 1.4cqw; }
.sf-cart { position: relative; font-weight: 700; } .sf-cart i { position: absolute; right: -1.6cqw; top: -1cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #4F3CF0; color: #FFFFFF; font-style: normal; font-size: 1.1cqw; display: grid; place-items: center; opacity: 0; }
.sf-grid, .sf-pdp, .sf-co { position: absolute; left: 0; right: 0; top: 9cqw; bottom: 0; padding: 2.4cqw; opacity: 0; }
.sf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; align-content: start; }
.sf-card { border-radius: 1.2cqw; border: 1px solid #ECEBF2; padding: 1cqw; display: grid; gap: .5cqw; font-size: 1.35cqw; } .sf-card small { color: #5D5C6B; }
.sf-hit { border-color: #CFC8FA; box-shadow: 0 0 0 .4cqw rgba(91, 71, 245, .08); }
.sf-img { display: block; aspect-ratio: 1; border-radius: .9cqw; background: linear-gradient(150deg, #EFEAFB, #DCD5F7); } .sf-img.b { background: linear-gradient(150deg, #E9F1FA, #CCDDF1); } .sf-img.c { background: linear-gradient(150deg, #E8EEF8, #B9C9E4); }
.sf-pdp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.4cqw; align-items: start; }
.sf-img.big { aspect-ratio: 4 / 5; }
.sf-pdp > div { display: grid; gap: 1cqw; font-size: 1.4cqw; } .sf-pdp > div > b { font-size: 2.4cqw; letter-spacing: -.02em; } .sf-pdp small { font-size: 1.8cqw; color: #3B2BC4; font-weight: 700; } .sf-pdp em { font-style: normal; font-size: 1.2cqw; color: #5D5C6B; }
.sf-sizes { display: flex; gap: .8cqw; } .sf-sizes i { font-style: normal; width: 4cqw; height: 4cqw; border-radius: .8cqw; border: 1px solid #E4E4EA; display: grid; place-items: center; font-size: 1.3cqw; font-weight: 700; }
.sf-add { margin-top: 1cqw; height: 5cqw; border-radius: 1cqw; background: #0F0E1A; color: #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 1.5cqw; }
.sf-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: #FFFFFF; border-left: 1px solid #E4E4EA; box-shadow: -2cqw 0 4cqw -2cqw rgba(15, 14, 26, .25); padding: 2.4cqw; display: grid; gap: 1.6cqw; align-content: start; font-size: 1.35cqw; transform: translateX(105%); }
.sf-drawer > b { font-size: 1.9cqw; }
.sf-line { display: grid; grid-template-columns: 4.4cqw 1fr auto; gap: 1cqw; align-items: center; } .sf-line em { font-style: normal; font-weight: 700; }
.sf-img.s { width: 4.4cqw; }
.sf-go { position: absolute; left: 2.4cqw; right: 2.4cqw; bottom: 2.4cqw; height: 5cqw; border-radius: 1cqw; background: #5B47F5; color: #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 1.5cqw; }
.sf-cookie { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8cqw 2.4cqw; background: #14121F; color: #FFFFFF; display: flex; gap: 1.6cqw; align-items: center; justify-content: space-between; font-size: 1.3cqw; transform: translateY(105%); }
.sf-cb { display: flex; gap: .8cqw; } .sf-cb i { font-style: normal; padding: .8cqw 1.2cqw; border-radius: .8cqw; border: 1px solid rgba(255, 255, 255, .35); white-space: nowrap; } .sf-cb i.p { background: #FFFFFF; color: #14121F; }
.sf-co { display: grid; gap: 1.4cqw; align-content: start; font-size: 1.4cqw; } .sf-co > b { font-size: 2.1cqw; }
.sf-field { height: 4cqw; border-radius: .9cqw; border: 1px dashed #D4D3DC; background: #FAFAFC; } .sf-field.half { width: 55%; }
.sf-stop { justify-self: start; margin-top: .6cqw; padding: 1cqw 1.4cqw; border-radius: 1cqw; background: #E7F8EF; color: #167A4A; font-weight: 700; font-size: 1.3cqw; opacity: 0; }
.sf-cursor { position: absolute; left: 0; top: 0; width: 3cqw; height: 3cqw; z-index: 5; filter: drop-shadow(0 .4cqw .5cqw rgba(15, 14, 26, .3)); }
.sf-cursor svg { display: block; width: 100%; height: 100%; }
.sf-ripple { position: absolute; left: 0; top: 0; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; border: 2px solid #5B47F5; background: rgba(91, 71, 245, .14); opacity: 0; z-index: 4; }

.sf-side { position: absolute; right: 0; top: 0; bottom: 0; width: 37%; padding: 2.2cqw; display: grid; gap: 1.4cqw; align-content: start; }
.sf-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5cqw; font-family: 'Geist Mono', monospace; font-size: .95cqw; color: #8A8999; text-transform: uppercase; letter-spacing: .04em; }
.sf-st { display: grid; gap: .5cqw; } .sf-st i { height: .5cqw; border-radius: .3cqw; background: #E7E5EF; position: relative; overflow: hidden; } .sf-st i::after { content: ''; position: absolute; inset: 0; background: #2EBE78; transform: scaleX(0); transform-origin: 0 50%; }
.sf-logh { margin: .6cqw 0 0; font-family: 'Geist Mono', monospace; font-size: 1cqw; letter-spacing: .08em; color: #3B2BC4; }
.sf-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .9cqw; }
.sf-l { display: grid; grid-template-columns: 2.4cqw 1fr; gap: 1cqw; padding: 1cqw 1.2cqw; border-radius: 1.1cqw; background: #FFFFFF; border: 1px solid #E7E3FF; font-size: 1.2cqw; opacity: 0; transform: translateY(1cqw); }
.sf-l b { display: block; font-size: 1.3cqw; } .sf-l small { display: block; margin-top: .3cqw; color: #5D5C6B; line-height: 1.35; }
.sf-n { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; display: grid; place-items: center; background: #EEEBFF; color: #3B2BC4; font-family: 'Geist Mono', monospace; font-size: 1.05cqw; }
.sf-l.warn { border-color: #F3D19A; background: #FFF9EE; } .sf-l.warn .sf-n { background: #FFE9C2; color: #8A5A00; }
.sf-l.ok { border-color: #BFE7CE; background: #F3FBF6; } .sf-l.ok .sf-n { background: #D6F3E2; color: #167A4A; }
.sf-flag { position: absolute; right: 2.2cqw; top: 1.2cqw; padding: .7cqw 1.1cqw; border-radius: .8cqw; background: #FFF2DA; color: #8A5A00; font-family: 'Geist Mono', monospace; font-size: 1cqw; letter-spacing: .06em; opacity: 0; }

.sf-report { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -46%); padding: 2.6cqw; border-radius: 2cqw; background: #FFFFFF; border: 1px solid #DCD8F5; box-shadow: 0 3cqw 7cqw -3cqw rgba(28, 13, 102, .45); display: grid; gap: 1.2cqw; z-index: 6; opacity: 0; }
.sf-rk { font-family: 'Geist Mono', monospace; font-size: 1.05cqw; letter-spacing: .1em; color: #3B2BC4; }
.sf-report > b { font-size: 2.2cqw; letter-spacing: -.02em; line-height: 1.15; }
.sf-scores { display: grid; gap: .7cqw; }
.sf-sc { display: grid; grid-template-columns: 9cqw 1fr 3cqw; gap: 1cqw; align-items: center; font-size: 1.2cqw; } .sf-sc em { font-style: normal; color: #5D5C6B; } .sf-sc strong { text-align: right; font-family: 'Geist Mono', monospace; font-size: 1.1cqw; }
.sf-sc i { height: .8cqw; border-radius: .4cqw; background: #F0EFF5; overflow: hidden; } .sf-sc i b { display: block; height: 100%; background: #2EBE78; border-radius: .4cqw; } .sf-sc i b.mid { background: #8F7BFF; } .sf-sc i b.lo { background: #E8A23A; }
.sf-find { justify-self: start; padding: .6cqw 1cqw; border-radius: .8cqw; background: #EEEBFF; color: #3B2BC4; font-weight: 700; font-size: 1.15cqw; }
.sf-report ul { margin: 0; padding-left: 2cqw; display: grid; gap: .4cqw; font-size: 1.2cqw; color: #3E3D4A; }

.sf-ctl { cursor: pointer; font-size: 13px; font-weight: 700; color: #3B2BC4; padding: 7px 12px; border-radius: 9px; border: 1px solid #DCD8F5; background: #FFFFFF; }
.sf-ctl:hover { border-color: #4F3CF0; }
.sf-toggle:focus-visible ~ .sf-ctl { outline: 2px solid #4F3CF0; outline-offset: 2px; }
.sf-play-t { display: none; } .sf-toggle:checked ~ .sf-ctl .sf-pause-t { display: none; } .sf-toggle:checked ~ .sf-ctl .sf-play-t { display: inline; }
.sf-note { margin: 0; font-size: 12.5px; color: #8A8999; text-align: center; }

/* ---------- Zaman çizelgesi (16 sn) ---------- */
.sf-stage * { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.sf-toggle:checked ~ .sf-window .sf-stage *, .sf-toggle:checked ~ .sf-window .sf-url > span { animation-play-state: paused; }
.sf-url > span { animation-duration: 16s; animation-iteration-count: infinite; animation-fill-mode: both; }
.sf-u1 { animation-name: sfU1; } .sf-u2 { animation-name: sfU2; } .sf-u3 { animation-name: sfU3; } .sf-u4 { animation-name: sfU4; }
@keyframes sfU1 { 0%, 12% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes sfU2 { 0%, 12% { opacity: 0; } 13%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes sfU3 { 0%, 21% { opacity: 0; } 22%, 61% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes sfU4 { 0%, 61% { opacity: 0; } 62%, 99% { opacity: 1; } 100% { opacity: 0; } }

.sf-cursor { animation-name: sfCursor; }
@keyframes sfCursor {
  0% { transform: translate(40cqw, 30cqw); }
  6%, 7% { transform: translate(23.5cqw, 4.2cqw); }
  15% { transform: translate(23.5cqw, 4.2cqw); }
  19%, 20% { transform: translate(11.05cqw, 22.35cqw); }
  25% { transform: translate(30cqw, 26cqw); }
  28%, 29% { transform: translate(37.63cqw, 22.9cqw); }
  33%, 35% { transform: translate(45.42cqw, 29.4cqw); }
  42% { transform: translate(47cqw, 40cqw); }
  51%, 53% { transform: translate(43.01cqw, 52.51cqw); }
  58%, 60% { transform: translate(47.99cqw, 51.1cqw); }
  70%, 100% { transform: translate(54cqw, 44cqw); }
}
.sf-ripple { animation-name: sfRipple; }
@keyframes sfRipple {
  0%, 6.5% { opacity: 0; transform: translate(24cqw, 4.45cqw) scale(.4); } 7.5% { opacity: 1; transform: translate(24cqw, 4.45cqw) scale(1); } 9% { opacity: 0; transform: translate(24cqw, 4.45cqw) scale(1.4); }
  19.5% { opacity: 0; transform: translate(11.55cqw, 22.59cqw) scale(.4); } 20.5% { opacity: 1; transform: translate(11.55cqw, 22.59cqw) scale(1); } 22% { opacity: 0; transform: translate(11.55cqw, 22.59cqw) scale(1.4); }
  28.5% { opacity: 0; transform: translate(38.13cqw, 23.15cqw) scale(.4); } 29.5% { opacity: 1; transform: translate(38.13cqw, 23.15cqw) scale(1); } 31% { opacity: 0; transform: translate(38.13cqw, 23.15cqw) scale(1.4); }
  34.5% { opacity: 0; transform: translate(45.92cqw, 29.65cqw) scale(.4); } 35.5% { opacity: 1; transform: translate(45.92cqw, 29.65cqw) scale(1); } 37% { opacity: 0; transform: translate(45.92cqw, 29.65cqw) scale(1.4); }
  52.5% { opacity: 0; transform: translate(43.51cqw, 52.76cqw) scale(.4); } 53.5% { opacity: 1; transform: translate(43.51cqw, 52.76cqw) scale(1); } 55% { opacity: 0; transform: translate(43.51cqw, 52.76cqw) scale(1.4); }
  59.5% { opacity: 0; transform: translate(48.49cqw, 51.35cqw) scale(.4); } 60.5% { opacity: 1; transform: translate(48.49cqw, 51.35cqw) scale(1); } 62%, 100% { opacity: 0; transform: translate(48.49cqw, 51.35cqw) scale(1.4); }
}
.sf-type { animation-name: sfType; animation-timing-function: steps(12, end); }
@keyframes sfType { 0%, 7% { width: 0; } 13%, 99% { width: 11ch; } 100% { width: 0; } }
.sf-ph { animation-name: sfPh; } @keyframes sfPh { 0%, 7% { opacity: 1; } 7.5%, 99% { opacity: 0; } 100% { opacity: 1; } }
.sf-grid { animation-name: sfGrid; } @keyframes sfGrid { 0%, 13% { opacity: 0; transform: translateY(1cqw); } 14.5%, 21% { opacity: 1; transform: none; } 22.5%, 100% { opacity: 0; } }
.sf-pdp { animation-name: sfPdp; } @keyframes sfPdp { 0%, 21.5% { opacity: 0; transform: translateY(1cqw); } 23%, 61% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; } }
.sf-sizes .m { animation-name: sfSize; } @keyframes sfSize { 0%, 29% { background: #FFFFFF; color: #0F0E1A; border-color: #E4E4EA; } 29.5%, 99% { background: #0F0E1A; color: #FFFFFF; border-color: #0F0E1A; } 100% { background: #FFFFFF; } }
.sf-cart i { animation-name: sfBadge; } @keyframes sfBadge { 0%, 36% { opacity: 0; transform: scale(.4); } 37.5%, 99% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.sf-drawer { animation-name: sfDrawer; } @keyframes sfDrawer { 0%, 36.5% { transform: translateX(105%); } 39%, 60.5% { transform: none; } 62%, 100% { transform: translateX(105%); } }
.sf-cookie { animation-name: sfCookie; } @keyframes sfCookie { 0%, 43% { transform: translateY(105%); } 45%, 54% { transform: none; } 56%, 100% { transform: translateY(105%); } }
.sf-co { animation-name: sfCo; } @keyframes sfCo { 0%, 61.5% { opacity: 0; transform: translateY(1cqw); } 63%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sf-stop { animation-name: sfStop; } @keyframes sfStop { 0%, 65% { opacity: 0; transform: scale(.9); } 67%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.sf-l1 { animation-name: sfL1; } .sf-l2 { animation-name: sfL2; } .sf-l3 { animation-name: sfL3; } .sf-l4 { animation-name: sfL4; } .sf-l5 { animation-name: sfL5; } .sf-l6 { animation-name: sfL6; }
@keyframes sfL1 { 0%, 9% { opacity: 0; transform: translateY(1cqw); } 11%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes sfL2 { 0%, 20.5% { opacity: 0; transform: translateY(1cqw); } 22.5%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes sfL3 { 0%, 29.5% { opacity: 0; transform: translateY(1cqw); } 31.5%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes sfL4 { 0%, 37% { opacity: 0; transform: translateY(1cqw); } 39%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes sfL5 { 0%, 46% { opacity: 0; transform: translateY(1cqw); } 48%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes sfL6 { 0%, 64% { opacity: 0; transform: translateY(1cqw); } 66%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.sf-flag { animation-name: sfFlag; } @keyframes sfFlag { 0%, 45.5% { opacity: 0; transform: translateY(-.6cqw); } 47%, 60% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; } }

.sf-st1 i::after { animation-name: sfS1; } .sf-st2 i::after { animation-name: sfS2; } .sf-st3 i::after { animation-name: sfS3; } .sf-st4 i::after { animation-name: sfS4; } .sf-st5 i::after { animation-name: sfS5; }
.sf-st i::after { animation-duration: 16s; animation-iteration-count: infinite; animation-fill-mode: both; }
.sf-toggle:checked ~ .sf-window .sf-st i::after { animation-play-state: paused; }
@keyframes sfS1 { 0% { transform: scaleX(0); } 20%, 98% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sfS2 { 0%, 20% { transform: scaleX(0); } 25%, 98% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sfS3 { 0%, 25% { transform: scaleX(0); } 30%, 98% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sfS4 { 0%, 30% { transform: scaleX(0); } 37%, 98% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sfS5 { 0%, 37% { transform: scaleX(0); } 64%, 98% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

.sf-report { animation-name: sfReport; } @keyframes sfReport { 0%, 79% { opacity: 0; transform: translate(-50%, -40%); } 81.5%, 97% { opacity: 1; transform: translate(-50%, -50%); } 99%, 100% { opacity: 0; transform: translate(-50%, -50%); } }

/* Azaltılmış hareket: animasyon yok, son kare (ödeme adımı, günlük ve rapor) durağan gösterilir. */
@media (prefers-reduced-motion: reduce) {
  .sf-stage *, .sf-url > span, .sf-st i::after { animation: none !important; }
  .sf-cursor, .sf-ripple, .sf-grid, .sf-cookie, .sf-flag, .sf-u1, .sf-u2, .sf-u3, .sf-ph { opacity: 0; }
  .sf-u4, .sf-co, .sf-stop, .sf-l, .sf-report, .sf-cart i { opacity: 1; transform: none; }
  .sf-pdp { opacity: 0; } .sf-drawer { transform: translateX(105%); } .sf-type { width: 11ch; }
  .sf-st i::after { transform: scaleX(1); }
  .sf-report { transform: translate(-50%, -50%); }
  .sf-ctl { display: none; }
}
/* Telefon: mağaza sahnesi gizlenir; ajanın günlüğü, aşamalar ve rapor okunur boyutlarda (px) gösterilir. */
@media (max-width: 640px) {
  .sf-stage { aspect-ratio: auto; height: 520px; }
  .sf-shop { display: none; }
  .sf-side { width: 100%; padding: 16px; gap: 10px; }
  .sf-stages { font-size: 9px; gap: 4px; } .sf-st { gap: 4px; } .sf-st i { height: 4px; border-radius: 2px; }
  .sf-logh { font-size: 10px; margin-top: 4px; }
  .sf-log { gap: 8px; }
  .sf-l { grid-template-columns: 22px 1fr; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12px; transform: translateY(8px); }
  .sf-l b { font-size: 13px; } .sf-l small { font-size: 12px; margin-top: 2px; }
  .sf-n { width: 22px; height: 22px; font-size: 10px; }
  .sf-flag { right: 16px; top: auto; bottom: 14px; font-size: 10px; padding: 6px 8px; border-radius: 7px; }
  .sf-report { width: 90%; padding: 16px; gap: 8px; border-radius: 16px; }
  .sf-rk { font-size: 10px; } .sf-report > b { font-size: 17px; }
  .sf-sc { grid-template-columns: 64px 1fr 28px; gap: 8px; font-size: 12px; } .sf-sc strong { font-size: 11px; } .sf-sc i { height: 6px; }
  .sf-find { font-size: 12px; padding: 5px 8px; border-radius: 7px; }
  .sf-report ul { font-size: 12px; padding-left: 16px; gap: 3px; }
}