/* TempMail — black + gold ROYAL 3D theme.
   Depth comes from layered shadows, gold gradients and a little
   perspective — CSS only, so it stays fast on phones. */
:root {
  --bg: #07070a;
  --bg2: #0d0d12;
  --card: #111116;
  --card2: #17171f;
  --gold: #ffd700;
  --gold2: #c9a227;
  --gold-deep: #8a6d00;
  --gold-soft: rgba(255, 215, 0, 0.16);
  --gold-line: rgba(255, 215, 0, 0.35);
  --text: #f5f0dc;
  --muted: #b8b09a;
  --muted2: #8a8371;
  --green: #3ddc84;
  --red: #ff6b6b;
  --radius: 14px;
  --shadow-3d: 0 1px 0 rgba(255, 215, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.6), 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 32px rgba(255, 215, 0, 0.07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 80% 340px at 50% -60px, rgba(255, 215, 0, 0.13), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* Header */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7, 7, 10, 0.94);
  border-bottom: 1px solid var(--gold-line);
  backdrop-filter: blur(6px);
}
header.site .wrap { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.logo {
  font-size: 22px; font-weight: 800; letter-spacing: 0.5px; color: var(--gold);
  white-space: nowrap; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.35);
}
.logo span { color: var(--text); font-weight: 600; }
nav.main { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
nav.main a { color: var(--muted); font-size: 14px; padding: 8px 10px; border-radius: 8px; }
nav.main a:hover, nav.main a.active { color: var(--gold); background: var(--gold-soft); text-decoration: none; }

/* Hero */
.hero { text-align: center; padding: 26px 0 8px; }
.hero h1 {
  margin: 6px 0 8px; font-size: clamp(26px, 6vw, 40px); line-height: 1.15;
  background: linear-gradient(90deg, #fff3b0, var(--gold) 45%, var(--gold2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 12px rgba(255, 215, 0, 0.25));
}
.hero p.sub { margin: 0 auto; max-width: 640px; color: var(--muted); font-size: 16px; }
.hero p.sub b { color: var(--text); }
.hero .trust { margin-top: 10px; color: var(--gold); font-size: 14px; font-weight: 700; letter-spacing: 0.3px; }

/* 3D golden envelope (pure CSS) */
.mail-3d { width: 150px; height: 104px; margin: 0 auto; perspective: 600px; animation: floaty 3.4s ease-in-out infinite; }
.mail-3d .env {
  position: relative; width: 150px; height: 104px;
  transform: rotateX(8deg);
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(255, 215, 0, 0.28));
}
.mail-3d .env .body {
  position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(160deg, #ffe977 0%, var(--gold) 42%, var(--gold2) 100%);
  border: 1px solid #fff3b0;
}
.mail-3d .env .flap {
  position: absolute; left: 0; right: 0; top: 0; height: 56px;
  background: linear-gradient(180deg, #fff3b0, #f3cd3a);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 10px 10px 0 0;
}
.mail-3d .env .letter {
  position: absolute; left: 18px; right: 18px; top: 14px; height: 62px;
  background: #fffdf4; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  padding: 8px 10px;
}
.mail-3d .env .letter i { display: block; height: 6px; border-radius: 3px; background: #d9c25a; margin-bottom: 6px; }
.mail-3d .env .letter i:last-child { width: 55%; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Tool card — 3D */
.tool-card {
  margin: 22px 0 8px;
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3d);
  padding: 20px;
  transform: perspective(1100px) rotateX(1.5deg);
}
.tool-card h2 { margin: 0 0 4px; font-size: 18px; color: var(--gold); text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); }
.tool-card p.hint { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.addr-row { display: flex; gap: 8px; }
.addr-row input {
  flex: 1; min-width: 0;
  background: #000; color: var(--gold);
  border: 1px solid var(--gold-line); border-radius: 10px;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 215, 0, 0.08);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 600; padding: 12px;
  overflow: hidden; text-overflow: ellipsis;
}
.btn {
  appearance: none; border: none; cursor: pointer;
  background: linear-gradient(180deg, #ffe977, var(--gold) 45%, var(--gold2));
  color: #111; font-weight: 800; font-size: 15px;
  padding: 12px 18px; border-radius: 10px; min-height: 46px;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--gold-deep), 0 10px 18px rgba(0, 0, 0, 0.55), 0 0 16px rgba(255, 215, 0, 0.18);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep), 0 4px 8px rgba(0, 0, 0, 0.5); }
.btn:disabled { opacity: 0.55; cursor: wait; }
.btn-ghost {
  background: linear-gradient(180deg, #1d1d26, #14141b); color: var(--gold);
  border: 1px solid var(--gold-line);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 8px 14px rgba(0, 0, 0, 0.45);
}
.btn-ghost:hover { background: linear-gradient(180deg, #262633, #1a1a23); }
.btn-ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.btn-danger {
  background: linear-gradient(180deg, #2a1214, #1c0d0e); color: var(--red);
  border: 1px solid rgba(255, 107, 107, 0.45);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 8px 14px rgba(0, 0, 0, 0.45);
}
.btn-danger:hover { background: linear-gradient(180deg, #3a171a, #241011); }
.btn-danger:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.btn-sm { padding: 9px 13px; min-height: 40px; font-size: 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.change-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.provider-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.provider-row label { color: var(--muted); font-size: 14px; }
.provider-row select {
  flex: 1; min-width: 200px;
  background: #000; color: var(--text);
  border: 1px solid var(--gold-line); border-radius: 10px;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.8);
  font-size: 15px; padding: 11px 12px;
}
.provider-note { margin-top: 6px; font-size: 13px; color: var(--muted); min-height: 18px; }
.change-row input {
  flex: 1; min-width: 140px;
  background: #000; color: var(--text);
  border: 1px solid var(--gold-line); border-radius: 10px;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.8);
  font-size: 15px; padding: 11px 12px;
}
.domain-label { color: var(--gold); font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; }
.status { margin-top: 12px; font-size: 14px; color: var(--muted); min-height: 20px; }
.status.err { color: var(--red); }
.status.ok { color: var(--green); }

/* QR popup */
.qr-popup {
  margin-top: 12px; text-align: center;
  background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}
.qr-popup img { display: block; margin: 0 auto; }
.qr-addr { color: #111; font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; margin-top: 8px; }
.qr-note { color: #555; font-size: 13px; margin-top: 4px; }

/* Inbox */
.inbox { margin-top: 18px; border-top: 1px solid rgba(255, 215, 0, 0.18); padding-top: 16px; }
.inbox-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inbox-head h3 { margin: 0; font-size: 17px; color: var(--gold); }
.inbox-head .count {
  background: var(--gold-soft); color: var(--gold);
  border: 1px solid var(--gold-line); border-radius: 999px;
  font-size: 13px; font-weight: 700; padding: 2px 10px;
}
.inbox-head .last { margin-left: auto; color: var(--muted2); font-size: 13px; }
.msg-list { list-style: none; margin: 12px 0 0; padding: 0; }
.msg-list li {
  border: 1px solid rgba(255, 215, 0, 0.18); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  background: linear-gradient(180deg, var(--card2), var(--bg2));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.msg-list li:hover { border-color: var(--gold-line); }
.msg-list li.unread { border-left: 3px solid var(--gold); }
.msg-list .from { font-weight: 700; font-size: 14px; word-break: break-all; }
.msg-list .subject { color: var(--text); font-size: 15px; }
.msg-list .meta { color: var(--muted2); font-size: 13px; }
.empty {
  border: 1px dashed var(--gold-line); border-radius: 10px;
  padding: 22px 14px; text-align: center; color: var(--muted);
  margin-top: 12px; font-size: 15px;
}
.empty b { color: var(--gold); }

/* Message detail */
.msg-view { margin-top: 14px; border: 1px solid var(--gold-line); border-radius: 10px; padding: 16px; background: var(--bg2); box-shadow: var(--shadow-3d); }
.msg-view h4 { margin: 0 0 4px; font-size: 17px; word-break: break-word; }
.msg-view .mmeta { color: var(--muted); font-size: 14px; word-break: break-all; margin-bottom: 12px; }
.msg-body {
  background: #000; border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: 10px; padding: 14px; white-space: pre-wrap;
  word-break: break-word; font-size: 15px; max-height: 420px; overflow: auto;
}
.msg-body iframe { width: 100%; height: 420px; border: none; background: #fff; border-radius: 8px; }
.attach { margin-top: 12px; }
.attach a { display: inline-block; margin: 4px 8px 0 0; font-size: 14px; }
.msg-view .row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Content sections */
section.block { padding: 26px 0 6px; }
section.block h2 { color: var(--gold); font-size: 22px; margin: 0 0 10px; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.25); }
section.block p { color: var(--muted); }
section.block p b, section.block li b { color: var(--text); }
.divider { text-align: center; color: var(--gold2); letter-spacing: 10px; font-size: 13px; margin: 26px 0 0; opacity: 0.8; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.step, .feat {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-top: 2px solid var(--gold2);
  border-radius: var(--radius); padding: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 215, 0, 0.08);
  transform: perspective(800px) rotateX(1deg);
}
.step .n {
  display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center;
  border-radius: 50%; background: linear-gradient(180deg, var(--gold), var(--gold2));
  color: #111; font-weight: 800; margin-bottom: 8px;
  box-shadow: 0 3px 0 var(--gold-deep), 0 6px 12px rgba(0, 0, 0, 0.5);
}
.step h3, .feat h3 { margin: 0 0 6px; font-size: 16px; color: var(--gold); }
.step p, .feat p { margin: 0; font-size: 14px; color: var(--muted); }
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
details.faq {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
details.faq summary { cursor: pointer; font-weight: 700; color: var(--text); }
details.faq p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.use-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.use-tags span {
  border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--gold);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700;
}

/* Footer */
footer.site { border-top: 1px solid var(--gold-line); margin-top: 34px; padding: 22px 0 30px; color: var(--muted2); font-size: 14px; }
footer.site nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
footer.site nav a { color: var(--muted); }
footer.site nav a:hover { color: var(--gold); }

/* Simple pages */
.page h1 { color: var(--gold); font-size: 26px; margin: 26px 0 10px; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.25); }
.page h2 { color: var(--gold); font-size: 19px; margin: 22px 0 8px; }
.page p, .page li { color: var(--muted); }
.page p b, .page li b { color: var(--text); }
.page ul, .page ol { padding-left: 20px; }
.page .lead { font-size: 17px; color: var(--text); }

@media (max-width: 560px) {
  header.site .wrap { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 8px; padding-bottom: 8px; min-height: 0; }
  nav.main { margin-left: 0; }
  .addr-row { flex-direction: column; }
  .addr-row .btn { width: 100%; }
  .actions .btn { flex: 1 1 45%; }
  .change-row input { flex: 1 1 100%; }
  .inbox-head .last { margin-left: 0; }
  .tool-card { transform: none; }
  .step, .feat { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mail-3d { animation: none; }
  html { scroll-behavior: auto; }
}

/* Our Websites cross-links */
footer.site .our-sites { margin: 4px 0 12px; }
footer.site .our-sites h3 { color: var(--gold); font-size: 15px; margin: 0 0 8px; }
footer.site .our-sites ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
footer.site .our-sites a { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
footer.site .our-sites .os-ic { flex: 0 0 auto; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 8px rgba(255,215,0,.18); }
footer.site .our-sites a:hover { color: var(--gold); }
/* Contact form (no email address is shown anywhere on the site). */
.contact-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 18px 0; }
.contact-form label { font-weight: 700; color: var(--gold); font-size: 14px; }
.contact-form input, .contact-form textarea { width: 100%; background: var(--bg2); color: var(--text); border: 1px solid #2a2a35; border-radius: 10px; padding: 11px 12px; font-size: 15px; font-family: inherit; box-sizing: border-box; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,215,0,.25); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .btn { align-self: flex-start; }
.contact-status { font-size: 14px; min-height: 20px; margin: 4px 0 0; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cookie consent banner — black + gold, fixed at the bottom. */
#cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #0b0b0f; border-top: 2px solid #C9A227; color: #f5f0dc; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; box-shadow: 0 -4px 24px rgba(0, 0, 0, .6); }
#cookie-banner[hidden] { display: none !important; }
#cookie-banner p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; }
#cookie-banner a { color: #FFD700; }
#cookie-banner .cookie-actions { display: flex; gap: 10px; }

/* Comparison table (Guide page: temp mail vs 10 minute mail) */
table.compare { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
table.compare th, table.compare td { border: 1px solid var(--gold-line); padding: 9px 10px; text-align: left; vertical-align: top; }
table.compare th { background: var(--gold-soft); color: var(--gold); }
table.compare td { color: var(--muted); }
table.compare td b { color: var(--text); }
@media (max-width: 640px) {
  table.compare { display: block; overflow-x: auto; }
}

/* PDFTools — tool UI (appended to TempMail base theme) */
.dropzone { border: 2px dashed var(--gold-line); border-radius: var(--radius); padding: 28px 18px; text-align: center; background: var(--bg2); cursor: pointer; transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.over { border-color: var(--gold); background: #14141c; }
.dropzone .dz-big { font-size: 20px; font-weight: 700; color: var(--gold); }
.dropzone .dz-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.file-list { list-style: none; margin: 14px 0 0; padding: 0; }
.file-list li { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid #23232e; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; }
.file-list .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .fmeta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.file-list .mini { background: none; border: 1px solid var(--gold-line); color: var(--gold); border-radius: 8px; padding: 4px 9px; cursor: pointer; font-size: 13px; }
.file-list .mini:hover { background: var(--gold-soft); }
.file-list .mini.danger { color: var(--red); border-color: rgba(255,107,107,.4); }
.opt-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 16px 0 4px; }
.opt-row label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.opt-row input[type="number"], .opt-row input[type="text"], .opt-row select { background: var(--bg2); color: var(--text); border: 1px solid #2a2a35; border-radius: 8px; padding: 9px 11px; font-size: 15px; min-width: 110px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.status { min-height: 24px; margin: 10px 0; font-size: 14px; }
.status.ok { color: var(--green); }
.status.err { color: var(--red); }
.progress { height: 8px; background: #1c1c26; border-radius: 4px; overflow: hidden; margin: 8px 0; display: none; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); width: 0%; transition: width .2s; }
.result { display: none; margin-top: 14px; background: #0e2417; border: 1px solid rgba(61,220,132,.35); border-radius: 10px; padding: 14px; }
.result.show { display: block; }
.result a.dl { display: inline-block; margin: 6px 8px 0 0; }
.page-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.page-grid label { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid #2a2a35; border-radius: 8px; padding: 7px 11px; font-size: 13px; cursor: pointer; }
.page-grid label.sel { border-color: var(--gold); background: var(--gold-soft); }
.page-grid input { accent-color: var(--gold); }
textarea.out { width: 100%; min-height: 220px; background: var(--bg2); color: var(--text); border: 1px solid #2a2a35; border-radius: 10px; padding: 12px; font-size: 14px; line-height: 1.6; font-family: ui-monospace, Menlo, Consolas, monospace; }
.thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.thumbs figure { margin: 0; background: var(--card); border: 1px solid #2a2a35; border-radius: 10px; padding: 8px; text-align: center; }
.thumbs canvas { max-width: 170px; height: auto; display: block; background: #fff; }
.thumbs figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.badge-free { display: inline-block; background: linear-gradient(180deg, #1d7a44, #145c33); color: #d6ffe6; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 20px 0; }
.tool-grid .card { background: var(--card); border: 1px solid #23232e; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-3d); }
.tool-grid .card h3 { margin: 0 0 6px; }
.tool-grid .card h3 a { color: var(--gold); text-decoration: none; }
.tool-grid .card p { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.note { background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.6; }

/* PDFTools — 3D royal layer (black + gold, ToolKamai / AI Creator Studio standard) */
.hero h1 {
  background: linear-gradient(180deg, #fff6c9 0%, #FFD700 38%, #C9A227 62%, #8a6d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 18px rgba(255, 215, 0, 0.18);
}
.hero .sub b { color: var(--gold); }
/* 3D audio equalizer in the hero */
.audio-3d { perspective: 900px; display: flex; flex-direction: column; align-items: center; margin: 6px auto 18px; }
.audio-3d .eq { display: flex; align-items: flex-end; gap: 7px; height: 120px; transform: rotateX(10deg) rotateY(-12deg); transform-style: preserve-3d; animation: eqfloat 5s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(255,215,0,.28)); }
@keyframes eqfloat { 0%, 100% { transform: rotateX(10deg) rotateY(-12deg) translateY(0); } 50% { transform: rotateX(10deg) rotateY(-12deg) translateY(-10px); } }
.audio-3d .eq span { display: block; width: 12px; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #fff6c9, #FFD700 45%, #C9A227); box-shadow: 0 0 12px rgba(255,215,0,.35), inset 0 0 0 1px rgba(255,255,255,.25); animation: eqbounce 1.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes eqbounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
.audio-3d .shadow { width: 180px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,215,0,.28), transparent 70%); filter: blur(2px); margin-top: 10px; }
/* Audio tool UI */
.player-row { margin: 14px 0; }
.waveform { width: 100%; height: 110px; background: #07070a; border: 1px solid var(--gold-line); border-radius: 10px; display: block; }
.player-row audio { width: 100%; margin-top: 10px; }
.file-info { font-size: 13px; color: var(--muted); margin-top: 8px; }
.opt-row input[type="range"] { accent-color: var(--gold); min-width: 180px; }
.opt-row input[type="range"] { background: transparent; }
.recorder { margin-top: 16px; }
.rec-timer { font-size: 34px; font-weight: 800; color: var(--gold); font-family: ui-monospace, Menlo, Consolas, monospace; text-shadow: 0 2px 12px rgba(255,215,0,.35); }
.rec-level { height: 10px; background: #1c1c26; border-radius: 5px; overflow: hidden; margin: 10px 0 4px; }
.rec-level > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold2), var(--gold)); transition: width .1s; }
.rec-result { margin-top: 14px; }
.rec-result audio { width: 100%; }
@media (max-width: 560px) {
  .audio-3d .eq { gap: 4px; }
  .audio-3d .eq span { width: 8px; }
}
/* tool cards: depth, lift on hover */
.tool-card { transform: translateZ(0); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 2px 0 rgba(255,215,0,.16), 0 16px 32px rgba(0,0,0,.65), 0 32px 64px rgba(0,0,0,.5), 0 0 44px rgba(255,215,0,.1); border-color: rgba(255,215,0,.55); }
.tool-grid .card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tool-grid .card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 2px 0 rgba(255,215,0,.16), 0 16px 32px rgba(0,0,0,.65), 0 0 40px rgba(255,215,0,.12); border-color: rgba(255,215,0,.55); }
.tool-grid .card .ticon { font-size: 34px; display: block; margin-bottom: 8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
section.block h2, main.page h1 {
  background: linear-gradient(180deg, #fff6c9 0%, #FFD700 45%, #C9A227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
main.page h1 { display: inline-block; }
.divider { color: var(--gold); letter-spacing: 10px; text-shadow: 0 0 14px rgba(255,215,0,.5); }
.feat, .step { transition: transform .25s ease, box-shadow .25s ease; }
.feat:hover, .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-3d); }
.logo { text-shadow: 0 2px 10px rgba(255,215,0,.35); }

/* PDF Editor workspace */
.editor { margin-top: 16px; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 10px; }
.editor-toolbar label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.editor-toolbar input[type="number"], .editor-toolbar select { background: var(--bg2); color: var(--text); border: 1px solid #2a2a35; border-radius: 8px; padding: 9px 11px; font-size: 15px; min-width: 90px; }
.tool-btn { background: var(--card); border: 1px solid var(--gold-line); color: var(--text); border-radius: 8px; padding: 9px 12px; cursor: pointer; font-size: 14px; min-height: 42px; }
.tool-btn:hover { background: var(--gold-soft); }
.tool-btn.active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); font-weight: 700; }
.sig-row, .img-row { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
#sig-pad { background: #fff; border: 1px solid var(--gold-line); border-radius: 8px; touch-action: none; cursor: crosshair; max-width: 100%; }
.note-inline { font-size: 13px; color: var(--muted); }
.editor-nav { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.editor-nav span { font-size: 14px; color: var(--muted); }
.editor-stage { position: relative; background: #fff; border: 1px solid var(--gold-line); border-radius: 8px; overflow: auto; display: inline-block; max-width: 100%; line-height: 0; }
.editor-stage canvas { display: block; }
#editor-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
#anno-input { position: absolute; z-index: 5; font-size: 16px; padding: 4px 6px; border: 2px solid var(--gold); border-radius: 4px; min-width: 140px; background: #fffdf4; color: #111; line-height: 1.4; }

/* Reorder thumbnails */
.reorder-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.reorder-item { background: var(--card); border: 1px solid #2a2a35; border-radius: 10px; padding: 8px; text-align: center; width: 152px; cursor: grab; }
.reorder-item.dragging { opacity: 0.45; border-color: var(--gold); }
.reorder-item.dragover { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.reorder-item canvas { width: 134px; height: auto; background: #fff; display: block; margin: 0 auto 6px; border-radius: 4px; }
.reorder-item .ord { font-size: 13px; color: var(--muted); display: block; margin-bottom: 6px; }
.reorder-item .mini { background: none; border: 1px solid var(--gold-line); color: var(--gold); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 14px; margin: 0 2px; }
.reorder-item .mini:hover { background: var(--gold-soft); }
.reorder-item .mini:disabled { opacity: 0.35; cursor: default; }

/* Fill-form fields */
.form-fields { display: grid; gap: 10px; margin: 12px 0; }
.form-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.form-fields input[type="text"], .form-fields select { background: var(--bg2); color: var(--text); border: 1px solid #2a2a35; border-radius: 8px; padding: 9px 11px; font-size: 15px; }
.form-fields .check-row { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.form-fields .check-row input { accent-color: var(--gold); width: 18px; height: 18px; }

/* MobilePreview — phone frames + preview tool (3D black + gold) */
.phone-3d { perspective: 900px; display: flex; flex-direction: column; align-items: center; margin: 6px auto 18px; }
.phone-3d .p3d { position: relative; width: 118px; height: 216px; border-radius: 26px; background: linear-gradient(160deg, #1c1c26, #000); border: 2px solid rgba(255, 215, 0, 0.6); transform: rotateX(8deg) rotateY(-14deg); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.25); animation: eqfloat 5s ease-in-out infinite; }
.phone-3d .p3d-screen { position: absolute; inset: 10px; border-radius: 18px; background: linear-gradient(180deg, #fff6c9, #FFD700 55%, #C9A227); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; }
.phone-3d .p3d-screen span { color: #111; font-weight: 800; font-size: 15px; }
.phone-3d .p3d-island { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 44px; height: 12px; border-radius: 8px; background: #000; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.chip-label { color: var(--muted); font-size: 14px; }
.chip { appearance: none; cursor: pointer; background: var(--card); border: 1px solid var(--gold-line); color: var(--gold); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 700; }
.chip:hover { background: var(--gold-soft); }
.device-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.device-btn { appearance: none; cursor: pointer; flex: 1 1 160px; text-align: left; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid #2a2a35; color: var(--text); border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.device-btn:hover { border-color: var(--gold-line); }
.device-btn.active { border-color: var(--gold); background: linear-gradient(180deg, #26260f, #1a1a08); box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.55); }
.device-btn .db-name { display: block; font-weight: 800; font-size: 15px; color: var(--gold); }
.device-btn .db-size { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.compare-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.custom-size { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.custom-size input { width: 84px; background: var(--bg2); color: var(--text); border: 1px solid #2a2a35; border-radius: 8px; padding: 9px 10px; font-size: 15px; }
.compare-select { margin-top: 12px; }
.compare-select label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.compare-select select { background: var(--bg2); color: var(--text); border: 1px solid var(--gold-line); border-radius: 10px; padding: 11px 12px; font-size: 15px; max-width: 340px; }
.viewport-caption { margin-top: 18px; text-align: center; font-weight: 800; font-size: 17px; color: var(--gold); text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); }
.stage { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 18px; align-items: flex-start; }
.phone-wrap { text-align: center; flex-shrink: 0; }
.phone-label { font-weight: 800; color: var(--gold); font-size: 15px; margin-bottom: 8px; }
.phone-label .phone-dims { color: var(--muted); font-weight: 600; font-size: 13px; }
.phone-scaler { transform-origin: top left; margin: 0 auto; }
.phone { position: relative; background: #000; border: 3px solid #2b2b36; border-radius: 46px; padding: 10px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 215, 0, 0.35), 0 0 44px rgba(255, 215, 0, 0.12); }
.phone::before { content: ""; position: absolute; inset: -3px; border-radius: 48px; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 30%, transparent 70%, rgba(255, 215, 0, 0.18)); }
.phone-cutout { position: absolute; z-index: 4; background: #000; }
.phone[data-cutout="island"] .phone-cutout { top: 20px; left: 50%; transform: translateX(-50%); width: 108px; height: 30px; border-radius: 20px; }
.phone[data-cutout="hole"] .phone-cutout { top: 22px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4); }
.phone.landscape[data-cutout="island"] .phone-cutout { top: 50%; left: 20px; transform: translateY(-50%); width: 30px; height: 108px; }
.phone.landscape[data-cutout="hole"] .phone-cutout { top: 50%; left: 22px; transform: translateY(-50%); }
.phone-screen { position: relative; background: #fff; border-radius: 34px; overflow: hidden; }
.phone-screen iframe { display: block; border: 0; background: #fff; }
/* Keep framed content clear of the cutout: the iframe starts below the
   Dynamic Island / camera hole in portrait (42px island, 30px hole —
   5px clear of the cutout's bottom edge) and to its right in landscape.
   The iframe keeps its full device size (393x852 etc.), so the caption
   and tests still see the real dimensions; the negative margin keeps the
   screen height unchanged, and the framed page scrolls inside the
   iframe, so nothing at the bottom is lost. Placeholder + blocked panels
   start below the cutout too, so their text never hides under it. */
.phone[data-cutout="island"] .phone-screen iframe { margin-top: 42px; margin-bottom: -42px; }
.phone[data-cutout="hole"] .phone-screen iframe { margin-top: 30px; margin-bottom: -30px; }
.phone.landscape[data-cutout="island"] .phone-screen iframe { margin-top: 0; margin-bottom: 0; margin-left: 42px; margin-right: -42px; }
.phone.landscape[data-cutout="hole"] .phone-screen iframe { margin-top: 0; margin-bottom: 0; margin-left: 30px; margin-right: -30px; }
.phone[data-cutout="island"] .phone-screen .preview-placeholder,
.phone[data-cutout="island"] .phone-screen .blocked-panel { top: 42px; }
.phone[data-cutout="hole"] .phone-screen .preview-placeholder,
.phone[data-cutout="hole"] .phone-screen .blocked-panel { top: 30px; }
.phone.landscape[data-cutout="island"] .phone-screen .preview-placeholder,
.phone.landscape[data-cutout="island"] .phone-screen .blocked-panel { top: 0; left: 42px; }
.phone.landscape[data-cutout="hole"] .phone-screen .preview-placeholder,
.phone.landscape[data-cutout="hole"] .phone-screen .blocked-panel { top: 0; left: 30px; }
.phone-home { width: 120px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.55); margin: 9px auto 3px; }
.phone.landscape .phone-home { display: none; }
.blocked-panel { position: absolute; inset: 0; z-index: 5; background: #0d0d12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px; text-align: center; }
.blocked-panel[hidden] { display: none; }
.blocked-icon { font-size: 40px; }
.blocked-panel h3 { margin: 0; color: var(--gold); font-size: 17px; }
.blocked-panel p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.preview-placeholder { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, #101014, #07070a); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px; text-align: center; }
.preview-placeholder[hidden] { display: none; }
.preview-placeholder .pp-icon { font-size: 44px; }
.preview-placeholder p { margin: 0; color: #f5f0dc; font-size: 15px; line-height: 1.55; }
.preview-placeholder .pp-sub { color: var(--muted); font-size: 13px; }
@media (max-width: 560px) {
  .phone { border-radius: 38px; }
  .phone-screen { border-radius: 28px; }
}