:root{--bg-main:#070708;--bg-sidebar:#0d0d0f;--bg-card:#121214;--accent:#6366f1;--accent-muted:#6366f11a;--accent-hover:#4f46e5;--text-main:#e1e1e6;--text-muted:#a1a1aa;--text-dark:#71717a;--border:#ffffff14;--danger:#f75a68;--success:#10b981}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-main);width:100%;height:100%;color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,sans-serif;overflow:hidden}button{color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;transition:all .2s;display:flex}.home-screen{z-index:10;background:radial-gradient(circle at 100% 0,#121214,#0a0a0c);flex-direction:column;align-items:center;width:100%;min-height:100vh;padding:60px 20px;display:flex;overflow-y:auto}.home-container{text-align:center;width:100%;max-width:800px;margin:auto 0}.brand-large{justify-content:center;align-items:center;gap:20px;margin-bottom:40px;display:flex}.brand-large h1{letter-spacing:-3px;color:#fff;font-size:4rem;font-weight:900}.brand-large h1 span{color:var(--accent)}.tagline{color:var(--text-muted);margin-bottom:60px;font-size:1.2rem}.status-grid{grid-template-columns:repeat(3,1fr);gap:24px;width:100%;margin-bottom:60px;display:grid}.status-card{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:15px;padding:30px;transition:all .3s;display:flex}.status-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:0 10px 30px #0000004d}.status-label{color:var(--text-dark);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-weight:800}.status-value{color:#fff;font-size:1.1rem;font-weight:700}.status-dot{border-radius:50%;width:10px;height:10px;box-shadow:0 0 10px}.status-dot.online{background:var(--success);color:var(--success)}.btn-primary-large{background:var(--accent);color:#fff;border-radius:18px;justify-content:center;margin:0 auto;padding:20px 45px;font-size:1.2rem;font-weight:800;box-shadow:0 15px 35px #6366f14d}.login-screen{z-index:1000;background:#070708;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.login-card{background:var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:40px;width:500px;padding:60px;box-shadow:0 40px 100px #000c,0 0 80px #6366f10d}.brand-header-login{flex-direction:column;align-items:center;gap:15px;margin-bottom:40px;display:flex}.brand-icon-login{color:var(--accent);filter:drop-shadow(0 0 15px #6366f14d)}.brand-name-login{letter-spacing:-2px;color:#fff;font-size:3rem;font-weight:950}.brand-name-login span{color:var(--accent)}.login-subheader{margin-bottom:40px}.login-subheader h2{color:#fff;margin-bottom:8px;font-size:1.4rem;font-weight:800}.login-subheader p{color:var(--text-dark);font-size:1rem}.login-input-wrapper{margin-bottom:24px;position:relative}.login-input{color:#fff;text-align:center;background:#16161a;border:1px solid #242429;border-radius:18px;outline:none;width:100%;padding:20px;font-size:1.3rem}.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}.password-toggle{color:var(--text-dark);position:absolute;top:50%;right:20px;transform:translateY(-50%)}.login-submit{background:var(--accent);color:#fff;border-radius:18px;justify-content:center;width:100%;padding:20px;font-weight:900}.app-shell{background:var(--bg-main);width:100vw;height:100vh;display:flex;position:fixed;inset:0}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:380px;display:flex}.viewport{flex-direction:column;flex:1;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:24px;display:flex}.brand{color:var(--accent);align-items:center;gap:10px;font-size:1.2rem;font-weight:800;display:flex}.icon-btn{color:var(--text-dark);border:1px solid var(--border);background:#ffffff08;border-radius:10px;padding:10px}.search-container{align-items:center;padding:20px 16px;display:flex;position:relative}.search-icon{color:var(--accent);position:absolute;left:32px}.search-input{color:#fff;background:#121214;border:1px solid #242429;border-radius:14px;outline:none;width:100%;padding:12px 12px 12px 45px}.email-list{flex:1;padding:12px;overflow-y:auto}.email-card{cursor:pointer;border:1px solid #0000;border-radius:16px;margin-bottom:10px;padding:18px}.email-card.active{border-color:var(--border);background:#16161a}.card-subject{color:var(--accent);margin-bottom:6px;font-size:.95rem;font-weight:700}.card-meta{color:var(--text-dark);font-size:.8rem}.viewer-header{background:var(--bg-sidebar);border-bottom:1px solid var(--border);padding:40px 60px}.subject-line{justify-content:space-between;align-items:center;display:flex}.subject-line h1{color:#fff;font-size:2.2rem;font-weight:900}.view-tabs{gap:8px;margin-top:30px;display:flex}.view-tabs button{color:var(--text-dark);background:#16161a;border-radius:12px;padding:10px 20px;font-size:.8rem;font-weight:800}.view-tabs button.active{background:var(--accent);color:#fff}.action-bar{border-bottom:1px solid var(--border);justify-content:flex-end;gap:15px;padding:20px 60px;display:flex}.content-area{flex-direction:column;flex:1;padding:40px 60px;display:flex}.viewer-container{background:#fff;border-radius:24px;flex:1;overflow:hidden}.modal-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10000;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-card{background:var(--bg-card);border:1px solid var(--accent);border-radius:32px;width:450px;padding:40px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-header h3{color:#fff;font-size:1.5rem;font-weight:800}.close-x{color:var(--text-dark);font-size:2rem}.modal-body{color:var(--text-muted);margin-bottom:32px;font-size:1.1rem;line-height:1.5}.modal-footer{justify-content:flex-end;gap:12px;display:flex}.btn-cancel{color:var(--text-main);background:#ffffff08;border-radius:12px;padding:12px 24px;font-weight:700}.btn-confirm{color:#fff;background:var(--accent);border-radius:12px;padding:12px 24px;font-weight:800}.toast-container-v2{z-index:10000;background:#121214;border:1px solid #6366f166;border-radius:20px;width:360px;position:fixed;top:40px;right:40px;overflow:hidden;box-shadow:0 25px 50px -12px #000000b3,0 0 20px #6366f126}.toast-glow{pointer-events:none;background:radial-gradient(circle,#6366f114 0%,#0000 70%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.toast-inner{z-index:1;align-items:center;gap:18px;padding:20px 24px;display:flex;position:relative}.toast-icon-v2{background:var(--accent);color:#fff;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:relative;box-shadow:0 8px 16px #6366f14d}.icon-pulse{border:2px solid var(--accent);opacity:0;border-radius:16px;animation:2s infinite pulse-ring;position:absolute;inset:-4px}@keyframes pulse-ring{0%{opacity:.5;transform:scale(.8)}to{opacity:0;transform:scale(1.2)}}.toast-content-v2{flex:1;min-width:0}.toast-title-v2{color:#fff;letter-spacing:-.01em;margin-bottom:2px;font-size:.95rem;font-weight:850}.toast-body-v2{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.toast-progress-bar{background:linear-gradient(to right, var(--accent), #a855f7);height:3px;transition:width .1s linear;position:absolute;bottom:0;left:0;box-shadow:0 0 10px #6366f180}.animate-slide-in{animation:.6s cubic-bezier(.16,1,.3,1) slideInRight}@keyframes slideInRight{0%{opacity:0;transform:translate(120%)scale(.9)}to{opacity:1;transform:translate(0)scale(1)}}.home-footer{color:var(--text-dark);letter-spacing:.5px;text-align:center;margin-top:100px;padding-bottom:40px;font-size:.85rem}.home-footer strong{color:var(--accent)}.input-wrapper-shared{align-items:center;width:100%;display:flex;position:relative}.input-base-shared{color:#fff;background:#16161a;border:1px solid #242429;border-radius:18px;outline:none;width:100%;padding:18px 20px;font-size:1.1rem;transition:all .3s}.input-base-shared:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted);background:#1a1a20}.input-base-shared.with-icon{padding-left:48px}.input-icon-shared{color:var(--accent);pointer-events:none;position:absolute;left:18px}.input-right-shared{align-items:center;display:flex;position:absolute;right:18px}.login-card .input-wrapper-shared{margin-bottom:24px}.login-card .input-base-shared{text-align:center;padding:20px;font-size:1.2rem}.login-card .password-toggle{opacity:.5;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;top:0;right:0;transform:none}.login-card .password-toggle:hover{opacity:1;color:var(--accent)}.modal-footer .btn-confirm,.modal-footer .btn-cancel{border-radius:14px;justify-content:center;min-width:140px;padding:16px 32px;font-size:1rem;font-weight:800}.animate-in{animation:.4s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.spinning{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:1024px){.sidebar{width:320px}}@media (max-width:768px){.brand-large h1{font-size:2.5rem}.status-grid{grid-template-columns:1fr;gap:15px}.home-container{padding:20px}.login-card{border-radius:24px;width:90%;padding:40px 20px}.brand-name-login{font-size:2rem}.app-shell{flex-direction:column}.sidebar{z-index:50;border-right:none;width:100%;height:100%}.viewport{background:var(--bg-main);z-index:100;display:none;position:fixed;inset:0}.viewport.active{display:flex}.viewer-header{padding:20px}.viewer-header h1{font-size:1.2rem}.viewer-footer-actions{flex-wrap:wrap;justify-content:center;gap:8px;padding:10px}.meta-label{min-width:50px;font-size:.7rem}.meta-value{font-size:.8rem}.desktop-only{display:none!important}.capsule-btn{padding:0 12px;font-size:.7rem}}@media (max-width:480px){.brand-large h1{font-size:2.2rem}.brand-large{gap:12px;margin-bottom:20px}.tagline{margin-bottom:30px;padding:0 20px;font-size:.9rem}.status-grid{gap:10px;margin-bottom:30px}.status-card{gap:8px;padding:18px}.status-value{font-size:1rem}.btn-primary-large{width:90%;padding:15px;font-size:1rem}.home-footer{margin-top:50px;padding-bottom:30px}}