@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-border: var(--border); --color-ring: var(--ring); --font-sans: var(--font-ui); }
:root { color-scheme: light; --background:#f5f7fa; --foreground:#1d2a3b; --primary:#25466b; --primary-foreground:#fff; --muted:#edf2f7; --muted-foreground:#718096; --border:#dce3eb; --ring:#9bb5d1; --radius:.5rem; --navy:#25466b; --ink:#1d2a3b; --subtle:#f5f7fa; --teal:#3f817c; --amber:#b47b2d; --rose:#a95e6c; --green:#568060; }
*{box-sizing:border-box} html{background:var(--background)} body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-ui),"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:14px} button,input,textarea{font:inherit} button{cursor:pointer}
.mail-app{min-height:100vh;display:flex;flex-direction:column;background:var(--background);color:var(--ink)}
.topbar{height:68px;flex:0 0 68px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:30px}.brand{width:244px;display:flex;align-items:center;gap:10px;color:var(--navy)}.brand-mark{width:35px;height:35px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center}.brand-mark svg{width:18px}.brand strong{display:block;font-size:18px;letter-spacing:-.035em}.brand span{display:block;color:#8b98a8;font-size:10px;margin-top:3px}.top-search{height:38px;max-width:540px;flex:1;background:var(--subtle);border:1px solid transparent;border-radius:5px;display:flex;align-items:center;gap:10px;padding:0 12px;color:#8b98a8}.top-search:focus-within{background:#fff;border-color:var(--ring)}.top-search svg{width:16px}.top-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:20px}.profile-menu{position:relative}.profile{display:flex;align-items:center;gap:9px;border:0;background:transparent;padding:4px 0;color:var(--ink);text-align:left}.profile-copy b,.profile-copy span{display:block}.profile-copy b{font-size:12px}.profile-copy span{font-size:10px;color:#7e8b9b;margin-top:3px}.profile>svg{width:14px;color:#8290a0}.account-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:240px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 10px 28px #17203318;z-index:6}.account-dropdown-copy{padding:8px 9px 10px;border-bottom:1px solid var(--border)}.account-dropdown-copy b,.account-dropdown-copy span{display:block}.account-dropdown-copy b{font-size:12px}.account-dropdown-copy span{font-size:10px;color:#7e8b9b;margin-top:4px}.account-dropdown .logout-button{width:100%;border:0;padding:10px 9px;margin-top:2px;color:var(--rose);justify-content:flex-start}.account-dropdown .logout-button:hover{background:var(--subtle)}.avatar{flex:0 0 36px;width:36px;height:36px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700}.avatar-navy{background:#dce7f2;color:var(--navy)}.avatar-plum{background:#eee1ea;color:#80566f}.avatar-blue{background:#dce9f5;color:#47769b}.avatar-amber{background:#f3e8d5;color:#9d6c25}.avatar-teal{background:#dcefeb;color:#397872}.avatar-rose{background:#f2dfe4;color:#995968}.avatar-green{background:#e0eee3;color:#50795a}.logout-button{display:flex;align-items:center;gap:6px;border:0;border-left:1px solid var(--border);padding:5px 0 5px 18px;background:transparent;color:#748294;font-size:11px}.logout-button svg{width:15px}.mobile-menu{display:none}
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:250px 420px minmax(0,1fr)}.sidebar{background:#fff;border-right:1px solid var(--border);padding:22px 14px 16px;display:flex;flex-direction:column}.sidebar-head{display:flex;justify-content:space-between;align-items:center;padding:0 10px 12px;color:#718096;font-size:11px;font-weight:700}.sidebar-head button,.icon-button,.list-tools button,.toolbar-actions button,.compose-head button,.reply-actions button,.list-footer button{border:0;background:transparent;color:#718096;display:grid;place-items:center;padding:7px;border-radius:5px}.close-mobile{display:none}.compose-button{height:42px;margin:2px 6px 20px;border:0;border-radius:5px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;gap:9px;padding:0 13px}.compose-button svg{width:16px}.compose-button span{margin-left:auto;color:#b8c9dc;font-size:10px;font-weight:400}.folder-nav{display:flex;flex-direction:column;gap:2px}.folder-nav button,.contacts-entry{height:36px;border:0;border-radius:5px;background:transparent;color:#607084;display:flex;align-items:center;gap:10px;padding:0 11px;text-align:left;font-size:12px}.folder-nav button svg,.contacts-entry>svg{width:16px}.folder-nav button.active,.contacts-entry.active{background:#eaf0f7;color:var(--navy);font-weight:700}.folder-nav em,.contacts-entry em{margin-left:auto;border-radius:9px;background:#e5ebf2;color:#607084;padding:2px 6px;font-style:normal;font-size:10px}.nav-divider{height:1px;background:var(--border);margin:18px 10px}.contacts-entry svg:last-child{width:13px;color:#91a0ae}.contact-list{display:flex;flex-direction:column;gap:1px;margin:4px 0 3px 6px}.contact-row{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:5px 5px;text-align:left;color:var(--ink);border-radius:5px}.contact-row:hover{background:var(--subtle)}.contact-row .avatar{width:28px;height:28px;flex-basis:28px;font-size:10px}.contact-row b,.contact-row small{display:block}.contact-row b{font-size:11px}.contact-row small{font-size:9px;color:#8592a1;margin-top:2px}.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:4px}.sidebar-bottom>button{display:flex;gap:9px;align-items:center;border:0;background:transparent;color:#718096;padding:8px 11px;text-align:left;font-size:11px}.sidebar-bottom svg{width:15px}.storage{border-top:1px solid var(--border);margin:11px 10px 0;padding-top:13px;color:#8c99a8;font-size:10px}.storage div:first-child{display:flex;justify-content:space-between}.storage b{color:#667589;font-weight:500}.storage-bar{height:5px;background:#e7edf3;border-radius:4px;margin-top:8px;overflow:hidden}.storage-bar i{display:block;width:24%;height:100%;background:var(--teal)}
.mail-list{background:#fafbfd;border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}.list-head{padding:25px 24px 16px;display:flex;justify-content:space-between;align-items:flex-start}.list-head h1{margin:0 0 4px;font-size:20px;letter-spacing:-.03em}.list-head span{font-size:11px;color:#8491a0}.list-tools{display:flex;gap:2px}.list-tools button:hover,.toolbar-actions button:hover,.icon-button:hover,.list-footer button:hover{background:var(--muted);color:var(--navy)}.list-tools svg{width:16px}.filter-row{display:flex;gap:20px;padding:0 24px;border-bottom:1px solid var(--border)}.filter-row button{border:0;background:transparent;padding:0 0 12px;color:#8491a0;font-size:11px;border-bottom:2px solid transparent}.filter-row .filter-active{color:var(--navy);font-weight:700;border-color:var(--navy)}.filter-row b{color:var(--rose);font-size:10px}.mail-items{overflow:auto;flex:1}.mail-item{display:flex;gap:11px;padding:14px 17px 13px 24px;border-bottom:1px solid #e9eef3;min-height:102px;cursor:pointer;transition:background .15s}.mail-item:hover{background:#fff}.mail-item.selected{background:#fff;box-shadow:inset 3px 0 0 var(--navy)}.mail-summary{min-width:0;flex:1}.mail-meta{display:flex;justify-content:space-between;gap:8px}.mail-meta b{font-size:12px}.mail-meta time{font-size:10px;color:#8c99a8;white-space:nowrap}.mail-item h2{margin:5px 0 4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-item.unread h2,.mail-item.unread .mail-meta b{font-weight:800}.mail-item p{margin:0;color:#8794a3;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.star{border:0;background:transparent;color:#c5ced8;padding:2px;height:22px}.star svg{width:15px}.starred{color:var(--amber)}.mail-tags{display:flex;align-items:center;gap:7px;margin-top:8px}.mail-tags svg{width:12px;color:#99a5b2}.tag{border-radius:3px;padding:2px 6px;font-size:9px}.tag-plum{background:#f0e3eb;color:#80566f}.tag-teal{background:#dff0ed;color:#397872}.tag-amber{background:#f4ead7;color:#956725}.tag-rose{background:#f1e2e5;color:#995968}.list-footer{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 24px;color:#8a97a5;font-size:10px;background:#fff}.list-footer div{display:flex;gap:2px}.list-footer button{padding:5px}.list-footer svg{width:15px}
.mail-detail{background:#fff;min-width:0}.detail-toolbar{height:60px;display:flex;align-items:center;padding:0 28px;border-bottom:1px solid var(--border)}.toolbar-actions{margin-left:auto;display:flex;align-items:center;gap:3px}.toolbar-actions span{width:1px;height:18px;background:var(--border);margin:0 8px}.toolbar-actions svg{width:16px}.back-mobile{display:none}.detail-content{padding:30px 46px;max-width:940px}.detail-title-row{display:flex;justify-content:space-between;gap:16px}.eyebrow{color:#8d9aa8;font-size:10px}.detail-title-row h1{font-size:21px;margin:8px 0 23px;letter-spacing:-.03em}.star.large{padding-top:11px}.star.large svg{width:18px}.sender-row{display:flex;align-items:center;gap:11px;padding:15px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.sender-row b,.sender-row span{display:block}.sender-row b{font-size:12px}.sender-row span{color:#8b98a7;font-size:10px;margin-top:3px}.sender-row time{margin-left:auto;color:#8b98a7;font-size:10px}.sender-row>button{border:0;background:transparent;color:#8b98a7}.sender-row button svg{width:16px}.message-body{padding:25px 0 18px 47px;color:#455466;font-size:13px;line-height:1.85}.message-body p{margin:0 0 16px}.message-body .muted{color:#8d9aa8;font-size:11px}.attachment{border:1px solid var(--border);background:#fafbfd;border-radius:5px;min-height:58px;display:flex;align-items:center;gap:10px;padding:9px 11px;margin:22px 0;max-width:520px}.file-icon{color:var(--teal);background:#e2f1ee;border-radius:5px;padding:6px}.file-icon svg{width:17px}.attachment b,.attachment span{display:block}.attachment b{font-size:11px}.attachment span{color:#8d9aa8;font-size:9px}.attachment button{margin-left:auto;border:0;background:transparent;color:var(--navy);font-size:10px}.attachment button+button{margin-left:0}.reply-actions{display:flex;gap:8px;padding-left:47px}.reply-actions button{display:flex;align-items:center;gap:7px;border:1px solid var(--border);padding:8px 13px;color:var(--navy);font-size:11px}.reply-actions svg{width:14px}.compose-modal{position:fixed;inset:0;background:#1d2a3b38;display:grid;place-items:center;z-index:10;padding:18px}.compose-card{width:min(620px,100%);background:#fff;border-radius:7px;box-shadow:0 20px 60px #1720332b;overflow:hidden}.compose-head{display:flex;justify-content:space-between;align-items:center;padding:15px 19px;border-bottom:1px solid var(--border);font-size:13px}.compose-head button svg{width:16px}.compose-fields{padding:0 19px}.compose-fields input{display:block;width:100%;border:0;border-bottom:1px solid var(--border);padding:13px 0;outline:0;font-size:12px}.compose-card textarea{width:100%;height:220px;border:0;resize:vertical;padding:17px 19px;outline:0;font-size:12px}.compose-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 19px;border-top:1px solid var(--border)}.compose-foot>div{display:flex;gap:2px}.compose-foot button{border:0;background:transparent;color:#7d8b9a;padding:6px}.compose-foot svg{width:15px}.compose-foot .send-button{display:flex;align-items:center;gap:7px;padding:8px 15px;color:#fff;background:var(--navy);border-radius:4px;font-size:11px}
@media(max-width:1050px){.workspace{grid-template-columns:220px minmax(330px,420px) minmax(400px,1fr)}.topbar{padding:0 20px;gap:18px}.brand{width:220px}.profile-copy,.profile>svg{display:none}.detail-content{padding-left:30px;padding-right:30px}}
@media(max-width:760px){.topbar{height:62px;flex-basis:62px;padding:0 13px;gap:11px}.mobile-menu{display:grid;order:-1;border:0;background:transparent;color:var(--navy);padding:5px}.mobile-menu svg{width:20px}.brand{width:auto}.brand strong{font-size:16px}.brand span{display:none}.top-search{height:35px}.top-search kbd{display:none}.top-actions{gap:6px}.logout-button{border-left:0;padding-left:4px}.logout-button span{display:none}.workspace{display:block}.sidebar{position:fixed;inset:0 auto 0 0;width:278px;z-index:5;transform:translateX(-100%);transition:transform .2s;box-shadow:10px 0 30px #17203322}.sidebar-open{transform:translateX(0)}.close-mobile{display:grid}.mail-list{height:calc(100vh - 62px);border-right:0}.mail-detail{height:calc(100vh - 62px)}.mobile-hidden{display:none!important}.list-head{padding:20px 17px 14px}.filter-row{padding:0 17px}.mail-item{padding-left:17px;padding-right:13px}.detail-toolbar{height:55px;padding:0 13px}.back-mobile{display:flex;align-items:center;gap:3px;border:0;background:transparent;color:var(--navy);font-size:11px}.back-mobile svg{width:15px}.detail-content{padding:21px 17px}.detail-title-row h1{font-size:18px;line-height:1.4;margin-bottom:18px}.sender-row time,.sender-row>button{display:none}.message-body,.reply-actions{padding-left:0}.message-body{font-size:12px;line-height:1.9}.attachment{max-width:100%}.attachment button:not(:last-child){display:none}}