#supano-mail-concept{color-scheme:light dark}
#supano-mail-concept .sm{--sm-bg:light-dark(#fff,#191b1c);--sm-side:light-dark(#f5f5f1,#202322);--sm-text:light-dark(#252b28,#eef0eb);--sm-muted:light-dark(#747c75,#a0a9a1);--sm-line:light-dark(#e8eae4,#343a35);--sm-soft:light-dark(#edf1e9,#2d382d);--sm-accent:light-dark(#375746,#a3c3aa);--sm-on:light-dark(#fff,#18241b);background:var(--sm-bg);color:var(--sm-text);font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;border:1px solid var(--sm-line);border-radius:18px;overflow:hidden;min-height:688px;display:grid;grid-template-columns:180px minmax(0,1fr);position:relative}
#supano-mail-concept .sm *{box-sizing:border-box}
#supano-mail-concept .sm button,#supano-mail-concept .sm input,#supano-mail-concept .sm textarea,#supano-mail-concept .sm select{font:inherit;color:inherit}
#supano-mail-concept .sm button{cursor:pointer;border:0;background:transparent;display:inline-flex;align-items:center;gap:10px;border-radius:9px;padding:9px 11px;text-align:left}
#supano-mail-concept .sm button:hover{background:var(--sm-soft)}
#supano-mail-concept .sm svg{width:17px;height:17px;flex-shrink:0}
#supano-mail-concept .sm aside{background:var(--sm-side);padding:28px 16px 18px;display:flex;flex-direction:column;gap:26px}
#supano-mail-concept .sm .brand{padding:0 9px;font-size:19px;font-weight:650;letter-spacing:2px;display:flex;gap:8px;align-items:center}
#supano-mail-concept .sm .brand em{font-size:12px;letter-spacing:0;font-style:normal;font-weight:400;color:var(--sm-muted)}
#supano-mail-concept .sm .compose{background:var(--sm-accent);color:var(--sm-on);justify-content:center;padding:12px;box-shadow:0 3px 8px #0000000b}
#supano-mail-concept .sm nav{display:flex;flex-direction:column;gap:4px}
#supano-mail-concept .sm .navitem{width:100%;color:var(--sm-muted)}
#supano-mail-concept .sm .navitem.active{background:var(--sm-soft);color:var(--sm-text);font-weight:600}
#supano-mail-concept .sm .count{margin-left:auto;font-size:12px}
#supano-mail-concept .sm .section-label{font-size:10px;letter-spacing:1.6px;color:var(--sm-muted);padding:0 11px;margin-bottom:9px}
#supano-mail-concept .sm .account{font-size:12px;gap:8px;width:100%}
#supano-mail-concept .sm .account.active{background:var(--sm-soft)}
#supano-mail-concept .sm .dot{width:7px;height:7px;border-radius:50%;background:var(--sm-accent);flex-shrink:0}
#supano-mail-concept .sm .gmaildot{background:light-dark(#ca815f,#d6a38b)}
#supano-mail-concept .sm .user{margin-top:auto;display:flex;align-items:center;gap:9px;border-top:1px solid var(--sm-line);padding:18px 7px 0;font-size:12px}
#supano-mail-concept .sm .avatar{width:32px;height:32px;display:grid;place-items:center;background:var(--sm-soft);border-radius:50%;font-size:11px;font-weight:600;flex-shrink:0}
#supano-mail-concept .sm small{color:var(--sm-muted);font-size:11px}
#supano-mail-concept .sm main{min-width:0}
#supano-mail-concept .sm header{height:79px;padding:20px 104px 20px 26px;border-bottom:1px solid var(--sm-line);display:flex;align-items:center;gap:12px}
#supano-mail-concept .sm .searchbox{display:flex;align-items:center;gap:10px;flex:1;color:var(--sm-muted)}
#supano-mail-concept .sm input{border:0;background:transparent;min-width:0;width:100%;outline-offset:5px}
#supano-mail-concept .sm .searchbox kbd{border:1px solid var(--sm-line);padding:0 5px;border-radius:4px;font-size:11px}
#supano-mail-concept .sm .workspace{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(300px,1.1fr);min-height:608px}
#supano-mail-concept .sm .inbox{min-width:0;border-right:1px solid var(--sm-line)}
#supano-mail-concept .sm .inbox-title{padding:24px 22px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
#supano-mail-concept .sm h2{font-size:23px;letter-spacing:-.7px;font-weight:550;margin:0}
#supano-mail-concept .sm .filters{padding:0 22px 18px;display:flex;gap:5px;align-items:center}
#supano-mail-concept .sm .filters button{padding:5px 10px;font-size:12px;color:var(--sm-muted)}
#supano-mail-concept .sm .filters button.active{background:var(--sm-soft);color:var(--sm-text)}
#supano-mail-concept .sm .day{font-size:10px;color:var(--sm-muted);letter-spacing:1.3px;padding:8px 23px}
#supano-mail-concept .sm .message{width:100%;display:block;border-radius:0;padding:17px 22px;border-bottom:1px solid var(--sm-line);position:relative}
#supano-mail-concept .sm .message.selected{background:var(--sm-soft)}
#supano-mail-concept .sm .message.selected:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sm-accent)}
#supano-mail-concept .sm .msg-top{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:12px}
#supano-mail-concept .sm .sender{font-weight:600;flex:1}
#supano-mail-concept .sm .msg-time{color:var(--sm-muted);font-size:10px;font-weight:400}
#supano-mail-concept .sm .subject{font-size:13px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#supano-mail-concept .sm .snippet{font-size:12px;color:var(--sm-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-top:3px}
#supano-mail-concept .sm .tag{font-size:10px;color:var(--sm-muted);display:flex;align-items:center;gap:5px;margin-top:9px}
#supano-mail-concept .sm .tag .dot{width:5px;height:5px}
#supano-mail-concept .sm .reader{padding:22px 28px;min-width:0}
#supano-mail-concept .sm .reader-tools{display:flex;align-items:center;gap:4px;margin-bottom:32px;color:var(--sm-muted)}
#supano-mail-concept .sm .reader-tools button{padding:7px}
#supano-mail-concept .sm .reader-tools .back{display:none}
#supano-mail-concept .sm .reader-tools .right{margin-left:auto}
#supano-mail-concept .sm h1{font-size:24px;line-height:1.25;letter-spacing:-.7px;font-weight:550;margin:0 0 24px}
#supano-mail-concept .sm .person{display:flex;gap:10px;align-items:center;margin-bottom:28px;font-size:12px}
#supano-mail-concept .sm .person .avatar{width:35px;height:35px}
#supano-mail-concept .sm .to{font-size:10px;color:var(--sm-muted);margin-top:3px}
#supano-mail-concept .sm .letter{font-size:13px;line-height:1.85}
#supano-mail-concept .sm .letter p{margin:0 0 17px}
#supano-mail-concept .sm .attachment{display:flex;align-items:center;gap:12px;border:1px solid var(--sm-line);border-radius:10px;padding:12px;margin:24px 0;font-size:12px;width:100%}
#supano-mail-concept .sm .attachment svg{color:var(--sm-accent)}
#supano-mail-concept .sm .replybtn{background:var(--sm-accent);color:var(--sm-on);padding:9px 16px;font-size:12px}
#supano-mail-concept .sm .reply-meta{font-size:10px;color:var(--sm-muted);margin:12px 0}
#supano-mail-concept .sm .toast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:var(--sm-text);color:var(--sm-bg);padding:10px 18px;border-radius:9px;z-index:5;max-width:90%;font-size:12px}
#supano-mail-concept .sm .editor{position:absolute;inset:90px 26px 26px auto;width:min(500px,calc(100% - 52px));background:var(--sm-bg);border:1px solid var(--sm-line);border-radius:14px;box-shadow:0 16px 65px #0003;z-index:4;padding:20px;display:flex;flex-direction:column;gap:16px}
#supano-mail-concept .sm .editor[hidden],#supano-mail-concept .sm .toast[hidden]{display:none}
#supano-mail-concept .sm .editorhead{display:flex;justify-content:space-between;align-items:center;font-weight:600}
#supano-mail-concept .sm .field{display:flex;gap:12px;font-size:12px;padding-bottom:12px;border-bottom:1px solid var(--sm-line);align-items:center}
#supano-mail-concept .sm .field span{color:var(--sm-muted);width:42px;flex-shrink:0}
#supano-mail-concept .sm select{max-width:100%;min-width:0;background:var(--sm-bg);border:0;padding:5px 0}
#supano-mail-concept .sm textarea{resize:vertical;border:0;background:var(--sm-bg);width:100%;flex:1;min-height:150px;padding:5px}
#supano-mail-concept .sm .editorfoot{display:flex;align-items:center;gap:8px}
#supano-mail-concept .sm .demo{font-size:10px;color:var(--sm-muted);margin-left:auto}
#supano-mail-concept .sm.focus .workspace{display:block}
#supano-mail-concept .sm.focus .inbox{border:0}
#supano-mail-concept .sm.focus .reader{display:none;max-width:680px;margin:auto}
#supano-mail-concept .sm.focus.reading .inbox{display:none}
#supano-mail-concept .sm.focus.reading .reader{display:block}
#supano-mail-concept .sm.focus .message{display:grid;grid-template-columns:160px minmax(0,1fr) 68px;column-gap:18px;padding:21px 28px}
#supano-mail-concept .sm.focus .message .msg-top{margin:0}
#supano-mail-concept .sm.focus .message .msg-time{display:none}
#supano-mail-concept .sm.focus .message .tag{margin:0;justify-content:flex-end}
#supano-mail-concept .sm.focus .reader-tools .back{display:inline-flex}
#supano-mail-concept .sm .empty{padding:32px;color:var(--sm-muted);font-size:13px}
@media(max-width:850px){#supano-mail-concept .sm{grid-template-columns:155px minmax(0,1fr)}#supano-mail-concept .sm .workspace{grid-template-columns:minmax(230px,.9fr) minmax(260px,1fr)}#supano-mail-concept .sm .reader{padding:22px}#supano-mail-concept .sm aside{padding-left:10px;padding-right:10px}}
@media(max-width:720px){#supano-mail-concept .sm{display:block;min-height:688px}#supano-mail-concept .sm aside{display:none}#supano-mail-concept .sm header{height:68px;padding-left:22px}#supano-mail-concept .sm .workspace{display:block;min-height:619px}#supano-mail-concept .sm .reader{display:none}#supano-mail-concept .sm.reading .inbox{display:none}#supano-mail-concept .sm.reading .reader{display:block}#supano-mail-concept .sm .reader-tools .back{display:inline-flex}#supano-mail-concept .sm.focus .message{display:block}#supano-mail-concept .sm.focus .message .msg-time{display:block}#supano-mail-concept .sm.focus .message .tag{justify-content:flex-start;margin-top:9px}#supano-mail-concept .sm .inbox-title:after{content:'SUPANO';font-size:11px;letter-spacing:2px;color:var(--sm-muted)}#supano-mail-concept .sm .inbox-title>small{display:none}#supano-mail-concept .sm .editor{inset:78px 12px 12px;width:auto}}
@media(pointer:coarse){#supano-mail-concept .sm button{min-height:44px}#supano-mail-concept .sm input,#supano-mail-concept .sm textarea,#supano-mail-concept .sm select{font-size:16px}}