:root{--primary-color: #4361ee;--primary-hover: #3a56d4;--bg-light: #f8fafc;--card-light: #ffffff;--text-light: #1e293b;--border-light: #e2e8f0;--shadow-light: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}button{border-radius:8px;background:linear-gradient(135deg,var(--primary-color),#5a4fff);color:#fff;padding:10px 20px;border:none;font-weight:500;transition:all .2s ease;box-shadow:var(--shadow-light)}button:hover{background:linear-gradient(135deg,var(--primary-hover),#4a3fe8);cursor:pointer;transform:translateY(-1px);box-shadow:0 6px 12px #00000026}button:active{transform:translateY(0)}button.secondary{background:linear-gradient(135deg,#64748b,#475569);box-shadow:none}button.secondary:hover{background:linear-gradient(135deg,#475569,#334155)}input,select{border-radius:8px;border:2px solid var(--border-light);padding:10px;background:#fff;transition:border-color .2s;font-size:1rem}input:focus,select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4361ee1a}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:20px}#mailList{border-radius:12px;border:2px solid var(--border-light);background:var(--card-light);box-shadow:var(--shadow-light)}.clickable{padding:16px;border-radius:8px;margin:8px 0;background:#fff;border-left:4px solid transparent;transition:all .2s}.clickable:hover{background:#f1f5f9;border-left-color:var(--primary-color);transform:translate(4px);cursor:pointer}.counter{background:var(--primary-color);color:#fff;width:40px;height:40px;border-radius:50%;margin:0 10px}.counter:hover{background:var(--primary-hover)}#dialogBox{border-radius:12px;border:none;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}input[type=image]{background-color:transparent;outline:none}.loading-indicator{padding:10px;text-align:center;color:var(--primary-color);font-style:italic;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.empty-state{text-align:center;padding:60px 20px;color:#64748b;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.empty-icon{width:80px;height:80px;margin-bottom:20px;stroke-width:1.2;color:#cbd5e1}.empty-state h3{margin:0 0 10px;color:#475569;font-size:1.5rem}.empty-state p{margin:0;max-width:400px;line-height:1.5}.checkbox-container{display:flex;align-items:center;margin:8px 0}.checkbox-container input[type=checkbox]{display:none}.checkbox-custom{width:22px;height:22px;border:2px solid var(--border-light);border-radius:6px;margin-right:12px;position:relative;cursor:pointer;transition:all .2s}.checkbox-custom:hover{border-color:var(--primary-color)}.checkbox-container input[type=checkbox]:checked+.checkbox-custom{background-color:var(--primary-color);border-color:var(--primary-color)}.checkbox-container input[type=checkbox]:checked+.checkbox-custom:after{content:"✓";position:absolute;color:#fff;font-size:16px;top:50%;left:50%;transform:translate(-50%,-50%)}@media (prefers-color-scheme: dark){:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--bg-dark: #0f172a;--card-dark: #1e293b;--text-dark: #f1f5f9;--border-dark: #334155;--shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .2)}body{background-color:var(--bg-dark);color:var(--text-dark)}button{box-shadow:var(--shadow-dark)}button.secondary{background:linear-gradient(135deg,#475569,#334155)}button.secondary:hover{background:linear-gradient(135deg,#334155,#1e293b)}input,select{background:var(--card-dark);border-color:var(--border-dark);color:var(--text-dark)}#mailList{background:var(--card-dark);border-color:var(--border-dark);box-shadow:var(--shadow-dark)}.clickable{background:#1e293b}.clickable:hover{background:#334155}#dialogBox{background:var(--card-dark);box-shadow:0 20px 25px -5px #00000080}.empty-state{color:#94a3b8}.empty-state h3{color:#e2e8f0}.empty-icon{color:#475569}.checkbox-custom{border-color:var(--border-dark)}}@font-face{font-family:globalFont;src:url(/roboto.ttf) format("truetype");font-weight:500}html,body,#app{width:100%;height:100%;padding:0;margin:0;font-family:globalFont;font-size:clamp(14px,1.5vw,16px)}main{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.adaptWidth{width:min(800px,calc(100% - 40px))}.fillWidth{width:100%}.adaptWidthSmall{width:min(720px,100%);max-width:720px}.fillHeight{height:100%}.flexCenterCol{display:flex;justify-content:center;align-items:center;flex-direction:column}.gap{gap:10px}.clickable:hover{cursor:pointer}button,select,input,span{font-size:clamp(1rem,1.8vw,1.25rem);font-family:globalFont;font-weight:500;overflow-wrap:anywhere}span{touch-action:manipulation;-webkit-user-select:none;user-select:none}#mailList{flex:1;height:100%;box-sizing:border-box;padding:10px;display:flex;flex-direction:column;overflow:auto;gap:12px}#mailList h3{font-size:clamp(1.3rem,2vw,1.8rem)}#dialogBox{outline:1px solid black}@media (max-width: 768px){.adaptWidth,.adaptWidthSmall{width:calc(100% - 20px)}button,select,input{padding:12px 16px}#mailList{padding:8px}}@media (prefers-color-scheme: dark){#dialogBox{outline:1px solid white}}