*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f8fafc;color:#1e293b;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{scroll-behavior:smooth}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.h-screen{height:100vh}.w-full{width:100%}.w-px{width:1px}.w-1-3,.w-1\/3{width:33.333333%}.flex-1{flex:1 1 0%}.relative{position:relative}.absolute{position:absolute}.left-3{left:.75rem}.top-2-5{top:.625rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-3{margin-bottom:.75rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-1{margin-top:.25rem}.p-4{padding:1rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pl-9{padding-left:2.25rem}.space-y-4>*+*{margin-top:1rem}.gap-2{gap:.5rem}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-white{background-color:#fff}.bg-blue-50{background-color:#eff6ff}.bg-blue-500{background-color:#3b82f6}.bg-blue-600{background-color:#2563eb}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.text-gray-900{color:#111827}.text-white{color:#fff}.text-blue-500{color:#3b82f6}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-gray-300{border-color:#d1d5db}.border-gray-400{border-color:#9ca3af}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-center{text-align:center}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leading-relaxed{line-height:1.625}.whitespace-pre-line{white-space:pre-line}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.overflow-y-auto{overflow-y:auto}.cursor-pointer{cursor:pointer}.transition,.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{box-shadow:0 0 0 2px #3b82f6}.hover\:bg-gray-50:hover{background-color:#f9fafb}.hover\:bg-blue-600:hover{background-color:#2563eb}@media (max-width: 768px){.mobile-layout{flex-direction:column}.mail-sidebar{width:100%!important;height:50vh;border-right:none;border-bottom:1px solid #e2e8f0}.w-px{display:none}.mail-content{height:50vh}.mail-list-container{height:calc(50vh - 140px)!important}.h-screen{height:auto;min-height:100vh}.login-card{width:90%;max-width:400px;margin:1rem}.p-8{padding:1rem}.p-4{padding:.75rem}.p-3{padding:.5rem}.text-2xl{font-size:1.25rem}.text-lg{font-size:1rem}}@media (max-width: 480px){.login-card{width:95%;margin:.5rem}.p-8{padding:.75rem}.text-2xl{font-size:1.125rem}.mail-icon{width:2rem;height:2rem}}.login-container{background:linear-gradient(135deg,#f8fafc,#e2e8f0);min-height:100vh;padding:1rem}.mail-icon{width:2.5rem;height:2.5rem;color:#3b82f6;transition:transform .2s ease}.search-icon{width:1rem;height:1rem;color:#9ca3af}.logout-icon{width:1rem;height:1rem;color:#ff0202}.mail-list-icon{width:1.25rem;height:1.25rem;color:#3b82f6}.login-card{width:380px;box-shadow:0 25px 50px -12px #00000040;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.mail-list-container{height:calc(100vh - 140px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.mail-list-container::-webkit-scrollbar{width:6px}.mail-list-container::-webkit-scrollbar-track{background:transparent}.mail-list-container::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:3px}.mail-list-container::-webkit-scrollbar-thumb:hover{background-color:#94a3b8}.mail-item{border-bottom:1px solid #e2e8f0;padding:1rem;transition:all .2s ease;cursor:pointer;position:relative}.mail-item:hover{background-color:#f1f5f9}.mail-item.selected{background-color:#dbeafe;border-left:4px solid #3b82f6}.mail-item.unread{background-color:#fef3c7;border-left:4px solid #f59e0b;position:relative}.mail-item.unread:before{content:"";position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:8px;height:8px;background-color:#f59e0b;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.7;transform:translateY(-50%) scale(1.1)}}.btn-ghost{background-color:transparent;border:none;padding:.5rem}.btn-ghost:hover{background-color:#f3f4f6}.btn-sm{padding:.25rem .5rem;font-size:.875rem}.input-field{width:100%;border:2px solid #e2e8f0;border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem;outline:none;transition:all .2s ease;background-color:#fff;font-weight:500}.input-field:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.input-field:hover{border-color:#cbd5e1}.input-field::placeholder{color:#94a3b8;font-size:.875rem;font-weight:400}.btn{padding:.75rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:.875rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .2s ease;border:none;cursor:pointer;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}.btn-primary:hover{background:linear-gradient(135deg,#2563eb,#1e40af)}.btn-primary:active{transform:translateY(0)}.card{background-color:#fff;border-radius:1rem}.card-header{padding:1rem;border-bottom:1px solid #e5e7eb}.card-title{font-size:1.125rem;font-weight:600}.card-content{padding:1rem}.mail-item:hover .text-gray-500{color:#64748b}.mail-item:hover .text-gray-800{color:#1e293b}.mail-item.selected .text-gray-800{color:#1e40af;font-weight:600}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn:disabled:hover{transform:none!important}.btn:focus-visible,.input-field:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}*{transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.z-\[9999\]{z-index:9999!important}.modal-overlay{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;display:flex!important;align-items:center!important;justify-content:center!important}.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.overflow-y-auto::-webkit-scrollbar{width:8px}.overflow-y-auto::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.overflow-y-auto::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#555}.animate-fadeIn{animation:fadeIn .2s ease-out}.animate-slideUp{animation:slideUp .3s ease-out}@media (max-width: 640px){.animate-slideUp{animation:slideUpMobile .3s ease-out}@keyframes slideUpMobile{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}