/*  ═════════════════════════════════════════════════════════════
    SINTONIA FINANCEIRA · TEMA DO APP
    Tokens visuais reusáveis em todas as telas.
    Direção: Premium Editorial (Inter + Instrument Serif)
    ═════════════════════════════════════════════════════════════ */

:root{
  --bg:#0F172A;
  --bg-soft:#131C30;
  --bg-elevated:#1E293B;
  --gold:#D4AF37;
  --gold-light:#F0CC60;
  --gold-soft:rgba(212,175,55,0.12);
  --white:#FFFFFF;
  --muted:rgba(255,255,255,0.72);
  --dim:rgba(255,255,255,0.45);
  --surface:rgba(255,255,255,0.05);
  --surface-2:rgba(255,255,255,0.09);
  --border-gold:rgba(212,175,55,0.28);
  --border-soft:rgba(255,255,255,0.1);
  --green:#52C41A;
  --red:#FF4D4F;
  --orange:#FF9F0A;
  --purple:#A855F7;

  /* Legacy aliases — pra não quebrar telas antigas */
  --bg-dark:#0F172A;
  --bg-mid:#0F172A;
  --bg-bright:#0F172A;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--white);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:'cv11','ss01','ss03';
}

/* === TEMA ROXO (anterior) === */
html[data-theme="purple"] body{
  background:linear-gradient(180deg,#1E293B 0%,#312E81 60%,#581C87 100%);
}
html[data-theme="purple"] .app-screen{
  background:linear-gradient(180deg,#1E293B 0%,#312E81 60%,#581C87 100%);
}
@media(min-width:768px){
  html[data-theme="purple"] body{background:#06080F}
}

/* === HIDE VALUES (nota musical no lugar dos R$) === */
html.hide-values [data-hideable]{
  position:relative;
  color:transparent!important;
  user-select:none;
}
html.hide-values [data-hideable] > *{
  visibility:hidden;
}
html.hide-values [data-hideable]::after{
  content:'♪ ♪ ♪';
  visibility:visible;
  position:absolute;
  inset:0;
  color:var(--gold);
  text-align:inherit;
  letter-spacing:0.18em;
  font-family:'Instrument Serif',serif;
  font-weight:400;
  line-height:inherit;
  pointer-events:none;
}

/* === TIPOGRAFIA === */
.font-display{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-0.01em}
.gold{color:var(--gold)}
/* gold-italic mantida como classe pra não quebrar telas, mas SEM itálico */
.gold-italic{color:var(--gold);font-style:normal}

h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:38px;line-height:1.1;letter-spacing:-0.015em}
h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:30px;line-height:1.15;letter-spacing:-0.012em}
h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:22px;letter-spacing:-0.008em}

.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:700;color:var(--gold);text-transform:uppercase}

/* === LAYOUT MOBILE-FIRST === */
.app-screen{
  width:100%;max-width:430px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;position:relative;
  background:var(--bg);
}

@media(min-width:768px){
  body{padding:20px;background:#06080F}
  .app-screen{
    border-radius:32px;overflow:hidden;
    box-shadow:0 30px 80px -10px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.06);
    min-height:auto;height:840px;max-height:90vh;margin-top:30px;
  }
}

.content{flex:1;padding:24px 22px 20px;overflow-y:auto;display:flex;flex-direction:column}

/* === BOTÕES === */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:12px;font-size:15px;font-weight:600;
  border:0;cursor:pointer;width:100%;font-family:inherit;
  transition:transform 0.15s ease,opacity 0.15s ease,background 0.15s ease;
  letter-spacing:-0.01em;
}
.btn:active{transform:scale(0.97)}
.btn-gold{background:var(--gold);color:#1B2845}
.btn-gold:hover{background:var(--gold-light)}
.btn-ghost{background:transparent;border:1px solid var(--border-soft);color:var(--white)}
.btn-ghost:hover{background:var(--surface)}

/* === INPUTS === */
.input-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.input-row label{font-size:11px;letter-spacing:1.5px;color:var(--gold);font-weight:700;text-transform:uppercase}
.input-field{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;
  padding:14px 16px;color:var(--white);font-size:15px;font-family:inherit;
  width:100%;outline:none;transition:border-color 0.2s,background 0.2s;
}
.input-field:focus{border-color:var(--gold);background:var(--surface-2)}
.input-field::placeholder{color:var(--dim)}

/* === STATUS BAR (mobile-like) === */
.status-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 28px 8px;font-size:12px;font-weight:500;color:var(--white)}

/* === SPLASH === */
.splash{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 22px;gap:24px;
}
.splash-logo{
  width:88px;height:88px;border-radius:24px;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-size:48px;font-weight:400;color:#1B2845;
  box-shadow:0 20px 50px -10px rgba(212,175,55,0.4);
}
.splash h2{font-size:38px;letter-spacing:-0.015em}
.splash .tagline{color:var(--muted);font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:500}
.splash .loader{
  width:44px;height:3px;background:rgba(212,175,55,0.18);border-radius:2px;
  position:relative;overflow:hidden;margin-top:20px;
}
.splash .loader::after{
  content:'';position:absolute;left:0;top:0;height:100%;width:40%;
  background:var(--gold);border-radius:2px;
  animation:slide 1.4s ease-in-out infinite;
}
@keyframes slide{
  0%{left:-40%}
  100%{left:100%}
}
.splash .quote{
  font-family:'Instrument Serif',serif;font-size:16px;
  color:var(--muted);max-width:280px;line-height:1.5;margin-top:auto;letter-spacing:-0.005em;
}

/* === LINKS === */
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* === UTILITÁRIOS === */
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-dim{color:var(--dim)}
.mt-auto{margin-top:auto}
.flex{display:flex}
.flex-col{flex-direction:column}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.gap-6{gap:24px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.w-full{width:100%}
.hidden{display:none}

/* === CARDS === */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:16px}
.card-gold{background:linear-gradient(135deg,rgba(212,175,55,0.13),rgba(212,175,55,0.03));border-color:var(--border-gold)}