:root {
  --bg-a: #fff8ee;
  --bg-b: #f1f7ff;
  --ink: #192336;
  --ink-soft: #4b5975;
  --accent: #0f6dff;
  --accent-2: #12a081;
  --danger: #af2f2f;
  --card: #ffffffcc;
  --border: #c8d3e6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 10% 5%, var(--bg-a), transparent 45%), radial-gradient(circle at 95% 20%, #dff4ff, transparent 35%), linear-gradient(150deg, #fbf6ed, var(--bg-b));
  min-height: 100vh;
}
.layout { width: min(940px, 94vw); margin: 2rem auto 3rem; }
.hero { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem 1.4rem; backdrop-filter: blur(4px); }
.hero-banner { position: relative; margin: -1.25rem -1.4rem 0; border-radius: 15px 15px 0 0; overflow: hidden; }
.hero-banner::after { content: ''; position: absolute; inset: 0; background: rgba(200, 40, 40, 0.18); pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
.hero-banner.external-active::after { opacity: 1; }
.hero-banner-img { width: 100%; display: block; max-height: 150px; object-fit: cover; object-position: center; }
.hero-identity { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 0 0.75rem; }
.hero-logo { height: 44px; width: auto; flex-shrink: 0; }
.hero-taglines { margin-left: auto; text-align: right; }
.hero-taglines p { margin: 0; line-height: 1.55; font-size: 0.82rem; color: var(--ink-soft); }
.hero-title { display: flex; flex-direction: column; text-align: right; padding-left: 1rem; border-left: 2px solid var(--border); }
.hero-title span { font-size: 1.55rem; font-weight: 700; line-height: 1.05; color: var(--ink); }
.hero-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 0.75rem; }
.auth-actions { display: flex; gap: 0.75rem; }
.auth-actions a { color: var(--accent); text-decoration: none; font-weight: 600; }
.tabs { display: flex; gap: 0.75rem; margin: 1.2rem 0; }
body.auth-loading .layout { visibility: hidden; }
.tabs button { border: 1px solid var(--border); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; display: grid; gap: 0.65rem; }
label { font-weight: 600; }
input, textarea, button { font: inherit; }
input:not([type="range"]):not([type="checkbox"]), textarea { border: 1px solid #9cb0cc; border-radius: 10px; padding: 0.6rem 0.7rem; width: 100%; }
input[type="range"] { width: 100%; padding: 0; border: none; background: none; accent-color: var(--accent); cursor: pointer; }
input[type="checkbox"] { width: 1rem; height: 1rem; padding: 0; border: 1px solid #9cb0cc; border-radius: 3px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
button { border: 0; border-radius: 10px; padding: 0.7rem 0.95rem; background: var(--accent-2); color: #fff; font-weight: 700; cursor: pointer; }
.status { margin-top: 1rem; min-height: 1.3rem; color: var(--ink-soft); }
.result { margin-top: 0.8rem; border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem; background: #fff; }
.secret-output { margin: 0.7rem 0 0; white-space: pre-wrap; border: 1px dashed #97a9c7; border-radius: 10px; padding: 0.8rem; background: #fff; }
.secret-reveal-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
#retrieveForm { display: flex; flex-direction: column; gap: 12px; }
.hidden { display: none !important; }
.error { color: var(--danger); }
.secret-input-wrapper { position: relative; }
textarea.obscured { filter: blur(6px); -webkit-user-select: none; user-select: none; }
.expiry-row { display: flex; justify-content: space-between; align-items: baseline; }
.expiry-row span { font-weight: normal; color: var(--ink-soft); font-size: 0.92rem; }
.checkbox-row { display: flex; align-items: center; gap: 0.55rem; }
.checkbox-row label { font-weight: normal; cursor: pointer; }
.secret-input-wrapper button { position: absolute; top: 0.4rem; right: 0.5rem; padding: 0.25rem 0.55rem; font-size: 0.75rem; background: var(--ink-soft); border-radius: 6px; }
.char-count-row { display: flex; justify-content: flex-end; margin-top: 0.2rem; }
.char-count-row span { font-size: 0.75rem; color: var(--ink-soft); }
.char-count-row span.char-count-warn { color: var(--danger); font-weight: 600; }
.result-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.result-btn { display: inline-block; border: 0; border-radius: 10px; padding: 0.55rem 0.85rem; font: inherit; font-weight: 700; color: #fff; cursor: pointer; text-decoration: none; text-align: center; }
.mail-btn { background: var(--accent); }
.copy-btn { background: var(--accent-2); }
.new-btn { background: var(--ink-soft); }
.burn-btn { background: var(--danger); }
.mailbox-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0.4rem 0 0; }
.email-sent { color: var(--accent-2); }
.recipient-type-row { display: flex; align-items: center; justify-content: space-between; }
.recipient-type-row > span { font-weight: 600; }
.recipient-type-tabs { margin: 0; }
.recipient-type-tabs button { font-size: 0.85rem; padding: 0.3rem 0.75rem; }
#recipientMobileRow label, #passphraseRow label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.mailbox-note.email-sent { color: var(--accent-2); font-weight: 600; }
.burn-header { display: flex; align-items: center; justify-content: space-between; }
.burn-heading { font-weight: 600; }
.burn-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.burn-item-info { flex: 1; min-width: 0; }
.burn-item-email { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.burn-item-meta { font-size: 0.8rem; color: var(--ink-soft); }
.burn-item-btn { flex-shrink: 0; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
#burnList { display: grid; gap: 0.45rem; margin: 0.25rem 0; }
.burn-loading, .burn-empty { margin: 0.35rem 0; color: var(--ink-soft); font-size: 0.9rem; }
/* Generator */
.gen-presets { margin-bottom: 0.15rem; }
.gen-checkboxes { display: grid; gap: 0.3rem; margin: 0.15rem 0; }
.gen-checkboxes .checkbox-row { font-weight: normal; }
.gen-output-block { display: grid; gap: 0.25rem; }
.gen-output { margin: 0; white-space: pre-wrap; word-break: break-all; border: 1px dashed #97a9c7; border-radius: 10px; padding: 0.8rem 1rem; background: #fff; font-size: 1.05rem; min-height: 3.2rem; letter-spacing: 0.03em; }
.gen-entropy { font-size: 0.8rem; color: var(--ink-soft); }
.gen-entropy-low { color: var(--danger); font-weight: 600; }
.gen-entropy-ok { color: #b06000; }
.gen-entropy-strong { color: var(--accent-2); font-weight: 600; }
select { border: 1px solid #9cb0cc; border-radius: 10px; padding: 0.6rem 0.7rem; width: 100%; font: inherit; background: #fff; cursor: pointer; color: var(--ink); }

@media (max-width: 720px) {
  .layout { margin-top: 1rem; margin-bottom: 2rem; }
  .hero-banner-img { max-height: 110px; }
  .hero-title span { font-size: 1.35rem; }
}
@media (max-width: 480px) {
  .layout { margin: 0 auto 1.5rem; width: 100%; }
  .hero { border-radius: 0; border-left: none; border-right: none; padding: 0.85rem 1rem; }
  .hero-banner { margin: -0.85rem -1rem 0; border-radius: 0; }
  .hero-banner-img { max-height: 85px; }
  .hero-logo { height: 34px; }
  .hero-taglines { display: none; }
  .hero-title { border-left: none; padding-left: 0; margin-left: auto; }
  .hero-title span { font-size: 1.25rem; }
  .card { border-radius: 12px; padding: 0.75rem; }
  button:not(.secret-input-wrapper button):not(.tabs button):not(.result-btn) { min-height: 44px; }
  .tabs button { min-height: 40px; }
  .recipient-type-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .result-actions { flex-direction: column; }
  .result-btn { width: 100%; text-align: center; }
  .burn-item { flex-wrap: wrap; }
  .burn-item-btn { width: 100%; }
}

.app-footer { background: #09005B; margin-top: 2.5rem; padding: 1rem 1.4rem; }
.footer-inner { display: flex; flex-direction: row; align-items: center; gap: 2rem; width: min(940px, 94vw); margin: 0 auto; }
.footer-logo { height: 28px; flex-shrink: 0; display: block; }
.footer-links { display: flex; flex-direction: row; gap: 1.5rem; flex: 1; align-items: center; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.8rem; white-space: nowrap; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-copy { color: rgba(255,255,255,0.6); font-size: 0.78rem; flex-shrink: 0; white-space: nowrap; margin-left: auto; }
@media (max-width: 600px) {
  .footer-inner { flex-direction: column; gap: 0.75rem; text-align: center; }
  .footer-links { justify-content: center; }
}