.tool-container{max-width:1200px;margin:2rem auto;padding:0 1rem}.form-container{max-width:1200px}.tool-header{text-align:center;margin-bottom:3rem}.tool-title{font-size:2.5rem;font-weight:700;color:#1f2937;margin-bottom:1rem;background:linear-gradient(135deg,#38bdf8,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tool-description{font-size:1.1rem;color:#6b7280;line-height:1.6;max-width:600px;margin:0 auto}.otp-layout{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start}.generator-section{background:#ffffffb3;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:2rem;backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:2rem}.info-section{background:#ffffffb3;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:2rem;backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:1.5rem}.secret-group{display:flex;flex-direction:column;gap:1rem}.secret-item{display:flex;flex-direction:column;gap:.5rem}.secret-label{font-weight:500;color:#4b5563;font-size:.9rem}.secret-value{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#f8fafccc;border:1px solid rgba(226,232,240,.6);border-radius:8px}.secret-text{font-family:Monaco,Menlo,Ubuntu Mono,monospace;color:#1f2937;font-size:.9rem;flex:1;word-break:break-all}.refresh-btn,.copy-btn{background:#fffc;border:1px solid rgba(203,213,225,.8);border-radius:6px;padding:.375rem;cursor:pointer;transition:all .2s ease;color:#6b7280;display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;flex-shrink:0}.refresh-btn:hover,.copy-btn:hover{background:#38bdf81a;border-color:#38bdf880;color:#0ea5e9;transform:scale(1.05)}.copy-btn.copied{background:#10b9811a;border-color:#10b98180;color:#059669}.otp-display{display:flex;flex-direction:column;gap:1rem;align-items:center}.otp-labels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;width:100%;max-width:300px}.otp-label{text-align:center;font-weight:500;color:#6b7280;font-size:.875rem}.otp-codes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;width:100%;max-width:300px}.otp-code{text-align:center;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:1.125rem;font-weight:600;color:#6b7280;padding:.75rem;background:#f8fafc99;border-radius:8px;border:1px solid rgba(226,232,240,.6)}.otp-code.current{color:#1f2937;background:#fffc;border-color:#38bdf84d;transform:scale(1.05);box-shadow:0 4px 12px #38bdf833}.countdown-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;max-width:300px}.countdown-bar{width:100%;height:8px;background:#e2e8f099;border-radius:4px;overflow:hidden}.countdown-progress{height:100%;background:linear-gradient(90deg,#10b981,#059669);border-radius:4px;transition:width 1s linear}.countdown-text{font-weight:500;color:#059669;font-size:.875rem}.qr-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.qr-code{background:#fff;padding:1rem;border-radius:8px;border:1px solid rgba(226,232,240,.6);display:flex;justify-content:center;align-items:center;min-height:200px;min-width:200px}.uri-button{padding:.75rem 1.5rem;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .3s ease;border:1px solid rgba(203,213,225,.8);background:#ffffffe6;color:#374151}.uri-button:hover{background:#38bdf81a;border-color:#38bdf880;color:#0ea5e9;transform:translateY(-1px)}.info-item{display:flex;flex-direction:column;gap:.75rem}.info-label{font-weight:600;color:#374151;font-size:1rem}.info-sub-item{display:flex;flex-direction:column;gap:.5rem}.info-sublabel{font-weight:500;color:#6b7280;font-size:.875rem}.info-value{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafccc;border:1px solid rgba(226,232,240,.6);border-radius:6px}.info-text{font-family:Monaco,Menlo,Ubuntu Mono,monospace;color:#1f2937;font-size:.875rem;flex:1;word-break:break-all}@media (max-width: 768px){.otp-layout{grid-template-columns:1fr;gap:2rem}.tool-title{font-size:2rem}.generator-section,.info-section{padding:1.5rem}.otp-codes{gap:.5rem}.otp-code{font-size:1rem;padding:.5rem}}@media (max-width: 480px){.tool-container{padding:0 .5rem}.generator-section,.info-section{padding:1rem}.qr-code{min-height:150px;min-width:150px}}