:root {
  color-scheme: light;
  --chocolate: #3b241b;
  --coffee: #51382d;
  --caramel: #a77950;
  --cream: #f4ebdd;
  --paper: #fff9f0;
  --gold: #c7a46a;
  --ink: #3e3028;
  --muted: #88766a;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: #2b1c17; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(ellipse at 50% 4%, rgba(167, 121, 80, .20), transparent 38rem),
    radial-gradient(ellipse at 10% 95%, rgba(79, 48, 34, .55), transparent 42rem),
    linear-gradient(145deg, #2e1e18 0%, #3a251c 52%, #291a16 100%);
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.ambient { position: fixed; z-index: 0; width: 1px; height: 1px; pointer-events: none; }
.ambient--one { top: 16%; left: 12%; box-shadow: 0 0 150px 80px rgba(199, 164, 106, .08); }
.ambient--two { right: 12%; bottom: 12%; box-shadow: 0 0 170px 90px rgba(167, 121, 80, .08); }

.page-shell {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  justify-items: center;
  align-content: center;
  padding: 52px 22px 26px;
}

.letter-card {
  position: relative;
  width: min(100%, 620px);
  overflow: hidden;
  padding: 31px clamp(24px, 7vw, 68px) 27px;
  border: 1px solid rgba(199, 164, 106, .42);
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .7), transparent 38%),
    repeating-linear-gradient(0deg, rgba(115, 84, 55, .017) 0, rgba(115, 84, 55, .017) 1px, transparent 1px, transparent 4px),
    var(--paper);
  box-shadow: 0 36px 90px rgba(13, 8, 6, .38), 0 2px 9px rgba(12, 7, 4, .12), inset 0 0 0 5px rgba(255, 249, 240, .48);
  text-align: center;
  animation: card-enter 950ms cubic-bezier(.2, .7, .2, 1) both;
}

.card-edge { position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(167, 121, 80, .16); }

.brand-row { position: relative; display: flex; justify-content: center; align-items: center; gap: 9px; color: #79634e; }
.brand-mark { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(167, 121, 80, .56); border-radius: 50%; color: var(--caramel); font: italic 16px var(--serif); }
.brand-name { font-size: 10px; font-weight: 500; letter-spacing: .075em; }

.gold-rule { display: flex; align-items: center; justify-content: center; gap: 12px; width: 96px; margin: 19px auto 16px; color: var(--gold); font-size: 9px; }
.gold-rule::before, .gold-rule::after { width: 34px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(167, 121, 80, .75)); }
.gold-rule::after { transform: rotate(180deg); }

.eyebrow, .section-kicker { margin: 0; color: #94714f; font-size: 9px; font-weight: 600; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase; }

h1, .reveal-section h2 { margin: 10px 0 0; color: var(--chocolate); font: 400 clamp(36px, 8vw, 52px)/.97 var(--serif); letter-spacing: -.025em; }
h1 em, .reveal-section h2 em { color: #8a6245; font-weight: 400; }

.intro-copy { max-width: 390px; margin: 15px auto 0; color: #746357; font-size: 12px; font-weight: 400; line-height: 1.75; }

.gift-illustration { position: relative; display: grid; justify-items: center; margin: 17px auto 4px; animation: float-in 1s 180ms ease both; }
.illustration-glow { position: absolute; top: 23px; width: 120px; height: 80px; border-radius: 50%; background: rgba(199, 164, 106, .18); filter: blur(25px); }
.envelope { position: relative; width: 146px; height: 107px; filter: drop-shadow(0 9px 9px rgba(77, 50, 31, .14)); transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.illustration-caption { margin-top: -1px; color: #a08d7c; font: italic 14px var(--serif); letter-spacing: .015em; }

.countdown-section { margin-top: 22px; opacity: 1; transform: translateY(0); transition: opacity 600ms ease, transform 600ms ease; }
.section-kicker { color: #87684a; letter-spacing: .13em; }
.countdown { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 17px); margin: 14px auto 20px; }
.time-unit { display: grid; min-width: 54px; gap: 3px; padding: 7px 6px 6px; border: 1px solid rgba(167, 121, 80, .21); background: rgba(255, 255, 255, .35); }
.time-unit[hidden] { display: none; }
.time-value { color: var(--chocolate); font: 500 clamp(23px, 5.5vw, 29px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.time-label { color: #9b8878; font-size: 8px; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.time-separator { margin-top: -9px; color: var(--gold); font: 21px var(--serif); }

.progress-heading { display: flex; justify-content: space-between; margin: 0 0 7px; color: #8b7867; font-size: 9px; letter-spacing: .025em; }
.progress-heading span:last-child { color: #876445; font-variant-numeric: tabular-nums; }
.progress-track { height: 10px; overflow: hidden; border: 1px solid rgba(167, 121, 80, .18); border-radius: 10px; background: #e9dece; box-shadow: inset 0 1px 2px rgba(59, 36, 27, .12), 0 1px 0 rgba(255, 255, 255, .7); }
.progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5d3c, #c7a46a 76%, #d5b679); box-shadow: 0 0 9px rgba(199, 164, 106, .5); transition: width 850ms cubic-bezier(.2, .7, .2, 1); }
.time-note { margin: 10px 0 0; color: #a08d7c; font: italic 14px var(--serif); }

.preview-card { position: relative; width: min(100%, 380px); margin: 22px auto 0; padding: 7px; border: 1px solid rgba(167, 121, 80, .34); background: rgba(255, 255, 255, .5); box-shadow: 0 12px 30px rgba(77, 50, 31, .12); transform: rotate(-.6deg); }
.preview-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(ellipse at 35% 30%, #98765a, #4a342a 70%); }
.preview-screen video { position: absolute; inset: -8%; display: block; width: 116%; height: 116%; filter: blur(13px); object-fit: cover; opacity: .78; }
.preview-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 244, 222, .38); font-size: 26px; background: linear-gradient(135deg, rgba(226, 193, 146, .18), transparent 50%, rgba(28, 19, 15, .3)); }
.preview-screen[data-has-video="true"] .preview-placeholder { display: none; }
.preview-blur { position: absolute; inset: 0; backdrop-filter: blur(3px); background: linear-gradient(180deg, rgba(35, 23, 17, .06), rgba(35, 23, 17, .25)); }
.preview-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff8e9; text-shadow: 0 1px 9px rgba(35, 23, 17, .5); }
.preview-play { display: grid; width: 41px; height: 41px; place-items: center; padding-left: 3px; border: 1px solid rgba(255, 248, 233, .76); border-radius: 50%; background: rgba(44, 30, 22, .35); font-size: 13px; }
.preview-lock { color: rgba(255, 248, 233, .9); font-size: 20px; }
.preview-duration { position: absolute; right: 9px; bottom: 8px; padding: 4px 6px; border-radius: 2px; color: #fff; background: rgba(20, 15, 12, .78); font-size: 10px; font-variant-numeric: tabular-nums; }
.preview-caption { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 24px; color: #8b7867; font: italic 12px var(--serif); }
.preview-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #b58c56; box-shadow: 0 0 0 3px rgba(181, 140, 86, .12); }

.early-access { margin: 16px auto 0; }
.early-access-trigger { padding: 10px 17px; border: 1px solid rgba(145, 105, 69, .48); border-radius: 2px; color: #765237; background: rgba(255, 255, 255, .52); font: 500 10px var(--sans); letter-spacing: .045em; cursor: pointer; transition: background 180ms ease, color 180ms ease, transform 180ms ease; }
.early-access-trigger:hover { color: #fff9f0; background: #765237; transform: translateY(-1px); }
.password-box { max-width: 360px; margin: 0 auto; padding: 14px; border: 1px solid rgba(167, 121, 80, .28); background: rgba(255, 255, 255, .48); text-align: left; animation: reveal-enter 220ms ease both; }
.password-box[hidden] { display: none; }
.password-box label { display: block; margin-bottom: 8px; color: #795b42; font: italic 14px var(--serif); }
.password-row { display: flex; gap: 7px; }
.password-row input { min-width: 0; flex: 1; padding: 10px 11px; border: 1px solid #decdb8; border-radius: 2px; outline-color: #a77950; color: var(--ink); background: #fffdf9; font: 12px var(--sans); }
.password-submit { padding: 0 15px; border: 0; border-radius: 2px; color: #fff9f0; background: #765237; font: 500 11px var(--sans); cursor: pointer; }
.password-submit:disabled { opacity: .65; cursor: wait; }
.password-cancel { display: block; margin: 9px 0 0 auto; padding: 2px 0; border: 0; color: #9b8878; background: none; font: 10px var(--sans); cursor: pointer; }
.password-message { min-height: 14px; margin: 6px 0 0; color: #875340; font-size: 10px; }
.password-message:empty { display: none; }

.cinema-screen { position: fixed; z-index: 20; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; min-height: 100svh; padding: max(20px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(17px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); overflow-y: auto; color: #f7ecdc; background: radial-gradient(ellipse at 50% 18%, #463127 0%, #211713 55%, #120e0c 100%); animation: reveal-enter 600ms cubic-bezier(.2, .7, .2, 1) both; }
.cinema-open { overflow: hidden; }
.cinema-screen[hidden] { display: none; }
.cinema-topline { display: flex; align-items: center; justify-content: space-between; color: rgba(245, 234, 218, .58); font-size: 9px; font-weight: 500; letter-spacing: .18em; }
.cinema-topline button { padding: 7px 10px; border: 1px solid rgba(219, 191, 147, .45); border-radius: 2px; color: #f7ecdc; background: rgba(255, 255, 255, .04); font: 11px var(--sans); cursor: pointer; }
.cinema-content { display: flex; min-height: 0; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.cinema-eyebrow { margin: 0; color: #c7a46a; font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.cinema-content h2 { margin: 8px 0 0; color: #fff5e8; font: 400 clamp(37px, 8vw, 64px)/.92 var(--serif); letter-spacing: -.02em; }
.cinema-content h2 em { display: inline-block; margin-top: 6px; color: #d9b987; font-weight: 400; }
.cinema-copy { max-width: 460px; margin: 12px auto 19px; color: rgba(245, 234, 218, .66); font: 14px/1.6 var(--sans); }
.cinema-video-frame { position: relative; width: min(100%, 1120px); max-height: 70svh; overflow: hidden; border: 1px solid rgba(199, 164, 106, .4); background: #080706; box-shadow: 0 20px 70px rgba(0, 0, 0, .46); }
.cinema-video-frame[hidden] { display: none; }
.cinema-video-frame video { display: block; width: 100%; max-height: 70svh; aspect-ratio: 16 / 9; background: #080706; object-fit: contain; color-scheme: dark; }
.cinema-play { position: absolute; top: 50%; left: 50%; display: grid; width: 72px; height: 72px; place-items: center; padding-left: 5px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 248, 233, .83); border-radius: 50%; color: #fff9ef; background: rgba(37, 25, 19, .52); font-size: 23px; cursor: pointer; backdrop-filter: blur(8px); }
.cinema-video-frame.is-playing .cinema-play { display: none; }
.video-loading { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 13px; padding: 24px; color: #f7ecdc; background: rgba(8, 7, 6, .94); }
.video-loading[hidden] { display: none; }
.video-loading p { margin: 0; font-size: 13px; letter-spacing: .03em; }
.video-loading-spinner { width: 31px; height: 31px; border: 2px solid rgba(247, 236, 220, .24); border-top-color: #d9b987; border-radius: 50%; animation: video-spin .85s linear infinite; }
.video-loading progress { width: min(100%, 320px); height: 6px; accent-color: #d9b987; }
@keyframes video-spin { to { transform: rotate(360deg); } }
.cinema-status { min-height: 15px; margin: 12px 0 0; color: rgba(245, 234, 218, .58); font-size: 10px; }
.cinema-signature { margin: 0; color: rgba(245, 234, 218, .52); font: italic 14px var(--serif); text-align: center; }
.cinema-screen:fullscreen { overflow-y: auto; }
.cinema-screen.is-playing { display: block; padding: 0; overflow: hidden; background: #050403; }
.cinema-screen.is-playing .cinema-topline, .cinema-screen.is-playing .cinema-content > :not(.cinema-video-frame), .cinema-screen.is-playing .cinema-signature { display: none; }
.cinema-screen.is-playing .cinema-content { width: 100%; height: 100%; }
.cinema-screen.is-playing .cinema-video-frame { width: 100vw; max-width: none; max-height: 100svh; border: 0; box-shadow: none; }
.cinema-screen.is-playing .cinema-video-frame video { width: 100vw; height: 100svh; max-height: 100svh; aspect-ratio: auto; }
.video-error { margin: 0; padding: 13px 15px; color: #f4ebdd; font-size: 12px; line-height: 1.6; }
.connection-status { min-height: 15px; margin: 15px 0 0; color: #9a8774; font-size: 9px; letter-spacing: .015em; transition: color 300ms ease; }
.connection-status[data-kind="error"] { color: #875340; }
.connection-status:empty { display: none; }

.card-footer { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; color: #9b8875; font: italic 13px var(--serif); }
.footer-flourish { color: #bb9864; font-size: 16px; }
.footer-flourish--mirror { transform: scaleX(-1); }
.outside-note { margin: 19px 0 0; color: rgba(245, 234, 218, .60); font-size: 9px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.outside-note span { padding: 0 5px; color: #bd9b69; }
.privacy-note { max-width: 410px; margin: 12px auto 0; color: #8b7867; font-size: 9px; line-height: 1.55; }
.privacy-note a { color: #806244; text-underline-offset: 2px; }

.letter-card[data-state="revealed"] .countdown-section { height: 0; overflow: hidden; margin: 0; opacity: 0; transform: translateY(-10px); }
.letter-card[data-state="revealed"] .envelope { transform: translateY(-4px) scale(.95); }

@keyframes card-enter { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes float-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 460px) {
  .page-shell { padding: 26px 14px 18px; }
  .letter-card { padding: 26px 21px 21px; }
  .card-edge { inset: 7px; }
  .gold-rule { margin-top: 15px; margin-bottom: 13px; }
  .intro-copy { max-width: 330px; font-size: 11.5px; }
  .preview-card { width: min(100%, 360px); margin-top: 17px; }
  .countdown-section { margin-top: 19px; }
  .countdown { gap: 5px; margin-bottom: 17px; }
  .time-unit { min-width: 49px; padding-inline: 3px; }
  .time-separator { font-size: 18px; }
  .early-access { margin-top: 13px; }
  .connection-status { margin-top: 12px; }
  .cinema-screen { gap: 9px; padding-inline: 14px; }
  .cinema-copy { margin: 9px auto 14px; font-size: 12px; }
  .cinema-video-frame, .cinema-video-frame video { max-height: 58svh; }
  .cinema-play { width: 58px; height: 58px; }
}

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

/* Painel privado de registros */
.admin-page { color: var(--ink); background: radial-gradient(ellipse at 50% 0%, rgba(167, 121, 80, .2), transparent 40rem), linear-gradient(145deg, #2e1e18, #3a251c 52%, #291a16); }
.admin-shell { width: min(1120px, 100%); min-height: 100svh; margin: 0 auto; padding: 40px 24px 56px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; color: #f6ebdc; }
.admin-header h1 { margin-top: 7px; color: #fff5e8; font-size: clamp(34px, 6vw, 48px); }
.admin-eyebrow { color: #c7a46a; font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.admin-site-link { color: #e2cda9; font-size: 11px; text-underline-offset: 4px; }
.admin-login-card, .admin-table-card { border: 1px solid rgba(199, 164, 106, .35); background: var(--paper); box-shadow: 0 24px 70px rgba(13, 8, 6, .28); }
.admin-login-card { width: min(100%, 410px); margin: 8vh auto; padding: 30px clamp(22px, 6vw, 40px); }
.admin-login-card h2 { margin: 6px 0; color: var(--chocolate); font: 500 32px var(--serif); }
.admin-description { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.admin-login-form { display: grid; gap: 9px; }
.admin-login-form label { color: #795b42; font-size: 11px; }
.admin-login-form input { padding: 12px; border: 1px solid #decdb8; border-radius: 2px; color: var(--ink); background: #fffdf9; font: 13px var(--sans); }
.admin-login-form button, .admin-logout { padding: 11px 15px; border: 1px solid #765237; border-radius: 2px; color: #fff9f0; background: #765237; font: 500 11px var(--sans); cursor: pointer; }
.admin-error { padding: 10px 12px; color: #7c3f30; background: #f5e4d9; font-size: 11px; }
.admin-summary { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; padding: 16px 19px; border: 1px solid rgba(199, 164, 106, .35); color: #f7ecdc; background: rgba(255, 249, 240, .08); }
.admin-summary > div { display: grid; gap: 2px; }
.admin-stat-value { color: #e4c994; font: 500 27px var(--serif); font-variant-numeric: tabular-nums; }
.admin-stat-label { color: rgba(245, 234, 218, .7); font-size: 9px; letter-spacing: .04em; }
.admin-summary form { margin-left: auto; }
.admin-logout { padding: 8px 12px; border-color: rgba(219, 191, 147, .42); background: transparent; }
.admin-notice { margin: 0 0 12px; color: rgba(245, 234, 218, .78); font-size: 10px; line-height: 1.6; }
.admin-table-card { overflow: hidden; }
.admin-table-scroll { overflow-x: auto; }
.admin-table-card table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table-card th { padding: 13px 15px; color: #876445; background: #f2e7d7; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.admin-table-card td { padding: 13px 15px; border-top: 1px solid #efe5d8; color: #58483c; font-size: 11px; vertical-align: top; }
.admin-time { min-width: 162px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-time small { display: block; margin-top: 4px; color: #a08d7c; font-size: 8px; }
.admin-ip { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.admin-event { display: inline-block; padding: 5px 7px; border-radius: 2px; color: #684a32; background: #efe5d8; font-size: 9px; white-space: nowrap; }
.admin-event--video_started { color: #fff7e9; background: #79573b; }
.admin-empty { padding: 30px; color: #8b7867; font: italic 16px var(--serif); text-align: center; }
.admin-storage-note { margin: 12px 0; color: rgba(245, 234, 218, .58); font-size: 9px; }

@media (max-width: 560px) {
  .admin-shell { padding: 25px 14px 36px; }
  .admin-summary { flex-wrap: wrap; gap: 14px 22px; }
  .admin-summary form { margin-left: 0; }
  .admin-table-card th, .admin-table-card td { padding: 11px 10px; }
  .privacy-note { max-width: 330px; }
}