.dev-mail-page .landing-hero-panel{align-items:center;background:var(--dev-surface-color);display:flex;flex-direction:column;padding:80px 24px;text-align:center}.dev-mail-page .landing-icon-circle{align-items:center;background:var(--dev-primary-light);border-radius:20px;color:var(--dev-primary-color);display:flex;height:80px;justify-content:center;margin-bottom:24px;width:80px}.dev-mail-page .landing-hero-title{color:var(--dev-text-primary);font-size:1.75rem;font-weight:500;margin-bottom:16px}.dev-mail-page .landing-hero-text{color:var(--dev-text-secondary);font-size:1.1rem;line-height:1.6;margin:0 auto 40px;max-width:600px}.dev-mail-page .landing-cta-btn{border-radius:12px;font-size:16px;padding:14px 40px}.dev-mail-page .integration-guide-panel{background:var(--dev-surface-color);border-radius:16px;box-shadow:var(--dev-shadow-md)}.dev-mail-page .guide-header{align-items:center;background:linear-gradient(135deg,#f8f9fa,#fff);border-bottom:1px solid var(--dev-border-color);display:flex;gap:20px;justify-content:space-between;padding:16px 24px}.dev-mail-page .guide-title-area{align-items:center;display:flex;gap:12px}.dev-mail-page .guide-icon{color:var(--dev-primary-color)}.dev-mail-page .guide-header h3{color:var(--dev-text-primary);font-size:1.15rem;font-weight:500;margin:0}.dev-mail-page .guide-header-action{align-items:center;display:flex}.dev-mail-page .dispatch-btn-premium{align-items:center;background:var(--dev-primary-color);border:none;border-radius:8px;box-shadow:0 2px 6px #1a73e833;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:10px;overflow:hidden;padding:10px 20px;position:relative;transition:all .2s}.dev-mail-page .dispatch-btn-premium:hover{background:var(--dev-primary-dark);box-shadow:0 4px 12px #1a73e84d;transform:translateY(-1px)}.dev-mail-page .dispatch-btn-premium:active{transform:translateY(0)}.dev-mail-page .dispatch-btn-premium.loading{cursor:wait;opacity:.8}.dev-mail-page .dispatch-btn-premium.success{background:#28a745;box-shadow:0 4px 12px #28a7454d}.dev-mail-page .dispatch-btn-premium.error{background:var(--dev-error);box-shadow:0 4px 12px #dc35454d}.dev-mail-page .spin-icon{animation:dev-spin 1s linear infinite}@keyframes dev-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.dev-mail-page .dispatch-btn-premium:hover .btn-glow{left:100%}.dev-mail-page .guide-body{display:grid;grid-template-columns:1fr;padding:0}@media(min-width:1024px){.dev-mail-page .guide-body{grid-template-columns:1fr}}.dev-mail-page .guide-step-section{border-bottom:1px solid var(--dev-border-color);gap:16px}.dev-mail-page .guide-step-section:last-child{border-bottom:none}.dev-mail-page .snippet-block-wrapper{background:#fff;border-radius:0 0 12px 12px;height:400px;margin-top:0;overflow-x:hidden;overflow-y:auto}.dev-mail-page .snippet-block-wrapper code,.dev-mail-page .snippet-block-wrapper pre{white-space:pre-wrap!important;word-break:break-all!important}.dev-mail-page .snippet-block-wrapper .code-block-container{border:none;box-shadow:none;margin:0}.dev-mail-page .guide-step-section{display:flex;flex-direction:column;gap:20px;padding:24px 32px}.dev-mail-page .border-left{background:#fafafa;border-top:1px solid var(--dev-border-color)}.dev-mail-page .webhook-url-card-body{padding:32px}.dev-mail-page .webhook-url-card-title{color:var(--dev-text-primary);font-size:16px;font-weight:600;margin-bottom:16px}.dev-mail-page .url-card-desc{color:var(--dev-text-secondary);font-size:14px;line-height:1.5;margin-bottom:24px}.dev-mail-page .dev-url-preview{align-items:stretch;background:#fff;border:1px solid var(--dev-border-color);border-radius:8px;display:flex;margin-bottom:0;overflow:hidden;padding:0}.dev-mail-page .dev-url-preview:hover{border-color:var(--dev-primary-color);box-shadow:0 4px 12px #1a73e814}.dev-mail-page .method-tag{align-items:center;background:var(--dev-primary-light);border-right:1px solid var(--dev-border-color);color:var(--dev-primary-color);display:flex;font-size:12px;font-weight:700;justify-content:center;min-width:80px;padding:12px 16px}.dev-mail-page .url-text{align-items:center;color:var(--dev-text-secondary);display:flex;flex:1;font-family:Roboto Mono,monospace;font-size:13px;padding:12px 16px;white-space:pre-wrap;word-break:break-all}.dev-mail-page .flex-spacer{flex:1}.dev-mail-page .step-indicator{align-items:center;display:flex;gap:12px}.dev-mail-page .step-num{align-items:center;background:var(--dev-primary-color);border-radius:50%;color:#fff;display:flex;font-size:14px;font-weight:700;height:28px;justify-content:center;width:28px}.dev-mail-page .step-label{color:var(--dev-text-primary);font-size:15px;font-weight:600}.dev-mail-page .scenario-grid{display:flex;flex-wrap:wrap;gap:12px}.dev-mail-page .scenario-card{align-items:center;background:#fff;border:1px solid var(--dev-border-color);border-radius:12px;cursor:pointer;display:flex;flex:1;gap:12px;max-width:320px;min-height:72px;min-width:240px;padding:12px;position:relative;text-align:left;transition:all .2s cubic-bezier(.4,0,.2,1)}.dev-mail-page .scenario-card:hover{border-color:var(--dev-primary-color);box-shadow:0 4px 12px #1a73e81a;transform:translateY(-2px)}.dev-mail-page .scenario-card.active{background:var(--dev-primary-light);border-color:var(--dev-primary-color)}.dev-mail-page .scenario-icon-box{align-items:center;background:#f1f3f4;border-radius:8px;color:var(--dev-text-secondary);display:flex;height:40px;justify-content:center;width:40px}.dev-mail-page .scenario-card.active .scenario-icon-box{background:#fff;color:var(--dev-primary-color)}.dev-mail-page .scenario-info{display:flex;flex:1;flex-direction:column}.dev-mail-page .scenario-name{color:var(--dev-text-primary);font-size:14px;font-weight:600}.dev-mail-page .scenario-desc{color:var(--dev-text-tertiary);font-size:12px}.dev-mail-page .active-check{color:var(--dev-primary-color)}.dev-mail-page .dispatch-action-area{margin-top:auto;padding-top:12px}.dev-mail-page .dispatch-btn{align-items:center;background:var(--dev-primary-color);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:15px;font-weight:600;gap:12px;justify-content:center;overflow:hidden;padding:14px 24px;position:relative;transition:all .2s;width:100%}.dev-mail-page .dispatch-btn:hover{background:var(--dev-primary-dark);box-shadow:0 8px 16px #1a73e833}.dev-mail-page .dispatch-btn:active{transform:scale(.98)}.dev-mail-page .btn-glow{background:linear-gradient(90deg,#0000,#fff3,#0000);height:100%;left:-100%;position:absolute;top:0;transition:.5s;width:100%}.dev-mail-page .dispatch-btn:hover .btn-glow{left:100%}.dev-mail-page .dispatch-hint{color:var(--dev-text-tertiary);font-size:12px;margin:12px 0 0;text-align:center}.dev-mail-page .snippet-container{background:#fff;border:1px solid var(--dev-border-color);border-radius:12px;display:flex;flex-direction:column;max-width:100%;overflow:hidden}.dev-mail-page .snippet-tabs-row{align-items:center;background:#f8f9fa;border-bottom:1px solid var(--dev-border-color);display:flex;justify-content:space-between;padding:0 8px 0 16px}.dev-mail-page .lang-tabs{display:flex}.dev-mail-page .lang-tab{background:#0000;border:none;border-bottom:2px solid #0000;color:var(--dev-text-tertiary);cursor:pointer;font-size:12px;font-weight:600;padding:12px 16px;text-transform:uppercase;transition:all .2s}.dev-mail-page .lang-tab:hover{color:var(--dev-text-primary)}.dev-mail-page .lang-tab.active{border-bottom-color:var(--dev-primary-color);color:var(--dev-primary-color)}.dev-mail-page .inbox-grid{align-items:start;display:grid;gap:0;grid-template-columns:1fr;height:auto;margin-top:32px;min-height:520px}@media(min-width:1024px){.dev-mail-page .inbox-grid{gap:24px;grid-template-columns:380px 1fr}}.dev-mail-page .inbox-panel{background:#fff;border:1px solid #9aa0a6;border-radius:12px;box-shadow:0 4px 16px #00000014;display:flex;flex-direction:column;height:520px;min-height:0;overflow:hidden;position:-webkit-sticky;position:sticky;top:80px;z-index:10}.dev-mail-page .webhook-logs-header{align-items:center;background:#f8f9fa;border-bottom:1px solid var(--dev-border-color);display:flex;height:52px;justify-content:space-between;padding:10px 16px}.dev-mail-page .webhook-logs-header h3{color:var(--dev-text-primary);font-size:1rem;font-weight:600;margin:0}.dev-mail-page .logs-actions-container{align-items:center;display:flex;gap:8px}.dev-mail-page .logs-status-pill{margin-right:4px}.dev-mail-page .logs-header-height{height:52px}.dev-mail-page .inspector-empty{align-items:center;border:1px solid var(--dev-border-color);border-radius:12px;display:flex;flex-direction:column;height:520px;justify-content:center}.dev-mail-page .inbox-body-container{display:flex;flex-direction:column;height:calc(100% - 52px);overflow:hidden;padding:0}.dev-mail-page .inbox-search-bar{align-items:center;background:#fff;border-bottom:1px solid var(--dev-border-color);display:flex;gap:10px;padding:12px 16px}.dev-mail-page .search-icon{color:var(--dev-text-tertiary)}.dev-mail-page .search-input{border-radius:6px;font-size:13px;padding:8px 12px}.dev-mail-page .mail-list{background:#fff;flex:1;height:100%;min-height:0;overflow-y:auto}.dev-mail-page .mail-item{border-bottom:1px solid var(--dev-border-color);cursor:pointer;padding:10px 16px;transition:all .2s}.dev-mail-page .mail-item:hover{background:#f8f9fa}.dev-mail-page .mail-item.active{background:var(--dev-primary-light);border-left:4px solid var(--dev-primary-color)}.dev-mail-page .mail-header-row{display:flex;justify-content:space-between;margin-bottom:2px}.dev-mail-page .mail-from{color:var(--dev-text-primary);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-mail-page .mail-time{color:var(--dev-text-tertiary);font-size:11px}.dev-mail-page .mail-subject{color:var(--dev-text-secondary);font-size:13px;font-weight:500;margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-mail-page .mail-preview{color:var(--dev-text-tertiary);font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-mail-page .content-panel{background:#fff;border:1px solid #9aa0a6;border-radius:12px;box-shadow:0 4px 16px #00000014;height:auto;min-height:auto;overflow:hidden}.dev-mail-page .mail-inspector{display:flex;flex-direction:column;height:auto}.dev-mail-page .inspector-header{align-items:center;background:#f8f9fa;border-bottom:1px solid var(--dev-border-color);display:flex;justify-content:space-between;min-height:52px;padding:0 20px}.dev-mail-page .inspector-tabs{display:flex;gap:8px}.dev-mail-page .inspector-tab{align-items:center;background:#0000;border:none;border-bottom:2px solid #0000;color:var(--dev-text-tertiary);cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;padding:12px 16px;transition:all .2s}.dev-mail-page .inspector-tab:hover{background:#00000008;color:var(--dev-text-primary)}.dev-mail-page .inspector-tab.active{border-bottom-color:var(--dev-primary-color);color:var(--dev-primary-color)}.dev-mail-page .preview-controls{display:flex;gap:8px}.dev-mail-page .preview-btn{background:#fff;border:1px solid var(--dev-border-color);border-radius:6px;color:var(--dev-text-secondary);cursor:pointer;padding:6px;transition:all .2s}.dev-mail-page .preview-btn:hover{border-color:var(--dev-primary-color);color:var(--dev-primary-color)}.dev-mail-page .preview-btn.active{background:var(--dev-primary-color);border-color:var(--dev-primary-color);color:#fff}.dev-mail-page .inspector-controls{align-items:center;display:flex;gap:12px}.dev-mail-page .inspector-body{background:#f1f3f4;flex:1;overflow:visible}.dev-mail-page .preview-wrapper{background:#f8fafc;display:flex;height:auto;justify-content:center;overflow:visible;padding:0}.dev-mail-page .preview-wrapper.mobile{padding:32px 16px}.dev-mail-page .preview-wrapper.mobile .frame-container{border:12px solid #2d3748;border-radius:32px;height:auto;max-width:100%;min-height:600px;width:375px}.dev-mail-page .frame-container{background:#fff;box-shadow:0 4px 20px #00000014;height:auto;max-width:100%;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.dev-mail-page .email-iframe{border:none;height:100%;width:100%}.dev-mail-page .text-content-view{background:#f8fafc;min-height:400px;padding:24px}.dev-mail-page .text-message-container{background:#fff;border:1px solid var(--dev-border-color);border-radius:12px;box-shadow:0 2px 8px #0000000a;margin-top:8px;overflow:hidden}.dev-mail-page .text-message-body{color:var(--dev-text-primary);font-family:var(--dev-font-family);font-size:15px;line-height:1.7;overflow-wrap:break-word;padding:24px;white-space:pre-wrap;word-break:normal}.dev-mail-page .payload-content-view{background:#f1f3f4;padding:16px}.dev-mail-page .payload-content-view .code-block-container{border:1px solid var(--dev-border-color);box-shadow:0 2px 10px #0000000d;margin:0}.dev-mail-page .payload-content-view code,.dev-mail-page .payload-content-view pre{overflow-wrap:break-word!important;white-space:pre-wrap!important;word-break:break-all!important}.dev-mail-page .inspector-footer{background:#fff;border-top:1px solid var(--dev-border-color);display:flex;flex-wrap:wrap;gap:24px;padding:16px 24px}.dev-mail-page .meta-item{display:flex;font-size:13px;gap:8px}.dev-mail-page .meta-label{color:var(--dev-text-tertiary)}.dev-mail-page .meta-value{color:var(--dev-text-primary);font-weight:600}.dev-mail-page .mail-list::-webkit-scrollbar{width:6px}.dev-mail-page .mail-list::-webkit-scrollbar-thumb{background:var(--dev-border-color);border-radius:3px}.dev-mail-page .webhook-docs-section{border-top:1px solid var(--dev-border-color);margin-top:48px;padding-top:32px}.dev-mail-page .webhook-docs-grid{display:grid;gap:32px;grid-template-columns:1fr}@media(min-width:1024px){.dev-mail-page .webhook-docs-grid{gap:48px;grid-template-columns:1fr 1fr}}.dev-mail-page .webhook-docs-title{color:var(--dev-text-primary);font-size:1.125rem;font-weight:600;margin-bottom:16px}.dev-mail-page .webhook-docs-list{color:var(--dev-text-secondary);font-size:14px;line-height:2;list-style:none;padding:0}.dev-mail-page .webhook-docs-subtitle{color:var(--dev-text-tertiary);font-size:14px;font-weight:500;margin-bottom:12px}.dev-mail-page .webhook-docs-code-list{font-size:13px;list-style:none;padding:0}.dev-mail-page .webhook-docs-code-list li{color:var(--dev-text-secondary);margin-bottom:12px}.dev-mail-page .webhook-docs-code-list strong{color:var(--dev-text-primary)}.dev-mail-page .webhook-docs-alert{margin-top:24px}