.document-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 10px 30px #0003;transition:transform .3s ease,box-shadow .3s ease}.document-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px #0000004d}.document-card h3{color:#333;margin-bottom:16px;font-size:1.1rem;font-weight:600}.document-value{background:#f5f5f5;border-radius:8px;padding:16px;margin-bottom:16px;min-height:50px;display:flex;align-items:center;justify-content:center;word-break:break-all}.document-value code{font-family:Courier New,monospace;font-size:1.2rem;font-weight:600;color:#667eea;letter-spacing:1px}.document-value .loading{color:#999;font-style:italic}.document-value .placeholder{color:#bbb;font-size:.95rem}.card-actions{display:flex;gap:12px}.btn{flex:1;padding:10px 16px;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:center}.btn-secondary{background:#e0e7ff;color:#667eea}.btn-secondary:hover:not(:disabled){background:#c7d2fe;transform:translateY(-2px)}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.btn-copy{background:#d4edda;color:#155724}.btn-copy:hover{background:#c3e6cb;transform:translateY(-2px)}.btn-copy.copied{background:#28a745;color:#fff}.document-generator{display:flex;flex-direction:column;gap:20px}.mask-toggle{display:flex;justify-content:center;margin-bottom:8px}.toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 20px;background:#ffffff1a;border-radius:8px;transition:background .2s ease}.toggle-label:hover{background:#fff3}.toggle-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#667eea}.toggle-text{color:#fff;font-size:.95rem;font-weight:500}.cards-container{display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 768px){.cards-container{grid-template-columns:1fr 1fr}}@media (min-width: 1024px){.cards-container{grid-template-columns:1fr 1fr;gap:20px}}.btn-primary{background:#fff;color:#667eea;padding:14px 28px;border-radius:8px;border:none;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d;background:#f0f4ff}.btn-primary:active{transform:translateY(0)}.app{display:flex;flex-direction:column;gap:40px}.app-header{text-align:center;color:#fff}.app-header h1{font-size:2.5rem;margin-bottom:10px;font-weight:700}.app-header p{font-size:1.1rem;opacity:.9}.app-main{display:flex;flex-direction:column;gap:20px}.app-footer{text-align:center;color:#ffffffb3;font-size:.9rem;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}#root{width:100%;max-width:600px}