*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #ffffff;--text-color: #333333;--input-bg: #f5f5f5;--input-border: #e0e0e0;--primary-color: #007bff;--primary-hover: #0056b3;--code-bg: #f8f9fa;--code-text: #212529;--success-color: #28a745;--shadow: 0 2px 10px rgba(0, 0, 0, .1);--border-radius: 8px}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #e0e0e0;--input-bg: #2d2d2d;--input-border: #404040;--primary-color: #4a9eff;--primary-hover: #357abd;--code-bg: #2d2d2d;--code-text: #ffffff;--success-color: #4caf50;--shadow: 0 2px 10px rgba(0, 0, 0, .3)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:var(--bg-color);color:var(--text-color);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;transition:background-color .3s ease,color .3s ease}.container{width:100%;max-width:600px;background-color:var(--bg-color);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:40px;transition:background-color .3s ease}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}h1{font-size:28px;font-weight:600;color:var(--text-color)}.theme-toggle{background:none;border:none;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;transition:transform .2s ease;color:var(--text-color)}.theme-toggle:hover{transform:scale(1.1)}.input-section{margin-bottom:30px}label{display:block;margin-bottom:10px;font-weight:500;color:var(--text-color);font-size:14px}.input-group{display:flex;gap:10px;margin-bottom:15px}input[type=text]{flex:1;padding:12px 16px;border:2px solid var(--input-border);border-radius:var(--border-radius);font-size:16px;background-color:var(--input-bg);color:var(--text-color);transition:border-color .3s ease,background-color .3s ease}input[type=text]:focus{outline:none;border-color:var(--primary-color)}.submit-btn,.demo-btn{padding:12px 24px;background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease,transform .1s ease}.submit-btn:hover,.demo-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.submit-btn:active,.demo-btn:active{transform:translateY(0)}.demo-secret{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-color);opacity:.7}.demo-secret code{background-color:var(--input-bg);padding:4px 8px;border-radius:4px;font-family:Courier New,monospace;font-size:12px;color:var(--code-text)}.demo-btn{padding:6px 12px;font-size:12px}.result-section{margin-top:30px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.code-display{background-color:var(--code-bg);border-radius:var(--border-radius);padding:30px;text-align:center;margin-bottom:20px;border:2px solid var(--input-border)}.code-label{font-size:14px;color:var(--text-color);opacity:.7;margin-bottom:15px}.code-value{font-size:48px;font-weight:700;font-family:Courier New,monospace;color:var(--primary-color);letter-spacing:8px;margin-bottom:20px;-webkit-user-select:all;user-select:all}.copy-btn{padding:10px 24px;background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:14px;cursor:pointer;transition:background-color .3s ease,transform .1s ease}.copy-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.copy-btn.copied{background-color:var(--success-color)}.info-section{margin-bottom:20px}.info-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--input-border)}.info-item:last-child{border-bottom:none}.info-label{font-size:14px;color:var(--text-color);opacity:.7}.info-value{font-size:14px;color:var(--text-color);font-weight:500;font-family:Courier New,monospace}.progress-bar{width:100%;height:6px;background-color:var(--input-bg);border-radius:3px;overflow:hidden;margin-top:20px}.progress-fill{height:100%;background-color:var(--primary-color);border-radius:3px;transition:width .1s linear;width:100%}footer{margin-top:40px;text-align:center;font-size:12px;color:var(--text-color);opacity:.6}@media (max-width: 600px){.container{padding:20px}h1{font-size:24px}.code-value{font-size:36px;letter-spacing:4px}.input-group{flex-direction:column}.submit-btn{width:100%}}