*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 20% 20%,#1f2430,#0f121a);color:#e8ecf3;min-height:100vh}.page{max-width:720px;margin:0 auto;padding:32px 20px 80px}.card{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;box-shadow:0 10px 40px #0000004d}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:12px}@media (max-width: 640px){.cards-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}}.card-item{background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;position:relative;overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:10px}.card-stage{position:relative;width:100%;aspect-ratio:5 / 7;perspective:1000px}.flippable{perspective:none}.card-inner{position:relative;width:100%;height:100%;opacity:0;animation:card-enter .3s ease-out forwards;animation-delay:.05s;transform-style:preserve-3d}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;overflow:hidden;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.25,.8,.25,1),opacity .3s ease}.card-back{background:radial-gradient(circle at 20% 20%,#ffffff14,#00000059),repeating-linear-gradient(45deg,#ffffff14,#ffffff14 8px,#00000040 8px,#00000040 16px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#dfe6ff;font-weight:600;transform:rotateY(0);opacity:1}.card-front{transform:rotateY(-90deg);background:#ffffff0a;opacity:0}.flippable.revealed .card-back{transform:rotateY(90deg);opacity:0}.flippable.revealed .card-front{transform:rotateY(0);opacity:1}.card-tags{display:flex;gap:6px;flex-wrap:wrap}.badge{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.2)}.badge-pos{background:#ffffff14}.badge-up{background:#6be19c26;color:#c0f2d4;border-color:#6be19c66}.badge-rev{background:#ff9e802e;color:#ffd9c8;border-color:#ff9e8066}.card-img{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 30% 30%,#ffffff14,#00000059);border:1px solid rgba(255,255,255,.1)}.card-img img{width:100%;height:100%;object-fit:contain;padding:4px;display:block;transform-origin:center;transition:transform .35s ease,opacity .25s ease;opacity:0}.card-img.rev img{transform:rotate(180deg)}.card-img img.loaded{opacity:1}.card-text .card-name{font-weight:600}.card-text .small{font-size:12px}.card-skeleton{height:220px;border-radius:12px;background:linear-gradient(90deg,#ffffff0f,#ffffff24,#ffffff0f);background-size:200% 100%;animation:shimmer 1.2s infinite}.skeleton-line{height:14px;width:80%;border-radius:6px;background:linear-gradient(90deg,#ffffff0f,#ffffff24,#ffffff0f);background-size:200% 100%;animation:shimmer 1.2s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.card-flip{animation:flip-in .4s ease-in-out forwards;transform-style:preserve-3d;opacity:0}@keyframes card-enter{0%{opacity:0}to{opacity:1}}.flip-btn{margin-top:8px;background:linear-gradient(120deg,#7b8bff,#9f7bff);border:1px solid rgba(255,255,255,.25);color:#0f121a;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:600}.flip-btn:disabled{opacity:.6;cursor:not-allowed}.input-area{display:flex;gap:12px;margin-bottom:12px}textarea{flex:1;min-height:96px;background:#ffffff14;color:#e8ecf3;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px;resize:vertical}button{padding:12px 16px;border-radius:10px;border:none;cursor:pointer;background:linear-gradient(120deg,#6c7cff,#9f7bff);color:#0f121a;font-weight:600;min-width:120px}button:disabled{opacity:.6;cursor:not-allowed}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.chip{padding:6px 10px;background:#ffffff14;border-radius:8px;font-size:12px}.history{margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}.history-item{margin-bottom:10px}.muted{color:#a3acc2;font-size:13px}.toast{margin-top:8px;padding:10px 12px;border-radius:10px;background:#ffffff14;border:1px solid rgba(255,255,255,.18)}.toast.error{color:#ffb4c0;border-color:#ffb4c04d}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:8px}.pill{padding:8px 10px;border-radius:10px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);text-align:center}