/*
 * Deixei pra Você · Design System V18
 * Camada visual aditiva sobre a V17.
 * Não altera contratos JS, nomes de campos, endpoints ou fluxo de dados.
 */

:root{
  --dpv-space-1:4px;
  --dpv-space-2:8px;
  --dpv-space-3:12px;
  --dpv-space-4:16px;
  --dpv-space-5:20px;
  --dpv-space-6:24px;
  --dpv-space-8:32px;
  --dpv-space-10:40px;
  --dpv-space-12:48px;

  --dpv-radius-xs:10px;
  --dpv-radius-sm:14px;
  --dpv-radius-md:18px;
  --dpv-radius-lg:24px;
  --dpv-radius-xl:30px;
  --dpv-radius-pill:999px;

  --dpv-control-h-sm:40px;
  --dpv-control-h:48px;
  --dpv-control-h-lg:54px;

  --dpv-font-micro:11px;
  --dpv-font-small:13px;
  --dpv-font-body:15px;
  --dpv-font-control:14px;
  --dpv-font-input:16px;

  --dpv-focus:0 0 0 4px rgba(255,122,184,.16);
  --dpv-shadow-sm:0 10px 28px rgba(0,0,0,.12);
  --dpv-shadow-md:0 20px 52px rgba(0,0,0,.20);
  --dpv-shadow-lg:0 32px 88px rgba(0,0,0,.34);

  --dpv-brand-start:#ff4f9a;
  --dpv-brand-end:#b85cff;
  --dpv-brand-soft:rgba(255,122,184,.11);
  --dpv-danger:#ff7890;
  --dpv-success:#67d9aa;
  --dpv-warning:#f1c971;
}

/* ---------- Primitivos de interface ---------- */
.btn{
  min-height:var(--dpv-control-h);
  border-radius:var(--dpv-radius-pill);
  padding:0 20px;
  font-size:var(--dpv-font-control);
  line-height:1.2;
  font-weight:750;
  letter-spacing:-.01em;
  transition:transform .22s var(--ease),box-shadow .22s ease,background .22s ease,border-color .22s ease,opacity .22s ease;
}
.btn-sm{min-height:var(--dpv-control-h-sm);padding:0 15px;font-size:13px}
.btn-primary{
  background:linear-gradient(135deg,var(--dpv-brand-start),var(--dpv-brand-end));
  color:#fff;
  border:1px solid transparent;
  box-shadow:0 12px 32px rgba(229,73,151,.22),inset 0 1px rgba(255,255,255,.24);
}
.btn-primary:hover{box-shadow:0 16px 42px rgba(229,73,151,.29)}
.btn-soft{background:var(--dpv-brand-soft);border:1px solid rgba(255,122,184,.22);color:#ffe3ef}
.btn-ghost{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.055);color:#f6eaf0}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.48;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn:focus-visible,.close:focus-visible,.mobile-menu:focus-visible,.mobile-nav-close:focus-visible,
button:focus-visible,a:focus-visible{outline:0;box-shadow:var(--dpv-focus)}

.input,.textarea,.select{
  min-height:var(--dpv-control-h);
  border-radius:var(--dpv-radius-md);
  border:1px solid rgba(255,255,255,.12);
  font-size:var(--dpv-font-input);
  line-height:1.45;
}
.textarea{padding:14px 16px}
.input:focus,.textarea:focus,.select:focus{box-shadow:var(--dpv-focus);border-color:rgba(255,122,184,.46)}
.input::placeholder,.textarea::placeholder{opacity:.72}

/* Labels e microtextos não podem ficar microscópicos em telas pequenas. */
.field label,.mini-label,.section-kicker,.letter-extra-kicker,.letter-album-head span,
.story-section-label,.story-final-preview-label,.reader-media-kicker,.ending-kicker{
  font-size:max(var(--dpv-font-micro),11px);
}

/* ---------- Superfícies ---------- */
.template-card,.how-card,.personalize-panel,.story-block,.story-media-panel,.question-card,
.mine-stat-card-rich,.mine-credit-card,.gift-row,.credits-banner,.account-login-card,.account-empty{
  border-radius:var(--dpv-radius-lg);
}

/* ---------- Editor ---------- */
.creator-section.creator-fullscreen .wizard-topbar{
  padding-top:max(12px,env(safe-area-inset-top));
}
.creator-section.creator-fullscreen .wizard-footer{
  padding-bottom:max(12px,calc(8px + env(safe-area-inset-bottom)));
}
.wizard-footer .btn{min-height:var(--dpv-control-h-lg)}
.story-block{box-shadow:0 10px 26px rgba(90,50,70,.055)}
.story-block-number{font-size:12px}
.story-mini-action,.story-help-action,.story-add-btn{min-height:38px;font-size:12px;border-radius:var(--dpv-radius-sm)}
.story-add-btn{border-radius:var(--dpv-radius-pill)}
.story-textarea,.story-rich-editor{font-size:18px;line-height:1.72}
.story-media-actions label,.story-media-actions button{min-height:44px;border-radius:var(--dpv-radius-sm)}
.story-always-add{border-radius:var(--dpv-radius-lg)}
.dpv-server-save{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--dpv-radius-pill);
  background:rgba(255,255,255,.035);
  color:#c9b4bf;
  font-size:11px;
}

/* ---------- Cartas: tokens por superfície ---------- */
.paper{
  --paper-text:#5f4450;
  --paper-muted:#8e6e7c;
  --paper-accent:#9e3f69;
  --paper-soft:rgba(150,76,108,.055);
  --paper-soft-strong:rgba(150,76,108,.095);
  --paper-line:rgba(120,76,95,.14);
  --paper-field:#fff;
  --paper-field-text:#4b2d38;
  --paper-button-text:#fff;
  --paper-button-start:#d84f8b;
  --paper-button-end:#b95ae7;
  --paper-shadow:0 25px 60px rgba(0,0,0,.22);
  box-shadow:var(--paper-shadow);
}
.paper.paper-clean{
  --paper-text:#403840;--paper-muted:#70636c;--paper-accent:#7c3d5a;
  --paper-soft:rgba(83,55,70,.045);--paper-soft-strong:rgba(83,55,70,.075);
  --paper-line:rgba(67,48,58,.11);--paper-field:#fff;--paper-field-text:#332b31;
}
.paper.paper-vintage{
  --paper-text:#5b4634;--paper-muted:#7f674f;--paper-accent:#7c5035;
  --paper-soft:rgba(111,79,46,.055);--paper-soft-strong:rgba(111,79,46,.095);
  --paper-line:rgba(91,64,39,.14);--paper-field:#fffaf0;--paper-field-text:#4f3929;
  --paper-button-start:#a66a44;--paper-button-end:#8b5577;
}
.paper.paper-night{
  --paper-text:#f3e3ec;--paper-muted:#cdb5c3;--paper-accent:#ffb0cf;
  --paper-soft:rgba(255,255,255,.055);--paper-soft-strong:rgba(255,255,255,.09);
  --paper-line:rgba(255,255,255,.13);--paper-field:rgba(255,255,255,.96);--paper-field-text:#34252e;
}
.paper.paper-glass{
  --paper-text:#f8edf3;--paper-muted:#dbc4d0;--paper-accent:#ffd0e3;
  --paper-soft:rgba(255,255,255,.065);--paper-soft-strong:rgba(255,255,255,.105);
  --paper-line:rgba(255,255,255,.16);--paper-field:rgba(255,255,255,.96);--paper-field-text:#352731;
}
.gift-experience.theme-minimal .paper.paper-glass{
  --paper-text:#51424a;--paper-muted:#826c78;--paper-accent:#8c4666;
  --paper-soft:rgba(92,61,76,.05);--paper-soft-strong:rgba(92,61,76,.085);
  --paper-line:rgba(87,57,70,.12);--paper-field:#fff;--paper-field-text:#41333a;
}

.opened-message .paper{color:var(--paper-text)}
.opened-message .paper p,.opened-message .story-result-text,.opened-message .reader-copy{color:var(--paper-text)!important}
.opened-message .paper h3,.opened-message .paper h4,.opened-message .reader-section-heading h4{color:var(--paper-accent)!important}
.opened-message .paper .media-caption,.opened-message .paper small,.opened-message .paper .muted{color:var(--paper-muted)}

/* Mesma anatomia visual para blocos interativos da carta. */
.paper .story-unlock,.paper .reader-guestbook,.paper .story-date-result,.paper .reader-minigame,
.paper .reader-puzzle,.paper .reader-reasons,.paper .reader-storymap{
  color:var(--paper-text)!important;
  border:1px solid var(--paper-line)!important;
  background:linear-gradient(145deg,var(--paper-soft-strong),var(--paper-soft))!important;
  border-radius:var(--dpv-radius-lg)!important;
  box-shadow:0 12px 32px rgba(53,30,43,.06)!important;
}
.paper .story-unlock h4,.paper .reader-guestbook h4,.paper .story-date-result h4,.paper .reader-minigame h4,
.paper .reader-puzzle h4,.paper .reader-reasons h4,.paper .reader-storymap h4{color:var(--paper-accent)!important}
.paper .story-unlock p,.paper .reader-guestbook p,.paper .story-date-result p,.paper .reader-minigame p,
.paper .reader-puzzle p,.paper .reader-reasons p,.paper .reader-storymap p{color:var(--paper-muted)!important}

.paper .story-unlock input,.paper .reader-guestbook input,.paper .reader-guestbook textarea,
.paper .story-unlock .unlock-answer,.paper .recipient-response textarea{
  color:var(--paper-field-text)!important;
  background:var(--paper-field)!important;
  border:1px solid rgba(158,63,105,.18)!important;
  border-radius:var(--dpv-radius-md)!important;
  min-height:52px;
  font-size:16px!important;
}
.paper .story-unlock input::placeholder,.paper .reader-guestbook input::placeholder,
.paper .reader-guestbook textarea::placeholder,.paper .recipient-response textarea::placeholder{color:#8f7a85!important;opacity:.8}

.paper .story-unlock .btn,.paper .reader-guestbook .btn,.paper .reader-minigame .btn,
.paper .reader-reasons .btn,.paper .recipient-response-btn{
  min-height:52px!important;
  color:var(--paper-button-text)!important;
  background:linear-gradient(135deg,var(--paper-button-start),var(--paper-button-end))!important;
  border:1px solid transparent!important;
  border-radius:var(--dpv-radius-pill)!important;
  font-size:14px!important;
  font-weight:800!important;
  box-shadow:0 10px 28px rgba(158,63,105,.18)!important;
}
.paper .story-unlock .btn:disabled,.paper .reader-guestbook .btn:disabled,.paper .recipient-response-btn:disabled{
  opacity:.52!important;box-shadow:none!important
}

/* Reações consistentes entre plataformas. */
.reaction-box{border-top-color:var(--paper-line)!important}
.reaction-box p{font-size:13px!important;color:var(--paper-muted)!important}
.reaction-row{gap:10px!important}
.reaction-btn{
  width:54px!important;height:54px!important;min-width:54px!important;
  border:1px solid var(--paper-line)!important;
  background:var(--paper-soft)!important;
  border-radius:50%!important;
  color:var(--paper-text)!important;
  font-size:25px!important;
  box-shadow:none;
}
.reaction-btn:hover,.reaction-btn.chosen{
  background:var(--paper-soft-strong)!important;
  border-color:rgba(158,63,105,.32)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.09)!important;
}

/* Mídia parece parte da carta, não um iframe colado. */
.opened-message .story-result-media .media-shell,.opened-message .recipient-music,
.opened-message .reader-media-block{
  border-radius:var(--dpv-radius-md);
}
.opened-message .story-result-media .media-shell{
  border:1px solid var(--paper-line)!important;
  box-shadow:0 16px 42px rgba(40,22,32,.11)!important;
}
.opened-message iframe,.opened-message video{background:#08070a}
.dpv-media-play-fallback,.dpv-media-needs-tap{
  border-radius:var(--dpv-radius-md)!important;
}

/* Álbuns/timeline com legibilidade mínima padronizada. */
.letter-album-head span,.letter-extra-kicker{font-size:11px!important}
.album-card small,.letter-timeline-row b,.letter-timeline-row span,.letter-reason{font-size:12px!important}
.letter-timeline-row,.letter-reason{border-color:var(--paper-line)!important;background:var(--paper-soft)!important}
.letter-timeline-row span,.letter-reason{color:var(--paper-text)!important}
.letter-timeline-row b{color:var(--paper-accent)!important}

/* ---------- Prévia e abertura ---------- */
#previewDeviceBox .modal-head{min-height:64px}
#previewDeviceBox .modal-head>strong{line-height:1.2}
.device-switch{min-height:36px}
.device-switch button{min-height:30px}
.magic-envelope-stage{touch-action:manipulation}
.magic-hint{font-size:12px;line-height:1.4}

/* ---------- Menu mobile ---------- */
.mobile-menu{min-width:44px;min-height:44px;border-radius:var(--dpv-radius-sm)}
.mobile-nav-drawer{padding-top:max(18px,calc(10px + env(safe-area-inset-top)));padding-bottom:max(20px,calc(12px + env(safe-area-inset-bottom)))}
.mobile-nav-links a,.mobile-nav-links button{min-height:50px;border-radius:var(--dpv-radius-sm)}
.mobile-nav-account{border-radius:var(--dpv-radius-lg)}

/* ---------- Painel do usuário ---------- */
.account-page .mine{max-width:1180px}
.mine-tools,.mine-credit-card,.mine-stat-card-rich,.gift-row{border-color:rgba(255,255,255,.095)}
.gift-row{transition:transform .2s var(--ease),border-color .2s ease,background .2s ease}
.gift-row:hover{transform:translateY(-2px);border-color:rgba(255,122,184,.20)}
.gift-row-actions .btn{min-height:44px}
.mine-filters button{min-height:40px}

/* ---------- Legal ---------- */
.legal-shell{width:min(100% - 28px,860px)!important;margin:clamp(30px,7vw,70px) auto!important;padding:clamp(22px,5vw,40px)!important}
.legal-shell p,.legal-shell li{font-size:15px}

/* ---------- Responsividade consolidada ---------- */
@media(max-width:1024px){
  .templates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-always-add .story-add-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:768px){
  html{-webkit-text-size-adjust:100%}
  input,textarea,select{font-size:16px!important}
  .container{width:min(100% - 24px,1180px)}
  .btn{min-height:48px}
  .creator-section.creator-fullscreen .wizard-topbar{padding-left:12px;padding-right:12px}
  .creator-section.creator-fullscreen .wizard-footer{padding-left:12px;padding-right:12px}
  .story-block{padding:14px;border-radius:var(--dpv-radius-md)}
  .story-always-add{bottom:max(7px,env(safe-area-inset-bottom))}
  #previewDeviceBox .gift-experience{padding-bottom:max(34px,calc(20px + env(safe-area-inset-bottom)))!important}
  .opened-message .paper{border-radius:var(--dpv-radius-md)!important}
  .reaction-row{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%}
  .reaction-btn{width:100%!important;min-width:0!important;max-width:58px!important;margin:auto}
  .recipient-response{width:100%!important;padding:14px!important}
  .post-letter-actions{display:grid!important;grid-template-columns:1fr;width:100%}
  .post-letter-actions button{min-height:46px}
  .story-unlock-form{gap:10px!important}
  .paper .story-unlock .btn,.paper .reader-guestbook .btn,.paper .recipient-response-btn{width:100%!important}
  .gift-row-actions{display:grid!important;grid-template-columns:1fr!important}
  .gift-row-actions .btn{width:100%!important}
}

@media(max-width:480px){
  .templates{grid-template-columns:1fr}
  .story-always-add .story-add-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reaction-row{gap:7px!important}
  .reaction-btn{height:50px!important;font-size:23px!important}
  .mine-head h1{font-size:clamp(40px,14vw,52px)!important}
}

@media(prefers-reduced-motion:reduce){
  .btn,.gift-row,.template-card,.mobile-nav-drawer{transition-duration:.01ms!important}
}