*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background:#f5f5f5;color:#333;min-height:100vh;display:flex;align-items:center;justify-content:center}#app{width:100%;display:flex;justify-content:center;padding:20px}.card{background:#fff;border-radius:12px;box-shadow:0 2px 12px #0000001a;padding:32px;width:100%;max-width:620px}h1{font-size:1.5rem;margin-bottom:24px;text-align:center}h2{font-size:1.15rem;margin-bottom:16px}label{display:block;font-size:.875rem;font-weight:500;margin-bottom:4px;color:#555}input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:.95rem;margin-bottom:16px;transition:border-color .2s}input:focus{outline:none;border-color:#2563eb}input:disabled{background:#f0f0f0;color:#888}textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:.95rem;font-family:inherit;margin-bottom:16px;resize:vertical;transition:border-color .2s}textarea:focus{outline:none;border-color:#2563eb}button{width:100%;padding:10px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;background:#2563eb;color:#fff;transition:background .2s}button:hover{background:#1d4ed8}.btn-secondary{background:#e5e7eb;color:#333}.btn-secondary:hover{background:#d1d5db}.error{color:#dc2626;font-size:.875rem;margin-top:8px;min-height:1.2em}.success{color:#16a34a;font-size:.875rem;margin-top:8px;min-height:1.2em}.hint{font-size:.8rem;color:#888;margin-bottom:16px}.link{color:#2563eb;text-decoration:none;cursor:pointer;font-weight:500}.link:hover{text-decoration:underline}hr{border:none;border-top:1px solid #eee;margin:20px 0}.mb-tabs{display:flex;gap:4px;margin-bottom:16px}.mb-tab{width:auto;flex:1;padding:8px 12px;font-size:.875rem;font-weight:500;background:#f3f4f6;color:#555;border-radius:8px}.mb-tab:hover{background:#e5e7eb}.mb-tab--active{background:#2563eb;color:#fff}.mb-tab--active:hover{background:#1d4ed8}.mb-badge{display:inline-block;background:#dc2626;color:#fff;font-size:.7rem;font-weight:700;border-radius:10px;padding:1px 6px;vertical-align:middle;margin-left:4px}.mb-hidden{display:none}.mb-toolbar{display:flex;align-items:center;margin-bottom:12px}.btn-sm{width:auto;padding:6px 14px;font-size:.85rem;font-weight:500;background:#f3f4f6;color:#333;border-radius:8px}.btn-sm:hover{background:#e5e7eb}.mb-row{display:grid;grid-template-columns:16px 1fr 2fr auto;align-items:center;gap:8px;padding:10px 8px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:background .15s}.mb-row:hover{background:#f3f4f6}.mb-row--unread .mb-subject,.mb-row--unread .mb-from{font-weight:600;color:#111}.mb-dot{color:#2563eb;font-size:.6rem;text-align:center}.mb-from{font-size:.85rem;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mb-subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mb-date{font-size:.8rem;color:#888;white-space:nowrap}.mb-detail{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:16px;margin:4px 0 8px;font-size:.875rem}.mb-meta{color:#555;font-size:.8rem;margin-bottom:10px;line-height:1.6}.mb-body{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:.9rem;color:#333}.mb-empty{text-align:center;padding:20px 0}