:root{--primary: #3b82f6;--primary-hover: #2563eb;--bg-dark: #0f172a;--bg-card: #1e293b;--text-main: #f8fafc;--text-muted: #94a3b8;--border: #334155;--success: #10b981;--danger: #ef4444;--glass: rgba(30, 41, 59, .7)}.mobile-only{display:none!important}@media (max-width: 768px){.mobile-only{display:flex!important}.desktop-only{display:none!important}}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}body{background-color:var(--bg-dark);color:var(--text-main);display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header-wrapper{border-bottom:1px solid var(--border);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}header{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;width:100%}@media (max-width: 768px){header{position:relative;flex-direction:row;justify-content:space-between;align-items:center;padding:.75rem 1.5rem}}.menu-toggle{display:none;cursor:pointer;font-size:1.25rem;color:var(--text-main);padding:.5rem;border-radius:.5rem;transition:all .2s;width:40px;height:40px;align-items:center;justify-content:center}.menu-toggle:hover{background:#ffffff0d;color:var(--primary)}header nav{display:flex;gap:.5rem;align-items:center}@media (max-width: 768px){.menu-toggle{display:flex}header nav{display:none;position:absolute;top:100%;right:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem;flex-direction:column;width:220px;padding:.5rem;box-shadow:0 20px 25px -5px #0000004d,0 10px 10px -5px #0003;z-index:1000;margin-top:.5rem}header nav.active{display:flex;animation:slide-in-down .2s ease-out}.nav-link{width:100%;padding:.75rem 1rem;justify-content:flex-start}.lang-dropdown{width:100%;margin-left:0}.lang-drop-btn{width:100%;justify-content:space-between;padding:.75rem 1rem;border:none;background:transparent}.lang-drop-content{display:none;position:static;padding-top:0;width:100%}.lang-dropdown.mobile-open .lang-drop-content{display:block}.lang-drop-inner{box-shadow:none;border:none;background:#0000001a;margin:0 .5rem .5rem;min-width:0}.lang-drop-inner a{padding:.75rem 1rem}}.nav-link{color:var(--text-muted);text-decoration:none;font-weight:500;font-size:.9rem;display:flex;align-items:center;gap:.5rem;transition:all .2s;padding:.4rem .6rem;border-radius:.5rem}.nav-link:hover{color:#fff;background:#ffffff0d}.nav-link.active{color:var(--primary);background:#3b82f61a}.container{max-width:1200px;margin:0 auto;padding:2rem;width:100%;flex:1;display:flex;flex-direction:column;gap:2rem}.hero{text-align:center;padding:3rem 0}.hero h1{font-size:2.5rem;margin-bottom:1rem;line-height:1.2}.hero p{color:var(--text-muted);font-size:1.1rem;margin-bottom:2rem}.email-box{background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;padding:1rem;max-width:800px;margin:0 auto;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:transform .2s,box-shadow .2s}.email-box:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-color:var(--primary)}.email-input-group{display:flex;align-items:center;gap:.5rem;background:var(--bg-dark);border-radius:.5rem;padding:.75rem 1rem;margin-bottom:.75rem}#current-email{background:transparent;border:none;color:var(--text-main);font-size:1.2rem;font-weight:600;width:100%;outline:none;letter-spacing:.02em}.email-buttons{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.action-btn{background:var(--primary);color:#fff;border:none;padding:.75rem 1.25rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.action-btn:active{transform:translateY(0)}.action-btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.action-btn.secondary:hover{background:#ffffff0d;color:var(--text-main)}@media (max-width: 768px){.hero{padding:2rem 0}.hero h1{font-size:1.75rem}.hero p{font-size:.95rem;padding:0 1rem}.container{padding:1rem;gap:1.5rem}.email-box{border-radius:.75rem;padding:.75rem}.email-input-group{padding:.6rem .75rem}#current-email{font-size:1rem}.action-btn{padding:.7rem 1rem;font-size:.9rem;flex:1;min-width:calc(50% - .5rem);min-height:48px}.email-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}#btn-new{grid-column:span 2}}@media (max-width: 480px){.email-input-group{flex-wrap:wrap;justify-content:center}#current-email{width:100%;text-align:center;margin-bottom:.5rem;font-size:1.1rem}}.domain-select{margin-top:1rem;display:flex;justify-content:center;gap:.5rem}select{background:var(--bg-card);border:1px solid var(--border);color:var(--text-main);padding:.5rem 1rem;border-radius:.5rem;outline:none}.inbox-grid{display:grid;grid-template-columns:350px 1fr;gap:1.5rem;height:600px;min-height:400px}@media (max-width: 768px){.inbox-grid{grid-template-columns:1fr;height:auto;display:flex;flex-direction:column}.msg-list{max-height:400px}.msg-view{min-height:300px;order:-1;order:2}.inbox.viewing-msg .msg-list{display:none}.inbox.viewing-msg .msg-view{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;border-radius:0;padding:1rem}}.msg-list{background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;overflow-y:auto}.msg-item{padding:1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}.msg-item:hover{background:#ffffff05}.msg-item.active{background:#3b82f61a;border-left:3px solid var(--primary)}.msg-sender{font-weight:600;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-subject{color:var(--text-muted);font-size:.9rem;margin-bottom:.25rem}.msg-time{font-size:.75rem;color:#64748b;text-align:right}@media (max-width: 768px){.msg-list{border-radius:1rem 1rem 0 0}.msg-view{border-radius:0 0 1rem 1rem;border-top:none}.inbox.viewing-msg .msg-view{border-radius:0;border:none;overflow-y:auto}}.msg-view{background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;padding:2rem;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--text-muted);transition:all .3s ease}@media (max-width: 480px){.msg-view{padding:1rem}}.msg-view.has-content{display:block;justify-content:flex-start;align-items:stretch;color:var(--text-main)}.msg-header{border-bottom:1px solid var(--border);padding-bottom:1rem;margin-bottom:1rem}.msg-body{line-height:1.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .5s ease-out forwards}.loader{border:3px solid rgba(255,255,255,.1);border-top:3px solid var(--primary);border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}footer{margin-top:auto;padding:3rem 2rem;text-align:center;border-top:1px solid var(--border);color:var(--text-muted)}footer .footer-links{margin-bottom:1rem}footer a{color:var(--text-muted);text-decoration:none;margin:0 .75rem;transition:color .2s;display:inline-flex;align-items:center;gap:.5rem}footer a:hover{color:#fff}.notification-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease}.notification-overlay.active{opacity:1;visibility:visible}.notification-card{background:#1e293be6;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #00000080;border-radius:1.5rem;padding:2.5rem 2rem 2rem;max-width:500px;width:calc(100% - 2rem);margin:1rem;position:relative;transform:translateY(20px) scale(.95);transition:all .3s cubic-bezier(.34,1.56,.64,1)}.notification-overlay.active .notification-card{transform:translateY(0) scale(1)}.notification-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;transition:color .2s;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}.notification-close:hover{background:#ffffff1a;color:#fff}.notification-content h2{color:#fff;margin-bottom:1rem;font-size:1.5rem}.notification-content p{color:var(--text-muted);line-height:1.6;margin-bottom:1rem}.notification-content strong{color:#fff}.notification-btn{display:block;width:100%;padding:.75rem;background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;text-align:center;border-radius:.75rem;border:none;font-weight:600;cursor:pointer;margin-top:1.5rem;transition:opacity .2s}.nav-dropdown{position:relative;display:inline-block}.nav-drop-btn{color:var(--text-muted);text-decoration:none;padding:.6rem 1rem;border-radius:.5rem;font-size:.9rem;transition:all .2s;display:flex;align-items:center;gap:.5rem;cursor:pointer}.nav-dropdown:hover .nav-drop-btn{background:#ffffff0d;color:#fff}.nav-dropdown-content{display:none;position:absolute;background-color:var(--bg-card);min-width:180px;box-shadow:0 8px 16px #0006;z-index:1000;border:1px solid var(--border);border-radius:.5rem;top:100%;left:0;margin-top:.25rem;padding:.25rem}.nav-dropdown:hover .nav-dropdown-content{display:block}.nav-dropdown-content a{color:var(--text-muted);padding:.6rem 1rem;text-decoration:none;display:flex;align-items:center;gap:.5rem;border-radius:.25rem}.nav-dropdown-content a:hover{background-color:#ffffff0d;color:#fff}.lang-dropdown{position:relative;margin-left:auto}.lang-drop-btn{padding:.4rem .75rem;background:#ffffff0d;border:1px solid var(--border);border-radius:.5rem;color:var(--text-muted);cursor:pointer;transition:all .2s;font-size:.85rem;display:flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:500}.lang-drop-btn:hover,.lang-dropdown:hover .lang-drop-btn{color:#fff;border-color:var(--primary);background:#3b82f61a}.lang-dropdown:hover .lang-drop-content{display:block;animation:slide-in-down .2s ease-out}.lang-drop-content{display:none;position:absolute;right:0;top:100%;padding-top:.5rem;z-index:100}.lang-drop-inner{background:var(--bg-card);min-width:180px;box-shadow:0 10px 25px -5px #0000004d,0 8px 10px -6px #0003;border:1px solid var(--border)}
