@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Patrick+Hand&family=Architects+Daughter&display=swap";
:root{--paper:#fdf6e3;--paper-dark:#f5e6c8;--paper-grid:#e8dcc8;--ink:#2c2c2c;--ink-light:#5a5a5a;--ink-lighter:#8a8a7a;--pencil:#6b6b5e;--blue-ink:#2b5ea7;--blue-ink-light:#4a8fd4;--red-ink:#c23b22;--green-ink:#3a7d44;--highlight-yellow:#fff3b0;--highlight-blue:#cce5ff;--eraser:#f0e6d3;--shadow:#2c2c2c14;--shadow-strong:#2c2c2c26;--border-sketch:2px solid var(--ink);--border-pencil:1.5px solid var(--pencil);--border-light:1px solid var(--paper-grid);--font-sketch:"Caveat", cursive;--font-hand:"Patrick Hand", cursive;--font-architect:"Architects Daughter", cursive;--sidebar-width:260px;--header-height:64px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-hand);background-color:var(--paper);color:var(--ink);font-size:16px;line-height:1.5}body{background-image:repeating-linear-gradient(transparent, transparent 31px, var(--paper-grid) 31px, var(--paper-grid) 32px);background-size:100% 32px}.sketch-box{border:var(--border-sketch);box-shadow:2px 3px 0px var(--shadow-strong), inset 0 0 0 1px #2c2c2c08;border-radius:3px 8px 5px 10px;position:relative}.sketch-box:before{content:"";pointer-events:none;border:1px solid #0000;border-radius:5px 10px 7px 12px;position:absolute;inset:-1px}.sketch-box-light{border:var(--border-pencil);box-shadow:1px 2px 0px var(--shadow);border-radius:2px 6px 4px 8px}.app-container{height:100vh;display:flex;overflow:hidden}.header{height:var(--header-height);background:var(--paper);border-bottom:var(--border-sketch);z-index:10;border-bottom-width:2.5px;align-items:center;padding:0 20px;display:flex;position:relative}.header:after{content:"";background:repeating-linear-gradient(90deg, var(--ink) 0px, var(--ink) 4px, transparent 4px, transparent 8px);opacity:.15;height:3px;position:absolute;bottom:-4px;left:0;right:0}.header-logo{font-family:var(--font-sketch);color:var(--blue-ink);letter-spacing:-.5px;align-items:center;gap:8px;font-size:32px;font-weight:700;display:flex}.header-logo svg{width:36px;height:36px}.header-search{flex:1;max-width:600px;margin:0 24px;position:relative}.header-search input{width:100%;font-family:var(--font-hand);background:var(--eraser);border:var(--border-pencil);color:var(--ink);border-radius:4px 12px 6px 14px;outline:none;padding:10px 16px 10px 44px;font-size:17px;transition:all .2s}.header-search input::placeholder{color:var(--ink-lighter);font-style:italic}.header-search input:focus{border-color:var(--blue-ink);box-shadow:2px 3px 0px var(--shadow-strong);background:#fff}.header-search-icon{color:var(--ink-lighter);width:20px;height:20px;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.sidebar{width:var(--sidebar-width);background:var(--paper);border-right:var(--border-sketch);flex-direction:column;flex-shrink:0;display:flex;position:relative;overflow-y:auto}.sidebar:after{content:"";background:repeating-linear-gradient(180deg, var(--ink) 0px, var(--ink) 3px, transparent 3px, transparent 7px);opacity:.1;width:4px;height:100%;position:absolute;top:0;right:-4px}.compose-btn{font-family:var(--font-sketch);color:#fff;background:var(--blue-ink);border:2.5px solid var(--ink);cursor:pointer;box-shadow:3px 4px 0px var(--ink);border-radius:6px 16px 8px 18px;align-items:center;gap:10px;margin:16px;padding:14px 24px;font-size:22px;font-weight:600;transition:all .15s;display:flex;position:relative;overflow:hidden}.compose-btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff26,#0000);width:100%;height:100%;transition:left .4s;position:absolute;top:0;left:-100%}.compose-btn:hover:before{left:100%}.compose-btn:hover{box-shadow:4px 5px 0px var(--ink);background:#3570bf;transform:translate(-1px,-1px)}.compose-btn:active{box-shadow:1px 1px 0px var(--ink);transform:translate(2px,2px)}.folder-list{padding:8px 0;list-style:none}.folder-item{font-family:var(--font-hand);cursor:pointer;border-left:3px solid #0000;align-items:center;gap:12px;padding:10px 24px;font-size:17px;transition:all .15s;display:flex;position:relative}.folder-item:hover{background:var(--highlight-yellow);border-left-color:var(--pencil)}.folder-item.active{background:var(--highlight-blue);border-left-color:var(--blue-ink);font-weight:600}.folder-item .icon{stroke-width:1.5px;flex-shrink:0;width:22px;height:22px}.folder-item .count{font-family:var(--font-sketch);color:var(--ink-lighter);background:var(--paper-dark);border:1px solid var(--paper-grid);border-radius:3px 8px 4px 10px;margin-left:auto;padding:1px 8px;font-size:15px}.folder-item.active .count{background:var(--blue-ink);color:#fff;border-color:var(--blue-ink)}.account-switcher{border:var(--border-pencil);background:var(--eraser);cursor:pointer;border-radius:4px 10px 6px 12px;margin:16px;padding:12px;position:relative}.account-current{align-items:center;gap:10px;display:flex}.account-avatar{background:var(--blue-ink);color:#fff;width:36px;height:36px;font-family:var(--font-sketch);border:2px solid var(--ink);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex}.account-info{flex:1;min-width:0}.account-label{font-family:var(--font-sketch);color:var(--ink);font-size:18px;font-weight:600}.account-email{color:var(--ink-lighter);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.account-dropdown-icon{width:16px;height:16px;color:var(--ink-lighter);transition:transform .2s}.account-switcher.open .account-dropdown-icon{transform:rotate(180deg)}.account-dropdown{background:var(--paper);border:var(--border-sketch);box-shadow:3px 4px 0 var(--shadow-strong);z-index:100;border-radius:4px 10px 8px 12px;margin-top:4px;position:absolute;top:100%;left:0;right:0;overflow:hidden}.account-option{cursor:pointer;align-items:center;gap:10px;padding:10px 12px;transition:background .1s;display:flex}.account-option:hover{background:var(--highlight-yellow)}.account-option.active{background:var(--highlight-blue)}.main-content{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.email-list-container{flex:1;display:flex;overflow:hidden}.email-list{border-right:var(--border-pencil);background:var(--paper);flex-shrink:0;width:420px;min-width:320px;overflow-y:auto}.email-list-header{border-bottom:var(--border-light);font-family:var(--font-sketch);color:var(--ink);background:var(--paper);z-index:5;justify-content:space-between;align-items:center;padding:12px 16px;font-size:20px;font-weight:600;display:flex;position:sticky;top:0}.email-list-header .folder-title{align-items:center;gap:8px;display:flex}.email-list-header .email-count{color:var(--ink-lighter);font-size:15px;font-weight:400}.email-item{border-bottom:1px dashed var(--paper-grid);cursor:pointer;flex-direction:column;padding:12px 16px;transition:all .12s;display:flex;position:relative}.email-item:before{content:"";background:0 0;width:3px;transition:background .15s;position:absolute;top:0;bottom:0;left:0}.email-item:hover{background:var(--highlight-yellow)}.email-item:hover:before{background:var(--pencil)}.email-item.active{background:var(--highlight-blue)}.email-item.active:before{background:var(--blue-ink)}.email-item.unread{background:#fff3b04d}.email-item.unread .email-sender{font-weight:700}.email-item.unread .email-subject{color:var(--ink);font-weight:600}.email-sender{font-family:var(--font-hand);color:var(--ink);white-space:nowrap;text-overflow:ellipsis;font-size:16px;overflow:hidden}.email-subject{font-family:var(--font-hand);color:var(--ink-light);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:15px;overflow:hidden}.email-meta{justify-content:space-between;align-items:center;margin-top:4px;display:flex}.email-snippet{color:var(--ink-lighter);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;overflow:hidden}.email-date{font-family:var(--font-architect);color:var(--ink-lighter);white-space:nowrap;flex-shrink:0;margin-left:8px;font-size:12px}.email-viewer{background:var(--paper);flex:1;min-width:0;padding:24px;overflow-y:auto}.email-viewer-empty{height:100%;color:var(--ink-lighter);font-family:var(--font-sketch);flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:24px;display:flex}.email-viewer-empty svg{opacity:.3;stroke-width:1px;width:80px;height:80px}.email-detail{max-width:800px}.email-detail-subject{font-family:var(--font-sketch);color:var(--ink);margin-bottom:16px;font-size:32px;font-weight:700;line-height:1.2}.email-detail-header{border-bottom:1px dashed var(--paper-grid);align-items:flex-start;gap:14px;margin-bottom:20px;padding:16px 0;display:flex}.email-detail-avatar{background:var(--red-ink);color:#fff;width:44px;height:44px;font-family:var(--font-sketch);border:2px solid var(--ink);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex}.email-detail-from{flex:1}.email-detail-from-name{font-family:var(--font-hand);font-size:17px;font-weight:600}.email-detail-from-email{color:var(--ink-lighter);font-size:14px}.email-detail-date{font-family:var(--font-architect);color:var(--ink-lighter);white-space:nowrap;font-size:13px}.email-detail-actions{gap:8px;margin-bottom:20px;display:flex}.email-detail-body{font-family:var(--font-hand);color:var(--ink);white-space:pre-wrap;word-wrap:break-word;font-size:16px;line-height:1.8}.email-detail-body-html{font-family:var(--font-hand);color:var(--ink);font-size:16px;line-height:1.7}.email-detail-body-html *{max-width:100%}.email-detail-body-html img{max-width:100%;height:auto}.btn-sketch{font-family:var(--font-hand);border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:2px 2px 0px var(--shadow-strong);border-radius:3px 10px 5px 12px;align-items:center;gap:6px;padding:8px 16px;font-size:15px;transition:all .12s;display:inline-flex}.btn-sketch:hover{box-shadow:3px 3px 0px var(--shadow-strong);background:var(--highlight-yellow);transform:translate(-1px,-1px)}.btn-sketch:active{box-shadow:1px 1px 0px var(--shadow-strong);transform:translate(1px,1px)}.btn-sketch svg{width:18px;height:18px}.btn-sketch.primary{background:var(--blue-ink);color:#fff;box-shadow:2px 2px 0px var(--ink)}.btn-sketch.primary:hover{box-shadow:3px 3px 0px var(--ink);background:#3570bf}.btn-sketch.danger{background:var(--red-ink);color:#fff;box-shadow:2px 2px 0px var(--ink)}.btn-sketch.danger:hover{background:#d44a33}.compose-overlay{z-index:1000;background:#2c2c2c4d;justify-content:flex-end;align-items:flex-end;padding:20px;display:flex;position:fixed;inset:0}.compose-modal{background:var(--paper);border:2.5px solid var(--ink);width:560px;max-height:80vh;box-shadow:5px 6px 0px var(--shadow-strong), 8px 10px 0px var(--shadow);border-radius:6px 16px 4px 4px;flex-direction:column;animation:.25s ease-out composeSlideUp;display:flex}@keyframes composeSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.compose-header{background:var(--blue-ink);color:#fff;font-family:var(--font-sketch);border-radius:3px 14px 0 0;justify-content:space-between;align-items:center;padding:12px 16px;font-size:20px;font-weight:600;display:flex}.compose-close{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:background .15s;display:flex}.compose-close:hover{background:#fff3}.compose-body{flex-direction:column;flex:1;padding:0;display:flex;overflow:hidden}.compose-field{border-bottom:1px dashed var(--paper-grid);align-items:center;gap:8px;padding:10px 16px;display:flex}.compose-field label{font-family:var(--font-sketch);color:var(--ink-lighter);min-width:60px;font-size:16px}.compose-field input{font-family:var(--font-hand);color:var(--ink);background:0 0;border:none;outline:none;flex:1;font-size:16px}.compose-textarea{font-family:var(--font-hand);color:var(--ink);resize:none;background:0 0;border:none;outline:none;flex:1;min-height:200px;padding:16px;font-size:16px;line-height:1.7}.compose-footer{border-top:1px dashed var(--paper-grid);align-items:center;gap:8px;padding:12px 16px;display:flex}.loading{color:var(--ink-lighter);font-family:var(--font-sketch);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px;font-size:20px;display:flex}.loading-spinner{border:3px solid var(--paper-grid);border-top-color:var(--blue-ink);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{color:var(--ink-lighter);font-family:var(--font-sketch);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:60px 20px;font-size:22px;display:flex}.empty-state svg{stroke-width:1px;opacity:.4;width:64px;height:64px}.doodle-underline{display:inline-block;position:relative}.doodle-underline:after{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='4'%3E%3Cpath d='M0,2 Q25,0 50,2 Q75,4 100,2' stroke='%232c2c2c' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/100px 4px repeat-x;height:3px;position:absolute;bottom:-3px;left:0;right:0}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--paper)}::-webkit-scrollbar-thumb{background:var(--paper-grid);border:1.5px solid var(--pencil);border-radius:2px 8px 4px 10px}::-webkit-scrollbar-thumb:hover{background:var(--ink-lighter)}.toast{background:var(--ink);color:var(--paper);font-family:var(--font-hand);box-shadow:3px 4px 0px var(--shadow-strong);z-index:2000;border-radius:4px 12px 6px 14px;padding:14px 24px;font-size:16px;animation:.3s ease-out toastIn;position:fixed;bottom:24px;right:24px}.toast.error{background:var(--red-ink)}.toast.success{background:var(--green-ink)}@keyframes toastIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.sidebar{z-index:50;transition:left .3s;position:fixed;top:0;bottom:0;left:-280px}.sidebar.open{left:0}.email-list{width:100%}.email-viewer{display:none}}