/* ===========================================================
   Atina-te — folha de estilos
   Sistema de design: "Warm Modern Intimacy" — dark-first,
   glassmorphism quente, serifada editorial + sans geométrica.
   =========================================================== */

:root{
  /* ---- cor de marca (escuro — identidade principal da app) ---- */
  --coral: #FF6B55;                          /* primary — Simão / CTAs */
  --coral-600: #E4503B;
  --coral-100: rgba(255,107,85,.16);

  --teal: #68D8D6;                           /* secondary — Mariana */
  --teal-600: #20A09F;
  --teal-100: rgba(104,216,214,.14);

  --shared: #4EA8DE;                         /* tertiary — sincronismo / partilhado (Ambos) */
  --shared-600: #2E86BE;
  --shared-100: rgba(78,168,222,.16);

  --error: #FFB4AB;
  --error-container: #93000A;

  /* ---- superfícies neutras (charcoal quente, nunca preto puro) ---- */
  --bg: #171215;
  --surface: #241E21;
  --surface-sunken: #120D10;
  --surface-elevated: #2E282C;
  --border: #59413D;
  --border-strong: #A88A85;
  --ink: #EBE0E4;
  --ink-soft: #E1BFB9;
  --ink-faint: rgba(240,230,235,.42);

  /* ---- vidro fosco ---- */
  --glass-bg: rgba(30,22,26,.65);
  --glass-border: rgba(255,255,255,.08);
  --glass-blur: 20px;
  --well-bg: rgba(255,255,255,.03);
  --well-border: rgba(255,255,255,.08);
  --track-bg: rgba(0,0,0,.28);
  --track-active-bg: rgba(255,255,255,.12);

  --shadow: rgba(8,4,6,.55);

  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius-s: 16px;
  --radius-m: 24px;
  --radius-l: 32px;
  --nav-h: 68px;

  /* fixed device chrome — represents physical hardware, not themed UI */
  --device-bezel: #17120f;
}

/* ---- variante clara (só quando o sistema ou a escolha explícita pedem "Claro") ---- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg: #FFF8F6;
    --surface: #FFFFFF;
    --surface-sunken: #FFF1EC;
    --surface-elevated: #FFFFFF;
    --border: #F0DCD5;
    --border-strong: #D9BFB5;
    --ink: #2B1620;
    --ink-soft: #7A6570;
    --ink-faint: #B5A2AA;
    --coral-100: #FFE4DE;
    --teal: #1FA3A0;
    --teal-600: #16827F;
    --teal-100: #D8F3F1;
    --shared: #2E86BE;
    --shared-600: #1F6699;
    --shared-100: #DCEEFA;
    --glass-bg: rgba(255,255,255,.7);
    --glass-border: rgba(43,22,32,.08);
    --well-bg: #FFF1EC;
    --well-border: #F0DCD5;
    --track-bg: #FFF1EC;
    --track-active-bg: #FFFFFF;
    --shadow: rgba(43,22,32,.14);
  }
}
:root[data-theme="light"]{
  --bg: #FFF8F6;
  --surface: #FFFFFF;
  --surface-sunken: #FFF1EC;
  --surface-elevated: #FFFFFF;
  --border: #F0DCD5;
  --border-strong: #D9BFB5;
  --ink: #2B1620;
  --ink-soft: #7A6570;
  --ink-faint: #B5A2AA;
  --coral-100: #FFE4DE;
  --teal: #1FA3A0;
  --teal-600: #16827F;
  --teal-100: #D8F3F1;
  --shared: #2E86BE;
  --shared-600: #1F6699;
  --shared-100: #DCEEFA;
  --glass-bg: rgba(255,255,255,.7);
  --glass-border: rgba(43,22,32,.08);
  --well-bg: #FFF1EC;
  --well-border: #F0DCD5;
  --track-bg: #FFF1EC;
  --track-active-bg: #FFFFFF;
  --shadow: rgba(43,22,32,.14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{ font-family:var(--font-display); text-wrap:balance; margin:0; }
p{ margin:0; }
button,input{ font-family:inherit; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; }
.tabular{ font-variant-numeric:tabular-nums; }

/* ---------- ambient desktop backdrop + phone shell ---------- */
.ambient{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(60% 50% at 12% 10%, color-mix(in srgb, var(--coral) 35%, transparent), transparent 60%),
    radial-gradient(55% 45% at 88% 85%, color-mix(in srgb, var(--teal) 32%, transparent), transparent 60%),
    var(--bg);
  display:none;
}
.phone-shell{
  position:relative; z-index:1;
  width:100%; height:100dvh;
  background:var(--bg);
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* glow ambiente permanente por trás dos ecrãs — é o que os cartões de vidro
   fosco (backdrop-filter) andam a desfocar; sem isto o "glass" fica sem nada
   por trás para se notar. */
.ambient-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.ambient-glow::before,
.ambient-glow::after{
  content:""; position:absolute; width:70%; padding-top:70%; border-radius:50%; filter:blur(70px);
}
.ambient-glow::before{ top:-18%; left:-20%; background:color-mix(in srgb, var(--coral) 30%, transparent); }
.ambient-glow::after{ bottom:-16%; right:-22%; background:color-mix(in srgb, var(--teal) 26%, transparent); }

.iphone-chrome{ display:none; }

@media (min-width:640px){
  .ambient{ display:block; }
  body{ display:flex; align-items:center; justify-content:center; padding:48px 16px; }
  .phone-shell{
    width:396px; height:min(844px, 88vh);
    border-radius:54px;
    border:14px solid var(--device-bezel);
    box-shadow:
      0 40px 70px -24px var(--shadow),
      0 0 0 1px color-mix(in srgb, var(--device-bezel) 40%, transparent),
      inset 0 0 0 2px color-mix(in srgb, white 6%, transparent);
  }

  /* decorative iPhone chrome — desktop preview only; real phones get the bare web app */
  .iphone-chrome{ display:block; position:absolute; inset:-14px; z-index:10; pointer-events:none; }
  .iphone-chrome__island{
    position:absolute; top:14px; left:50%; transform:translateX(-50%);
    width:96px; height:26px; border-radius:16px; background:#000;
  }
  .iphone-chrome__home{
    position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
    width:120px; height:4px; border-radius:999px; background:#fff; opacity:.55;
  }
  .iphone-chrome__btn{ position:absolute; background:var(--device-bezel); }
  .iphone-chrome__btn--power{ right:-2px; top:150px; width:3px; height:70px; border-radius:0 3px 3px 0; }
  .iphone-chrome__btn--vol-up{ left:-2px; top:118px; width:3px; height:38px; border-radius:3px 0 0 3px; }
  .iphone-chrome__btn--vol-down{ left:-2px; top:164px; width:3px; height:38px; border-radius:3px 0 0 3px; }
  .iphone-chrome__btn--action{ left:-2px; top:92px; width:3px; height:20px; border-radius:3px 0 0 3px; }

  /* clear the dynamic island so header content never sits under it */
  .app-bar{ padding-top:34px; }
  .screen--login .login-hero{ padding-top:36px; }
}

/* ---------- screens ---------- */
.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:transparent; /* deixa o glow ambiente do phone-shell mostrar-se */
}
.screen[hidden]{ display:none; }
.phone-shell{ position:relative; }
@keyframes screen-enter{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.screen:not([hidden]){ animation:screen-enter .28s ease-out; }

.screen-body{
  flex:1; min-height:0; overflow-y:auto;
  padding:20px 20px calc(var(--nav-h) + 28px);
  display:flex; flex-direction:column; gap:22px;
  position:relative; z-index:1;
}

/* ---------- app bar ---------- */
.app-bar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 20px 14px;
  background:transparent;
  position:relative; z-index:2;
}
.app-bar__brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.app-bar h1{ font-size:1.5rem; font-weight:600; }
.app-bar__sub{ color:var(--ink-soft); font-size:.85rem; margin-top:2px; }

.logo-mark{ position:relative; width:30px; height:22px; flex:none; }
.logo-mark span{ position:absolute; top:0; width:22px; height:22px; border-radius:50%; }
.logo-mark span:first-child{ left:0; background:var(--coral); }
.logo-mark span:last-child{ left:8px; background:var(--teal); mix-blend-mode:screen; }
:root[data-theme="light"] .logo-mark span:last-child{ mix-blend-mode:multiply; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .logo-mark span:last-child{ mix-blend-mode:multiply; }
}
.logo-mark--sm{ width:24px; height:18px; }
.logo-mark--sm span{ width:18px; height:18px; }
.logo-mark--sm span:last-child{ left:6px; }
.logo-mark--lg{ width:56px; height:42px; margin:0 auto; }
.logo-mark--lg span{ width:42px; height:42px; }
.logo-mark--lg span:last-child{ left:14px; }

.icon-btn{
  position:relative;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  color:var(--ink); cursor:pointer;
}
.icon-btn svg{ width:19px; height:19px; }
.badge{
  position:absolute; top:5px; right:6px;
  min-width:15px; height:15px; padding:0 3px; border-radius:8px;
  background:var(--coral); color:#fff; font-size:.62rem; font-weight:700;
  display:grid; place-items:center; line-height:1; border:2px solid var(--bg);
}
.badge[hidden]{ display:none; }

/* ---------- notification panel ---------- */
.notif-panel{
  position:absolute; top:60px; right:16px; width:min(280px, calc(100% - 32px)); z-index:20;
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:var(--radius-m);
  box-shadow:0 18px 34px -14px var(--shadow);
  padding:6px;
}
.notif-panel[hidden]{ display:none; }
.notif-panel__head{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px 4px; }
.notif-panel__head span{ font-weight:700; font-size:.9rem; }
.notif-panel__head button{ background:none; border:0; color:var(--ink-faint); cursor:pointer; display:grid; }
.notif-panel__head button svg{ width:16px; height:16px; }
.notif-item{ display:flex; gap:10px; padding:9px 10px; border-radius:var(--radius-s); }
.notif-item:hover{ background:rgba(255,255,255,.05); }
.notif-item__dot{ width:8px; height:8px; border-radius:50%; background:var(--coral); margin-top:6px; flex:none; }
.notif-item p{ font-size:.83rem; line-height:1.35; }
.notif-item time{ display:block; color:var(--ink-faint); font-size:.72rem; margin-top:2px; }

/* ---------- login screen ---------- */
.screen--login .screen-body{ padding:0 24px 28px; justify-content:flex-end; gap:0; overflow:hidden; }
.login-hero{
  position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding-top:env(safe-area-inset-top, 0px); z-index:0;
}
.login-hero::before{
  content:""; position:absolute; z-index:-1; inset:-10% -30% auto; height:70%;
  background:
    radial-gradient(50% 55% at 28% 25%, color-mix(in srgb, var(--coral) 55%, transparent), transparent 70%),
    radial-gradient(48% 50% at 78% 35%, color-mix(in srgb, var(--teal) 50%, transparent), transparent 70%),
    radial-gradient(40% 45% at 50% 75%, color-mix(in srgb, var(--shared) 40%, transparent), transparent 70%);
  filter:blur(30px);
}
.wordmark{ font-size:2.1rem; font-weight:600; }
.tagline{ color:var(--ink-soft); font-size:.95rem; }

.auth-card{
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-l) var(--radius-l) 0 0;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  margin:0 -24px; box-shadow:0 -16px 40px -24px var(--shadow);
}
@media (min-width:640px){ .auth-card{ border-radius:var(--radius-l); margin:0; } }

.auth-tabs{ display:flex; background:var(--track-bg); border-radius:999px; padding:4px; margin-bottom:18px; }
.auth-tab{
  flex:1; border:0; background:none; padding:9px 0; border-radius:999px;
  font-weight:700; font-size:.88rem; color:var(--ink-faint); cursor:pointer;
}
.auth-tab.is-active{ background:var(--track-active-bg); color:var(--ink); box-shadow:0 4px 10px -4px var(--shadow); }

.auth-form{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field[hidden]{ display:none; }
.field span{ font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.field input{
  border:1.5px solid var(--well-border); background:var(--well-bg);
  border-radius:var(--radius-s); padding:12px 16px; font-size:.95rem; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{
  outline:none; border-color:var(--coral);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--coral) 18%, transparent);
}
.forgot-link{ align-self:flex-end; font-size:.8rem; color:var(--teal-600); font-weight:600; text-decoration:none; margin-top:-4px; }
.auth-error{
  margin:0; padding:9px 12px; border-radius:var(--radius-s);
  background:var(--coral-100); color:var(--coral); font-size:.8rem; font-weight:600;
}
.auth-error[hidden]{ display:none; }

.btn{
  border:0; border-radius:999px; padding:13px 18px; font-weight:700; font-size:.95rem; cursor:pointer;
  transition:transform .1s ease-out;
}
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.btn--block{ width:100%; }
.btn--primary{
  background:linear-gradient(135deg, var(--coral), var(--coral-600)); color:#fff;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.2),
    0 10px 24px -10px color-mix(in srgb, var(--coral) 60%, transparent);
}
.btn--ghost{ background:rgba(255,255,255,.06); border:1px solid var(--glass-border); color:var(--ink); }
.auth-divider{ display:flex; align-items:center; gap:10px; color:var(--ink-faint); font-size:.78rem; margin:16px 0; }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:var(--border); }

/* ---------- cards / panels ---------- */
.panel{ display:flex; flex-direction:column; gap:12px; }
.panel[hidden]{ display:none; }
.panel__head{ display:flex; align-items:baseline; justify-content:space-between; }
.panel__head h3{ font-size:1.05rem; font-weight:600; }
.link-btn{ border:0; background:none; color:var(--teal-600); font-weight:700; font-size:.82rem; cursor:pointer; }

.greeting__eyebrow{ font-size:.78rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.greeting h2{ font-size:1.6rem; margin-top:2px; }

.couple-card{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(120deg, var(--coral-100), var(--teal-100));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-m); padding:14px 16px;
}
.couple-card__avatars{ display:flex; flex:none; }
.avatar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:.85rem; color:#fff; border:2px solid var(--bg);
}
.couple-card__avatars .avatar-ring:last-child{ margin-left:-14px; }
.avatar--coral{ background:var(--coral); }
.avatar--teal{ background:var(--teal); }
.avatar--gold{ background:linear-gradient(135deg, var(--coral), var(--shared) 55%, var(--teal)); }

.avatar-ring{
  display:inline-flex; padding:2.5px; border-radius:50%; flex:none;
  background:conic-gradient(from 200deg, var(--coral), var(--shared), var(--teal), var(--coral));
}
.avatar-ring .avatar{ border-width:2.5px; }
.avatar-ring--lg{ padding:3px; }
.avatar-ring--lg .avatar{ border-width:3px; }
.couple-card__info{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.couple-card__info strong{ font-size:.95rem; }
.couple-card__info span{ font-size:.78rem; color:var(--ink-soft); }
.streak-pill{
  flex:none; display:flex; align-items:center; gap:5px;
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:999px; padding:6px 11px;
  font-size:.75rem; font-weight:700; white-space:nowrap;
}
.streak-pill svg{ width:14px; height:14px; color:var(--coral); flex:none; }
@keyframes flame-flicker{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.12) rotate(-4deg); }
}
.streak-pill svg{ animation:flame-flicker 1.6s ease-in-out infinite; transform-origin:50% 90%; }

.quick-actions{ display:flex; gap:10px; }
.quick-action{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:var(--radius-m); padding:12px 6px;
  font-family:inherit; font-size:.72rem; font-weight:700; color:var(--ink-soft); cursor:pointer;
  transition:transform .1s ease-out;
}
.quick-action:active{ transform:scale(.96); }
.quick-action__icon{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06);
  display:grid; place-items:center; color:var(--ink); flex:none;
}
.quick-action__icon svg{ width:17px; height:17px; }

.stat-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.stat-chip{
  border-radius:var(--radius-m); padding:12px 10px; display:flex; flex-direction:column; gap:6px; color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16);
  font-family:inherit; text-align:left; border:0; width:100%; min-width:0;
}
.stat-chip--coral{ background:linear-gradient(135deg, var(--coral), var(--coral-600)); }
.stat-chip--blue{ background:linear-gradient(135deg, var(--shared), var(--shared-600)); }
.stat-chip--teal{ background:linear-gradient(135deg, var(--teal), var(--teal-600)); }
.stat-chip__icon{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; flex:none; }
.stat-chip__icon svg{ width:14px; height:14px; }
.stat-chip__value{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; line-height:1.1; }
.stat-chip__label{ font-size:.68rem; opacity:.92; line-height:1.25; }
button.stat-chip{ cursor:pointer; }

.activity-list{ display:flex; flex-direction:column; gap:2px; }
.activity-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.activity-item:last-child{ border-bottom:0; }
.activity-item .avatar{ width:30px; height:30px; font-size:.72rem; }
.activity-item p{ font-size:.85rem; line-height:1.4; }
.activity-item time{ font-size:.74rem; color:var(--ink-faint); }

/* ---------- tasks ---------- */
.chip-row{ display:flex; flex-shrink:0; gap:8px; overflow-x:auto; padding-bottom:2px; }
.chip{
  flex:none; border:1px solid var(--glass-border); background:rgba(255,255,255,.05);
  border-radius:999px; padding:7px 14px; font-size:.8rem; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

.task-list{ display:flex; flex-direction:column; gap:8px; }
.task-item{
  display:flex; align-items:center; gap:12px;
  background:var(--well-bg); border:1px solid var(--well-border);
  border-radius:var(--radius-m); padding:12px 14px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
}
.task-check{
  width:24px; height:24px; border-radius:50%; flex:none; cursor:pointer;
  border:2px solid var(--border-strong); background:transparent; display:grid; place-items:center; color:#fff;
  transition:transform .15s;
}
.task-check svg{ width:13px; height:13px; opacity:0; transition:opacity .12s; }
.task-item.is-done .task-check{ background:var(--teal); border-color:var(--teal); animation:check-pop .35s cubic-bezier(.34,1.56,.64,1); }
.task-item.is-done .task-check svg{ opacity:1; }
.task-item.is-done .task-title{ text-decoration:line-through; color:var(--ink-faint); }
@keyframes check-pop{
  0%{ transform:scale(.7); }
  55%{ transform:scale(1.2); }
  100%{ transform:scale(1); }
}
.task-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.task-title{ font-size:.9rem; font-weight:600; }
.task-when{ font-size:.76rem; color:var(--ink-soft); }
.task-owner{ width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:.68rem; font-weight:700; color:#fff; }

.section-label{ font-size:.78rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }

.fab{
  position:absolute; right:20px; bottom:calc(var(--nav-h) + 18px);
  width:52px; height:52px; border-radius:50%; border:0;
  background:linear-gradient(135deg, var(--coral), var(--coral-600)); color:#fff;
  display:grid; place-items:center; cursor:pointer; z-index:5;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    0 14px 24px -10px color-mix(in srgb, var(--coral) 65%, transparent);
  transition:transform .1s ease-out;
}
.fab:active{ transform:scale(.94); }
.fab svg{ width:22px; height:22px; }

/* ---------- finance ---------- */
.budget-card{
  display:flex; align-items:center; gap:18px; width:100%; text-align:left; font-family:inherit; cursor:pointer;
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:var(--radius-l); padding:18px;
}
.budget-ring{ flex:none; width:112px; height:112px; }
.budget-ring circle{ fill:none; stroke-width:11; }
.budget-ring__track{ stroke:var(--border); }
.budget-ring__value{ stroke:var(--coral); stroke-linecap:round; transform:rotate(-90deg); transform-origin:56px 56px; }
.budget-ring-wrap{ position:relative; width:112px; height:112px; flex:none; }
.budget-ring-wrap .ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center strong{ font-family:var(--font-display); font-size:1.3rem; }
.ring-center span{ font-size:.68rem; color:var(--ink-soft); }
.budget-legend{ flex:1; display:flex; flex-direction:column; gap:8px; }
.budget-legend div{ display:flex; justify-content:space-between; font-size:.82rem; }
.budget-legend strong{ font-weight:700; }
.budget-legend .muted{ color:var(--ink-soft); }

.category-list{ display:flex; flex-direction:column; gap:12px; }
.category-row{ display:flex; align-items:center; gap:10px; }
.category-row__label{ width:96px; flex:none; font-size:.82rem; font-weight:600; }
.category-row__bar{ flex:1; height:8px; border-radius:999px; background:var(--well-bg); overflow:hidden; }
.category-row__bar > span{ display:block; height:100%; border-radius:999px; }
.category-row__amount{ width:60px; flex:none; text-align:right; font-size:.8rem; font-weight:700; }

.tx-list{ display:flex; flex-direction:column; }
.tx-item{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.tx-item:last-child{ border-bottom:0; }
.tx-icon{ width:38px; height:38px; border-radius:12px; background:var(--well-bg); display:grid; place-items:center; flex:none; color:var(--ink-soft); }
.tx-icon svg{ width:17px; height:17px; }
.tx-main{ flex:1; min-width:0; }
.tx-main strong{ display:block; font-size:.87rem; font-weight:600; }
.tx-main span{ font-size:.76rem; color:var(--ink-soft); }
.tx-amount{ text-align:right; flex:none; }
.tx-amount strong{ display:block; font-size:.88rem; }
.tx-amount span{ font-size:.72rem; color:var(--ink-faint); }

/* ---------- calendar ---------- */
.calendar-card{
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:var(--radius-l); padding:16px;
}
.calendar-card__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.calendar-card__head strong{ font-family:var(--font-display); font-size:1.05rem; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; text-align:center; }
.cal-grid .dow{ font-size:.68rem; font-weight:700; color:var(--ink-faint); padding-bottom:4px; }
.cal-day{ position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.82rem; border-radius:10px; color:var(--ink-soft); }
.cal-day.is-muted{ color:var(--ink-faint); opacity:.4; }
.cal-day.is-today{ background:var(--ink); color:var(--bg); font-weight:700; }
.cal-day.has-event::after{ content:""; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--shared); }
.cal-day.has-event.owner-simao::after{ background:var(--coral); }
.cal-day.has-event.owner-mariana::after{ background:var(--teal); }
.cal-day.is-filtered-out::after{ display:none; }
.cal-day.is-filtered-out{ opacity:.35; }
.cal-day.is-today.has-event::after{ background:var(--bg); }

.cal-legend{ display:flex; gap:14px; justify-content:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.cal-legend span{ display:flex; align-items:center; gap:5px; font-size:.7rem; color:var(--ink-soft); font-weight:600; }
.cal-legend__dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }

.agenda-empty{ text-align:center; color:var(--ink-faint); font-size:.85rem; padding:18px 0; }
.empty-note{ color:var(--ink-faint); font-size:.82rem; padding:10px 4px; margin:0; }

.agenda-item{ display:flex; gap:12px; }
.agenda-item.is-hidden{ display:none; }
.agenda-date{ flex:none; width:46px; text-align:center; }
.agenda-date strong{ display:block; font-family:var(--font-display); font-size:1.15rem; }
.agenda-date span{ display:block; font-size:.65rem; color:var(--ink-soft); text-transform:uppercase; }
.agenda-line{ width:2px; background:var(--border); flex:none; margin:2px 0; }
.agenda-body{ flex:1; padding-bottom:18px; min-width:0; }
.agenda-body__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.agenda-body strong{ display:block; font-size:.9rem; font-weight:600; }
.agenda-body span{ font-size:.78rem; color:var(--ink-soft); }
.agenda-owner-avatar{
  flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.58rem; font-weight:700; color:#fff; transform:translateY(1px);
}

/* ---------- saúde ---------- */
.health-rings{ display:flex; gap:12px; }
.health-ring-card{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:var(--radius-l); padding:16px 10px;
}
.ring-mini-wrap{ position:relative; width:82px; height:82px; }
.ring-mini-wrap svg{ width:100%; height:100%; }
.ring-mini-wrap circle{ fill:none; stroke-width:8; }
.ring-mini-wrap .ring-track{ stroke:var(--border); }
.ring-mini-wrap .ring-value{ stroke-linecap:round; transform:rotate(-90deg); transform-origin:41px 41px; }
.ring-mini-wrap .ring-value--coral{ stroke:var(--coral); }
.ring-mini-wrap .ring-value--teal{ stroke:var(--teal); }
.ring-center-mini{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center-mini strong{ font-family:var(--font-display); font-size:1.02rem; }
.ring-center-mini span{ font-size:.6rem; color:var(--ink-soft); }
.health-ring-card__name{ display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; }
.health-ring-card__name .avatar{ width:20px; height:20px; font-size:.6rem; }

.water-card{ display:flex; flex-direction:column; gap:12px; }
.water-row{ display:flex; gap:8px; flex-wrap:wrap; }
.water-glass{
  width:36px; height:36px; border-radius:11px; flex:none;
  border:1.5px solid var(--well-border); background:var(--well-bg);
  display:grid; place-items:center; color:var(--ink-faint); cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.water-glass svg{ width:16px; height:16px; }
.water-glass.is-filled{
  background:linear-gradient(160deg, color-mix(in srgb, var(--shared) 45%, white 25%), var(--shared));
  border-color:transparent; color:#fff;
}

.med-item .task-when{ display:flex; align-items:center; gap:6px; }
.med-time{
  font-size:.68rem; font-weight:700; color:var(--teal-600); background:var(--teal-100);
  border-radius:999px; padding:2px 8px;
}

/* ---------- notas & timeline ---------- */
.notes-search{
  display:flex; align-items:center; gap:8px;
  background:var(--well-bg); border:1px solid var(--well-border); border-radius:999px; padding:10px 14px;
}
.notes-search svg{ width:16px; height:16px; color:var(--ink-faint); flex:none; }
.notes-search input{ border:0; background:none; outline:none; font-size:.85rem; color:var(--ink); flex:1; min-width:0; }
.notes-search input::placeholder{ color:var(--ink-faint); }

.notes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.note-card{
  position:relative; border-radius:var(--radius-m); padding:14px 30px 12px 14px;
  display:flex; flex-direction:column; gap:8px; min-height:118px;
  border:1px solid var(--glass-border);
}
.note-card.is-hidden{ display:none; }
.note-card h4{ font-family:var(--font-display); font-size:.95rem; font-weight:600; margin:0; line-height:1.25; }
.note-card p{
  font-size:.76rem; color:var(--ink-soft); line-height:1.4; margin:0; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.note-card__footer{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.note-card__footer time{ font-size:.66rem; color:var(--ink-faint); }
.note-card__pin{ position:absolute; top:13px; right:12px; width:14px; height:14px; color:var(--ink-faint); opacity:.55; }
.note-card--gold{ background:color-mix(in srgb, var(--shared) 20%, var(--surface)); }
.note-card--coral{ background:color-mix(in srgb, var(--coral) 18%, var(--surface)); }
.note-card--teal{ background:color-mix(in srgb, var(--teal) 16%, var(--surface)); }
.note-card--neutral{ background:var(--well-bg); }

.timeline{ display:flex; flex-direction:column; }
.timeline-item{ display:flex; gap:14px; }
.timeline-marker{ display:flex; flex-direction:column; align-items:center; flex:none; }
.timeline-badge{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1;
  border:2px solid var(--border); color:var(--ink-soft); background:var(--well-bg);
}
.timeline-badge small{ font-family:var(--font-body); font-size:.52rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; opacity:.85; margin-top:1px; }
.timeline-badge--urgent{ background:linear-gradient(135deg, var(--coral), var(--coral-600)); border-color:transparent; color:#fff; }
.timeline-badge--soon{ background:linear-gradient(135deg, var(--shared), var(--shared-600)); border-color:transparent; color:#fff; }
.timeline-line{ flex:1; width:2px; background:var(--border); margin:6px 0; min-height:20px; }
.timeline-item:last-child .timeline-line{ display:none; }
.timeline-body{ flex:1; padding-bottom:20px; min-width:0; padding-top:4px; }
.timeline-body__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.timeline-body strong{ font-size:.92rem; font-weight:600; }
.timeline-tag{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:2px; }

/* ---------- profile ---------- */
.profile-card{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:6px 0 4px; }
.profile-card .avatar{ width:76px; height:76px; font-size:1.6rem; margin-bottom:6px; }
.profile-card strong{ font-family:var(--font-display); font-size:1.2rem; }
.profile-card span{ font-size:.85rem; color:var(--ink-soft); }

.invite-card{
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:var(--radius-m); padding:16px; display:flex; flex-direction:column; gap:12px;
}
.invite-card__partner{ display:flex; align-items:center; gap:10px; }
.invite-card__partner div:last-child strong{ display:block; font-size:.88rem; }
.invite-card__partner div:last-child span{ font-size:.76rem; color:var(--ink-soft); }
.invite-code{ display:flex; align-items:center; justify-content:space-between; background:var(--well-bg); border:1px solid var(--well-border); border-radius:var(--radius-s); padding:10px 12px; }
.invite-code code{ font-family:var(--font-body); font-weight:700; letter-spacing:.04em; font-size:.9rem; }
.invite-code button{ border:0; background:none; color:var(--teal-600); display:flex; align-items:center; gap:5px; font-weight:700; font-size:.78rem; cursor:pointer; }
.invite-code button svg{ width:15px; height:15px; }

.settings-list{
  display:flex; flex-direction:column;
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:var(--radius-m); overflow:hidden;
}
.settings-row{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid var(--border); }
.settings-row:last-child{ border-bottom:0; }
.settings-row svg{ width:18px; height:18px; color:var(--ink-soft); flex:none; }
.settings-row__label{ flex:1; font-size:.88rem; font-weight:600; }
.settings-row.is-danger .settings-row__label{ color:var(--coral); }
.settings-row.is-danger svg{ color:var(--coral); }
button.settings-row{ width:100%; border:0; background:none; cursor:pointer; color:var(--ink); text-align:left; }

.segmented{ display:flex; background:var(--track-bg); border-radius:999px; padding:3px; gap:2px; }
.segmented button{ border:0; background:none; padding:5px 10px; border-radius:999px; font-size:.72rem; font-weight:700; color:var(--ink-faint); cursor:pointer; }
.segmented button.is-active{ background:var(--track-active-bg); color:var(--ink); box-shadow:0 2px 6px -2px var(--shadow); }

.switch{ position:relative; width:40px; height:24px; flex:none; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.switch__track{ position:absolute; inset:0; background:var(--border); border-radius:999px; transition:background .15s; }
.switch__thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink); box-shadow:0 1px 3px var(--shadow); transition:transform .15s; }
.switch input:checked + .switch__track{ background:var(--teal); }
.switch input:checked ~ .switch__thumb{ transform:translateX(16px); }

/* ---------- bottom nav ---------- */
.bottom-nav{
  display:flex;
  height:var(--nav-h);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border-top:1px solid var(--glass-border);
  position:absolute; left:0; right:0; bottom:0; z-index:6;
}
.bottom-nav[hidden]{ display:none; }
.nav-btn{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:0; background:none; color:var(--ink-faint); cursor:pointer; padding:6px 1px;
}
.nav-btn__bubble{
  width:32px; height:21px; border-radius:10px; display:grid; place-items:center;
  transition:background-color .15s;
}
.nav-btn svg{ width:16px; height:16px; }
.nav-btn > span:last-child{
  font-size:.52rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.nav-btn.is-active{ color:var(--coral); }
.nav-btn.is-active .nav-btn__bubble{ background:var(--coral-100); }

/* ---------- toast ---------- */
.toast{
  position:absolute; left:50%; bottom:calc(var(--nav-h) + 16px); transform:translate(-50%, 8px);
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:999px;
  font-size:.8rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  z-index:30; white-space:nowrap;
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* ---------- modal: atalho para o ecrã principal ---------- */
.modal-overlay{
  position:absolute; inset:0; z-index:40;
  background:rgba(0,0,0,.55);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
@media (min-width:640px){ .modal-overlay{ align-items:center; } }
.modal-overlay[hidden]{ display:none; }
.modal-card{
  position:relative; width:100%; max-width:360px;
  background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-border); border-radius:var(--radius-l);
  padding:28px 22px 22px; text-align:center;
  box-shadow:0 30px 60px -20px var(--shadow);
  animation:modal-in .22s ease-out;
}
@keyframes modal-in{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.modal-card .logo-mark--lg{ margin-bottom:12px; }
.modal-card h3{ font-size:1.25rem; font-weight:600; margin-bottom:8px; }
.modal-card__intro{ color:var(--ink-soft); font-size:.85rem; line-height:1.45; margin-bottom:18px; }
.modal-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  border:0; background:rgba(255,255,255,.06); color:var(--ink-soft); display:grid; place-items:center; cursor:pointer;
}
.modal-close svg{ width:15px; height:15px; }

.shortcut-steps{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; text-align:left; }
.shortcut-steps li{ display:flex; align-items:center; gap:12px; }
.shortcut-steps__icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--coral); display:grid; place-items:center;
}
.shortcut-steps__icon svg{ width:18px; height:18px; }
.shortcut-steps li span:last-child{ font-size:.88rem; color:var(--ink); line-height:1.35; }
.shortcut-steps li span:last-child strong{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}