/* ==========================================================================
   Groyt — Komut önizlemesi v2 (yalnızca index.html): ortak render motoru +
   görsel/animasyonlu önizlemeler. İçerik: js/previews-core.js, js/previews-data.js
   ========================================================================== */
.command-card.has-preview .cmd-peek { opacity: 0; transform: translateX(6px); transition: opacity 0.35s ease, transform 0.45s var(--ease-out), background-color 0.3s; }
.command-card.has-preview:hover .cmd-peek, .command-card.has-preview:focus-within .cmd-peek { opacity: 1; transform: none; }
@media (hover: none) { .command-card.has-preview .cmd-peek { opacity: 1; transform: none; } }

.cmd-pop { width: min(376px, calc(100vw - 24px)); }
.cmd-pop-body { max-height: min(78vh, 640px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 95%, transparent); mask-image: linear-gradient(#000 95%, transparent); }
.cmd-pop-view.is-active { animation: none; }
.cmd-pop .cp-e { border-left-color: var(--ac, var(--blue)); position: relative; overflow: hidden; }
.cmd-pop .cp-e::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55), transparent); background-size: 100% 220%; animation: accentSweep 2.6s ease-in-out infinite; }
@keyframes accentSweep { from { background-position: 0 -120%; } to { background-position: 0 220%; } }

/* Kademeli giriş: mesaj, gömülü satırlar ve düğmeler sırayla belirir */
.cmd-pop-view.is-active .dc-msg, .cmd-pop-view.is-active .cp-used { animation: cpRow 0.5s var(--ease-out) both; }
.cmd-pop-view.is-active .cp-msg + .cp-msg { animation-delay: 0.12s; }
.cmd-pop-view.is-active .cp-e > * { animation: cpRow 0.5s var(--ease-out) both; }
.cmd-pop-view.is-active .cp-e > *:nth-child(1) { animation-delay: 0.18s; }
.cmd-pop-view.is-active .cp-e > *:nth-child(2) { animation-delay: 0.26s; }
.cmd-pop-view.is-active .cp-e > *:nth-child(3) { animation-delay: 0.34s; }
.cmd-pop-view.is-active .cp-e > *:nth-child(4) { animation-delay: 0.42s; }
.cmd-pop-view.is-active .cp-e > *:nth-child(5) { animation-delay: 0.5s; }
.cmd-pop-view.is-active .cp-e > *:nth-child(n+6) { animation-delay: 0.58s; }
.cmd-pop-view.is-active .cp-btns i { animation: cpPop 0.5s var(--ease-out) both; }
.cmd-pop-view.is-active .cp-btns i:nth-child(1) { animation-delay: 0.55s; }
.cmd-pop-view.is-active .cp-btns i:nth-child(2) { animation-delay: 0.62s; }
.cmd-pop-view.is-active .cp-btns i:nth-child(3) { animation-delay: 0.69s; }
.cmd-pop-view.is-active .cp-btns i:nth-child(n+4) { animation-delay: 0.76s; }
@keyframes cpRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cpPop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.cmd-pop-view.is-active .cp-btns i.is-primary { animation: cpPop 0.5s var(--ease-out) both, btnGlow 2.4s ease-in-out 1.2s infinite; }
@keyframes btnGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } 50% { box-shadow: 0 0 14px -2px rgba(255, 193, 7, 0.6); } }
.cp-btns i.is-ok { background: rgba(34, 197, 94, 0.22); color: #86efac; }
.cp-btns i.is-link { background: rgba(255, 255, 255, 0.07); }
.cp-ext { opacity: 0.6; font-size: 10px; }
.cp-btns { flex-wrap: wrap; }

.cp-etitle { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.cp-code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.92em; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); border: 0; color: var(--text-primary); white-space: normal; }
.cp-raw { font-family: ui-monospace, Consolas, monospace; color: var(--blue-bright); }
.cp-used em { font-style: normal; color: var(--text-tertiary); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
.cp-fields.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-f { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; line-height: 1.4; min-width: 0; }
.cp-f.is-full { grid-column: 1 / -1; }
.cp-f b { color: var(--text-primary); font-size: 11.5px; }
.cp-f span { color: var(--text-secondary); }
.cp-dim { color: var(--text-tertiary); font-size: 11px; }
.cp-lines { line-height: 1.7; }
.cp-eph { margin-top: 6px; font-size: 10.5px; color: var(--text-tertiary); }
.cp-prog { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.cp-prog-l { display: flex; justify-content: space-between; color: var(--text-secondary); }
.cp-tiny { display: inline-block; width: 16px; height: 16px; margin-right: 5px; filter: none; vertical-align: -3px; }
.cp-more { color: var(--text-tertiary); font-size: 11px; margin-top: 2px; }
.cp-live { margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; color: #34d399; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: 0.45; } }
.cp-neonbar { height: 9px; border: 1px solid rgba(255, 193, 7, 0.55); border-radius: 5px; box-shadow: 0 0 12px -3px rgba(255, 193, 7, 0.55); background: rgba(255, 193, 7, 0.05); }
.cp-bigbar { display: flex; align-items: center; gap: 10px; }
.cp-bigbar .xp-bar { flex: 1; height: 10px; border: 1px solid rgba(255, 193, 7, 0.5); box-shadow: 0 0 12px -3px rgba(255, 193, 7, 0.5); }
.cp-bigbar b { font: 800 12px 'Orbitron', sans-serif; color: var(--blue-bright); }
.cmd-pop .cp-thumbbox { padding-right: 84px; min-height: 92px; }
.cp-thumb { position: absolute; right: 10px; top: 10px; width: 62px; height: 62px; padding: 9px; border-radius: 10px; background: linear-gradient(135deg, #1a1508, #0c0a04); border: 1px solid var(--amber-line); }
.cp-thumb .c-logo { filter: none; }

/* Izgara tabanlı mini oyunlar / kartlar */
.cp-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; margin: 2px auto; max-width: 240px; }
.cp-grid i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, 0.06); font-style: normal; font-weight: 700; font-size: 13px; color: var(--text-secondary); animation: cpPop 0.4s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + 0.3s); }
.cp-grid i.g { color: #1a1400; background: var(--blue-bright); }
.cp-xox i { font: 800 15px 'Orbitron', sans-serif; }
.cp-xox i:nth-child(odd) { color: var(--blue-bright); }
.cp-xox i:nth-child(even) { color: #f9a8d4; }
.cp-chess { gap: 0; max-width: 232px; border-radius: 6px; overflow: hidden; }
.cp-chess i { border-radius: 0; font-size: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); animation-delay: calc(var(--i) * 12ms + 0.25s); }
.cp-chess i.lt { background: #b58863; }
.cp-chess i.dk { background: #6d4a2e; }
.cp-mines i { font-size: 12px; background: rgba(255, 255, 255, 0.09); }
.cp-mines i:empty { background: rgba(255, 255, 255, 0.03); }
.cp-captcha i { background: linear-gradient(135deg, #2a3450, #1a2033); }
.cp-captcha i:nth-child(5) { color: #34d399; font-size: 20px; background: rgba(52, 211, 153, 0.18); }
.cp-tiles { max-width: none; }
.cp-tiles i { aspect-ratio: 1.5; font-size: 10.5px; }
.cp-tiles-row { display: flex; gap: 6px; font-size: 11.5px; }
.cp-tiles-row span { padding: 3px 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.cp-wordle { display: grid; grid-template-columns: repeat(5, 30px); gap: 4px; justify-content: center; }
.cp-wordle i { display: grid; place-items: center; height: 30px; border-radius: 5px; font: 800 13px 'Orbitron', sans-serif; font-style: normal; color: #fff; background: #3a3f55; animation: tileFlip 0.6s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 0.3s); }
.cp-wordle i.g { background: #2f9e5f; }
.cp-wordle i.y { background: #c9a227; }
@keyframes tileFlip { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lv-mini { display: flex; flex-direction: column; gap: 5px; font: 800 12px 'Orbitron', sans-serif; }

.cp-reels { display: flex; gap: 6px; justify-content: center; margin: 2px 0; }
.cp-reels span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; font-size: 24px; background: #0b0d16; border: 1px solid rgba(168, 85, 247, 0.5); box-shadow: 0 0 14px -4px rgba(168, 85, 247, 0.6); animation: reelSpin 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cp-reels span:nth-child(2) { animation-delay: 0.18s; }
.cp-reels span:nth-child(3) { animation-delay: 0.36s; }
@keyframes reelSpin { 0% { transform: translateY(-140%); filter: blur(6px); opacity: 0; } 70% { filter: blur(1px); opacity: 1; } 100% { transform: none; filter: none; } }
.coin { position: relative; width: 44px; height: 44px; margin: 4px auto; transform-style: preserve-3d; animation: coinFlip 2.4s ease-in-out infinite; }
.coin i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font: 800 16px 'Orbitron', sans-serif; font-style: normal; color: #1a1400; background: radial-gradient(circle at 30% 30%, #ffe08a, #d99400); backface-visibility: hidden; }
.coin i:last-child { transform: rotateY(180deg); background: radial-gradient(circle at 30% 30%, #e8edf7, #8b95ad); }
@keyframes coinFlip { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(900deg) translateY(-14px); } 100% { transform: rotateY(1080deg) translateY(0); } }
.dice { text-align: center; font-size: 34px; animation: diceRoll 1.6s var(--ease-out) both; }
@keyframes diceRoll { 0% { transform: rotate(-360deg) translateY(-20px) scale(0.6); opacity: 0; } 60% { transform: rotate(20deg) translateY(0) scale(1.1); opacity: 1; } 100% { transform: none; } }
.clap { display: flex; justify-content: center; gap: 8px; font-size: 26px; }
.clap i { font-style: normal; animation: clapBounce 0.7s ease-in-out infinite alternate; }
.clap i:nth-child(2) { animation-delay: 0.15s; }
.clap i:nth-child(3) { animation-delay: 0.3s; }
@keyframes clapBounce { to { transform: translateY(-6px) scale(1.18) rotate(-8deg); } }
.cake { position: relative; text-align: center; font-size: 34px; }
.cake i { position: absolute; top: 6px; font-style: normal; font-size: 16px; animation: floatUp 2.2s ease-out infinite; }
.cake i:nth-child(1) { left: 28%; }
.cake i:nth-child(2) { left: 50%; animation-delay: 0.6s; }
.cake i:nth-child(3) { left: 68%; animation-delay: 1.2s; }
@keyframes floatUp { from { transform: translateY(6px) scale(0.6); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-26px) scale(1.1); opacity: 0; } }
.wheel { position: relative; width: 64px; height: 64px; margin: 4px auto; border-radius: 50%; background: conic-gradient(#ffc107 0 60deg, #a855f7 0 120deg, #22c55e 0 180deg, #3b82f6 0 240deg, #ec4899 0 300deg, #f59e0b 0); animation: wheelSpin 3s cubic-bezier(0.1, 0.7, 0.2, 1) both; box-shadow: 0 0 20px -4px rgba(255, 193, 7, 0.5); }
.wheel i { position: absolute; left: 50%; top: -6px; width: 0; height: 0; border: 6px solid transparent; border-top: 10px solid #fff; transform: translateX(-50%); }
@keyframes wheelSpin { from { transform: rotate(-720deg); } to { transform: rotate(0); } }
.tarot { display: flex; justify-content: center; gap: 8px; }
.tarot i { display: grid; place-items: center; width: 44px; height: 64px; border-radius: 6px; font-style: normal; font-size: 22px; background: linear-gradient(160deg, #241a3d, #120d22); border: 1px solid rgba(168, 85, 247, 0.5); animation: tileFlip 0.7s var(--ease-out) both; }
.tarot i:nth-child(2) { animation-delay: 0.2s; }
.tarot i:nth-child(3) { animation-delay: 0.4s; }
.pingdot { position: relative; width: 26px; height: 26px; margin: 2px auto; }
.pingdot i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #22c55e; animation: pingWave 1.8s ease-out infinite; }
.pingdot i:nth-child(2) { animation-delay: 0.6s; }
.pingdot i:nth-child(3) { animation-delay: 1.2s; }
@keyframes pingWave { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.tweet { padding: 9px 11px; border-radius: 8px; background: #0b0d16; border: 1px solid var(--line-strong); }
.tweet-h { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.tweet-h em { font-style: normal; color: var(--text-tertiary); }
.tweet p { margin: 5px 0 3px; font-size: 12px; color: var(--text-primary); line-height: 1.45; }
.tweet small { font-size: 10px; color: var(--text-tertiary); }
.fx { position: relative; display: grid; place-items: center; height: 74px; }
.fx-av { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 800 20px 'Space Grotesk', sans-serif; color: #fff; }
.tweet .fx-av { width: 24px; height: 24px; font-size: 11px; }
.fx-pixel .fx-av { image-rendering: pixelated; animation: pixelate 2.4s steps(6) infinite alternate; }
@keyframes pixelate { from { filter: blur(0); transform: scale(1); } to { filter: blur(1.5px) contrast(1.6); transform: scale(0.9); } }
.fx-magik .fx-av { animation: magik 2s ease-in-out infinite; }
@keyframes magik { 0%, 100% { transform: scale(1, 1) skewX(0); filter: hue-rotate(0); } 30% { transform: scale(1.2, 0.7) skewX(14deg); filter: hue-rotate(80deg); } 60% { transform: scale(0.7, 1.25) skewX(-12deg); filter: hue-rotate(200deg); } }
.fx-trig .fx-av { animation: shake 0.28s linear infinite; box-shadow: inset 0 0 0 999px rgba(239, 68, 68, 0.28); }
.fx-trig b { position: absolute; bottom: 0; left: 15%; right: 15%; text-align: center; font: 800 11px 'Space Grotesk', sans-serif; letter-spacing: 0.12em; padding: 2px 0; background: #ef4444; color: #fff; }
@keyframes shake { 0% { transform: translate(1px, 1px); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(-1px, 2px); } 100% { transform: translate(1px, -1px); } }
.banner-mock { height: 54px; border-radius: 7px; background: linear-gradient(110deg, #f59e0b, #a855f7 60%, #3b82f6); background-size: 200% 100%; animation: lvShift 4s ease-in-out infinite alternate; }
.art-mock { height: 92px; border-radius: 8px; background: radial-gradient(circle at 70% 25%, #ffe08a 0 12%, transparent 13%), linear-gradient(180deg, #2b1a4d, #f97316 78%, #1a1108); animation: artReveal 2.2s var(--ease-out) both; }
.art-mock.is-small { height: 54px; }
@keyframes artReveal { from { filter: blur(14px) saturate(0.2); } to { filter: none; } }
.cp-select { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; color: var(--text-secondary); }
.cp-two { display: flex; flex-direction: column; gap: 6px; }
.cp-mini-embed { padding: 7px 10px; border-radius: 5px; border-left: 3px solid var(--ac, var(--blue)); background: rgba(255, 255, 255, 0.045); font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); animation: cpRow 0.5s var(--ease-out) both; }
.cp-mini-embed:nth-child(2) { animation-delay: 0.25s; }
.cp-mini-embed b { color: var(--text-primary); }

/* Sunucu DNA kartı */
.dna-card { position: relative; padding: 11px 12px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 100% at 100% 0%, rgba(255, 193, 7, 0.28), transparent 55%), #0a0a0d; border: 1px solid rgba(255, 193, 7, 0.4); }
.dna-card::before { content: ''; position: absolute; right: -10px; top: -10px; width: 120px; height: 120px; background: repeating-linear-gradient(115deg, transparent 0 8px, rgba(255, 193, 7, 0.1) 8px 10px); -webkit-mask-image: radial-gradient(circle, #000, transparent 70%); mask-image: radial-gradient(circle, #000, transparent 70%); animation: dnaDrift 6s linear infinite; }
@keyframes dnaDrift { to { transform: translateY(10px) rotate(6deg); } }
.dna-top { display: flex; justify-content: space-between; align-items: center; font: 700 8.5px 'Orbitron', sans-serif; letter-spacing: 0.16em; color: var(--blue-bright); }
.dna-top .c-logo { width: 22px; height: 22px; filter: none; }
.dna-name { font: 900 17px 'Orbitron', sans-serif; letter-spacing: 0.04em; color: #fff; margin-top: 2px; }
.dna-sub { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.dna-type { margin: 3px 0 8px; font-size: 9.5px; color: #ffb74d; }
.dna-type b.up { color: #34d399; }
.dna-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.dna-stats > div, .dna-tiles > div { padding: 6px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 193, 7, 0.28); display: flex; flex-direction: column; gap: 3px; }
.dna-stats small, .dna-tiles small { font-size: 7.5px; letter-spacing: 0.06em; color: var(--text-tertiary); }
.dna-stats b { font: 800 13px 'Orbitron', sans-serif; color: var(--blue-bright); }
.dna-stats .xp-bar { height: 4px; }
.dna-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 5px; }
.dna-tiles b { font-size: 11px; color: var(--text-primary); }

/* Yedek / roller */
.cp-json { padding: 8px 10px; border-radius: 6px; background: #05060b; border: 1px solid var(--line-strong); margin-bottom: 4px; }
.cp-json code { display: block; font: 11px ui-monospace, Consolas, monospace; color: #86efac; line-height: 1.5; }
.cp-file { display: flex; align-items: center; gap: 7px; padding: 6px 9px; margin-bottom: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); font-size: 11.5px; }
.cp-file small { margin-left: auto; color: var(--text-tertiary); }
.cp-roles { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.cp-roles > div { animation: liIn 0.45s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 0.3s); }
.cp-roles span { padding: 0 5px; border-radius: 4px; font-weight: 600; }

/* Bot kimliği (animasyonlu) */
.id-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; background: #0b0d16; border: 1px solid var(--line-strong); overflow: hidden; }
.id-avatar { position: relative; flex: 0 0 42px; width: 42px; height: 42px; perspective: 300px; }
.id-a, .id-b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; }
.id-a { background: #14172a; border: 2px solid var(--amber-line); padding: 6px; }
.id-a .c-logo { filter: none; }
.id-b { background: linear-gradient(135deg, #a855f7, #ec4899); font: 800 17px 'Space Grotesk', sans-serif; color: #fff; transform: rotateY(180deg); border: 2px solid rgba(255, 255, 255, 0.5); }
.id-name { position: relative; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; height: 18px; }
.id-name em { font-style: normal; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: var(--blue); color: #1a1400; margin-left: auto; visibility: hidden; }
.id-n1, .id-n2 { position: absolute; left: 0; white-space: nowrap; }
.id-n2 { opacity: 0; }
.id-lines { flex: 1; min-width: 0; }
.id-sub { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.id-scan { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 193, 7, 0.16) 50%, transparent 60%); transform: translateX(-120%); animation: sheen 3.6s ease-in-out infinite; pointer-events: none; }
.id-isim .id-n1 { animation: nameOut 5s ease-in-out infinite; }
.id-isim .id-n2 { animation: nameIn 5s ease-in-out infinite; }
.id-sifirla .id-n2 { opacity: 1; animation: nameOut 5s ease-in-out infinite; }
.id-sifirla .id-n1 { opacity: 0; animation: nameIn 5s ease-in-out infinite; }
@keyframes nameOut { 0%, 30% { opacity: 1; transform: none; } 45%, 90% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes nameIn { 0%, 30% { opacity: 0; transform: translateY(8px); } 45%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
.id-pp .id-avatar { animation: avFlip 5s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes avFlip { 0%, 30% { transform: rotateY(0); } 45%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.id-sifirla .id-avatar { animation: avFlip2 5s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes avFlip2 { 0%, 30% { transform: rotateY(180deg); } 45%, 90% { transform: rotateY(360deg); } 100% { transform: rotateY(540deg); } }

/* Kur / şablon / yapay zeka */
.tpl-list { display: flex; flex-direction: column; gap: 4px; }
.tpl-list > div { display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); font-size: 11.5px; animation: liIn 0.45s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 0.3s); }
.tpl-list b { color: var(--text-primary); }
.tpl-list small { color: var(--text-tertiary); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-list .is-pick { background: rgba(255, 193, 7, 0.14); box-shadow: inset 0 0 0 1px var(--amber-line); animation: liIn 0.45s var(--ease-out) both, btnGlow 2s ease-in-out 1.2s infinite; animation-delay: calc(var(--i) * 80ms + 0.3s), 1.2s; }
.tpl-undo { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.tpl-undo > div { padding: 3px 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.04); animation: undoOut 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 260ms + 0.4s); }
@keyframes undoOut { 0%, 25% { opacity: 1; text-decoration: none; transform: none; } 45%, 75% { opacity: 0.4; text-decoration: line-through; } 100% { opacity: 0; transform: translateX(18px); } }
.ai-prompt { margin: 0 0 8px 14px; padding: 8px 11px; border-radius: 8px; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.4); font-size: 11.5px; color: var(--text-primary); }
.ai-typed { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; border-right: 2px solid var(--blue-bright); animation: aiType 2.4s steps(34) 0.2s forwards; }
@keyframes aiType { to { width: 100%; border-right-color: transparent; } }
.ai-tree { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.ai-tree > div { padding: 2px 8px 2px 16px; color: var(--text-secondary); opacity: 0; animation: liIn 0.45s var(--ease-out) both; animation-delay: calc(var(--i) * 130ms + 1.6s); }
.ai-tree .cat { padding-left: 0; color: var(--text-primary); font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; margin-top: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cmd-pop .cp-e::after, .coin, .wheel, .id-scan { animation: none; }
  .cmd-pop-view.is-active .cp-e > *, .cmd-pop-view.is-active .dc-msg, .cmd-pop-view.is-active .cp-used { animation-duration: 0.3s; }
  .ai-typed { width: 100%; animation: none; border-right: 0; }
  .ai-tree > div { opacity: 1; animation: none; }
}