:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#202526;background:#fafcfb;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}.app-shell{display:flex;min-height:100vh}aside{width:240px;background:#fff;border-right:1px solid #e8ecea;padding:25px 16px;display:flex;flex-direction:column;gap:22px}.brand-mark{font-weight:900;letter-spacing:-1px;font-size:22px;color:#111}.profile{display:flex;gap:10px;align-items:center;padding:11px 8px;background:#f7faf8;border-radius:9px}.avatar{width:28px;height:28px;border-radius:50%;background:#d6f1e4;color:#10844f;display:grid;place-items:center;font-weight:700}.profile strong,.profile small{display:block;font-size:11px}.profile small{color:#8b9691;margin-top:3px}.compose-button,.primary-button{background:#06a94f;color:#fff;padding:11px 14px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600}.compose-button{font-size:12px}nav{display:flex;flex-direction:column;gap:5px}nav button{display:flex;align-items:center;gap:10px;padding:10px;border-radius:7px;text-align:left;color:#76817c;font-size:12px}nav button.active{background:#e8f7ef;color:#168d51}nav span{margin-left:auto}.logout{margin-top:auto;display:flex;gap:9px;align-items:center;color:#8b9691;font-size:12px;padding:10px}.content{flex:1;padding:37px 52px;max-width:1300px}header{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}.eyebrow{color:#9aa59f;font-size:11px;margin:0 0 7px}h1{font-size:26px;letter-spacing:-.7px;margin:0}.search{display:flex;align-items:center;gap:8px;background:#f1f5f3;color:#98a29e;padding:9px 13px;border-radius:20px;width:255px}.search input{border:0;outline:0;background:none;width:100%;font-size:12px}.stats{display:flex;gap:12px;margin-bottom:24px}.stats>div{background:#fff;border:1px solid #e7ece9;border-radius:10px;padding:17px 20px;display:flex;gap:12px;min-width:170px;color:#0aa650}.stats span small,.stats span b{display:block}.stats span b{color:#242b28;font-size:17px}.stats span small{color:#87938d;font-size:11px;margin-top:3px}.table-card{background:#fff;border:1px solid #e7ece9;border-radius:11px;overflow:hidden}.table-title{display:flex;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #edf0ef}.table-title h2{font-size:14px;margin:0}.table-title span{color:#a1aaa5;font-size:11px}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:15px 22px;border-bottom:1px solid #f0f3f1;font-size:12px}th{color:#9aa49f;font-weight:500;font-size:11px}td{color:#4f5a55}.status{border-radius:20px;padding:4px 9px;background:#e8f7ef;color:#108b4e;font-size:10px}.status.failed{background:#fff0ee;color:#d65a4b}.empty{height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#9aa49f}.empty strong{color:#515c56}.login-page{min-height:100vh;display:grid;place-items:center;background:#fff}.login-card{width:356px;height:355px;background:#fff;border:1px solid #dfe4e1;border-radius:8px;padding:39px 41px 37px;text-align:center}.login-card h1{font-size:29px;line-height:35px;letter-spacing:-.7px;margin:0 0 28px}.google-button,.primary-button{width:100%;text-decoration:none}.google-button{height:34px;display:flex;align-items:center;justify-content:center;gap:9px;background:#e3f6eb;border-radius:8px;color:#252a28;font-size:12px;margin-bottom:20px}.google-g{font-size:16px;font-weight:800;font-family:Arial,sans-serif;color:#4285f4}.divider{height:20px;display:flex;align-items:center;gap:14px;color:#a8adaa;font-size:11px;margin:0 0 16px;white-space:nowrap}.divider:before,.divider:after{content:"";height:1px;background:#e5e9e7;flex:1}.divider span{background:#fff}.login-form{display:flex;flex-direction:column;gap:9px}.login-form input{height:47px;border:0;background:#f3f6f4;border-radius:8px;padding:0 17px;color:#3d4541;font-size:12px;outline:0}.login-form input::placeholder{color:#69736f}.login-form .primary-button{height:35px;border:0;margin-top:15px;background:#00ad45;color:#fff;border-radius:8px;font-size:12px;align-items:center;justify-content:center}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14251e55;display:grid;place-items:center;padding:20px}.compose-card{background:#fff;border-radius:12px;width:min(760px,100%);padding:24px;box-shadow:0 18px 60px #102d2050}.compose-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.back-button{font-size:14px}.outline-button{display:flex;align-items:center;gap:6px;border:1px solid #2bbd75;color:#149b58;border-radius:18px;padding:7px 14px;font-size:11px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label,.controls label{display:flex;flex-direction:column;gap:7px;color:#69756f;font-size:11px}.form-grid input,.controls input{border:0;border-bottom:1px solid #e5eae7;padding:9px 0;outline:0;color:#3e4944}.file-input{justify-content:end}.file-input span{color:#149b58;display:flex;align-items:center;gap:5px}.file-input input{display:none}.recipient-count{margin:18px 0;padding:10px 12px;background:#f3faf6;border-radius:7px;color:#168d51;font-size:11px;display:flex;align-items:center;gap:7px}.controls{display:flex;gap:20px;margin-bottom:18px}.controls label{width:180px}.body-editor{width:100%;height:220px;border:0;background:#fafcfa;border-radius:7px;resize:vertical;padding:14px;outline:0}.error{color:#c84e42;font-size:12px}@media (max-width:760px){aside{width:190px}.content{padding:25px 20px}header{display:block}.search{margin-top:20px;width:100%}th,td{padding:12px 10px}.compose-card{padding:18px}.login-card{width:min(356px,calc(100vw - 32px));padding-left:41px;padding-right:41px}}.app-shell{background:#fff;min-height:100vh}.app-shell aside{width:210px;padding:17px 14px 20px;gap:12px}.app-shell .brand-mark{font-size:20px;margin:0 10px 0 2px}.app-shell .profile{width:100%;border:0;padding:8px 7px;background:#f7faf8;gap:8px;text-align:left}.app-shell .profile>div:nth-child(2){min-width:0;flex:1}.app-shell .profile strong,.app-shell .profile small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-shell .profile small{font-size:10px}.app-shell .avatar{width:25px;height:25px;font-size:11px}.app-shell .compose-button{height:28px;padding:0;border:1px solid #08ac4f;background:#fff;color:#08a94e;border-radius:14px;font-size:11px;font-weight:500}.app-shell .nav-label{font-size:10px;color:#a6afaa;letter-spacing:.3px;margin:8px 10px 1px}.app-shell nav{gap:1px}.app-shell nav button{font-size:12px;padding:9px;gap:7px}.app-shell nav button.active{background:#e5f6ec;color:#4c5d54}.app-shell .logout{display:none}.app-shell .content{max-width:none;padding:17px 28px 0}.app-shell header{height:32px;margin:0 0 5px;align-items:center;justify-content:space-between}.app-shell .search{width:385px;height:27px;padding:4px 10px;border-radius:14px;background:#f4f7f5;font-size:12px}.app-shell .search input{font-size:11px}.app-shell .toolbar{display:flex;gap:17px;color:#9da7a2;margin-right:250px}.message-list{max-width:100%;border-top:0}.message-row{height:50px;border-bottom:1px solid #f0f2f1;display:grid;grid-template-columns:145px minmax(0,1fr) 22px;align-items:center;font-size:12px;color:#303835}.message-recipient{font-weight:600}.message-preview{display:flex;align-items:center;min-width:0;gap:7px;white-space:nowrap;overflow:hidden}.message-preview strong{font-size:11px;font-weight:500}.preview-text{color:#929d97;overflow:hidden;text-overflow:ellipsis;font-size:11px}.time-pill,.sent-pill{display:flex;align-items:center;gap:3px;border-radius:10px;padding:5px 8px;font-size:10px;white-space:nowrap}.time-pill{background:#fff0d9;color:#f28b34}.sent-pill{background:#f0f2f1;color:#6d7772}.row-star{color:#aab3ae;justify-self:end}@media (max-width:760px){.app-shell aside{width:155px}.app-shell .content{padding-left:18px;padding-right:18px}.app-shell .search{width:240px}.app-shell .toolbar{margin-right:0}.message-row{grid-template-columns:95px minmax(0,1fr) 18px}.preview-text{display:none}}.profile-wrap{position:relative}.profile-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;background:#fff;border:1px solid #e1e8e4;border-radius:7px;box-shadow:0 6px 18px #18352a1c;padding:4px;z-index:5}.profile-menu button{width:100%;display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:5px;color:#59655f;font-size:11px;text-align:left}.profile-menu button:hover{background:#edf8f1;color:#0b9c4c}.filter-wrap{position:relative}.refresh-button{display:grid;place-items:center;color:#9da7a2;padding:0}.refresh-button:disabled{opacity:.55;cursor:wait}.refresh-button:not(:disabled):hover{color:#159c56}.filter-popover{position:absolute;right:-8px;top:24px;width:185px;background:#fff;border:1px solid #e1e8e4;border-radius:7px;box-shadow:0 7px 20px #18352a1c;padding:13px;z-index:6}.filter-popover strong{display:block;color:#46534c;font-size:12px;margin-bottom:12px}.filter-popover label{display:flex;flex-direction:column;gap:5px;color:#89948e;font-size:10px;margin-bottom:9px}.filter-popover input{border:1px solid #dfe7e2;border-radius:4px;padding:5px;font-size:11px;color:#435049}.filter-popover button{border:1px solid #32b974;color:#159c56;border-radius:12px;padding:4px 11px;font-size:10px;margin-top:3px}.clickable{cursor:pointer}.clickable:hover{background:#fbfdfc}.detail-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#15251d55;display:grid;place-items:center;padding:24px;z-index:20}.detail-card{width:min(650px,100%);background:#fff;border-radius:10px;padding:28px;box-shadow:0 18px 60px #102d2050}.detail-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #edf1ef;padding-bottom:18px}.detail-header h2{margin:4px 0 0;font-size:20px}.detail-actions{display:flex;align-items:center;gap:12px}.close-detail{font-size:26px;color:#8b9691;line-height:1}.detail-meta{display:flex;gap:35px;padding:18px 0;border-bottom:1px solid #edf1ef;color:#53615a;font-size:12px}.detail-meta span{display:flex;flex-direction:column;gap:5px}.detail-meta b{color:#9aa59f;font-size:10px;font-weight:500}.detail-body{padding:22px 4px;min-height:180px;color:#46524c;font-size:14px;line-height:1.7;white-space:pre-wrap}.detail-form{display:flex;flex-direction:column;gap:15px;padding-top:20px}.detail-form label{display:flex;flex-direction:column;gap:7px;color:#68756e;font-size:11px}.detail-form input,.detail-form textarea{border:1px solid #e1e8e4;border-radius:6px;padding:10px;outline:0}.detail-form textarea{height:170px;resize:vertical}.detail-form .primary-button{border:0}.detail-form .outline-button{font-size:11px}.compose-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;padding:0;z-index:10}.compose-screen .compose-card{width:100%;height:100%;max-width:none;border-radius:0;padding:24px 12%;box-shadow:none;background:#fff}.compose-screen .compose-header{height:34px;margin-bottom:20px}.compose-screen .back-button{font-size:17px;color:#1f2925;display:flex;gap:7px;align-items:center}.compose-screen .back-button span{font-size:17px}.compose-actions{display:flex;align-items:center;gap:10px;position:relative}.icon-action{color:#14a55a;padding:3px}.compose-screen .outline-button{height:29px;padding:5px 16px;font-size:12px}.hidden-file-input{display:none}.attachment-row{height:34px;display:flex;align-items:center;gap:8px;color:#159c56;background:#f2faf5;border-radius:5px;padding:0 10px;font-size:12px;margin-top:7px}.attachment-row b{font-weight:400;color:#7a8780;margin-left:4px}.schedule-popover{position:absolute;right:0;top:38px;width:215px;background:#fff;border:1px solid #e5e9e7;border-radius:6px;box-shadow:0 4px 12px #20352b20;padding:14px;z-index:3}.schedule-popover strong{font-size:13px;display:block;margin-bottom:12px}.schedule-popover label{color:#929d97;font-size:11px;display:flex;flex-direction:column;gap:6px}.schedule-popover input{font-size:11px;border:1px solid #e3e8e5;border-radius:4px;padding:6px}.schedule-popover button{display:block;margin:12px 0 0 auto;border:1px solid #31b975;color:#159c56;border-radius:12px;padding:4px 13px;font-size:11px}.schedule-popover .quick-time{width:100%;border:0;border-radius:0;text-align:left;margin:0;padding:8px 0;color:#52605a}.schedule-popover .quick-time:hover{color:#0aab50}.schedule-popover .done-time{margin-top:10px}.compose-fields{max-width:100%;margin-left:9%}.compose-row{min-height:44px;border-bottom:1px solid #e8ecea;display:flex;align-items:center;font-size:13px;color:#1f2724}.compose-row>span{width:42px;flex:none}.compose-row>input,.sender-select{border:0;outline:0;background:#f4f7f5;border-radius:5px;padding:6px 10px;font-size:12px;color:#313a36;width:180px}.compose-row:nth-child(2)>input{background:transparent}.compose-row:nth-child(3)>input{background:transparent;width:100%}.to-field{display:flex;align-items:center;gap:6px;flex:1;min-height:36px;position:relative}.placeholder{color:#adb5b1}.recipient-chip{border:1px solid #34bd73;color:#138c4e;border-radius:11px;padding:4px 8px;font-size:11px}.upload-link{margin-left:auto;color:#0aab50;display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer}.upload-link input{display:none}.compose-options{height:45px;display:flex;align-items:center;gap:20px;font-size:12px;color:#252d29}.compose-options label{display:flex;align-items:center;gap:8px}.compose-options input,.compose-options select{width:72px;height:25px;border:1px solid #e0e6e2;border-radius:5px;text-align:center;outline:0;font-size:11px;color:#56615b;background:#fff}.compose-options .start-time{display:none}.editor-shell{max-width:100%;margin-left:9%;height:340px;background:#fafbfa;border-radius:6px;position:relative}.body-editor{height:100%;width:100%;border:0;background:transparent;padding:15px 11px 50px;resize:none;outline:0;font-size:13px;color:#39433e}.editor-toolbar{position:absolute;top:39px;left:8px;right:8px;height:31px;border-radius:16px;background:#fff;display:flex;align-items:center;gap:16px;padding:0 13px;color:#7f8984;border-top:1px solid #f1f3f2}.editor-shell .body-editor::placeholder{color:#a7afab;font-size:12px}.error{margin-left:9%;font-size:12px}@media (max-width:760px){.compose-screen .compose-card{padding:18px 5%}.compose-fields,.editor-shell{margin-left:0}.compose-row>span{width:38px}.compose-options{gap:9px}.compose-options label{gap:4px}.editor-shell{height:270px}}
