:root{--bg: #f7f8fa;--bg-elevated: #ffffff;--bg-muted: #f1f3f5;--bg-subtle: #eef0f3;--text: #0f1419;--text-secondary: #4b5563;--text-muted: #6b7280;--text-inverse: #ffffff;--primary: #4f46e5;--primary-hover: #4338ca;--primary-active: #3730a3;--primary-soft: #eef2ff;--primary-ring: rgba(79, 70, 229, .22);--success: #059669;--success-soft: #ecfdf5;--success-border: #a7f3d0;--warning: #d97706;--warning-soft: #fffbeb;--warning-border: #fde68a;--danger: #dc2626;--danger-soft: #fef2f2;--danger-border: #fecaca;--border: #e5e7eb;--border-strong: #d1d5db;--shadow-xs: 0 1px 2px rgba(15, 20, 25, .04);--shadow-sm: 0 1px 3px rgba(15, 20, 25, .06), 0 1px 2px rgba(15, 20, 25, .04);--shadow-md: 0 4px 12px rgba(15, 20, 25, .06), 0 2px 4px rgba(15, 20, 25, .04);--shadow-lg: 0 12px 32px rgba(15, 20, 25, .1), 0 4px 8px rgba(15, 20, 25, .04);--shadow-focus: 0 0 0 3px var(--primary-ring);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-full: 9999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--max-width: 1120px;--header-height: 64px;--ease-out: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration: .2s;--duration-slow: .28s;--z-header: 40;--z-overlay: 50;--z-modal: 60;--z-toast: 70}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;font-feature-settings:"cv02","cv03","cv04","cv11"}button,input,textarea{font-family:inherit}a{color:var(--primary);text-decoration:none;transition:color var(--duration) var(--ease-out)}a:hover{color:var(--primary-hover)}a:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:2px}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-main{flex:1;width:100%;max-width:var(--max-width);margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-12)}.header{position:sticky;top:0;z-index:var(--z-header);background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-4);height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.logo{display:flex;align-items:center;gap:var(--space-3);min-width:0}.logo-mark{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--primary);color:var(--text-inverse);flex-shrink:0}.logo-text{min-width:0}.logo-text h1{font-size:.9375rem;font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1.25}.logo-text p{font-size:.75rem;color:var(--text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.page-intro{margin-bottom:var(--space-6);max-width:36rem}.page-intro h2{font-size:1.5rem;font-weight:650;letter-spacing:-.03em;color:var(--text);line-height:1.25;margin-bottom:var(--space-2)}.page-intro p{font-size:.9375rem;color:var(--text-secondary);line-height:1.6}.search-section{margin-bottom:var(--space-6)}.search-form{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}.search-row{display:flex;gap:var(--space-3);align-items:flex-end}.input-group{display:flex;flex-direction:column;gap:var(--space-2);flex:1;min-width:0}.input-group label{font-weight:500;color:var(--text);font-size:.8125rem;letter-spacing:-.01em}.search-input,.api-key-input{width:100%;height:44px;padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-md);font-size:.9375rem;color:var(--text);background:var(--bg-elevated);transition:border-color var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out),background-color var(--duration) var(--ease-out)}.search-input::placeholder,.api-key-input::placeholder{color:var(--text-muted)}.search-input:hover:not(:disabled),.api-key-input:hover:not(:disabled){border-color:#9ca3af}.search-input:focus,.api-key-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-focus)}.search-input:disabled,.api-key-input:disabled{opacity:.6;cursor:not-allowed;background:var(--bg-muted)}.form-options{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border)}.checkbox-group{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:.875rem;color:var(--text-secondary);-webkit-user-select:none;user-select:none;min-height:44px}.checkbox-group input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}.checkbox-group .checkbox-label{display:inline-flex;align-items:center;gap:.375rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:44px;padding:0 1.125rem;border:1px solid transparent;border-radius:var(--radius-md);font-size:.875rem;font-weight:550;letter-spacing:-.01em;cursor:pointer;transition:background-color var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out),opacity var(--duration) var(--ease-out);white-space:nowrap;text-decoration:none}.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn svg{flex-shrink:0}.btn-primary{background:var(--primary);color:var(--text-inverse);box-shadow:var(--shadow-xs)}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-primary:active:not(:disabled){background:var(--primary-active)}.btn-secondary{background:var(--bg-elevated);color:var(--text);border-color:var(--border-strong)}.btn-secondary:hover:not(:disabled){background:var(--bg-muted);border-color:var(--border-strong)}.btn-ghost{background:transparent;color:var(--text-secondary);height:36px;padding:0 .75rem}.btn-ghost:hover:not(:disabled){background:var(--bg-muted);color:var(--text)}.btn-icon-only{width:40px;height:40px;padding:0;border-radius:var(--radius-md);background:transparent;border:1px solid transparent;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out)}.btn-icon-only:hover{background:var(--bg-muted);color:var(--text)}.btn-icon-only:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.search-btn{flex-shrink:0;min-width:140px}.clear-btn{height:36px;padding:0 .875rem;font-size:.8125rem}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f141959;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:var(--z-overlay);color:var(--text-inverse);font-size:.9375rem;font-weight:500;gap:var(--space-4)}.loading-spinner{width:36px;height:36px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%}@media (prefers-reduced-motion: no-preference){.loading-spinner{animation:spin .8s linear infinite}}@keyframes spin{to{transform:rotate(360deg)}}.error-message{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--danger-soft);color:var(--danger);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-5);font-weight:500;font-size:.875rem;border:1px solid var(--danger-border);line-height:1.5}.error-message svg{flex-shrink:0;margin-top:1px}.results-section{margin-bottom:var(--space-8)}.results-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-5);flex-wrap:wrap;gap:var(--space-2) var(--space-4)}.results-header h2{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}.results-meta{font-size:.8125rem;color:var(--text-muted);font-weight:500}.results-meta strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}.pagination-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap}.pagination-btn{display:inline-flex;align-items:center;gap:.375rem;height:40px;padding:0 .875rem;border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--radius-md);font-size:.8125rem;font-weight:500;color:var(--text);cursor:pointer;transition:background-color var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out)}.pagination-btn:hover:not(:disabled){background:var(--primary-soft);border-color:#c7d2fe;color:var(--primary)}.pagination-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-info{font-size:.8125rem;color:var(--text-muted);font-weight:500;font-variant-numeric:tabular-nums;min-width:8rem;text-align:center}.emails-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-4)}.email-card{background:var(--bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--border);padding:var(--space-5);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:var(--space-4);transition:border-color var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out)}@media (prefers-reduced-motion: no-preference){.email-card{animation:fadeIn var(--duration-slow) var(--ease-out)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.email-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}.email-header{padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}.email-subject{font-size:.9375rem;font-weight:600;letter-spacing:-.015em;color:var(--text);margin-bottom:var(--space-3);word-break:break-word;line-height:1.4}.email-meta{display:flex;flex-direction:column;gap:.375rem}.email-meta-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-muted);min-width:0}.email-meta-item svg{flex-shrink:0;width:14px;height:14px;opacity:.8}.email-meta-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-body{flex:1;display:flex;flex-direction:column;gap:var(--space-3);min-height:0}.otp-section{background:var(--success-soft);border:1px solid var(--success-border);border-radius:var(--radius-md);padding:var(--space-4);text-align:center}.otp-label{font-size:.6875rem;font-weight:600;color:var(--success);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2)}.otp-code{font-size:1.75rem;font-weight:700;color:var(--success);letter-spacing:.2em;font-family:JetBrains Mono,SF Mono,Fira Code,ui-monospace,monospace;font-variant-numeric:tabular-nums;line-height:1.2}.email-preview{font-size:.8125rem;color:var(--text-secondary);line-height:1.65;max-height:4.5rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}.email-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;padding-top:var(--space-1)}.action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;height:36px;padding:0 .75rem;border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:background-color var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out)}.action-btn svg{width:14px;height:14px}.action-btn:hover{background:var(--primary-soft);border-color:#c7d2fe;color:var(--primary)}.action-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.action-btn.copy-btn:hover{background:var(--success-soft);border-color:var(--success-border);color:var(--success)}.action-btn.download-btn:hover{background:var(--warning-soft);border-color:var(--warning-border);color:var(--warning)}.empty-state{text-align:center;padding:var(--space-12) var(--space-6);background:var(--bg-elevated);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);color:var(--text-secondary)}.empty-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-lg);background:var(--bg-muted);color:var(--text-muted);margin-bottom:var(--space-4)}.empty-icon svg{width:28px;height:28px}.empty-state h3{font-size:1rem;font-weight:600;letter-spacing:-.02em;margin-bottom:var(--space-2);color:var(--text)}.empty-state p{font-size:.875rem;color:var(--text-muted);max-width:22rem;margin:0 auto;line-height:1.55}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f141973;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--bg-elevated);border-radius:var(--radius-xl);border:1px solid var(--border);box-shadow:var(--shadow-lg);width:100%;max-width:640px;max-height:min(90vh,800px);overflow:hidden;display:flex;flex-direction:column}@media (prefers-reduced-motion: no-preference){.modal-content{animation:modalIn var(--duration-slow) var(--ease-out)}}@keyframes modalIn{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid var(--border);flex-shrink:0}.modal-header h2{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1.35;padding-top:.2rem;word-break:break-word}.modal-close{flex-shrink:0;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:background-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out)}.modal-close:hover{background:var(--bg-muted);color:var(--text)}.modal-close:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.modal-body{padding:var(--space-5);overflow-y:auto;flex:1}.modal-body .email-detail{display:flex;flex-direction:column;gap:0}.modal-body .detail-section{display:grid;grid-template-columns:120px 1fr;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border);align-items:start}.modal-body .detail-section:last-child{border-bottom:none}.modal-body .detail-section.detail-section--stack{grid-template-columns:1fr;gap:var(--space-2)}.modal-body .detail-label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding-top:.15rem}.modal-body .detail-value{font-size:.875rem;color:var(--text);word-break:break-word;line-height:1.5}.modal-body .otp-highlight{display:inline-flex;align-items:center;background:var(--success-soft);border:1px solid var(--success-border);padding:.375rem .75rem;border-radius:var(--radius-sm);font-weight:700;font-size:1.125rem;color:var(--success);letter-spacing:.12em;font-family:JetBrains Mono,SF Mono,ui-monospace,monospace}.email-content-pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;margin:0;font-size:.8125rem;line-height:1.65;color:var(--text-secondary);background:var(--bg-muted);border-radius:var(--radius-md);padding:var(--space-4);border:1px solid var(--border);max-height:280px;overflow-y:auto}.modal-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--space-3);flex-shrink:0;background:var(--bg-elevated)}.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);background:var(--text);color:var(--text-inverse);padding:.75rem 1.25rem;border-radius:var(--radius-full);font-size:.8125rem;font-weight:500;box-shadow:var(--shadow-lg);z-index:var(--z-toast);display:flex;align-items:center;gap:.5rem;max-width:calc(100vw - 2rem)}@media (prefers-reduced-motion: no-preference){.toast{animation:toastIn var(--duration-slow) var(--ease-out)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.footer{margin-top:auto;border-top:1px solid var(--border);background:var(--bg-elevated)}.footer-inner{max-width:var(--max-width);margin:0 auto;padding:var(--space-5) var(--space-4);display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;text-align:center;color:var(--text-muted);font-size:.8125rem}.footer-inner a{color:var(--text-secondary);font-weight:500}.footer-inner a:hover{color:var(--primary)}.footer-divider{color:var(--border-strong)}.api-key-banner{text-align:center;padding:var(--space-10) var(--space-4);max-width:28rem;margin:0 auto}.api-key-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);box-shadow:var(--shadow-sm)}.api-key-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--warning-soft);color:var(--warning);margin-bottom:var(--space-4)}.api-key-card h2{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;color:var(--text);margin-bottom:var(--space-2)}.api-key-card p{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--space-5);line-height:1.55}.api-key-warning{display:inline-flex;align-items:center;gap:.5rem;background:var(--warning-soft);color:#92400e;padding:.5rem .875rem;border-radius:var(--radius-full);margin-bottom:var(--space-4);font-weight:500;font-size:.8125rem;border:1px solid var(--warning-border)}.api-key-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f141973;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-4)}.api-key-modal{position:relative;background:var(--bg-elevated);border-radius:var(--radius-xl);border:1px solid var(--border);box-shadow:var(--shadow-lg);width:100%;max-width:440px;overflow:hidden}@media (prefers-reduced-motion: no-preference){.api-key-modal{animation:modalIn var(--duration-slow) var(--ease-out)}}.api-key-modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5);border-bottom:1px solid var(--border)}.api-key-modal-header h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}.api-key-close{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:background-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out)}.api-key-close:hover{background:var(--bg-muted);color:var(--text)}.api-key-close:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.api-key-modal-body{padding:var(--space-5)}.api-key-modal-body>p{margin-bottom:var(--space-3);color:var(--text-secondary);font-size:.875rem;line-height:1.55}.api-key-modal-body small{color:var(--text-muted);font-size:.8125rem;display:block;margin-bottom:var(--space-5);line-height:1.5}.api-key-input-group{display:flex;flex-direction:column;gap:var(--space-2)}.api-key-input-group label{font-weight:500;color:var(--text);font-size:.8125rem}.api-key-input{font-family:JetBrains Mono,SF Mono,ui-monospace,monospace;font-size:.875rem}.api-key-modal-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--space-3);background:var(--bg-muted)}@media (max-width: 768px){.app-main{padding:var(--space-5) var(--space-4) var(--space-10)}.page-intro h2{font-size:1.25rem}.search-row{flex-direction:column;align-items:stretch}.search-btn{width:100%;min-width:0}.emails-grid{grid-template-columns:1fr}.modal-body .detail-section{grid-template-columns:1fr;gap:.25rem}.form-options{flex-direction:column;align-items:flex-start}.logo-text p{display:none}.api-key-modal-footer{flex-direction:column-reverse}.api-key-modal-footer .btn{width:100%}}@media (max-width: 480px){.header-inner{height:56px}.otp-code{font-size:1.375rem;letter-spacing:.12em}.email-actions{flex-direction:column}.action-btn,.pagination-controls{width:100%}.pagination-btn{flex:1;justify-content:center}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}