:root{
  --bg:#f6f8fc;--surface:#fff;--search:#eaf1fb;--search-focus:#fff;--text:#202124;--muted:#5f6368;
  --border:#e5e8ef;--blue:#0b57d0;--blue-light:#d3e3fd;--read:#f2f6fc;--icon:#5f6368;
  --shadow:0 1px 4px rgba(60,64,67,.07);--font:Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{height:100%;scroll-behavior:auto}
body{font-family:var(--font);background:var(--bg);color:var(--text);margin:0;height:100%;font-size:14px;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
button[disabled]{opacity:.3;cursor:default}
[hidden]{display:none!important}
.svg-sprites{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-button{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;color:var(--icon);transition:background .15s}
.icon-button:hover:not(:disabled){background:#e9edf4}
.app-shell{min-height:100dvh;display:flex;flex-direction:column}
.topbar{height:72px;min-height:72px;display:flex;align-items:center;gap:14px;padding:0 24px 0 15px;position:relative;z-index:5}
.brand-area{width:236px;flex:0 0 236px;display:flex;align-items:center;gap:14px}
.menu-button{margin-left:2px}
.brand{display:inline-flex;gap:11px;align-items:center;white-space:nowrap}
.brand-icon{width:34px;height:34px;border-radius:10px;background:#d3e3fd;color:#2763b3;display:flex;justify-content:center;align-items:center}
.brand-icon .icon{width:21px;height:21px;stroke-width:2}
.brand-word{font-size:24px;font-weight:500;letter-spacing:.02em;color:#4d596c}
.search-box{display:flex;align-items:center;gap:15px;background:var(--search);height:48px;border-radius:25px;padding:0 16px;max-width:730px;flex:1;min-width:120px;transition:background .2s,box-shadow .2s}
.search-box:focus-within{background:#fff;box-shadow:0 1px 6px rgba(60,64,67,.23)}
.search-box .search-icon{width:22px;height:22px;color:#454e5c}
.search-box input{border:0;outline:0!important;background:transparent;min-width:0;width:100%;color:var(--text);font-size:15px;letter-spacing:.01em}
.search-box input::placeholder{color:#5c6674;opacity:1}
.search-box input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-clear{border:0;background:transparent;display:flex;align-items:center;color:var(--muted);padding:4px;border-radius:50%}
.search-clear:hover{background:#dfe6f0}
.search-clear .icon{width:18px;height:18px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;color:#687487;white-space:nowrap}
.topbar-label{font-size:13px}
.layout{min-height:0;display:flex;flex:1;align-items:stretch}
.sidebar{width:263px;flex:0 0 263px;display:flex;flex-direction:column;padding:16px 13px 26px 0}
.folder-nav{padding:4px 0 0}
.folder-link{height:41px;display:flex;align-items:center;gap:18px;padding:0 19px 0 26px;border-radius:0 24px 24px 0;color:#444746;font-size:14px;white-space:nowrap;margin:2px 0;transition:background .15s}
.folder-link .icon{width:19px;height:19px}
.folder-link:hover{background:#e6eaf2}
.folder-link.active{background:var(--blue-light);color:#001d35;font-weight:700}
.folder-link.active:hover{background:#c6dafb}
.folder-count{margin-left:auto;font-size:12px;min-width:12px;text-align:right}
.sidebar-bottom{font-size:12px;color:#87909e;margin:auto 0 0;padding:12px 15px 0 27px}
.mail-panel{background:var(--surface);border-radius:16px 16px 0 0;box-shadow:var(--shadow);flex:1;min-width:0;margin:0 16px 0 0;min-height:calc(100dvh - 72px);overflow:hidden}
.list-top{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 27px 0 31px;border-bottom:1px solid var(--border)}
.list-heading-wrap{display:flex;align-items:baseline;gap:13px;min-width:0}
.list-top h1{font-size:19px;line-height:1.3;margin:0;font-weight:600;white-space:nowrap}
.list-count{font-size:12px;color:#68717d;white-space:nowrap}
.message-list{width:100%}
.message-row{width:100%;display:grid;grid-template-columns:42px 18px minmax(90px,165px) minmax(0,1fr) minmax(70px,94px);align-items:center;min-height:54px;gap:10px;border:0;border-bottom:1px solid #e9edf3;padding:0 24px 0 17px;text-align:left;color:var(--text);background:#f2f6fc;position:relative;cursor:pointer}
.message-row:hover{box-shadow:inset 0 1px 1px rgba(60,64,67,.08),inset 0 -1px 1px rgba(60,64,67,.08),0 2px 5px rgba(60,64,67,.14);z-index:1}
.message-row.unread{background:#fff;font-weight:700}
.message-row .star-button{background:transparent;border:0;border-radius:50%;color:#a6acb4;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin:0 auto}
.message-row .star-button:hover{color:#5c6673;background:#eef2f8}
.star-button.starred,.reader-star.starred{color:#f4b400!important}
.star-button.starred .icon,.reader-star.starred .icon{fill:#f4b400;stroke:#f4b400}
.read-indicator{display:flex;justify-content:center;align-items:center;width:16px;height:20px}
.read-indicator::before{content:"";height:7px;width:7px;border-radius:50%;background:transparent}
.unread .read-indicator::before{background:#1a73e8}
.message-from{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.message-preview{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.message-subject{color:#202124}
.message-snippet{color:#626a73;font-weight:400}
.message-date{font-size:12px;text-align:right;white-space:nowrap;color:#5f6368}
.unread .message-date{color:#202124}
.empty-state{display:flex;align-items:center;flex-direction:column;padding:100px 18px;color:#76808c;gap:9px}
.empty-state>.icon{width:34px;height:34px;stroke-width:1.35;color:#a1adbd}
.empty-state p{font-size:14px;margin:8px 0}
.reader-screen{min-height:inherit}
.reader-toolbar{height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:0 24px}
.toolbar-start,.toolbar-end{display:flex;align-items:center;gap:7px}
.toolbar-divider{height:24px;border-left:1px solid #e0e5ec;margin:0 8px}
.reader-position{font-size:12px;color:#737a85;margin-right:14px}
.message-article{padding:32px 68px 85px;max-width:1100px}
.message-headline{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:0 0 31px}
.message-headline h1{font-size:26px;line-height:1.45;letter-spacing:.005em;font-weight:500;margin:0;overflow-wrap:anywhere}
.inbox-chip{font-size:11px;color:#696f76;background:#e7eaf0;border-radius:4px;padding:3px 8px;line-height:1.5;white-space:nowrap}
.message-sender-row{display:flex;align-items:center;gap:13px;margin-bottom:32px}
.sender-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;background:#dae7fc;color:#2b5c9f;font-size:18px;font-weight:600}
.sender-details{min-width:0;display:flex;flex-direction:column;gap:4px}
.sender-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.recipient{font-size:12px;color:#69717c}
.message-meta{margin-left:auto;display:flex;align-items:center;gap:13px;color:#727a84;white-space:nowrap}
.message-meta time{font-size:12px}
.message-body{font-size:16px;line-height:2.05;color:#292d34;max-width:755px;overflow-wrap:anywhere;letter-spacing:.004em}
.message-body p{margin:0 0 1.5em;white-space:pre-wrap}
.message-body p:last-child{margin-bottom:0}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,25px);background:#32353b;color:#fff;padding:12px 20px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:20;box-shadow:0 4px 14px #0002;font-size:13px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.drawer-scrim{display:none}
.tracking-notice{font-size:10px;line-height:1.7;color:#87909e;margin:10px 17px 0 27px}
@media (min-width:851px){
  .app-shell.sidebar-collapsed .sidebar{width:0;flex-basis:0;padding:0;visibility:hidden;overflow:hidden}
  .app-shell.sidebar-collapsed .mail-panel{margin-left:16px}
}
@media (max-width:1120px){
  .brand-area{width:220px;flex-basis:220px}.sidebar{width:237px;flex-basis:237px}
  .message-article{padding:32px 44px 76px}
  .message-row{grid-template-columns:38px 12px minmax(75px,125px) minmax(0,1fr) minmax(65px,82px);gap:7px;padding-right:17px}
}
@media (max-width:850px){
  .topbar{height:64px;min-height:64px;padding:0 15px 0 9px;gap:12px}
  .brand-area{width:auto;flex:0 0 auto;gap:6px}.brand-icon{width:32px;height:32px}.brand-word{font-size:22px}
  .topbar-right{display:none}
  .sidebar{position:fixed;z-index:12;top:64px;bottom:0;left:0;transform:translateX(-110%);transition:transform .2s;background:var(--bg);box-shadow:4px 0 16px rgba(18,35,60,.08);width:280px;padding:17px 12px 30px 0}
  .sidebar.open{transform:translateX(0)}
  .drawer-scrim:not([hidden]){display:block;position:fixed;inset:64px 0 0;background:#26334448;z-index:11}
  .mail-panel{margin:0;border-radius:12px 12px 0 0;min-height:calc(100dvh - 64px)}
  .list-top{height:65px}
  .message-row{grid-template-columns:36px 12px minmax(80px,115px) minmax(0,1fr) minmax(65px,80px);min-height:65px}
}
@media (max-width:600px){
  .topbar{gap:9px;padding-right:11px}.brand-area{gap:2px}.brand{gap:6px}.brand-word{font-size:19px}
  .menu-button{width:35px;height:38px}.brand-icon{width:28px;height:28px;border-radius:8px}.brand-icon .icon{width:18px;height:18px}
  .search-box{height:42px;padding:0 11px;gap:8px;min-width:0}.search-box .search-icon{width:19px;height:19px}.search-box input{font-size:13px}
  .list-top{padding:0 15px 0 18px}.list-top h1{font-size:17px}.list-count{font-size:12px}
  .message-row{grid-template-columns:30px 11px minmax(0,1fr) minmax(62px,80px);grid-template-rows:auto auto;column-gap:8px;row-gap:0;min-height:86px;padding:12px 12px 11px 9px}
  .star-button{grid-column:1;grid-row:1/span 2}.read-indicator{grid-column:2;grid-row:1/span 2}
  .message-from{grid-column:3;grid-row:1;font-size:14px;line-height:20px}
  .message-date{grid-column:4;grid-row:1;font-size:11px;align-self:center}
  .message-preview{grid-column:3/span 2;grid-row:2;font-size:13px;font-weight:400;line-height:23px}
  .message-preview .message-subject{font-weight:600}.unread .message-preview .message-subject{font-weight:700}
  .reader-toolbar{height:58px;padding:0 10px}.toolbar-start,.toolbar-end{gap:0}.toolbar-divider{margin:0 3px}.reader-position{font-size:11px;margin-right:2px}
  .message-article{padding:28px 21px 70px}.message-headline{gap:9px;margin-bottom:26px}
  .message-headline h1{font-size:22px}.message-sender-row{gap:9px;margin-bottom:31px}.sender-avatar{width:35px;height:35px;font-size:16px}
  .message-meta{gap:2px}.message-meta time{font-size:11px}.reader-star{width:34px;height:34px}
  .message-body{font-size:15px;line-height:2}.message-body p{margin-bottom:1.4em}
}
@media (max-width:355px){.brand-word{display:none}.search-box input{font-size:12px}.reader-position{display:none}.message-meta time{font-size:10px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}