:root{--background-gradient-start: #e9f1fa;--background-gradient-end: #f2f5fa;--foreground-color: #2d2d2d;--primary-color: #1565c0}@media (prefers-color-scheme: dark){:root{--background-gradient-start: #121212;--background-gradient-end: #1c1c1c;--foreground-color: #e0e0e0;--primary-color: #90caf9}}html,body{height:100%;margin:0}body{display:flex;flex-direction:column;align-items:center;background:linear-gradient(145deg,var(--background-gradient-start),var(--background-gradient-end));font-family:Poppins,sans-serif;transition:all .3s ease}h1{font-size:2.2rem;font-weight:700;text-align:center;margin:1rem 0;color:var(--foreground-color)}a{color:var(--primary-color);text-decoration:none}a:hover{color:#0d47a1}button{font-family:inherit;font-weight:500;transition:background-color .3s ease,transform .1s ease;border:none;outline:none}footer{text-align:center;padding:20px;width:100%;background:#ffffff1a;color:var(--foreground-color)}@media (prefers-color-scheme: dark){footer{background:#0000004d}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,sans-serif;color:#2d2d2d;line-height:1.5}.App{max-width:960px;margin:0 auto;padding:20px}.App h1{font-size:2.2rem;font-weight:700;text-align:center;color:#c11885;text-shadow:1px 1px 2px rgba(0,0,0,.1);margin-bottom:1.5rem}.nav-bar{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:2rem;transition:max-height .3s ease-out,opacity .3s ease-out;max-height:999px;opacity:1;overflow:hidden}.nav-bar button{background-color:#1565c0;color:#fff;border:none;padding:10px 16px;font-size:.96rem;border-radius:6px;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 8px #00000026}.nav-bar button:hover{background-color:#0d47a1;transform:translateY(-2px)}.nav-bar button:active{transform:translateY(0)}.nav-bar button:focus{outline:2px solid #90caf9}.hamburger-btn{display:none;background:none;border:none;font-size:1.8rem;cursor:pointer;padding:8px 12px;margin-left:10px}.content{background-color:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;min-height:320px;box-shadow:0 4px 12px #00000014;transition:transform .3s ease,box-shadow .3s ease}.content h2{margin-bottom:1rem;color:#0727dd;font-size:2.5rem;text-align:center}label{display:block;color:#212121;font-weight:600;margin-bottom:.4rem}input,textarea,select{width:100%;padding:10px;font-size:1rem;margin-bottom:1rem;border:1px solid #cccccc;border-radius:6px;transition:border .3s ease,box-shadow .3s ease;background-color:#fdfdfd}input:focus,textarea:focus,select:focus{outline:none;border-color:#1565c0;box-shadow:0 0 4px #1565c04d}.content button{background-color:#1565c0;color:#fff;border:none;padding:10px 14px;font-size:1rem;border-radius:6px;cursor:pointer;transition:all .2s ease}.content button:hover{background-color:#0d47a1;transform:translateY(-2px)}.content button:active{transform:translateY(0)}.content button:focus{outline:2px solid #90caf9}.success{background:#e2f3e2;color:#2e7d32;border:1px solid #c8e6c9;border-radius:6px;padding:10px;margin-bottom:1rem}.error{background:#ffebee;color:#c62828;border:1px solid #ffcdd2;border-radius:6px;padding:10px;margin-bottom:1rem}ul{list-style:none;margin:1rem 0;padding:0}ul li{background:#f8f8f8;padding:10px;margin-bottom:8px;border-radius:6px;box-shadow:0 2px 4px #00000014}ul li:hover{background:#f1f1f1}@media (max-width: 600px){.App h1{font-size:1.8rem}.hamburger-btn{display:inline}.nav-bar{flex-direction:column;max-height:0;opacity:0}.nav-bar.open{max-height:500px;opacity:1}.nav-bar button{width:100%;margin-bottom:10px}.content{padding:16px}}