:root{--bg: #0b0c0f;--panel: #16181d;--panel-elevated: #1c1f26;--border: #262a33;--border-soft: #1e212a;--text: #f2f3f5;--text-muted: #9aa1ad;--primary: #fb923c;--primary-solid: #ea580c;--primary-bg: rgba(251, 146, 60, .14);--scam: #ff6b6b;--scam-bg: rgba(255, 107, 107, .14);--notification: #9aa1ad;--notification-bg: rgba(255, 255, 255, .06);--customer: #60a5fa;--customer-bg: rgba(96, 165, 250, .14);--invoice: #fbbf24;--invoice-bg: rgba(251, 191, 36, .14);--newsletter: #c084fc;--newsletter-bg: rgba(192, 132, 252, .14);--other-bg: rgba(255, 255, 255, .06);--shadow-elevated: 0 12px 40px rgba(0, 0, 0, .45);--bottom-nav-height: 64px;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100%}body{margin:0;background:var(--bg);color:var(--text)}img,iframe{max-width:100%}a{color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:224px;background:var(--panel);border-right:1px solid var(--border);padding:20px 12px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}.sidebar h1{font-size:16px;margin:0 8px 20px;display:flex;align-items:center;gap:8px}.sidebar nav{display:flex;flex-direction:column;gap:4px}.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text-muted);font-size:14px;font-weight:500;transition:background-color .15s ease,color .15s ease}.nav-link.active,.nav-link:hover{background:var(--primary-bg);color:var(--primary)}.sidebar .logout{margin-top:auto;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--text-muted);font-size:14px;border-radius:8px;transition:background-color .15s ease,color .15s ease}.sidebar .logout:hover{background:var(--panel-elevated);color:var(--text)}.bottom-nav{display:none}.main{flex:1;padding:28px 32px;max-width:1100px;min-width:0}.main h2{margin-top:0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px}.card .value{font-size:28px;font-weight:700}.card .label{color:var(--text-muted);font-size:13px}.card.alert{border-color:#ff6b6b59}.card.alert .value{color:var(--scam)}.filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.filters select,.filters input{padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:13px}.message-list{display:flex;flex-direction:column;gap:8px}.message-row{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;display:flex;align-items:flex-start;gap:12px}.message-row.scam{border-color:#ff6b6b80;background:var(--scam-bg)}.badge{font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}.badge.scam{background:var(--scam);color:#1a0505}.badge.notification{background:var(--notification-bg);color:var(--notification)}.badge.customer_inquiry{background:var(--customer-bg);color:var(--customer)}.badge.invoice_payment{background:var(--invoice-bg);color:var(--invoice)}.badge.newsletter{background:var(--newsletter-bg);color:var(--newsletter)}.badge.other,.badge.uncategorized{background:var(--other-bg);color:var(--text-muted)}.message-body{flex:1;min-width:0}.message-body .top{display:flex;justify-content:space-between;gap:10px;min-width:0}.message-body .from{font-weight:600;min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-body .subject{color:var(--text);margin:2px 0;overflow-wrap:anywhere}.message-body .summary{color:var(--text-muted);font-size:13px;overflow-wrap:anywhere}.message-body .meta{color:var(--text-muted);font-size:12px;margin-top:6px;overflow-wrap:anywhere}.message-body .date{color:var(--text-muted);font-size:12px;white-space:nowrap;flex-shrink:0}.message-actions{display:flex;gap:6px;flex-wrap:wrap}.message-actions button{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--panel-elevated);color:var(--text);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;transition:background-color .15s ease,transform .1s ease}.message-actions button:hover{background:var(--border)}.message-actions button:active{transform:scale(.97)}.login-shell{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:20px}.login-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:32px;width:320px;max-width:100%;box-shadow:var(--shadow-elevated)}.login-card h1{font-size:18px;margin-top:0;display:flex;align-items:center;gap:8px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;margin-bottom:4px;color:var(--text-muted)}.field input{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px}.field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}.btn-primary{background:var(--primary-solid);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;width:100%;transition:filter .15s ease,transform .1s ease}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-primary:disabled{opacity:.6;cursor:default}.error-text{color:var(--scam);font-size:13px;margin-bottom:12px}.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}table.data-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}table.data-table th,table.data-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}table.data-table tr:last-child td{border-bottom:none}table.data-table th{color:var(--text-muted);font-weight:600;background:var(--panel-elevated)}.form-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:20px}.form-inline .field{margin-bottom:0;min-width:140px}.form-inline button.btn-primary{width:auto}.muted{color:var(--text-muted);font-size:13px}.empty-state{color:var(--text-muted);padding:30px;text-align:center;border:1px dashed var(--border);border-radius:12px}.message-row.clickable{cursor:pointer;transition:border-color .15s ease}.message-row.clickable:hover{border-color:var(--primary)}.modal-overlay{position:fixed;inset:0;background:#000000a6;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;z-index:100;overflow-y:auto}.modal-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:800px;width:100%;padding:24px;position:relative;box-shadow:var(--shadow-elevated)}.modal-close{position:absolute;top:16px;right:16px;border:none;background:var(--panel-elevated);border-radius:8px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted)}.modal-close:hover{color:var(--text)}.modal-close-label{display:none}.modal-header h3{margin:6px 0}.modal-actions{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}.modal-actions button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--panel-elevated);color:var(--text);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}.modal-actions button:hover{background:var(--border)}.feedback-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel-elevated);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:13px}.feedback-box button{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer}.feedback-box button:hover{background:var(--border)}.feedback-correction{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.feedback-correction select{padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:13px}.scam-warning{background:var(--scam-bg);color:var(--scam);border:1px solid rgba(255,107,107,.4);border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:12px}.mail-body{margin-top:8px}.mail-iframe{width:100%;height:65vh;border:1px solid var(--border);border-radius:12px;background:#fff}.mail-text{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:13px;max-height:65vh;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px}.preview-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.preview-row{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 14px;cursor:pointer;display:flex;align-items:baseline;gap:10px;transition:border-color .15s ease}.preview-row:hover{border-color:var(--primary)}.preview-row .from{font-weight:600;white-space:nowrap;flex-shrink:0;max-width:40%;overflow:hidden;text-overflow:ellipsis}.preview-row .subject{color:var(--text-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-row .date{color:var(--text-muted);font-size:12px;white-space:nowrap;flex-shrink:0}.section-title{display:flex;justify-content:space-between;align-items:baseline;margin-top:28px}.checkbox-filter{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)}.settings-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--border)}.settings-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;background:none;color:var(--text-muted);font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.settings-tab:hover{color:var(--text)}.settings-tab.active{color:var(--primary);border-bottom-color:var(--primary)}.pull-indicator{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--primary);transition:height .15s ease,opacity .15s ease}.pull-indicator .spin{animation:pull-spin .8s linear infinite}@keyframes pull-spin{to{transform:rotate(360deg)}}.page-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.refresh-button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--panel-elevated);color:var(--text-muted);border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer}.refresh-button:hover{color:var(--text);border-color:var(--primary)}.refresh-button:disabled{opacity:.6;cursor:default}.refresh-button .spin{animation:pull-spin .8s linear infinite}.notify-toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:4px 8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--panel-elevated);color:var(--text-muted);font-size:12.5px;cursor:pointer;text-align:left}.notify-toggle:hover{color:var(--text);border-color:var(--primary)}.notify-toggle.active{color:var(--primary);border-color:var(--primary);background:var(--primary-bg)}.notify-toggle.notify-hint{align-items:flex-start;cursor:default;line-height:1.4}.notify-toggle.notify-hint svg{flex-shrink:0;margin-top:1px}.notify-toggle.icon-only{margin:0;padding:6px;border-radius:8px}.mobile-topbar{display:none}@media(max-width:767px){.app-shell{flex-direction:column}.sidebar{display:none}.mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:80}.mobile-topbar span{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}.main{max-width:100%;padding:20px 16px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px) + 24px)}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--border);z-index:90;padding-bottom:env(safe-area-inset-bottom,0px)}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--text-muted);font-size:10.5px;font-weight:500;min-height:var(--bottom-nav-height)}.bottom-nav a.active{color:var(--primary)}.modal-overlay{padding:0;align-items:stretch}.modal-card{border-radius:0;max-width:100%;min-height:100dvh;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(env(safe-area-inset-bottom,0px) + 68px)}.mail-iframe,.mail-text{height:50vh;max-height:50vh}.modal-close{position:fixed;inset:auto 0 0;width:100%;height:auto;border-radius:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;z-index:10}.modal-close-label{display:inline}.cards{grid-template-columns:repeat(2,1fr)}.form-inline{flex-direction:column;align-items:stretch}.form-inline .field{min-width:0}.form-inline button.btn-primary{width:100%}.filters{flex-direction:column;align-items:stretch}.filters select,.filters input,.checkbox-filter{width:100%}.message-row{flex-direction:column;align-items:stretch}.message-row .badge{align-self:flex-start}.message-body .top{flex-wrap:wrap}.message-actions{width:100%}.message-actions button{flex:1 1 auto;justify-content:center}.preview-row{flex-wrap:wrap}.preview-row .from{max-width:100%}.preview-row .subject{flex-basis:100%;white-space:normal;overflow:visible;text-overflow:unset;overflow-wrap:anywhere;order:3}table.data-table{min-width:620px}}