[hidden] { display: none !important; }

/* ——————————————————————————————————————————————————————————————————————————
   Layout
—————————————————————————————————————————————————————————————————————————— */

.fa-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* ——————————————————————————————————————————————————————————————————————————
   Controls bar
—————————————————————————————————————————————————————————————————————————— */

.fa-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    height: 56px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.fa-controls__left { flex-shrink: 0; }

.fa-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.fa-controls__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}

/* ——————————————————————————————————————————————————————————————————————————
   Filter pills bar
—————————————————————————————————————————————————————————————————————————— */

.fa-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.fa-pill {
    height: 26px;
    padding: 0 0.75rem;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.fa-pill:hover { color: var(--text); border-color: currentColor; }

.fa-pill.is-active {
    background: var(--cat-color, var(--accent));
    border-color: var(--cat-color, var(--accent));
    color: #fff;
    font-weight: 600;
}

/* ——————————————————————————————————————————————————————————————————————————
   Grid
—————————————————————————————————————————————————————————————————————————— */

.fa-grid-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 2rem;
}

.fa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
}

.fa-empty {
    color: var(--muted);
    font-size: 0.85rem;
    padding: 2rem 0;
    grid-column: 1 / -1;
    text-align: center;
}

/* ——————————————————————————————————————————————————————————————————————————
   Card
—————————————————————————————————————————————————————————————————————————— */

.fa-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fa-card:hover {
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.fa-badge {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    height: 18px;
    padding: 0 0.5rem;
    border-radius: 9px;
    background: var(--cat-color, var(--accent));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    opacity: 0.85;
    pointer-events: none;
}

.fa-preview {
    flex: 1;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 0.5rem;
    overflow: hidden;
}

.fa-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.fa-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem 0.6rem;
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

.fa-card__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fa-card__btns {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.fa-icon-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

/* keep old .fa-replay name working */
.fa-replay { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.fa-replay:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.fa-icon-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.fa-copy-btn:hover { background: rgba(59,130,246,0.18); color: #93c5fd; border-color: #3b82f6; }

.fa-copy-btn.copied { background: rgba(74,222,128,0.18); color: #4ade80; border-color: #4ade80; }

/* ——————————————————————————————————————————————————————————————————————————
   Typewriter cursor
—————————————————————————————————————————————————————————————————————————— */

.fa-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: currentColor;
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: fa-blink 0.9s step-end infinite;
}

@keyframes fa-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ——————————————————————————————————————————————————————————————————————————
   Letter splits
—————————————————————————————————————————————————————————————————————————— */

.fa-letter { display: inline-block; }

/* ——————————————————————————————————————————————————————————————————————————
   ── CSS ANIMATIONS ──────────────────────────────────────────────────────
—————————————————————————————————————————————————————————————————————————— */

/* ── FADE ─────────────────────────────────────────────────────────────── */

@keyframes kf-fade-in    { from { opacity:0 } to { opacity:1 } }
@keyframes kf-fade-up    { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:none } }
@keyframes kf-fade-down  { from { opacity:0; transform:translateY(-20px) } to { opacity:1; transform:none } }
@keyframes kf-fade-left  { from { opacity:0; transform:translateX(20px) } to { opacity:1; transform:none } }
@keyframes kf-fade-right { from { opacity:0; transform:translateX(-20px) } to { opacity:1; transform:none } }

.fa-fade-in    { animation: kf-fade-in    0.6s ease both }
.fa-fade-up    { animation: kf-fade-up    0.6s ease both }
.fa-fade-down  { animation: kf-fade-down  0.6s ease both }
.fa-fade-left  { animation: kf-fade-left  0.6s ease both }
.fa-fade-right { animation: kf-fade-right 0.6s ease both }

/* ── SLIDE ────────────────────────────────────────────────────────────── */

@keyframes kf-slide-up    { from { transform:translateY(100%) } to { transform:none } }
@keyframes kf-slide-down  { from { transform:translateY(-100%) } to { transform:none } }
@keyframes kf-slide-left  { from { transform:translateX(100%) } to { transform:none } }
@keyframes kf-slide-right { from { transform:translateX(-100%) } to { transform:none } }

.fa-slide-up    { animation: kf-slide-up    0.55s cubic-bezier(.22,1,.36,1) both; overflow:hidden }
.fa-slide-down  { animation: kf-slide-down  0.55s cubic-bezier(.22,1,.36,1) both; overflow:hidden }
.fa-slide-left  { animation: kf-slide-left  0.55s cubic-bezier(.22,1,.36,1) both; overflow:hidden }
.fa-slide-right { animation: kf-slide-right 0.55s cubic-bezier(.22,1,.36,1) both; overflow:hidden }

/* ── SCALE ────────────────────────────────────────────────────────────── */

@keyframes kf-zoom-in   { from { opacity:0; transform:scale(.4) } to { opacity:1; transform:scale(1) } }
@keyframes kf-zoom-out  { from { opacity:0; transform:scale(1.6) } to { opacity:1; transform:scale(1) } }
@keyframes kf-pop       { 0%{opacity:0;transform:scale(.7)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} }
@keyframes kf-shrink-in { from { transform:scale(2); opacity:0 } to { transform:scale(1); opacity:1 } }
@keyframes kf-expand    { from { letter-spacing:-0.5em; opacity:0 } to { letter-spacing:normal; opacity:1 } }

.fa-zoom-in   { animation: kf-zoom-in   0.55s cubic-bezier(.22,1,.36,1) both }
.fa-zoom-out  { animation: kf-zoom-out  0.55s cubic-bezier(.22,1,.36,1) both }
.fa-pop       { animation: kf-pop       0.55s cubic-bezier(.34,1.56,.64,1) both }
.fa-shrink-in { animation: kf-shrink-in 0.55s cubic-bezier(.22,1,.36,1) both }
.fa-expand    { animation: kf-expand    0.7s cubic-bezier(.22,1,.36,1) both }

/* ── ROTATE ───────────────────────────────────────────────────────────── */

@keyframes kf-rotate-in { from { opacity:0; transform:rotate(-180deg) scale(.5) } to { opacity:1; transform:none } }
@keyframes kf-flip-x    { from { opacity:0; transform:perspective(400px) rotateX(90deg) } to { opacity:1; transform:perspective(400px) rotateX(0) } }
@keyframes kf-flip-y    { from { opacity:0; transform:perspective(400px) rotateY(90deg) } to { opacity:1; transform:perspective(400px) rotateY(0) } }
@keyframes kf-swing     { 20%{transform:rotate(15deg)} 40%{transform:rotate(-10deg)} 60%{transform:rotate(5deg)} 80%{transform:rotate(-5deg)} 100%{transform:none} }
@keyframes kf-spin-in   { from { opacity:0; transform:rotate(360deg) } to { opacity:1; transform:none } }

.fa-rotate-in { animation: kf-rotate-in 0.65s cubic-bezier(.22,1,.36,1) both }
.fa-flip-x    { animation: kf-flip-x    0.6s ease both }
.fa-flip-y    { animation: kf-flip-y    0.6s ease both }
.fa-swing     { animation: kf-swing     0.8s ease both; transform-origin: top center }
.fa-spin-in   { animation: kf-spin-in   0.7s cubic-bezier(.22,1,.36,1) both }

/* ── BOUNCE ───────────────────────────────────────────────────────────── */

@keyframes kf-bounce-in   { 0%{opacity:0;transform:scale(.3)} 50%{transform:scale(1.08)} 70%{transform:scale(.95)} 100%{opacity:1;transform:scale(1)} }
@keyframes kf-rubber-band { 0%{transform:none} 30%{transform:scaleX(1.25) scaleY(.75)} 50%{transform:scaleX(.85) scaleY(1.1)} 70%{transform:scaleX(1.1) scaleY(.9)} 85%{transform:scaleX(.95) scaleY(1.05)} 100%{transform:none} }
@keyframes kf-jello       { 0%{transform:none} 11%{transform:skewX(-12.5deg) skewY(-12.5deg)} 22%{transform:skewX(6.25deg) skewY(6.25deg)} 33%{transform:skewX(-3.125deg) skewY(-3.125deg)} 44%{transform:skewX(1.5625deg) skewY(1.5625deg)} 55%{transform:skewX(-.78125deg) skewY(-.78125deg)} 66%{transform:skewX(.390625deg) skewY(.390625deg)} 77%{transform:skewX(-.1953125deg) skewY(-.1953125deg)} 100%{transform:none} }
@keyframes kf-drop-in     { 0%{opacity:0;transform:translateY(-80px)} 60%{transform:translateY(10px)} 80%{transform:translateY(-5px)} 100%{opacity:1;transform:none} }

.fa-bounce-in  { animation: kf-bounce-in   0.7s both }
.fa-rubber-band{ animation: kf-rubber-band 0.8s both }
.fa-jello      { animation: kf-jello       0.9s both }
.fa-drop-in    { animation: kf-drop-in     0.65s cubic-bezier(.22,1,.36,1) both }

/* ── 3D ───────────────────────────────────────────────────────────────── */

@keyframes kf-3d-rise  { from { opacity:0; transform:perspective(400px) translate3d(0,40px,-120px) rotateX(20deg) } to { opacity:1; transform:perspective(400px) none } }
@keyframes kf-3d-fall  { from { opacity:0; transform:perspective(400px) translate3d(0,-40px,120px) rotateX(-20deg) } to { opacity:1; transform:perspective(400px) none } }
@keyframes kf-3d-flip  { from { opacity:0; transform:perspective(400px) rotateY(-180deg) } 50%{opacity:1} to { transform:perspective(400px) none } }
@keyframes kf-3d-depth { from { opacity:0; transform:perspective(600px) translateZ(-300px) } to { opacity:1; transform:perspective(600px) translateZ(0) } }

.fa-3d-rise  { animation: kf-3d-rise  0.7s cubic-bezier(.22,1,.36,1) both }
.fa-3d-fall  { animation: kf-3d-fall  0.7s cubic-bezier(.22,1,.36,1) both }
.fa-3d-flip  { animation: kf-3d-flip  0.7s ease both }
.fa-3d-depth { animation: kf-3d-depth 0.7s cubic-bezier(.22,1,.36,1) both }

/* ── GLITCH ───────────────────────────────────────────────────────────── */

@keyframes kf-glitch {
    0%,100% { text-shadow:none; transform:none }
    10%      { text-shadow:-3px 0 #f0f, 3px 0 #0ff; transform:skewX(1deg) }
    20%      { text-shadow: 3px 0 #f0f,-3px 0 #0ff; transform:skewX(-1deg) }
    30%      { text-shadow:-3px 0 #f0f, 3px 0 #0ff; transform:none }
    40%      { text-shadow:none }
    70%      { text-shadow: 3px 0 #f0f,-3px 0 #0ff; transform:skewX(2deg) }
    80%      { text-shadow:-2px 0 #0ff, 2px 0 #f0f; transform:skewX(-1deg) }
}

@keyframes kf-shake {
    10%,90%  { transform:translateX(-2px) }
    20%,80%  { transform:translateX(3px) }
    30%,50%,70%{ transform:translateX(-4px) }
    40%,60%  { transform:translateX(4px) }
}

@keyframes kf-blur-shake {
    0%,100%  { filter:none; transform:none }
    20%,60%  { filter:blur(2px); transform:translateX(-3px) skewX(2deg) }
    40%,80%  { filter:blur(1px); transform:translateX(3px) skewX(-2deg) }
}

@keyframes kf-static {
    0%  { opacity:1; transform:none }
    5%  { opacity:.5; transform:skewX(3deg) }
    10% { opacity:1; transform:none }
    50% { opacity:1 }
    51% { opacity:.8; transform:translateX(-2px) }
    52% { opacity:1; transform:none }
    96% { opacity:1 }
    97% { opacity:.3; transform:skewX(-3deg) }
    98% { opacity:1; transform:none }
}

.fa-glitch     { animation: kf-glitch     1.5s both }
.fa-shake      { animation: kf-shake      0.7s both }
.fa-blur-shake { animation: kf-blur-shake 0.7s both }
.fa-static     { animation: kf-static     2s both }

/* ── GLOW ─────────────────────────────────────────────────────────────── */

@keyframes kf-neon {
    0%,100% { text-shadow: 0 0 4px #f0f, 0 0 14px #f0f, 0 0 30px #f0f }
    50%     { text-shadow: 0 0 2px #0ff, 0 0 8px #0ff,  0 0 18px #0ff  }
}

@keyframes kf-color-cycle {
    0%   { color:#f87171 }
    20%  { color:#fb923c }
    40%  { color:#4ade80 }
    60%  { color:#38bdf8 }
    80%  { color:#a78bfa }
    100% { color:#f87171 }
}

@keyframes kf-shimmer {
    0%   { background-position: -200% center }
    100% { background-position: 200% center }
}

@keyframes kf-gold-shine {
    0%   { background-position: 0% center }
    50%  { background-position: 100% center }
    100% { background-position: 0% center }
}

.fa-neon { animation: kf-neon 1.6s ease-in-out both; color:#fff }

.fa-color-cycle { animation: kf-color-cycle 3s linear both }

.fa-shimmer {
    background: linear-gradient(90deg, #94a3b8 0%, #fff 40%, #fff 60%, #94a3b8 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kf-shimmer 1.8s linear both;
}

.fa-gold-shine {
    background: linear-gradient(90deg, #b8860b, #ffd700, #ffe066, #ffd700, #b8860b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kf-gold-shine 2.2s ease-in-out both;
}

/* ── REVEAL / CLIP ────────────────────────────────────────────────────── */

@keyframes kf-reveal-right { from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0 0% 0 0) } }
@keyframes kf-reveal-left  { from { clip-path:inset(0 0 0 100%) } to { clip-path:inset(0 0 0 0%) } }
@keyframes kf-wipe-up      { from { clip-path:inset(100% 0 0 0) } to { clip-path:inset(0% 0 0 0) } }
@keyframes kf-curtain      { from { clip-path:inset(0 50% 0 50%) } to { clip-path:inset(0 0% 0 0%) } }

.fa-reveal-right { animation: kf-reveal-right 0.7s cubic-bezier(.22,1,.36,1) both }
.fa-reveal-left  { animation: kf-reveal-left  0.7s cubic-bezier(.22,1,.36,1) both }
.fa-wipe-up      { animation: kf-wipe-up      0.6s cubic-bezier(.22,1,.36,1) both }
.fa-curtain      { animation: kf-curtain      0.7s cubic-bezier(.22,1,.36,1) both }

/* ── SPECIAL ──────────────────────────────────────────────────────────── */

@keyframes kf-pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes kf-heartbeat{ 0%{transform:scale(1)} 14%{transform:scale(1.2)} 28%{transform:scale(1)} 42%{transform:scale(1.15)} 70%{transform:scale(1)} }
@keyframes kf-float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes kf-blur-in  { from{filter:blur(12px);opacity:0} to{filter:none;opacity:1} }
@keyframes kf-focus-in { from{filter:blur(6px) brightness(.5);opacity:0} to{filter:none;opacity:1} }

.fa-pulse     { animation: kf-pulse     1.4s ease-in-out both }
.fa-heartbeat { animation: kf-heartbeat 1.3s ease-in-out both }
.fa-float     { animation: kf-float     2.4s ease-in-out both }
.fa-blur-in   { animation: kf-blur-in   0.8s ease both }
.fa-focus-in  { animation: kf-focus-in  0.9s cubic-bezier(.22,1,.36,1) both }

/* ── WAVE (split-css) ─────────────────────────────────────────────────── */

@keyframes kf-wave {
    0%,100% { transform:translateY(0) }
    50%     { transform:translateY(-10px) }
}

@keyframes kf-cascade {
    from { opacity:0; transform:translateY(20px) }
    to   { opacity:1; transform:none }
}

@keyframes kf-stagger-up {
    from { opacity:0; transform:translateY(30px) rotate(-4deg) }
    to   { opacity:1; transform:none }
}

@keyframes kf-rain {
    from { opacity:0; transform:translateY(-30px) scale(.8) }
    to   { opacity:1; transform:none }
}

@keyframes kf-spin-each {
    from { opacity:0; transform:rotateY(90deg) }
    to   { opacity:1; transform:rotateY(0) }
}

@keyframes kf-bounce-letters {
    0%   { transform:translateY(0) }
    40%  { transform:translateY(-14px) }
    60%  { transform:translateY(4px) }
    80%  { transform:translateY(-6px) }
    100% { transform:translateY(0) }
}

.fa-wave .fa-letter        { animation: kf-wave          1.2s ease-in-out both; animation-delay: calc(var(--i) * 0.09s) }
.fa-cascade .fa-letter     { animation: kf-cascade       0.5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 0.07s) }
.fa-stagger-up .fa-letter  { animation: kf-stagger-up    0.6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 0.07s) }
.fa-rain .fa-letter        { animation: kf-rain          0.45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 0.06s) }
.fa-spin-each .fa-letter   { animation: kf-spin-each     0.5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 0.06s); perspective: 300px }
.fa-bounce-letters .fa-letter { animation: kf-bounce-letters 0.7s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 0.07s) }