/* === Base atmosphere === */
:root{--mesh-1:#6366F1;--mesh-2:#06B6D4;--mesh-3:#8B5CF6;--mesh-opacity:0.12}
.dark{--mesh-1:#4F46E5;--mesh-2:#0EA5E9;--mesh-3:#7C3AED;--mesh-opacity:0.22}

.mesh-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#F0F2F5}
.dark .mesh-bg{background:#080910}
.mesh-bg::before,.mesh-bg::after,.mesh-bg .blob3{content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--mesh-opacity);animation:floatMesh 18s ease-in-out infinite}
.mesh-bg::before{width:60vw;height:60vw;top:-15vw;left:-10vw;background:radial-gradient(circle,var(--mesh-1),transparent 70%)}
.mesh-bg::after{width:55vw;height:55vw;bottom:-12vw;right:-8vw;background:radial-gradient(circle,var(--mesh-2),transparent 70%);animation-delay:-6s}
.mesh-bg .blob3{width:50vw;height:50vw;top:30vh;left:25vw;background:radial-gradient(circle,var(--mesh-3),transparent 70%);animation-delay:-12s}
.dark .mesh-bg::before,.dark .mesh-bg::after,.dark .mesh-bg .blob3{filter:blur(100px)}
@keyframes floatMesh{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(3vw,-2vw) scale(1.08)}66%{transform:translate(-2vw,3vw) scale(0.95)}}

.noise-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dark .noise-overlay{opacity:0.04}

/* === Glass cards === */
.glass{background:rgba(255,255,255,0.65);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,0.8);box-shadow:0 8px 32px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9)}
.dark .glass{background:rgba(18,20,32,0.55);border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.05)}

.glass-nav{background:rgba(255,255,255,0.75);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,0.6)}
.dark .glass-nav{background:rgba(12,14,24,0.7);border:1px solid rgba(255,255,255,0.06)}

.glass-input{background:rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.08);transition:all 0.25s ease}
.glass-input:focus-within{border-color:rgba(99,102,241,0.4);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}
.dark .glass-input{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)}
.dark .glass-input:focus-within{border-color:rgba(129,140,248,0.4);box-shadow:0 0 0 3px rgba(99,102,241,0.15)}

/* === Gradient text & borders === */
.text-gradient{background:linear-gradient(135deg,#6366F1,#06B6D4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dark .text-gradient{background:linear-gradient(135deg,#818CF8,#22D3EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.border-gradient{position:relative}
.border-gradient::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(99,102,241,0.3),rgba(6,182,212,0.3));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* === Buttons === */
.btn-primary{background:linear-gradient(135deg,#6366F1,#4F46E5);color:white;box-shadow:0 4px 14px rgba(99,102,241,0.35);transition:all 0.3s ease}
.btn-primary:hover{background:linear-gradient(135deg,#4F46E5,#4338CA);box-shadow:0 6px 20px rgba(99,102,241,0.45);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none}

.btn-ghost{background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.08);transition:all 0.3s ease}
.btn-ghost:hover{background:rgba(0,0,0,0.07);border-color:rgba(0,0,0,0.12)}
.dark .btn-ghost{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)}
.dark .btn-ghost:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}

.btn-success{background:linear-gradient(135deg,#10B981,#059669);color:white;box-shadow:0 4px 14px rgba(16,185,129,0.3);transition:all 0.3s ease}
.btn-success:hover{box-shadow:0 6px 20px rgba(16,185,129,0.4);transform:translateY(-1px)}

.btn-danger{background:linear-gradient(135deg,#EF4444,#DC2626);color:white;box-shadow:0 4px 14px rgba(239,68,68,0.3);transition:all 0.3s ease}
.btn-danger:hover{box-shadow:0 6px 20px rgba(239,68,68,0.4);transform:translateY(-1px)}

/* === Animations === */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateY(24px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:0.7}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}50%{box-shadow:0 0 20px 4px rgba(99,102,241,0.15)}}

.fade-in{animation:fadeIn 0.4s ease-out}
.slide-in{animation:slideIn 0.35s cubic-bezier(0.16,1,0.3,1)}
.slide-in-right{animation:slideInRight 0.3s ease-out}
.animate-spin{animation:spin 1s linear infinite}
.stagger-1{animation:fadeIn 0.4s ease-out 0.05s both}
.stagger-2{animation:fadeIn 0.4s ease-out 0.1s both}
.stagger-3{animation:fadeIn 0.4s ease-out 0.15s both}
.stagger-4{animation:fadeIn 0.4s ease-out 0.2s both}

/* === Toggle === */
.toggle-switch{width:44px;height:24px;border-radius:9999px;position:relative;cursor:pointer;transition:background 0.3s}
.toggle-dot{width:18px;height:18px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;transition:left 0.3s cubic-bezier(0.16,1,0.3,1);box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.toggle-active .toggle-dot{left:23px}
.toggle-active{background:linear-gradient(135deg,#6366F1,#4F46E5)}

/* === Status === */
.status-dot{width:8px;height:8px;border-radius:50%}
.status-online{background:#10B981;box-shadow:0 0 8px rgba(16,185,129,0.5)}
.status-offline{background:#EF4444;box-shadow:0 0 8px rgba(239,68,68,0.5)}
.status-checking{background:#F59E0B;animation:pulse 1.2s infinite}
.status-dot-mini{width:7px;height:7px;border-radius:50%;display:inline-block}
.status-unknown{background:#94A3B8}

/* === Provider badges === */
.provider-badge{font-size:10px;padding:2px 8px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:4px;letter-spacing:0.02em}
.provider-mailtm{background:rgba(99,102,241,0.12);color:#6366F1}
.provider-mailgw{background:rgba(139,92,246,0.12);color:#8B5CF6}
.provider-guerrillamail{background:rgba(245,158,11,0.12);color:#F59E0B}
.dark .provider-mailtm{background:rgba(99,102,241,0.2);color:#A5B4FC}
.dark .provider-mailgw{background:rgba(139,92,246,0.2);color:#C4B5FD}
.dark .provider-guerrillamail{background:rgba(245,158,11,0.2);color:#FCD34D}

/* === Provider cards === */
.provider-card{border:1.5px solid rgba(0,0,0,0.06);background:rgba(0,0,0,0.02);transition:all 0.25s cubic-bezier(0.16,1,0.3,1);cursor:pointer}
.provider-card:hover{background:rgba(0,0,0,0.04);transform:translateY(-1px)}
.provider-card.selected{border-color:rgba(99,102,241,0.5);background:rgba(99,102,241,0.06);box-shadow:0 0 0 3px rgba(99,102,241,0.08)}
.dark .provider-card{border:1.5px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03)}
.dark .provider-card:hover{background:rgba(255,255,255,0.05)}
.dark .provider-card.selected{border-color:rgba(129,140,248,0.5);background:rgba(99,102,241,0.1);box-shadow:0 0 0 3px rgba(99,102,241,0.12)}

/* === Misc === */
.nav-badge{top:-5px;right:-5px;min-width:18px;height:18px;font-size:10px}
.history-item{user-select:none;touch-action:pan-y;transition:transform .2s ease;position:relative;overflow:hidden}
#pull-refresh-tip{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#64748B;font-size:13px;transition:height .2s ease}
.dark #pull-refresh-tip{color:#94A3B8}
.bg-blur-wrap{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
.bg-mask{position:fixed;inset:0;z-index:-1}
.bg-mask-light{background:rgba(240,242,245,0.88)}
.dark .bg-mask-light{background:rgba(8,9,16,0.78)}

.email-item{transition:all 0.2s ease;cursor:pointer}
.email-item:hover{background:rgba(99,102,241,0.04)}
.dark .email-item:hover{background:rgba(99,102,241,0.08)}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,0.35)}

/* Decorative glow */
.glow-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:0.15;pointer-events:none;animation:glowPulse 4s ease-in-out infinite}


/* ============================================================
   三端响应式适配：手机 / Pad / PC
   断点：手机 <700px，Pad 700-1023px，PC ≥1024px
   ============================================================ */

/* ---------- Pad 端（700px - 1023px） ---------- */
@media (min-width: 700px) and (max-width: 1023px) {
  body { font-size: 15px; }
  h1, h2, h3, .text-2xl, .text-3xl { letter-spacing: 0.02em !important; line-height: 1.35 !important; }
  .text-2xl { font-size: 1.5rem !important; }
  .text-3xl { font-size: 1.875rem !important; }
  .text-xl { font-size: 1.25rem !important; }
  .text-lg { font-size: 1.1rem !important; }
  .text-base { font-size: 0.95rem !important; }
  .text-sm { font-size: 0.85rem !important; }
  .text-xs { font-size: 0.75rem !important; }
  p, span, div, li, button, input, label { line-height: 1.6 !important; }
  .glass, .card, [class*="rounded-2xl"] { padding: 1.25rem !important; }
  .space-y-2 > * + * { margin-top: 0.6rem !important; }
  .space-y-3 > * + * { margin-top: 0.8rem !important; }
  .space-y-4 > * + * { margin-top: 1rem !important; }
  .space-x-2 > * + * { margin-left: 0.5rem !important; }
  .space-x-3 > * + * { margin-left: 0.75rem !important; }
  .gap-2 { gap: 0.5rem !important; }
  .gap-3 { gap: 0.75rem !important; }
  .gap-4 { gap: 1rem !important; }
  .px-4 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
  .py-2 { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
  .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .m-4 { margin: 1rem !important; }
  .mb-4 { margin-bottom: 1rem !important; }
  .mb-6 { margin-bottom: 1.5rem !important; }
  .mt-4 { margin-top: 1rem !important; }
  .mt-6 { margin-top: 1.5rem !important; }
}

/* ---------- PC 端（≥1024px） ---------- */
@media (min-width: 1024px) {
  body { font-size: 16px; }
  h1, h2, h3, .text-2xl, .text-3xl { letter-spacing: 0.03em !important; line-height: 1.4 !important; }
  .text-2xl { font-size: 1.75rem !important; }
  .text-3xl { font-size: 2.25rem !important; }
  .text-xl { font-size: 1.4rem !important; }
  .text-lg { font-size: 1.2rem !important; }
  .text-base { font-size: 1rem !important; }
  .text-sm { font-size: 0.9rem !important; }
  .text-xs { font-size: 0.8rem !important; }
  p, span, div, li, button, input, label { line-height: 1.7 !important; }
  .glass, .card, [class*="rounded-2xl"] { padding: 1.5rem !important; }
  .space-y-2 > * + * { margin-top: 0.65rem !important; }
  .space-y-3 > * + * { margin-top: 0.9rem !important; }
  .space-y-4 > * + * { margin-top: 1.15rem !important; }
  .space-x-2 > * + * { margin-left: 0.6rem !important; }
  .space-x-3 > * + * { margin-left: 0.85rem !important; }
  .gap-2 { gap: 0.6rem !important; }
  .gap-3 { gap: 0.85rem !important; }
  .gap-4 { gap: 1.15rem !important; }
  .px-4 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .py-2 { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }
  .py-3 { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }
  .py-4 { padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; }
  .m-4 { margin: 1.25rem !important; }
  .mb-4 { margin-bottom: 1.25rem !important; }
  .mb-6 { margin-bottom: 1.75rem !important; }
  .mt-4 { margin-top: 1.25rem !important; }
  .mt-6 { margin-top: 1.75rem !important; }
  /* PC端主内容区居中，限制最大宽度 */
  body > div:not(.mesh-bg):not(.glow-orb) { max-width: 720px; margin-left: auto; margin-right: auto; }
}

/* ---------- 手机端（<700px）保持原紧凑布局，微调行距 ---------- */
@media (max-width: 699px) {
  body { font-size: 14px; }
  p, span, div, li, button, input, label { line-height: 1.55 !important; }
  h1, h2, h3 { letter-spacing: 0.01em !important; }
}