body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#0d0d0d;color:#eaeaea}.container{max-width:900px;margin:40px auto;padding:20px}h1{text-align:center;margin-bottom:25px;font-size:2.5rem;background:linear-gradient(90deg,#00c6ff,#ff6ec7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}input[type=text]{width:100%;padding:12px 16px;margin-bottom:25px;border:2px solid #333;border-radius:10px;font-size:16px;background:#1a1a1a;color:#fff;outline:none;transition:border .3s ease,box-shadow .3s ease}input[type=text]:focus{border-color:#00c6ff;box-shadow:0 0 10px #00c6ff}.snippet-card{background:#1a1a1a;padding:18px 22px;margin-bottom:15px;border-radius:12px;box-shadow:0 4px 12px #00000080;cursor:pointer;transition:transform .2s ease,box-shadow .3s ease;border-left:4px solid transparent}.snippet-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px #000c;border-left:4px solid #00c6ff}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#1a1a1a;padding:25px;border-radius:14px;width:85%;max-width:650px;max-height:80%;overflow-y:auto;box-shadow:0 8px 25px #000000e6;animation:fadeIn .3s ease}.modal-content pre{background:#0d0d0d;color:#00ffae;padding:16px;border-radius:8px;overflow-x:auto;font-size:15px;line-height:1.5}button{padding:10px 18px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;margin-right:12px;font-size:14px;font-weight:500;transition:background .3s ease,transform .2s ease}button.copy-btn{background:linear-gradient(90deg,#00c6ff,#0072ff);color:#fff}button.copy-btn:hover{background:linear-gradient(90deg,#0072ff,#00c6ff);transform:scale(1.05)}button.close-btn{background:linear-gradient(90deg,#ff416c,#ff4b2b);color:#fff}button.close-btn:hover{background:linear-gradient(90deg,#ff4b2b,#ff416c);transform:scale(1.05)}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}