:root{--primary: #ff6b1a;--primary-hover: color-mix(in srgb, var(--primary) 86%, #000);--primary-light: color-mix(in srgb, var(--primary) 12%, transparent);--grad-from: #ff8737;--grad-to: #ff5a00;--gradient: linear-gradient(135deg, var(--grad-from), var(--grad-to));--bg: #f8f9fc;--surface: #ffffff;--surface-2: #fafbff;--text: #1c2434;--text-light: #667085;--border: #edf0f5;--success: #16c784;--warning: #ffb020;--danger: #ff5a5f;--shadow-sm: 0 4px 12px rgba(0, 0, 0, .04);--shadow-md: 0 10px 30px rgba(0, 0, 0, .08);--shadow-lg: 0 20px 60px rgba(0, 0, 0, .12);--radius-sm: 12px;--radius-md: 18px;--radius-lg: 28px;--transition: all .2s ease;--sidebar-width: 280px;--mail-list-width: 400px;--details-width: 340px;--brand-font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif}[data-theme=dark]{--bg: #0f172a;--surface: #111827;--surface-2: #1f2937;--text: #f8fafc;--text-light: #94a3b8;--border: #334155;--shadow-sm: 0 4px 12px rgba(0, 0, 0, .3);--shadow-md: 0 10px 30px rgba(0, 0, 0, .45);--primary-light: color-mix(in srgb, var(--primary) 24%, transparent)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%}body{font-family:var(--brand-font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,textarea,select{font-family:inherit}a{text-decoration:none;color:inherit}ul{list-style:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-light) 40%,transparent);border-radius:999px}.btn-primary{border:none;cursor:pointer;padding:12px 20px;border-radius:14px;background:var(--gradient);color:#fff;font-size:15px;font-weight:600;transition:var(--transition);box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 32%,transparent)}.btn-primary:hover{transform:translateY(-2px)}.btn-primary:disabled{opacity:.6;cursor:default;transform:none}.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:10px 16px;border-radius:12px;cursor:pointer;transition:var(--transition);font-weight:500}.btn-ghost:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.error-banner{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);padding:10px 14px;border-radius:12px;font-size:14px}.login-screen{height:100%;display:grid;place-items:center;padding:20px;background:var(--bg)}.login-card{width:100%;max-width:400px;background:var(--surface);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-lg)}.login-logo{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff;background:var(--gradient);margin-bottom:6px}.login-title{font-size:28px;font-weight:700}.login-sub{color:var(--text-light);margin-bottom:8px}.field{display:flex;flex-direction:column;gap:6px;font-size:14px}.field>span{color:var(--text-light);font-weight:500}.field input,.field select,.field textarea{padding:13px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);font-size:15px;transition:var(--transition)}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.field textarea{resize:vertical}.app{display:grid;grid-template-columns:var(--sidebar-width) var(--mail-list-width) 1fr var(--details-width);gap:20px;padding:20px;height:100vh;background:var(--bg)}.panel{background:var(--surface);border-radius:28px;box-shadow:var(--shadow-md);min-height:0}.sidebar{padding:22px;display:flex;flex-direction:column;overflow-y:auto}.logo{display:flex;align-items:center;gap:12px;margin-bottom:26px}.logo-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;background:var(--gradient);overflow:hidden;flex-shrink:0}.logo-icon img{width:100%;height:100%;object-fit:cover}.logo-text h2{font-size:22px;font-weight:700;line-height:1.1}.logo-text span{color:var(--text-light);font-size:13px}.compose-btn{width:100%;margin-bottom:26px;display:flex;align-items:center;justify-content:center;gap:8px}.nav-group{margin-bottom:24px}.nav-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin-bottom:10px;font-weight:600}.nav-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;margin-bottom:3px;cursor:pointer;transition:var(--transition);border:none;background:transparent;color:var(--text);width:100%;text-align:left;font-size:15px}.nav-item:hover{background:var(--primary-light)}.nav-item.active{background:var(--primary-light);color:var(--primary);font-weight:600}.nav-left{display:flex;align-items:center;gap:12px;min-width:0}.nav-left .ico{width:22px;text-align:center;flex-shrink:0}.nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{background:color-mix(in srgb,var(--text-light) 14%,transparent);color:var(--text-light);padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;flex-shrink:0}.nav-item.active .badge{background:var(--primary);color:#fff}.user-card{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--surface-2)}.avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:var(--gradient);flex-shrink:0}.user-meta{min-width:0;flex:1}.user-meta .nm{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-meta .em{font-size:12px;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-btn{background:transparent;border:none;cursor:pointer;color:var(--text-light);font-size:18px;padding:6px;border-radius:10px;transition:var(--transition)}.icon-btn:hover{background:var(--primary-light);color:var(--primary)}.mail-panel{display:flex;flex-direction:column;padding:18px;overflow:hidden}.search-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:var(--surface-2);margin-bottom:16px}.search-bar input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text)}.mail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:0 4px}.mail-header h2{font-size:22px;font-weight:700}.mail-header .count{color:var(--text-light);font-size:14px}.email-scroll{overflow-y:auto;flex:1;padding-right:4px}.email-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;margin-bottom:10px;cursor:pointer;transition:var(--transition)}.email-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.email-card.active{border:2px solid var(--primary);background:var(--primary-light)}.email-card.unread{border-left:4px solid var(--primary)}.email-row{display:flex;align-items:flex-start;gap:12px}.email-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex-shrink:0;background:var(--gradient)}.email-content{flex:1;min-width:0}.email-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.email-to{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-card.unread .email-to{font-weight:800}.email-time{color:var(--primary);font-weight:600;font-size:12px;flex-shrink:0}.email-subject{font-size:14px;margin:4px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-card.unread .email-subject{font-weight:700}.email-preview{color:var(--text-light);font-size:13px;display:flex;align-items:center;gap:6px}.star{background:none;border:none;font-size:18px;line-height:1;padding:0;cursor:pointer;color:color-mix(in srgb,var(--text-light) 45%,transparent);flex-shrink:0}.star.on{color:var(--warning)}.list-state{padding:40px 20px;text-align:center;color:var(--text-light)}.list-state.error{color:var(--danger)}.read-panel{padding:30px;overflow-y:auto;display:flex;flex-direction:column}.read-empty{display:grid;place-items:center;height:100%;color:var(--text-light);text-align:center;padding:40px}.read-empty .big{font-size:48px;margin-bottom:12px;opacity:.4}.read-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.read-title{font-size:30px;font-weight:700;line-height:1.2}.read-meta{display:flex;align-items:center;gap:14px;margin:20px 0 24px;padding-bottom:20px;border-bottom:1px solid var(--border)}.read-meta .email-avatar{width:48px;height:48px}.read-meta .mfrom{font-weight:600}.read-meta .mto,.read-meta .mdate{color:var(--text-light);font-size:13px}.read-body{font-size:15px;line-height:1.8;flex:1}.read-body pre{white-space:pre-wrap;word-break:break-word;font-family:inherit}.read-html{width:100%;min-height:360px;border:1px solid var(--border);border-radius:16px;background:#fff}.attachments{margin-top:24px;display:flex;flex-direction:column;gap:10px}.attachment{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;transition:var(--transition)}.attachment:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.attachment-icon{width:44px;height:44px;border-radius:12px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.attachment-info{flex:1;min-width:0}.attachment-info .fn{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-info .sz{font-size:12px;color:var(--text-light)}.action-bar{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}.ai-thread{margin-top:26px;padding:20px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface));border:1px solid var(--primary-light)}.ai-thread .ai-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-weight:700}.ai-thread .ai-sub{color:var(--text-light);font-size:14px;margin-bottom:14px}.ai-thread .ai-actions{display:flex;gap:10px;flex-wrap:wrap}.ai-pill{border:none;cursor:pointer;padding:10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:14px;transition:var(--transition);color:var(--text)}.ai-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--primary);color:var(--primary)}.ai-pill:disabled{opacity:.55;cursor:default;transform:none}.details-panel{padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}.det-section h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);margin-bottom:12px}.ai-card{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface-2)),var(--surface-2));padding:18px;border-radius:20px;border:1px solid var(--border)}.ai-card .title{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:12px}.ai-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ai-btn{border:none;cursor:pointer;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--border);transition:var(--transition);font-weight:600;font-size:13px;color:var(--text);display:flex;align-items:center;justify-content:center;gap:6px}.ai-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--primary);border-color:var(--primary)}.ai-btn:disabled{opacity:.55;cursor:default;transform:none}.ai-btn.wide{grid-column:span 2}.ai-translate-row{display:flex;gap:8px;margin-top:10px}.ai-translate-row select{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:13px}.ai-output{margin-top:14px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word}.ai-output .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--primary);font-weight:700;margin-bottom:8px;display:block}.ai-loading{display:flex;align-items:center;gap:10px;color:var(--text-light);font-size:14px;margin-top:14px}.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tool{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--border);background:var(--surface);margin-bottom:10px}.tool-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:var(--primary-light)}.tool-body{flex:1;min-width:0}.tool-name{font-weight:600;font-size:14px}.tool-status{font-size:12px;display:flex;align-items:center;gap:5px}.tool-status .dot{width:7px;height:7px;border-radius:50%;display:inline-block}.tool-status.active{color:var(--success)}.tool-status.active .dot{background:var(--success)}.tool-status.inactive{color:var(--text-light)}.tool-status.inactive .dot{background:var(--text-light)}.tool-action{font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:var(--transition);color:var(--text);white-space:nowrap}.tool-action.enable{background:var(--gradient);color:#fff;border:none}.tool-action:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:grid;place-items:center;padding:16px;z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.compose{width:100%;max-width:640px;background:var(--surface);border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:14px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.compose-head{display:flex;align-items:center;justify-content:space-between}.compose-head h3{font-size:20px}.compose-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.sb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.mobile-bar{display:none}@media(max-width:1600px){.app{grid-template-columns:260px 360px 1fr 320px;gap:16px;padding:16px}}@media(max-width:1400px){.app{grid-template-columns:250px 340px 1fr}.details-panel{display:none}}@media(max-width:1024px){.app{display:flex;flex-direction:column;gap:0;padding:0;height:100vh}.mobile-bar{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--border)}.mobile-bar .back{font-size:22px;background:none;border:none;cursor:pointer;color:var(--text);padding:4px 8px}.mobile-bar .ttl{font-weight:700;font-size:17px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel{border-radius:0;box-shadow:none;flex:1 1 auto;min-height:0;overflow-y:auto}.details-panel,.app[data-mobile=nav] .mail-panel,.app[data-mobile=nav] .read-panel,.app[data-mobile=list] .sidebar,.app[data-mobile=list] .read-panel,.app[data-mobile=read] .sidebar,.app[data-mobile=read] .mail-panel{display:none}.read-panel{padding:20px}.read-title{font-size:24px}}