/* TempMail v3 — Midnight Ember visual system */

:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --font-sans: 'DM Sans', 'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --transition: 180ms cubic-bezier(.2,.75,.25,1);
  --shadow-sm: 0 8px 22px rgba(0,0,0,.12);
  --shadow-md: 0 16px 42px rgba(0,0,0,.2);
  --shadow-lg: 0 28px 84px rgba(0,0,0,.36);
  --shadow-glow: 0 0 30px var(--accent-glow);
  --card-shadow: 0 18px 48px rgba(0,0,0,.22);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #100d17;
  --bg-surface: #191521;
  --bg-surface-elevated: #211b2b;
  --bg-surface-hover: #2b2337;
  --bg-subtle: #14111d;
  --bg-input: #100d17;
  --border-color: #30283c;
  --border-color-hover: #514166;
  --border-color-focus: #b59bff;
  --text-primary: #f7f1ff;
  --text-secondary: #c3b9ce;
  --text-muted: #93889f;
  --text-accent: #c2adff;
  --accent-primary: #b49aff;
  --accent-primary-hover: #c7b4ff;
  --accent-secondary: #ff8a68;
  --accent-gradient: linear-gradient(115deg, #9d7bff 0%, #c477f2 48%, #ff8a68 100%);
  --accent-glow: rgba(177, 137, 255, .24);
  --color-success: #70d7ad;
  --color-success-bg: rgba(112,215,173,.13);
  --color-warning: #ffc879;
  --color-warning-bg: rgba(255,200,121,.12);
  --color-danger: #ff858c;
  --color-danger-bg: rgba(255,133,140,.13);
  --color-info: #8bc8ff;
  --color-info-bg: rgba(139,200,255,.13);
}

[data-theme="light"] {
  color-scheme: light;
  --bg-app: #f4f0eb;
  --bg-surface: #fffcf8;
  --bg-surface-elevated: #f9f4ee;
  --bg-surface-hover: #f1eae3;
  --bg-subtle: #efe9e3;
  --bg-input: #fffaf4;
  --border-color: #e3d9d1;
  --border-color-hover: #cbbab0;
  --border-color-focus: #7359dc;
  --text-primary: #211a2a;
  --text-secondary: #625969;
  --text-muted: #918795;
  --text-accent: #6850cb;
  --accent-primary: #7359dc;
  --accent-primary-hover: #5c42c5;
  --accent-secondary: #dd694e;
  --accent-gradient: linear-gradient(115deg, #7256dd 0%, #9b62cc 52%, #e27658 100%);
  --accent-glow: rgba(115,89,220,.16);
  --color-success: #258661;
  --color-success-bg: #e5f3eb;
  --color-warning: #a86b16;
  --color-warning-bg: #fff1d8;
  --color-danger: #bd4550;
  --color-danger-bg: #ffebeb;
  --color-info: #33789e;
  --color-info-bg: #e7f3f9;
  --shadow-sm: 0 7px 20px rgba(65,43,33,.06);
  --shadow-md: 0 16px 38px rgba(65,43,33,.1);
  --shadow-lg: 0 24px 70px rgba(49,32,44,.18);
  --card-shadow: 0 14px 40px rgba(65,43,33,.08);
}

[data-theme="oled"] {
  color-scheme: dark;
  --bg-app: #050407;
  --bg-surface: #0d0a12;
  --bg-surface-elevated: #15101c;
  --bg-surface-hover: #21182a;
  --bg-subtle: #09070d;
  --bg-input: #050407;
  --border-color: #251c30;
  --border-color-hover: #49345c;
  --border-color-focus: #c5a3ff;
  --text-primary: #fbf6ff;
  --text-secondary: #c6b9d3;
  --text-muted: #93859f;
  --text-accent: #d0b5ff;
  --accent-primary: #c2a0ff;
  --accent-primary-hover: #d3baff;
  --accent-secondary: #ff8e70;
  --accent-gradient: linear-gradient(115deg, #9a70ff 0%, #c478ed 52%, #ff896d 100%);
  --accent-glow: rgba(194,160,255,.2);
  --color-success: #73d8ad;
  --color-success-bg: rgba(115,216,173,.12);
  --color-warning: #ffd080;
  --color-warning-bg: rgba(255,208,128,.12);
  --color-danger: #ff8b94;
  --color-danger-bg: rgba(255,139,148,.12);
  --color-info: #95d4ff;
  --color-info-bg: rgba(149,212,255,.12);
}

[data-theme="cyberpunk"] {
  color-scheme: dark;
  --bg-app: #0c1018;
  --bg-surface: #111a24;
  --bg-surface-elevated: #172632;
  --bg-surface-hover: #1d3540;
  --bg-subtle: #101820;
  --bg-input: #0c1018;
  --border-color: #253b46;
  --border-color-hover: #36707a;
  --border-color-focus: #61e9df;
  --text-primary: #effffc;
  --text-secondary: #a9d2d0;
  --text-muted: #779a9b;
  --text-accent: #7af3df;
  --accent-primary: #6ae6d5;
  --accent-primary-hover: #96fff0;
  --accent-secondary: #fe7eaa;
  --accent-gradient: linear-gradient(115deg, #57d9d4 0%, #a17eff 52%, #ff7da4 100%);
  --accent-glow: rgba(87,217,212,.2);
  --color-success: #83e7a9;
  --color-success-bg: rgba(131,231,169,.13);
  --color-warning: #ffd46f;
  --color-warning-bg: rgba(255,212,111,.13);
  --color-danger: #ff819d;
  --color-danger-bg: rgba(255,129,157,.13);
  --color-info: #82d8ff;
  --color-info-bg: rgba(130,216,255,.13);
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  scrollbar-color: var(--border-color-hover) transparent;
}

body {
  background-image:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--accent-primary) 13%, transparent), transparent 34rem),
    radial-gradient(ellipse at 92% 14%, color-mix(in srgb, var(--accent-secondary) 8%, transparent), transparent 30rem);
  background-attachment: fixed;
}

button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

.app-container {
  min-height: 100vh;
  height: auto;
  overflow: visible;
  background: transparent;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  padding-inline: clamp(16px, 3.5vw, 52px);
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  box-shadow: 0 10px 36px rgba(0,0,0,.12);
  backdrop-filter: blur(20px);
}

.brand-section { gap: 12px; min-width: 0; }
.brand-logo { width: 38px; height: 38px; border: 1px solid var(--border-color); border-radius: 13px; box-shadow: 0 0 24px var(--accent-glow); }
.brand-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.055em; }
.brand-subtitle { color: var(--text-muted); font-size: 10px; letter-spacing: .035em; }
.badge-demo { border: 1px solid color-mix(in srgb,var(--accent-secondary) 42%,var(--border-color)); border-radius: 999px; background: color-mix(in srgb,var(--accent-secondary) 14%,var(--bg-surface)); color: var(--accent-secondary); font-size: 9px; letter-spacing: .13em; }
.header-actions { gap: 7px; }
.creator-portfolio-badge { border-color: var(--border-color); border-radius: 999px; background: var(--bg-surface-elevated); color: var(--text-secondary); }
.creator-avatar { background: var(--accent-gradient); color: #fff; }

.btn-header-action,
.icon-btn {
  min-height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
  box-shadow: none;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}
.btn-header-action { padding: 8px 13px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.icon-btn { width: 38px; height: 38px; }
.btn-header-action:hover,
.icon-btn:hover { transform: translateY(-2px); border-color: var(--border-color-hover); background: var(--bg-surface-hover); color: var(--text-primary); }
.btn-header-action.btn-accent { border: 0; background: var(--accent-gradient); color: #fff; box-shadow: 0 8px 24px var(--accent-glow); }
.btn-header-action.btn-accent:hover { filter: brightness(1.08); }

.workspace-mode-nav {
  position: sticky;
  top: 72px;
  z-index: 40;
  padding: 10px clamp(16px, 3.5vw, 52px);
  border-bottom: 1px solid color-mix(in srgb,var(--border-color) 70%,transparent);
  background: color-mix(in srgb,var(--bg-app) 88%,transparent);
  backdrop-filter: blur(18px);
}
.mode-nav-container { max-width: 1500px; gap: 8px; }
.mode-nav-btn { padding: 9px 14px; border: 1px solid transparent; border-radius: 10px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.mode-nav-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.mode-nav-btn.active { border-color: var(--border-color); background: var(--bg-surface-elevated); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); }
.mode-badge-pulse { border-radius: 999px; background: color-mix(in srgb,var(--accent-secondary) 16%,var(--bg-surface)); color: var(--accent-secondary); box-shadow: none; }

.main-layout { flex: none; min-height: 0; overflow: visible; }
.address-hero { padding: 36px 0 18px; border: 0; background: transparent; }
.address-hero-container { width: 100%; max-width: 1500px; padding-inline: clamp(16px, 4vw, 60px); }
.workspace-intro { align-items: center; gap: 24px; margin-bottom: 25px; }
.workspace-eyebrow { display: block; margin-bottom: 11px; color: var(--accent-secondary); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.workspace-eyebrow span { margin-inline: 5px; color: var(--accent-primary); }
.workspace-intro h1 { max-width: 840px; margin: 0; font-family: var(--font-display); font-size: clamp(34px, 5.1vw, 62px); font-weight: 600; letter-spacing: -.065em; line-height: .99; color: var(--text-primary); }
.workspace-intro p { margin: 13px 0 0; color: var(--text-secondary); font-size: 13px; }
.workspace-intro-status { padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-surface); color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.workspace-intro-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-warning); box-shadow: 0 0 12px var(--color-warning); }

.mail-category-switcher { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; margin-bottom: 13px; }
.section-toggle-btn { min-width: 0; min-height: 66px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 14px; background: color-mix(in srgb,var(--bg-surface) 86%,transparent); box-shadow: var(--shadow-sm); transition: transform var(--transition),border-color var(--transition),background var(--transition),box-shadow var(--transition); }
.section-toggle-btn:hover { transform: translateY(-2px); border-color: var(--border-color-hover); background: var(--bg-surface-elevated); }
.section-toggle-btn .section-icon { width: 38px; height: 38px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-subtle); font-size: 19px; }
.section-toggle-btn .section-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.section-toggle-btn .section-tagline { color: var(--text-muted); font-size: 9px; }
.section-toggle-btn[data-section="personal"].active,
.section-toggle-btn[data-section="education_business"].active { border-color: color-mix(in srgb,var(--accent-primary) 62%,var(--border-color)); background: color-mix(in srgb,var(--accent-primary) 11%,var(--bg-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent-primary) 18%,transparent),0 0 26px var(--accent-glow); }
.section-toggle-btn[data-section="personal"].active .section-icon,
.section-toggle-btn[data-section="education_business"].active .section-icon { border-color: transparent; background: var(--accent-gradient); color: #fff; }
.section-toggle-btn[data-section="personal"].active .section-title,
.section-toggle-btn[data-section="education_business"].active .section-title { color: var(--text-primary); }
.dual-toggle-btn { min-width: 154px; border-style: dashed; justify-content: center; }
.dual-toggle-btn.active { border-style: solid; border-color: var(--accent-secondary); color: var(--accent-secondary); }
.section-badge,
.section-badge.section-personal,
.section-badge.section-business,
.section-badge.section-edu { border: 1px solid color-mix(in srgb,var(--accent-primary) 38%,var(--border-color)); border-radius: 999px; background: color-mix(in srgb,var(--accent-primary) 12%,var(--bg-surface)); color: var(--accent-primary); }

.demo-mode-notice { margin: 0 0 13px; padding: 10px 13px; border: 1px solid color-mix(in srgb,var(--color-warning) 28%,var(--border-color)); border-left: 3px solid var(--color-warning); border-radius: 11px; background: color-mix(in srgb,var(--color-warning-bg) 74%,var(--bg-surface)); color: var(--text-secondary); font-size: 10px; }
.demo-mode-notice strong { color: var(--color-warning); }
.demo-mode-notice code { color: var(--text-primary); }

.address-card { position: relative; gap: 13px; padding: 16px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--accent-primary) 30%,var(--border-color)); border-radius: 18px; background: radial-gradient(ellipse at 5% 0%,color-mix(in srgb,var(--accent-primary) 14%,transparent),transparent 44%),linear-gradient(135deg,var(--bg-surface-elevated),var(--bg-surface)); box-shadow: var(--card-shadow); }
.address-card::after { content: ""; position: absolute; right: -75px; top: -120px; width: 260px; height: 260px; border-radius: 50%; background: color-mix(in srgb,var(--accent-secondary) 10%,transparent); filter: blur(55px); pointer-events: none; }
.address-card > * { position: relative; z-index: 1; }
.address-card-top { align-items: center; }
.address-label-group { gap: 8px; }
.lifespan-badge { border-color: var(--border-color); border-radius: 999px; background: color-mix(in srgb,var(--bg-surface) 84%,transparent); color: var(--text-secondary); font-size: 10px; }
.btn-extend-badge { border-radius: 999px; background: color-mix(in srgb,var(--accent-secondary) 15%,var(--bg-surface)); color: var(--accent-secondary); }
.address-display-row { gap: 10px; padding: 11px; border: 1px solid var(--border-color); border-radius: 13px; background: color-mix(in srgb,var(--bg-app) 65%,transparent); }
.email-address-text { color: var(--text-primary); font-family: var(--font-mono); font-size: clamp(15px,1.5vw,19px); font-weight: 600; letter-spacing: -.04em; }
.inline-domain-dropdown { border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-surface); color: var(--text-secondary); font-size: 9px; }
.domain-quick-selector { color: var(--text-muted); }
.status-dot-demo { background: var(--color-warning); box-shadow: 0 0 12px var(--color-warning); }
.status-dot-live { background: var(--color-success); box-shadow: 0 0 12px var(--color-success); }
.inbox-privacy-notice { margin: 0 0 13px; padding: 10px 13px; border: 1px solid color-mix(in srgb,var(--color-success) 28%,var(--border-color)); border-left: 3px solid var(--color-success); border-radius: 11px; background: color-mix(in srgb,var(--color-success-bg) 74%,var(--bg-surface)); color: var(--text-secondary); font-size: 10px; }
.inbox-privacy-notice strong { color: var(--color-success); }
.message-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.message-labels-title { color: var(--text-muted); font-size: 11px; font-weight: 700; margin-right: 2px; }
.message-labels .form-select { width: auto; min-width: 132px; min-height: 32px; padding: 5px 9px; font-size: 11px; }
.message-label-chip { border: 1px solid color-mix(in srgb,var(--accent-primary) 35%,var(--border-color)); border-radius: 999px; background: color-mix(in srgb,var(--accent-primary) 10%,var(--bg-surface)); color: var(--text-primary); padding: 4px 9px; font-size: 10px; cursor: pointer; }
.address-actions-bar { gap: 7px; }
.address-actions-bar .btn { padding: 8px 11px; font-size: 10px; }
.btn,.viewer-btn { border-radius: 10px; font-weight: 700; transition: var(--transition); }
.btn-primary { border-color: transparent; background: var(--accent-gradient); color: #fff; box-shadow: 0 7px 20px var(--accent-glow); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-secondary,.btn-outline { border-color: var(--border-color); background: var(--bg-surface-elevated); color: var(--text-secondary); }
.btn-secondary:hover,.btn-outline:hover { border-color: var(--border-color-hover); background: var(--bg-surface-hover); color: var(--text-primary); }
.btn-danger-outline { border-color: color-mix(in srgb,var(--color-danger) 40%,var(--border-color)); color: var(--color-danger); }
.pro-tools-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.pro-tools-label { color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.pro-tool-pill { min-height: 30px; padding: 5px 9px; border: 1px solid transparent; border-radius: 9px; background: var(--bg-surface-elevated); color: var(--text-secondary); font-size: 9px; font-weight: 700; transition: var(--transition); }
.pro-tool-pill:hover { transform: translateY(-1px); border-color: var(--border-color-hover); background: var(--bg-surface-hover); color: var(--text-primary); }

.workspace-container { width: calc(100% - clamp(32px,7vw,100px)); max-width: 1500px; height: clamp(480px,calc(100vh - 360px),720px); min-height: 480px; flex: none; margin: 0 auto 22px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-surface); box-shadow: var(--card-shadow); }
.inbox-column { width: 370px; border-right: 1px solid var(--border-color); border-radius: 18px 0 0 18px; background: color-mix(in srgb,var(--bg-surface) 95%,var(--accent-primary)); }
.viewer-column { background: var(--bg-app); }
.folder-tabs-bar { gap: 3px; padding: 9px; border-bottom: 1px solid var(--border-color); background: var(--bg-surface); scrollbar-width: none; }
.folder-tabs-bar::-webkit-scrollbar { display: none; }
.folder-tab-btn { padding: 7px 9px; border-radius: 9px; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.folder-tab-btn.active { background: color-mix(in srgb,var(--accent-primary) 14%,var(--bg-surface)); color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); }
.inbox-header { padding: 13px 13px 9px; border-bottom: 1px solid var(--border-color); }
.inbox-title { font-family: var(--font-display); color: var(--text-primary); }
.quick-rate-dropdown { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface-elevated); color: var(--text-secondary); }
.refresh-timer-badge { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; }
.refresh-progress-track { background: var(--bg-subtle); }
.refresh-progress-bar { background: var(--accent-gradient); }
.search-wrapper { border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); }
.search-wrapper:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-icon { color: var(--text-muted); }
.search-input { color: var(--text-primary); }
.search-input::placeholder { color: var(--text-muted); }
.filter-chips-row { gap: 6px; padding: 8px 11px; }
.filter-chip { padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; background: var(--bg-surface-elevated); color: var(--text-muted); font-size: 9px; font-weight: 700; }
.filter-chip.active { border-color: color-mix(in srgb,var(--accent-primary) 45%,var(--border-color)); background: color-mix(in srgb,var(--accent-primary) 15%,var(--bg-surface)); color: var(--accent-primary); }
.inbox-list { background: transparent; }
.inbox-card { margin: 6px 8px; border: 1px solid transparent; border-radius: 12px; background: var(--bg-surface); transition: var(--transition); }
.inbox-card:hover { border-color: var(--border-color-hover); background: var(--bg-surface-elevated); transform: translateY(-1px); }
.inbox-card.selected { border-color: color-mix(in srgb,var(--accent-primary) 58%,var(--border-color)); background: color-mix(in srgb,var(--accent-primary) 10%,var(--bg-surface)); box-shadow: inset 3px 0 var(--accent-primary); }
.card-sender,.sender-name { color: var(--text-primary); }
.card-subject { color: var(--text-primary); font-weight: 700; }
.card-snippet,.card-time,.message-time { color: var(--text-muted); }
.card-avatar,.sender-avatar { border-radius: 11px; background: color-mix(in srgb,var(--accent-primary) 20%,var(--bg-surface-elevated)); color: var(--accent-primary); }
.card-badges .badge,.viewer-badges .badge { border-radius: 999px; }
.unread-dot { background: var(--accent-secondary); box-shadow: 0 0 9px color-mix(in srgb,var(--accent-secondary) 60%,transparent); }
.empty-inbox,.empty-viewer { color: var(--text-muted); }
.empty-viewer-icon { border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-surface); color: var(--accent-primary); box-shadow: 0 0 40px var(--accent-glow); }

.viewer-toolbar { border-bottom: 1px solid var(--border-color); background: var(--bg-surface); }
.viewer-header { border-bottom: 1px solid var(--border-color); }
.viewer-subject { color: var(--text-primary); font-family: var(--font-display); letter-spacing: -.04em; }
.viewer-meta,.recipient-line { color: var(--text-secondary); }
.viewer-btn { border-color: var(--border-color); background: var(--bg-surface-elevated); color: var(--text-secondary); }
.viewer-btn:hover,.viewer-tab:hover { border-color: var(--border-color-hover); background: var(--bg-surface-hover); color: var(--text-primary); }
.viewer-tab { border-color: transparent; color: var(--text-muted); }
.viewer-tab.active { border-color: var(--accent-primary); color: var(--accent-primary); }
.email-viewer-inner { color: var(--text-primary); }
.email-frame,.plain-text-content { border-color: var(--border-color); border-radius: 12px; background: var(--bg-surface); }
.security-warning-banner { border-radius: 10px; background: var(--color-warning-bg); color: var(--color-warning); }
.security-score-pill { border-radius: 999px; }
.otp-banner,.quick-otp-banner { border: 1px solid color-mix(in srgb,var(--accent-secondary) 42%,var(--border-color)); border-radius: 12px; background: color-mix(in srgb,var(--accent-secondary) 10%,var(--bg-surface)); box-shadow: 0 0 24px color-mix(in srgb,var(--accent-secondary) 10%,transparent); }
.otp-code,.quick-otp-code { color: var(--accent-secondary); font-family: var(--font-mono); }
.attachment-item,.extracted-links-card,.batch-action-bar { border-color: var(--border-color); border-radius: 12px; background: var(--bg-surface); }
.link-url-text { color: var(--accent-primary); }

.app-footer { padding: 13px clamp(16px,4vw,60px); border-top: 1px solid var(--border-color); background: color-mix(in srgb,var(--bg-surface) 86%,transparent); color: var(--text-muted); }
.footer-brand,.footer-author-link { color: var(--text-primary); }
.footer-cf-badge,.footer-portfolio-pill { border-color: var(--border-color); border-radius: 999px; background: var(--bg-surface-elevated); color: var(--text-secondary); }

.modal-overlay { padding: 18px; background: rgba(5,4,9,.76); backdrop-filter: blur(12px); }
.modal-card { border: 1px solid var(--border-color); border-radius: 20px; background: var(--bg-surface); box-shadow: var(--shadow-lg); }
.modal-header,.modal-footer { border-color: var(--border-color); background: color-mix(in srgb,var(--bg-surface-elevated) 70%,var(--bg-surface)); }
.modal-header h3 { color: var(--text-primary); font-family: var(--font-display); letter-spacing: -.03em; }
.modal-body,.modal-subtitle { color: var(--text-secondary); }
.modal-close-btn { border-radius: 9px; color: var(--text-muted); }
.modal-close-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.form-label { color: var(--text-secondary); font-weight: 700; }
.form-input,.form-select,.form-textarea,.http-url-input,.http-method-select { border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); color: var(--text-primary); }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.input-hint,.preset-label { color: var(--text-muted); }
.test-template-card { border-color: var(--border-color); border-radius: 13px; background: var(--bg-surface-elevated); }
.test-template-card:hover { border-color: var(--accent-primary); background: color-mix(in srgb,var(--accent-primary) 10%,var(--bg-surface)); }
.test-template-icon { border-radius: 10px; background: var(--bg-subtle); }
.api-snippet-block,.snippet-code,.http-response-box { border-color: var(--border-color); border-radius: 12px; background: var(--bg-input); color: var(--text-secondary); }
.toast { border: 1px solid var(--border-color); border-left: 3px solid var(--accent-primary); border-radius: 12px; background: var(--bg-surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-md); }
.toast-success { border-left-color: var(--color-success); }
.toast-warning { border-left-color: var(--color-warning); }
.toast-error { border-left-color: var(--color-danger); }
.toast-container { z-index: 1000; }

.productivity-hub-layout { width: calc(100% - clamp(32px,7vw,100px)); max-width: 1500px; min-height: 0; height: auto; margin: 24px auto; padding: 0; gap: 16px; }
.prod-sidebar { border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.prod-sidebar-header { color: var(--text-muted); letter-spacing: .15em; }
.prod-tab-item { border-radius: 10px; color: var(--text-secondary); }
.prod-tab-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.prod-tab-item.active { border-color: color-mix(in srgb,var(--accent-primary) 42%,var(--border-color)); background: color-mix(in srgb,var(--accent-primary) 12%,var(--bg-surface)); color: var(--accent-primary); box-shadow: inset 3px 0 var(--accent-primary); }
.prod-content-container,.prod-tool-card { min-width: 0; }
.prod-tool-card { border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.prod-tool-header { border-color: var(--border-color); }
.prod-tool-title-group h2 { color: var(--text-primary); font-family: var(--font-display); }
.prod-tool-subtitle,.scratchpad-stats-badge { color: var(--text-muted); }
.scratchpad-toolbar { border-color: var(--border-color); border-radius: 12px; background: var(--bg-subtle); }
.scratchpad-textarea { box-sizing: border-box; border-color: var(--border-color); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); }
.password-display-box,.identity-card-preview,.env-stat-card,.extracted-links-card { border-color: var(--border-color); border-radius: 12px; background: var(--bg-surface-elevated); }
.password-text-output,.identity-field-val,.env-stat-val { color: var(--text-primary); }
.identity-field-label,.env-stat-label { color: var(--text-muted); }
.codec-subtab-btn { border-radius: 9px; }
.codec-subtab-btn.active { background: color-mix(in srgb,var(--accent-primary) 14%,var(--bg-surface)); color: var(--accent-primary); }
.generator-controls-grid { grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); }

.dual-dashboard-container { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 16px auto 24px; width: calc(100% - clamp(32px,7vw,100px)); max-width: 1500px; }
.dual-column-card { min-width: 0; height: clamp(480px,calc(100vh - 360px),720px); min-height: 480px; overflow: hidden; border: 1px solid var(--border-color); border-top: 2px solid var(--accent-primary); border-radius: 16px; background: var(--bg-surface); box-shadow: var(--card-shadow); }
.dual-business-column { border-top-color: var(--accent-secondary); }
.dual-column-header { border-bottom: 1px solid var(--border-color); background: var(--bg-surface-elevated); }
.dual-address-bar { min-width: 0; border-color: var(--border-color); border-radius: 10px; background: var(--bg-input); }
.dual-address-text { color: var(--text-primary); }
.dual-msg-card { border-color: var(--border-color); border-radius: 12px; background: var(--bg-surface-elevated); }
.dual-msg-card:hover { border-color: var(--accent-primary); background: var(--bg-surface-hover); }
.dual-empty-state { color: var(--text-muted); }

@media (max-width: 1000px) {
  .creator-portfolio-badge .creator-name { display: none; }
  .header-actions { gap: 5px; }
  .btn-header-action { padding-inline: 9px; }
  .workspace-intro h1 { font-size: clamp(32px,5.4vw,50px); }
  .inbox-column { width: 340px; }
}

@media (max-width: 768px) {
  html,body { height: auto; min-height: 100%; }
  .app-container { min-height: 100vh; height: auto; overflow: visible; }
  .app-header { height: 58px; padding-inline: 12px; gap: 8px; }
  .brand-section { gap: 7px; }
  .brand-logo { width: 31px; height: 31px; border-radius: 10px; }
  .brand-title { font-size: 14px; }
  .brand-subtitle { display: none; }
  .header-actions { flex: 0 0 auto; gap: 4px; }
  .creator-portfolio-badge,.header-actions #compose-email-btn,.header-actions #webhook-btn,.header-actions #enable-notif-btn,#shortcuts-btn { display: none; }
  .header-actions .icon-btn { width: 32px; min-height: 32px; height: 32px; border-radius: 9px; }
  .workspace-mode-nav { top: 58px; padding: 6px 12px; }
  .mode-nav-container { gap: 5px; }
  .mode-nav-btn { padding: 7px 9px; font-size: 9px; white-space: nowrap; }
  .main-layout { flex: none; overflow: visible; }
  .address-hero { padding: 21px 0 12px; }
  .address-hero-container { padding-inline: 12px; }
  .workspace-intro { display: block; margin-bottom: 15px; }
  .workspace-intro h1 { max-width: 520px; font-size: clamp(34px,9vw,44px); line-height: 1.02; }
  .workspace-intro p { max-width: 38ch; font-size: 11px; line-height: 1.55; }
  .workspace-intro-status { margin-top: 13px; }
  .mail-category-switcher { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .section-toggle-btn { min-height: 59px; padding: 8px; border-radius: 12px; }
  .section-toggle-btn .section-icon { width: 32px; height: 32px; flex: 0 0 32px; font-size: 16px; }
  .section-toggle-btn .section-title { font-size: 10px; }
  .section-toggle-btn .section-tagline { display: none; }
  .dual-toggle-btn { grid-column: 1/-1; min-height: 42px; }
  .address-card { gap: 10px; padding: 12px; border-radius: 15px; }
  .address-card-top { align-items: flex-start; }
  .address-label-group { flex-wrap: wrap; gap: 6px; }
  .address-display-row { gap: 6px; padding: 7px; }
  .email-address-text { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
  .inline-domain-dropdown { display: none; }
  .address-actions-bar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .address-actions-bar .btn { min-width: 0; width: 100%; justify-content: center; padding: 8px 5px; font-size: 9px; }
  .address-actions-bar #copy-email-btn { grid-column: 1/-1; }
  .pro-tools-bar { gap: 5px; padding-top: 8px; }
  .pro-tools-label { width: 100%; }
  .pro-tool-pill { min-height: 29px; padding: 5px 7px; font-size: 9px; }
  .workspace-container { display: flex; width: calc(100% - 24px); height: min(58vh,560px); min-height: 370px; margin: 0 auto 14px; border-radius: 15px; }
  .inbox-column { width: 100%; border: 0; border-radius: 15px; }
  .viewer-column { display: none; width: 100%; height: 100%; position: absolute; inset: 0; border-radius: 15px; }
  body.mobile-viewing-email .viewer-column { display: flex; }
  .viewer-toolbar { padding: 8px 12px; }
  .viewer-header { padding: 12px; }
  .viewer-subject { font-size: 16px; }
  .viewer-tabs { padding-inline: 12px; }
  .otp-banner { margin: 10px 12px 0; }
  .dual-dashboard-container { grid-template-columns: minmax(0,1fr); gap: 11px; width: calc(100% - 24px); margin: 12px auto 20px; }
  .dual-column-card { width: 100%; height: clamp(420px,62vh,560px); min-height: 420px; border-radius: 15px; }
  .productivity-hub-layout { display: block; width: calc(100% - 24px); margin: 14px auto; }
  .prod-sidebar { display: flex; flex-direction: column; gap: 3px; overflow-x: hidden; margin-bottom: 10px; padding: 8px; }
  .prod-sidebar-header { display: none; }
  .prod-tab-item { width: 100%; min-width: 0; flex: 0 1 auto; padding: 8px 10px; font-size: 10px; }
  .prod-content-container,.prod-tool-card { width: 100%; min-width: 0; box-sizing: border-box; }
  .prod-tool-card { padding: 16px; gap: 15px; }
  .prod-tool-header { align-items: flex-start; }
  .prod-tool-title-group h2 { font-size: 16px; }
  .scratchpad-toolbar { padding: 8px; }
  .scratchpad-textarea { min-height: 300px; width: 100%; }
  .password-display-box { flex-wrap: wrap; padding: 12px; }
  .password-text-output { font-size: 14px; overflow-wrap: anywhere; }
  .dual-address-bar { gap: 5px; padding: 6px; }
  .dual-address-text { font-size: 10px; }
  .dual-column-header { padding: 11px; }
  .app-footer { padding: 10px 12px; }
  .footer-wrap { justify-content: center; gap: 8px; text-align: center; }
  .modal-overlay { padding: 10px; }
  .modal-card { max-height: calc(100dvh - 20px); border-radius: 16px; }
  .modal-body { overflow-y: auto; }
}

@media (max-width: 420px) {
  .header-actions #sound-toggle-btn { display: none; }
  .brand-title { font-size: 13px; }
  .badge-demo { padding: 2px 6px; font-size: 8px; }
  .mode-nav-btn { padding-inline: 7px; font-size: 8px; }
  .section-toggle-btn { gap: 6px; }
  .address-label-group .section-badge { font-size: 9px; }
  .lifespan-badge { font-size: 9px; }
  .pro-tool-icon { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}