:root{--font-family-title: "Outfit", "Inter", sans-serif;--font-family-body: "Inter", sans-serif;--bg-main: #131416;--bg-card: #202124;--bg-sidebar: #17181a;--bg-hover: #2d2e33;--bg-active: #38393f;--border-subtle: rgba(255, 255, 255, .06);--border-focus: rgba(152, 156, 255, .4);--text-main: #ffffff;--text-muted: #8e9096;--text-dark: #5c5d61;--color-accent: #9ba0fc;--color-accent-hover: #b4b8ff;--color-accent-dim: rgba(155, 160, 252, .12);--status-active-bg: rgba(76, 175, 80, .12);--status-active-text: #6cd089;--status-error-bg: rgba(244, 67, 54, .12);--status-error-text: #e57373;--status-pending-bg: rgba(255, 152, 0, .12);--status-pending-text: #ffb74d;--radius-lg: 24px;--radius-md: 16px;--radius-sm: 8px;--transition-normal: all .2s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-family-body);overflow:hidden;height:100vh;width:100vw}input,button,textarea{font-family:inherit;color:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-soft{0%,to{opacity:1}50%{opacity:.5}}.animate-fade-in{animation:fadeIn .3s cubic-bezier(.4,0,.2,1) forwards}.dashboard-layout{display:flex;height:100vh;width:100vw;background-color:var(--bg-main)}.spectra-card{background-color:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);padding:24px;box-shadow:0 8px 30px #0003}.spectra-button{background-color:var(--color-accent-dim);color:var(--color-accent);border:1px solid rgba(155,160,252,.2);padding:10px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition-normal)}.spectra-button:hover{background-color:var(--color-accent);color:#121315;border-color:var(--color-accent)}.spectra-button-primary{background-color:var(--color-accent);color:#121315;border:1px solid var(--color-accent);padding:10px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition-normal)}.spectra-button-primary:hover{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover);box-shadow:0 0 15px #9ba0fc66}.spectra-button-secondary{background-color:transparent;color:var(--text-muted);border:1px solid var(--border-subtle);padding:10px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition-normal)}.spectra-button-secondary:hover{background-color:var(--bg-hover);color:var(--text-main);border-color:var(--text-muted)}.spectra-input{background-color:var(--bg-main);border:1px solid var(--border-subtle);color:var(--text-main);border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;outline:none;transition:var(--transition-normal)}.spectra-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-dim)}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-badge.active{background-color:var(--status-active-bg);color:var(--status-active-text)}.status-badge.error{background-color:var(--status-error-bg);color:var(--status-error-text)}.status-badge.pending{background-color:var(--status-pending-bg);color:var(--status-pending-text)}.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-hover) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:loading-pulse 1.5s infinite;border-radius:var(--radius-sm)}@keyframes loading-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.login-screen{background-color:#0f1011;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.auth-spinner{color:var(--color-accent);animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mobile-sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999}.mobile-top-bar,.mobile-close-btn{display:none!important}@media (min-width: 1025px) and (max-width: 1200px){.dashboard-header{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}.otp-container{grid-template-columns:1fr!important;gap:16px!important}}@media (max-width: 1024px){.dashboard-layout{flex-direction:column}.spectra-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;transform:translate(-100%);box-shadow:none;transition:var(--transition-normal)}.spectra-sidebar.mobile-open{transform:translate(0);box-shadow:10px 0 30px #00000080}.sidebar-header{display:flex;justify-content:space-between;align-items:center}.mobile-close-btn{display:flex!important;background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-sm);transition:var(--transition-normal)}.mobile-close-btn:hover{color:var(--text-main);background-color:var(--bg-hover)}.mobile-top-bar{display:flex!important;align-items:center;justify-content:space-between;padding:12px 20px;background-color:var(--bg-sidebar);border-bottom:1px solid var(--border-subtle);height:56px;flex-shrink:0;z-index:100}.mobile-top-bar .menu-toggle-btn,.mobile-top-bar .settings-toggle-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:var(--radius-sm);transition:var(--transition-normal)}.mobile-top-bar .menu-toggle-btn:hover,.mobile-top-bar .settings-toggle-btn:hover{color:var(--text-main);background-color:var(--bg-hover)}.mobile-top-bar .logo-title{font-family:var(--font-family-title);font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--color-accent)}.main-content{width:100%!important;max-width:100vw!important;height:calc(100vh - 56px)!important;overflow:hidden!important;box-sizing:border-box!important}.dashboard-scrollable{padding:16px!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box!important}.dashboard-header{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:20px!important}.metrics-row{width:100%;display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}.metric-box{flex:1;min-width:100px;padding:10px 14px!important}@media (max-width: 480px){.metrics-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;overflow-x:visible!important;padding-bottom:0!important}.metric-box{min-width:0!important;flex:none!important}.metric-box.highlight{grid-column:span 2!important}}.otp-container{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}.latest-otp-card{height:auto!important;min-height:180px}.otps-list-card{height:220px!important}.mail-list-card{padding:16px!important}.list-header{flex-direction:column;align-items:flex-start;gap:12px}.header-actions{width:100%}.search-bar{width:100%!important;flex:1}.filter-tabs{overflow-x:auto;width:100%;padding-bottom:8px}.filter-tab{white-space:nowrap}.viewer-drawer{width:100vw!important;max-width:100%!important}.meta-grid{grid-template-columns:1fr!important;gap:4px!important}.otp-alert-bar{flex-direction:column;align-items:flex-start;gap:12px}.otp-alert-bar button{width:100%;justify-content:center}.modal-content{width:95%!important;max-height:90vh!important}.modal-tabs{flex-wrap:wrap}.modal-tab{padding:10px!important;font-size:13px!important}.result-summary{flex-direction:column;gap:10px}}