body{font-family:Cairo,sans-serif;background-color:#f5f5f5;margin:0;padding:0}main{padding:20px}.container{max-width:800px;margin:0 auto;background:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a}h1{text-align:center;color:#333;margin-bottom:20px}label{display:block;margin-bottom:8px;font-weight:700;color:#555}input[type=text]{width:100%;padding:12px;margin-bottom:15px;border:1px solid #ddd;border-radius:4px;font-size:16px;box-sizing:border-box}.btn{padding:12px 20px;font-size:16px;cursor:pointer;border:none;border-radius:4px;transition:background-color .3s}.full-width{width:100%;margin-top:10px;margin-bottom:10px}.secondary{background-color:#e0e0e0;color:#333}.secondary:hover{background-color:#d5d5d5}.red-btn{background-color:#ff4d4d;color:#fff}.red-btn:hover{background-color:#f33}.green-btn{background-color:#28a745;color:#fff}.green-btn:hover{background-color:#218838}.option{display:flex;gap:10px;margin-bottom:15px}.option input{flex-grow:1;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:16px}.delete-button{background-color:#ff4d4d;color:#fff;padding:8px 12px;border:none;border-radius:4px;cursor:pointer}.delete-button:hover{background-color:#f33}.json-container{position:relative}.json-preview{display:block;max-height:20vh;overflow-y:auto;padding-right:30px}.copy-btn{position:absolute;top:5px;right:5px;width:24px;height:24px;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;z-index:1}#message{text-align:center;margin:10px 0;color:#28a745}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center}.modal-content{background:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a;max-height:80vh;overflow-y:auto;width:90%;max-width:600px}@media (max-width: 600px){.container{padding:10px}h1{font-size:24px}.btn{padding:15px 20px;font-size:18px;width:100%;margin-bottom:10px}input[type=text]{font-size:18px;padding:12px}.option{flex-direction:column;align-items:stretch}.option input{margin-bottom:10px}.modal-content{width:95%;max-height:90vh}.json-preview{padding-right:40px}.copy-btn{width:30px;height:30px;font-size:20px;top:10px;right:10px}}