*,*:before,*:after{box-sizing:border-box}:root{--bg: radial-gradient(circle at top left, #0f0f0f, #000000);--text: #e5e7eb;--muted: #9ca3af;--header-border: rgba(255, 255, 255, .08);--header-bg: linear-gradient(to right, rgba(10, 10, 10, .95), rgba(10, 10, 10, .8));--card-bg: radial-gradient(circle at top left, #0a0a0a, #050505);--card-border: rgba(255, 255, 255, .08);--card-shadow: 0 18px 45px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);--table-head-bg: rgba(23, 23, 23, .95);--table-border: rgba(255, 255, 255, .06);--row-hover: rgba(255, 255, 255, .06);--secondary-bg: rgba(38, 38, 38, .95);--secondary-border: rgba(255, 255, 255, .12);--input-bg: rgba(23, 23, 23, .95);--input-border: rgba(255, 255, 255, .12);--modal-bg: #0a0a0a;--overlay-bg: rgba(0, 0, 0, .75);--link: #9ca3af}html[data-theme=light]{--bg: radial-gradient(circle at top left, #f8fafc, #eef2ff);--text: #0f172a;--muted: #475569;--header-border: rgba(15, 23, 42, .12);--header-bg: linear-gradient(to right, rgba(255, 255, 255, .92), rgba(255, 255, 255, .75));--card-bg: radial-gradient(circle at top left, #ffffff, #ffffff);--card-border: rgba(15, 23, 42, .12);--card-shadow: 0 18px 45px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .05);--table-head-bg: rgba(241, 245, 249, .9);--table-border: rgba(15, 23, 42, .08);--row-hover: rgba(59, 130, 246, .12);--secondary-bg: rgba(255, 255, 255, .9);--secondary-border: rgba(15, 23, 42, .18);--input-bg: rgba(255, 255, 255, .9);--input-border: rgba(15, 23, 42, .18);--modal-bg: #ffffff;--overlay-bg: rgba(2, 6, 23, .35);--link: #2563eb}html[data-theme=light] .badge-success{background:#22c55e2e;color:#14532d}html[data-theme=light] .badge-muted{background:#0f172a0f;color:#0f172a}html[data-theme=light] .badge-warn{background:#f59e0b2e;color:#7c2d12}html[data-theme=light] .badge-danger{background:#ef444424;color:#7f1d1d}html[data-theme=light] .badge-info{background:#3b82f626;color:#1e40af}html[data-theme=light] .small-btn{background:#f1f5f9f2;border-color:#0f172a26;color:#334155}html[data-theme=light] .small-btn:hover{background:#e2e8f0f2;border-color:#0f172a40}html[data-theme=light] .small-btn.danger{background:#fee2e2e6;border-color:#b91c1c59;color:#b91c1c}html[data-theme=light] .small-btn.danger:hover{background:#fecacaf2;border-color:#b91c1c80}html[data-theme=light] .email-labels-empty{background:#0f172a0f;color:#64748b}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}.app-root{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--header-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:var(--header-bg);position:sticky;top:0;z-index:10}.app-header-left{display:flex;align-items:center;gap:.75rem}.logo-dot{width:12px;height:12px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#22c55e,#16a34a);box-shadow:0 0 12px #22c55eb3}.app-header h1{font-size:1.1rem;font-weight:600;color:var(--text)}.app-nav{display:flex;gap:.5rem;align-items:center}.nav-sep{width:1px;height:1.25rem;margin:0 .25rem 0 .5rem;background:var(--header-border);flex-shrink:0}.nav-btn{border-radius:999px;border:1px solid transparent;padding:.4rem .9rem;font-size:.85rem;background:transparent;color:var(--text);cursor:pointer;transition:all .15s ease-out}.nav-icon-btn{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}.nav-icon-btn svg{width:22px;height:22px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}.nav-btn:hover{background:#ffffff14}.nav-btn.active{background:linear-gradient(to right,#374151,#4b5563);border-color:#ffffff26;color:#fff;box-shadow:0 8px 18px #00000059}.app-main{flex:1;padding:1.5rem;max-width:100%;margin:0 auto;width:100%}.card{background:var(--card-bg);border-radius:1rem;border:1px solid var(--card-border);padding:1rem 1.25rem 1.5rem;box-shadow:var(--card-shadow);overflow:hidden}.card-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.card-header h2{margin:0;font-size:1rem}.card-subtitle{margin:.25rem 0 0;font-size:.8rem;color:var(--muted)}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--bg);position:relative;overflow:hidden}.auth-page:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(34,197,94,.12),transparent),radial-gradient(ellipse 60% 40% at 100% 50%,rgba(59,130,246,.08),transparent),radial-gradient(ellipse 50% 30% at 0% 80%,rgba(139,92,246,.06),transparent);pointer-events:none}.auth-page-inner{position:relative;z-index:1;width:100%;max-width:400px}.auth-theme-toggle{position:absolute;top:1.25rem;right:1.25rem;z-index:2;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.12);background:#262626f2;color:#e5e7eb;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.auth-theme-toggle:hover{background:#ffffff1a;border-color:#fff3}.auth-theme-toggle svg{width:22px;height:22px;display:block}html[data-theme=light] .auth-theme-toggle{background:#ffffffe6;border-color:#0f172a2e;color:#334155}html[data-theme=light] .auth-theme-toggle:hover{background:#f1f5f9f2;border-color:#0f172a40}.auth-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:1.25rem;padding:2rem;box-shadow:var(--card-shadow)}.auth-card .auth-logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 8px 24px #22c55e59;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:center}.auth-card .auth-logo svg{width:26px;height:26px;color:#fff}.auth-card h2{margin:0 0 .25rem;font-size:1.35rem;font-weight:600;color:var(--text)}.auth-card .auth-subtitle{margin:0 0 1.5rem;font-size:.875rem;color:var(--muted)}.auth-form .auth-field{margin-bottom:1.1rem}.auth-form .auth-field label{display:block;font-size:.8rem;font-weight:500;color:var(--text);margin-bottom:.35rem}.auth-form .auth-field input{width:100%;padding:.6rem .75rem;border-radius:.5rem;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);font-size:.95rem;transition:border-color .15s,box-shadow .15s}.auth-form .auth-field input:focus{outline:none;border-color:#22c55e80;box-shadow:0 0 0 3px #22c55e26}.auth-form .auth-submit{width:100%;margin-top:.5rem;padding:.65rem 1rem;font-size:.95rem;font-weight:500;border-radius:.5rem;border:none;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;cursor:pointer;transition:transform .1s,box-shadow .15s;box-shadow:0 4px 14px #22c55e59}.auth-form .auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #22c55e66}.auth-form .auth-submit:disabled{opacity:.7;cursor:not-allowed}.auth-links{margin-top:1.25rem;text-align:center}.auth-link{font-size:.85rem;color:var(--link);text-decoration:none;cursor:pointer;background:none;border:none;padding:0}.auth-link:hover{text-decoration:underline;color:var(--text)}.auth-error{font-size:.85rem;color:#f87171;margin-bottom:1rem;padding:.5rem .6rem;border-radius:.5rem;background:#f871711a}.auth-success{font-size:.85rem;color:#22c55e;margin-bottom:1rem;padding:.5rem .6rem;border-radius:.5rem;background:#22c55e1a}.data-table{width:100%;border-collapse:collapse;font-size:.85rem;table-layout:auto}.table-scroll{width:100%;overflow-x:auto}.email-table{table-layout:fixed;min-width:760px}.email-table th:first-child,.email-table td:first-child{width:7.5rem}.data-table thead{background:var(--table-head-bg)}.data-table th,.data-table td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--table-border)}.data-table th{font-weight:500;color:var(--muted)}.data-table th.col-actions,.data-table td.col-actions{text-align:left;vertical-align:middle}.data-table td.col-actions{width:200px;min-width:200px}.data-table .col-time{max-width:10rem;width:10rem}.data-table .col-time.truncate{max-width:10rem}.data-table .col-account{max-width:10rem;width:10rem}.data-table .col-account.truncate{max-width:10rem}.data-table .col-sender{max-width:10rem;width:10rem}.data-table .col-sender.truncate{max-width:10rem}.data-table .col-subject{max-width:11rem;width:11rem}.data-table .col-subject.truncate{max-width:11rem}.row-selectable{cursor:pointer}.row-selectable:hover{background:var(--row-hover)}.row-selectable.selected{background:linear-gradient(to right,#2563eb2e,#2563eb14);box-shadow:inset 0 0 0 1px #2563eb80}html[data-theme=light] .row-selectable.selected{background:linear-gradient(to right,#3b82f62e,#3b82f60f);box-shadow:inset 0 0 0 1px #2563eb8c}.row-selectable.bulk-selected{box-shadow:inset 3px 0 #22c55ecc}html[data-theme=light] .row-selectable.bulk-selected{box-shadow:inset 3px 0 #16a34ad9}tr.email-unread{background:#ffffff0a}.badge{display:inline-flex;align-items:center;justify-content:center;padding:.1rem .6rem;border-radius:999px;font-size:.7rem;white-space:nowrap}.badge-success{background:#22c55e26;color:#bbf7d0}.badge-muted{background:#ffffff1f;color:#e5e7eb}.badge-warn{background:#fbbf2426;color:#fde68a}.badge-danger{background:#f871712e;color:#fecaca}.badge-info{background:#9ca3af33;color:#d1d5db}.email-labels-cell{vertical-align:middle;text-align:left}.email-labels-cell .email-labels-wrap,.email-labels-cell .email-labels-empty{display:inline-flex;align-items:center;min-height:1.25rem;white-space:normal}.email-labels-cell .email-labels-wrap{flex-wrap:wrap;gap:.2rem}.email-labels-cell .badge{font-size:.65rem;padding:.1rem .5rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;min-height:1.25rem;border:1px solid rgba(148,163,184,.18)}.email-labels-cell .email-labels-empty{font-size:.65rem;color:var(--muted);padding:.1rem .5rem;border-radius:999px;justify-content:center;min-width:2.6rem;background:#64748b29;border:1px solid rgba(148,163,184,.22)}html[data-theme=light] .email-labels-cell .badge{border-color:#64748b2e}html[data-theme=light] .email-labels-cell .email-labels-empty{color:#334155;background:#94a3b833;border-color:#64748b40}.provider-tag{display:inline-flex;align-items:center;justify-content:center;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:500;white-space:nowrap;min-width:6.5rem}.provider-gmail{background:#ef444429;color:#b91c1c}.provider-qq{background:#38bdf82e;color:#0369a1}.provider-163{background:#3b82f629;color:#1d4ed8}.provider-aliyun{background:#f973162e;color:#9a3412}.provider-outlook,.provider-office365{background:#3b82f629;color:#1d4ed8}.provider-yahoo{background:#9333ea2e;color:#6b21a8}.provider-custom{background:#64748b29;color:#cbd5e1;border:1px solid rgba(148,163,184,.22)}html[data-theme=light] .provider-custom{background:#94a3b833;color:#334155;border:1px solid rgba(100,116,139,.25)}.primary-btn,.secondary-btn{border-radius:999px;border:1px solid transparent;padding:.45rem .9rem;font-size:.8rem;cursor:pointer;transition:all .15s ease-out}.primary-btn{background:linear-gradient(to right,#374151,#4b5563);color:#fff;box-shadow:0 10px 24px #0006}.primary-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.secondary-btn{background:var(--secondary-bg);border-color:var(--secondary-border);color:var(--text)}.secondary-btn:hover{background:#373737f2;border-color:#ffffff2e}.primary-btn:focus-visible,.secondary-btn:focus-visible{outline:2px solid rgba(255,255,255,.22);outline-offset:2px}.muted{color:var(--muted);font-size:.8rem}.error-text{color:#fecaca;font-size:.8rem}.truncate{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:40}.modal{width:420px;max-width:90vw;background:var(--modal-bg);border-radius:1rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px #0009;padding:1.1rem 1.25rem 1rem}.modal-lg{width:780px;max-width:95vw}.modal-header h3{margin:0 0 .6rem;font-size:.95rem}.modal-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.25rem}.modal-meta{margin-top:.35rem;display:grid;grid-template-columns:1fr 1fr;gap:.25rem .75rem;color:#9ca3af;font-size:.75rem}.modal-content{display:flex;flex-direction:column;gap:.6rem}.icon-btn{border:1px solid rgba(255,255,255,.12);background:#262626f2;color:#e5e7eb;width:32px;height:32px;border-radius:999px;cursor:pointer;font-size:1.25rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover{background:#ffffff1a;border-color:#fff3}.modal-body{display:flex;flex-direction:column;gap:0}.form-section{padding:.7rem 0;border-top:1px solid var(--card-border)}.form-section:first-child{padding-top:0;border-top:none}.form-section:last-of-type{padding-bottom:0}.settings-page form{width:100%;max-width:none}.settings-page{width:100%}.settings-page .form-section-title{margin-bottom:.6rem}.settings-form-h .settings-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem 1.25rem;align-items:start}.settings-form-h .settings-grid .field{margin-bottom:0}.settings-form-h .settings-grid .field input{width:100%;min-height:2.25rem;box-sizing:border-box}.settings-form-h .settings-full{margin-top:.5rem}@media (max-width: 900px){.settings-form-h .settings-grid{grid-template-columns:1fr}}.form-section-title{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.55rem}.field{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;margin-bottom:.55rem}.field:last-child{margin-bottom:0}.field span{color:var(--text)}.change-pwd-form .change-pwd-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem}.change-pwd-form .change-pwd-row .field{margin-bottom:0;min-width:140px;flex:1}.change-pwd-form .change-pwd-row .field span{display:block;margin-bottom:.25rem}.change-pwd-form .change-pwd-row .primary-btn{flex-shrink:0}.field-inline{display:flex;align-items:center;gap:.75rem;font-size:.8rem;margin-bottom:.55rem}.field-inline:last-child{margin-bottom:0}.field-inline span{color:var(--text)}.field input,.field select,.field-inline input[type=text],.field-inline input[type=number],.field-inline input[type=password]{flex:1;border-radius:.6rem;border:1px solid var(--input-border);padding:.4rem .55rem;background:var(--input-bg);color:var(--text);font-size:.8rem}.field input:focus,.field-inline input:focus{outline:none;border-color:#9ca3af80;box-shadow:0 0 0 1px #ffffff1a}.checkbox-inline{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;color:var(--muted)}.modal-footer{margin-top:.6rem;display:flex;justify-content:flex-end;gap:.5rem}.table-actions{display:flex;flex-wrap:nowrap;gap:.5rem;justify-content:flex-start;align-items:center;padding:.15rem 0}.stats-kpi-row{display:flex;flex-wrap:nowrap;gap:.5rem;align-items:stretch}.stats-kpi-item{flex:1;min-width:0;padding:.6rem .75rem;border-radius:12px;border:1px solid var(--border);background:var(--card-bg)}.stats-kpi-item.stats-kpi-storage{min-width:180px}.stats-trend-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 760px){.stats-kpi-row{flex-wrap:wrap}.stats-kpi-item{min-width:120px}.stats-trend-cols{grid-template-columns:1fr}}.small-btn{border-radius:.5rem;border:1px solid rgba(255,255,255,.12);padding:.32rem .7rem;font-size:.78rem;cursor:pointer;background:#262626f2;color:#e5e7eb;white-space:nowrap;transition:background .15s,border-color .15s}.small-btn:hover{background:#373737f2;border-color:#ffffff2e}.small-btn:focus-visible{outline:2px solid rgba(255,255,255,.22);outline-offset:2px}.small-btn.danger{border-color:#f8717166;color:#fecaca;background:#7f1d1d40}.small-btn.danger:hover{background:#b91c1c66;border-color:#f87171b3}.link-btn{border:none;background:transparent;color:var(--link);cursor:pointer;padding:0;font-size:.78rem}.link-btn:hover{color:#bfdbfe;text-decoration:underline}.error-row td{background:#02061799}.error-box{border:1px solid rgba(248,113,113,.35);background:#b91c1c1f;color:#fecaca;border-radius:.75rem;padding:.6rem .75rem;font-size:.78rem;line-height:1.35;white-space:pre-wrap}.email-pre{margin:0;max-height:55vh;overflow:auto;border-radius:.75rem;border:1px solid var(--card-border);background:var(--secondary-bg);color:var(--text);padding:.75rem;font-size:.8rem;line-height:1.35;white-space:pre-wrap}@media (max-width: 768px){.app-main{padding:1rem}.card{padding:.9rem}.card-header{flex-direction:column;align-items:flex-start}.data-table th:nth-child(4),.data-table td:nth-child(4){display:none}.modal-meta{grid-template-columns:1fr}}
