body{font-family:Segoe UI,sans-serif;background:#ffebe9;margin:0;padding:2rem;display:flex;justify-content:center;min-height:100vh}.app{width:100%;max-width:900px;background:#fff;padding:2rem;border-radius:1.5rem;box-shadow:0 12px 30px #0000001a;border:3px dashed #ffd1dc}h1{text-align:center;margin-bottom:2rem;color:#ff6f91;font-weight:600}.add-form{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}input{padding:.75rem;border:2px solid #ffe3e3;border-radius:.75rem;font-size:1rem;background-color:#fffafc}button{padding:.75rem;border:none;border-radius:.75rem;background-color:#ffb3c6;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:background-color .2s ease}button:hover{background-color:#ff6f91}.card-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.flashcard{perspective:1000px;height:180px;width:100%;position:relative}.flashcard .card-content{width:100%;height:100%;border-radius:1rem;box-shadow:0 8px 16px #0000001a;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;font-size:1.1rem;font-weight:500;backface-visibility:hidden;transition:transform .6s ease-in-out;position:absolute;top:0;left:0;overflow-wrap:break-word;word-break:break-word;box-sizing:border-box}.flashcard.flipped .card-content{transform:rotateY(180deg)}.flashcard .card-content:nth-child(1){transform:rotateY(0);z-index:2;background-color:#e3f6f5}.flashcard.flipped .card-content:nth-child(1){transform:rotateY(180deg);z-index:0}.flashcard .card-content:nth-child(2){transform:rotateY(-180deg);background-color:#ffdfd3}.flashcard.flipped .card-content:nth-child(2){transform:rotateY(0);z-index:2}.delete{position:absolute;top:10px;right:16px;background:none;border:none;font-size:1.4rem;color:#e57373;font-weight:700;cursor:pointer;z-index:3}