/* CENTRAL 5.1 — RITMO VIVO
   Direção editorial do mockup, folhas com movimento físico e desktop fluido. */

:root{
  --v51-paper:#f5f0e6;
  --v51-paper-hi:#fcf9f2;
  --v51-paper-low:#e8dfd0;
  --v51-ink:#292b1f;
  --v51-moss:#444b26;
  --v51-olive:#697044;
  --v51-line:rgba(105,94,72,.22);
  --v51-shadow:0 26px 70px rgba(49,43,31,.12),0 3px 10px rgba(49,43,31,.06);
}

html,body{background:#e9e1d4!important}
body{
  background:
    radial-gradient(circle at 15% 8%,rgba(255,255,255,.78),transparent 31%),
    radial-gradient(circle at 91% 88%,rgba(90,91,56,.10),transparent 34%),
    #e9e1d4!important;
}
.app-shell{
  background:
    radial-gradient(circle at 48% 2%,rgba(255,255,255,.76),transparent 30%),
    linear-gradient(156deg,#faf7f0 0%,#f2ecdf 57%,#eae1d3 100%)!important;
}
.app-shell::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.25;
  background:
    repeating-linear-gradient(8deg,rgba(68,60,43,.035) 0 1px,transparent 1px 7px),
    radial-gradient(circle,rgba(71,64,47,.16) 0 .42px,transparent .66px);
  background-size:auto,8px 9px;
}

/* Marca e ações de canto, como no mockup. */
.topbar{
  background:rgba(248,244,235,.58)!important;border-bottom:0!important;
  box-shadow:0 1px rgba(115,103,81,.11);backdrop-filter:blur(20px) saturate(.8)!important;
}
.feed-topbar .brand strong{font-size:1.48rem!important;color:#333621!important}
.feed-topbar .brand-dots{width:40px!important;height:13px!important}
.corner-control{
  background:rgba(250,247,239,.78)!important;border-color:rgba(102,94,72,.24)!important;
  box-shadow:0 9px 25px rgba(61,54,40,.08)!important;
}
.corner-control:hover{background:#f8f4ea!important;transform:translateY(-1px)}
.corner-control:focus-visible,.habit-leaf:focus-visible{outline:2px solid #737b4d;outline-offset:3px}

/* Feed — painel de foco central, botânico e tátil. */
.feed-view{isolation:isolate}
.feed-focus{overflow:hidden!important}
.feed-scroller{z-index:4!important}
.feed-slide{isolation:isolate}
.feed-card,.feed-empty{
  position:relative!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.38),rgba(238,230,214,.14)),
    url("icons/botanical-branch.png") right -38px bottom -126px/230px auto no-repeat,
    linear-gradient(150deg,#fbf8f0 0%,#f1eadc 100%)!important;
  border:1px solid rgba(125,114,91,.26)!important;
  border-radius:30px!important;
  box-shadow:var(--v51-shadow)!important;
  overflow:hidden!important;
}
.feed-card::after,.feed-empty::after{
  inset:11px!important;border:1px solid rgba(112,102,80,.10)!important;border-radius:22px!important;
}
.focus-card::before{display:none!important}
.feed-card-main{align-items:center!important;justify-content:center!important;text-align:center!important;padding-inline:12px!important}
.feed-eyebrow{
  color:#74784d!important;letter-spacing:.20em!important;font-size:.58rem!important;
  margin-bottom:18px!important;
}
.feed-title{
  color:var(--v51-ink)!important;text-align:center!important;text-wrap:balance;
  max-width:650px!important;font-size:clamp(2.65rem,9vw,4.2rem)!important;line-height:.98!important;
}
.feed-guidance{
  margin:20px 0 0;color:#726f63;font:400 .78rem/1.45 Inter,sans-serif;
  letter-spacing:.01em;text-align:center;
}
.context-help{margin-top:15px!important}
.focus-priority-rail{
  top:28px!important;padding:0!important;gap:7px!important;background:transparent!important;
}
.focus-priority-rail::before,.focus-priority-rail::after{display:none!important}
.focus-priority-rail>.priority-level{
  width:9px!important;height:9px!important;border:0!important;font-size:0!important;
  background:#a4a585!important;box-shadow:inset 0 0 0 1px rgba(67,70,38,.12)!important;
}
.focus-priority-rail>.priority-level.active{background:#555d32!important;transform:scale(1.12)}
.focus-card-bottom{
  position:relative;border:1px solid rgba(122,111,89,.18)!important;border-radius:999px;
  background:rgba(238,231,218,.80);padding:7px!important;backdrop-filter:blur(9px);
}
.focus-task-meta{display:none!important}
.focus-card-bottom .feed-actions{position:relative;width:100%!important;grid-template-columns:1fr 1fr;gap:54px!important;margin:0!important}
.focus-card-bottom .feed-actions::before{
  content:"•••";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:46px;height:44px;display:grid;place-items:center;border-radius:15px;background:#faf7ef;
  color:#aba597;font:600 .55rem/1 Inter,sans-serif;letter-spacing:.12em;box-shadow:0 4px 10px rgba(58,51,38,.06);
}
.focus-card-bottom .feed-actions button{height:44px!important;border:0!important;background:transparent!important;border-radius:999px!important}
.focus-card-bottom .feed-actions .done-button{background:#4d542e!important;color:#fbf8f0!important}
.feed-actions.one-action::before{display:none}
.feed-actions.one-action{grid-template-columns:1fr!important;gap:0!important}
.feed-brief .feed-card-main{align-items:flex-start!important;text-align:left!important}
.feed-brief .feed-title{text-align:left!important}
.feed-empty>div{text-align:center;position:relative;z-index:2}
.feed-empty h2{font-size:clamp(2.2rem,7vw,3.5rem)!important;color:var(--v51-ink)}
.feed-gesture{text-transform:uppercase;letter-spacing:.17em!important;color:#8b8578!important}

/* Folhas — a transformação vem do motor JS. Só o nome aparece. */
.habit-field{
  inset:0 0 32px!important;overflow:hidden!important;z-index:16!important;pointer-events:none;
  contain:layout style;transition:opacity .3s ease,transform .3s ease!important;
}
.habit-leaf{
  left:0!important;top:0!important;z-index:18!important;pointer-events:auto!important;
  width:clamp(84px,23vw,112px)!important;min-height:58px!important;
  padding:12px 16px 12px 22px!important;animation:none!important;transition:filter .18s ease,opacity .18s ease!important;
  touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;
  cursor:grab!important;will-change:transform;transform-origin:9% 58%!important;
  border-color:rgba(70,74,42,.26)!important;filter:drop-shadow(0 9px 7px rgba(58,52,39,.14))!important;
}
.habit-leaf.held,.habit-leaf.dragging{cursor:grabbing!important;filter:drop-shadow(0 17px 13px rgba(58,52,39,.22))!important;z-index:40!important}
.habit-leaf strong{
  position:relative;z-index:2;max-width:78px!important;font:600 .94rem/1 Caveat,cursive!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.habit-leaf small{display:none!important}
.habit-leaf-vein{left:8px!important;width:76%!important;background:rgba(64,70,37,.24)!important}
.habit-leaf[data-tone="0"]{background:linear-gradient(145deg,#dadbbd,#aeb687)!important}
.habit-leaf[data-tone="1"]{background:linear-gradient(145deg,#e7e0c9,#c2bc9c)!important}
.habit-leaf[data-tone="2"]{background:linear-gradient(145deg,#cdd4b7,#9eaa7d)!important}
.habit-leaf[data-tone="3"]{background:linear-gradient(145deg,#e5d4c5,#c5ae97)!important}
.habit-leaf[data-tone="4"]{background:linear-gradient(145deg,#d5dcd3,#aab9ab)!important}

/* Visão geral — cartões de papel em uma grade editorial. */
.feed-overview{
  background:
    radial-gradient(circle at 90% 10%,rgba(99,103,61,.08),transparent 28%),
    rgba(245,240,230,.97)!important;
}
.overview-header{border-bottom:1px solid var(--v51-line);margin-bottom:14px}
.overview-header h1{font-size:clamp(2.35rem,5vw,3.4rem)!important}
.overview-grid{align-content:start}
.grid-task{
  background:linear-gradient(145deg,#faf6ed,#eee5d7)!important;border-color:rgba(124,113,90,.22)!important;
  box-shadow:0 10px 24px rgba(60,52,39,.07)!important;border-radius:4px!important;
}
.grid-task:nth-child(4n+2){background:linear-gradient(145deg,#e9ead7,#d8dabd)!important}
.grid-task:nth-child(4n+3){background:linear-gradient(145deg,#f0ddd3,#e5cec0)!important}

/* Livre — mesa ampla com papel, sem perder o arraste atual. */
.free-view.active{gap:16px!important}
.section-hero{padding-inline:4px!important}
.section-hero h1,.section-header h1,.finance-header h1{color:#303224!important}
.section-kicker{color:#74794c!important}
.free-board{
  background:
    linear-gradient(rgba(250,247,239,.88),rgba(234,224,209,.82)),
    url("icons/botanical-branch.png") right -130px bottom -270px/420px auto no-repeat,
    radial-gradient(circle,rgba(97,88,66,.24) 0 .65px,transparent .9px)!important;
  background-size:auto,420px auto,22px 22px!important;
  border:1px solid rgba(115,104,82,.24)!important;box-shadow:inset 0 0 55px rgba(67,58,43,.045)!important;
}
.free-note{border-radius:3px!important;box-shadow:0 12px 18px rgba(54,47,35,.14)!important}
.free-note p{font-size:clamp(1.05rem,2.8vw,1.5rem)!important}

/* Agenda — mantém toda a lógica da 4.1 e assume uma leitura de linha do tempo. */
.agenda-view,.finance-view{position:relative}
.section-header{
  padding:4px 4px 22px!important;margin-bottom:0!important;border-bottom:1px solid var(--v51-line)!important;
}
.agenda-list{gap:0!important;position:relative;padding-top:10px}
.appointment-card{
  border:0!important;border-bottom:1px solid rgba(118,107,85,.18)!important;border-radius:0!important;
  background:rgba(250,247,239,.46)!important;box-shadow:none!important;min-height:112px!important;
}
.appointment-card:hover{background:rgba(250,247,239,.82)!important}
.appointment-card::before{background:#737b4f!important;box-shadow:0 0 0 5px #f2ece1!important}
.appointment-time{font-variant-numeric:tabular-nums;color:#4f5730!important}
.appointment-main strong{font-size:1.15rem!important}
.reminder-chip{background:transparent!important;padding-left:0!important;color:#777365!important}
.agenda-complete-link{border-radius:999px!important;margin-top:20px!important}

/* Finanças — painel botânico semelhante ao cartão do mockup. */
.balance-card{
  min-height:180px;display:flex;flex-direction:column;justify-content:center;
  background:
    linear-gradient(110deg,rgba(245,245,225,.96) 0 55%,rgba(216,220,184,.76)),
    url("icons/botanical-branch.png") right -54px bottom -194px/290px auto no-repeat!important;
  border-color:rgba(106,113,66,.25)!important;border-radius:24px!important;
}
.balance-card>span{letter-spacing:.14em!important}.balance-card strong{font-size:clamp(2.65rem,5vw,4rem)!important}
.finance-summary article,.finance-row{background:rgba(251,248,241,.66)!important}
.finance-summary article{border-radius:18px!important}
.finance-row{border-radius:4px!important}

/* Captura e modais acompanham a mesma materialidade. */
.modal .sheet{
  background:
    radial-gradient(circle at 92% 8%,rgba(112,117,69,.08),transparent 24%),
    #f9f5ec!important;
  border-color:rgba(116,105,83,.23)!important;box-shadow:0 28px 80px rgba(45,39,29,.19)!important;
}
.capture-field textarea,.field input,.field textarea,.field select{
  background:rgba(252,249,242,.84)!important;border-color:rgba(126,114,91,.23)!important;
}
.capture-route,.route-picker{background:#eee9dc!important}
.bottom-nav{box-shadow:0 -8px 25px rgba(58,50,37,.035)}

/* Telefones e tablets estreitos. */
@media(max-width:899px){
  .feed-card,.feed-empty{
    width:calc(100% - 30px)!important;min-height:min(570px,calc(100dvh - 190px))!important;
    padding:62px 30px 24px!important;background-size:auto,210px auto,auto!important;
  }
  .feed-title{font-size:clamp(2.5rem,11vw,3.7rem)!important}
  .feed-guidance{font-size:.73rem}
  .habit-field{inset:0 0 30px!important}
  .habit-leaf{width:84px!important;min-height:50px!important;padding:9px 12px 9px 17px!important}
  .habit-leaf strong{font-size:.82rem!important;max-width:62px!important}
  .focus-card-bottom .feed-actions{gap:48px!important}
  .focus-card-bottom .feed-actions button{font-size:.67rem!important}
  .section-header h1,.finance-header h1{font-size:2.55rem!important}
}

@media(max-width:380px){
  .feed-card,.feed-empty{width:calc(100% - 18px)!important;padding-inline:24px!important}
  .focus-card-bottom .feed-actions{gap:44px!important}
  .habit-leaf{width:76px!important;min-height:47px!important}
  .habit-leaf strong{font-size:.76rem!important;max-width:56px!important}
}

/* Desktop de verdade: navegação compacta e palco amplo. */
@media(min-width:900px){
  body{padding:0!important}
  .app-shell,.app-shell.no-topbar{
    width:100vw!important;max-width:none!important;height:100dvh!important;min-height:100dvh!important;
    display:grid!important;grid-template-columns:118px minmax(0,1fr)!important;grid-template-rows:92px minmax(0,1fr)!important;
    border:0!important;border-radius:0!important;margin:0!important;
  }
  .topbar,.app-shell.no-topbar .topbar{
    grid-column:2!important;grid-row:1!important;height:92px!important;padding:20px clamp(28px,3vw,52px) 14px!important;
  }
  .bottom-nav,.bottom-nav.four{
    grid-column:1!important;grid-row:1/3!important;position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:118px!important;height:100%!important;padding:118px 11px 24px!important;gap:8px!important;
    border:0!important;border-right:1px solid rgba(119,107,84,.17)!important;background:rgba(239,233,222,.82)!important;
  }
  .bottom-nav::before{
    content:"•••";position:absolute;top:40px;left:0;right:0;text-align:center;
    color:#50572f;font:700 .72rem/1 Inter,sans-serif;letter-spacing:.23em;
  }
  .bottom-nav .nav-item,.bottom-nav.four .nav-item{
    min-height:66px!important;width:100%!important;display:grid!important;place-items:center!important;align-content:center!important;
    gap:6px!important;padding:7px 4px!important;border-radius:18px!important;
  }
  .bottom-nav .nav-item svg,.bottom-nav.four .nav-item svg{width:23px!important;height:23px!important}
  .bottom-nav .nav-item small,.bottom-nav.four .nav-item small{font-size:.62rem!important}
  .bottom-nav .nav-item.active{background:#dedfc4!important;color:#444c27!important;box-shadow:inset 0 0 0 1px rgba(91,98,52,.08)}
  .main-stage,.app-shell.no-topbar .main-stage{
    grid-column:2!important;grid-row:2!important;height:auto!important;min-height:0!important;
    padding:18px clamp(24px,3.4vw,62px) 28px!important;overflow:hidden!important;
  }
  .app-shell.no-topbar .main-stage{grid-row:1/3!important;padding-top:38px!important}
  .capture-button{right:34px!important;bottom:30px!important;width:54px!important;height:54px!important}

  .feed-view{width:100%!important;max-width:1540px!important;margin:0 auto!important;padding:0!important}
  .feed-focus,.feed-overview{inset:0!important}
  .feed-focus{grid-template-rows:minmax(0,1fr) 30px!important}
  .feed-scroller{height:100%!important;padding:12px 0 8px!important}
  .feed-slide{padding:14px 18px 22px!important}
  .feed-card,.feed-empty{
    width:min(660px,52vw)!important;min-height:min(650px,calc(100dvh - 166px))!important;
    padding:72px clamp(42px,4vw,64px) 34px!important;background-size:auto,280px auto,auto!important;
  }
  .feed-title{font-size:clamp(3.65rem,5vw,5.15rem)!important}
  .feed-guidance{font-size:.82rem}
  .habit-field{inset:0 0 30px!important;overflow:hidden!important}
  .habit-leaf{width:122px!important;min-height:68px!important;padding:13px 18px 13px 24px!important}
  .habit-leaf strong{font-size:1.06rem!important;max-width:90px!important}
  .feed-overview{padding:8px 4px 76px!important}
  .overview-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:14px!important}

  .free-view.active{max-width:1480px!important;margin:0 auto!important;padding:0!important}
  .section-hero h1{font-size:3.25rem!important}
  .free-board{border-radius:30px!important;background-size:auto,520px auto,24px 24px!important}
  .free-note{width:clamp(142px,11vw,170px)!important;min-height:clamp(132px,10vw,158px)!important}

  .agenda-view{
    width:min(1080px,100%)!important;max-width:1080px!important;margin:0 auto!important;padding:0 0 34px!important;
  }
  .section-header h1,.finance-header h1{font-size:3.35rem!important}
  .agenda-list{grid-template-columns:1fr!important;max-width:900px;margin:0 auto!important}
  .appointment-card{grid-template-columns:112px minmax(0,1fr)!important;min-height:120px!important}
  .appointment-card::before{left:108px!important}
  .appointment-time{font-size:1.02rem!important}
  .agenda-complete-link{max-width:900px!important}

  .finance-view.active{max-width:1320px!important;margin:0 auto!important;padding:0 0 30px!important}
  .balance-card{min-height:240px!important;padding:34px!important;background-size:auto,360px auto!important}
  .modal .sheet{border-radius:28px!important}
}

@media(min-width:900px) and (max-width:1119px){
  .app-shell,.app-shell.no-topbar{grid-template-columns:98px minmax(0,1fr)!important}
  .bottom-nav,.bottom-nav.four{width:98px!important;padding-inline:8px!important}
  .main-stage,.app-shell.no-topbar .main-stage{padding-inline:24px!important}
  .feed-card,.feed-empty{width:min(620px,58vw)!important}
  .habit-leaf{width:108px!important;min-height:62px!important}
}

@media(min-width:1500px){
  .app-shell,.app-shell.no-topbar{grid-template-columns:132px minmax(0,1fr)!important}
  .bottom-nav,.bottom-nav.four{width:132px!important;padding-inline:15px!important}
  .feed-card,.feed-empty{width:min(690px,45vw)!important}
  .overview-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
}

@media(prefers-reduced-motion:reduce){
  .habit-leaf{transition:none!important}
  .corner-control,.feed-view.overview-open .habit-field{transition:none!important}
}

@media(prefers-color-scheme:dark){
  html,body,.app-shell{background:#e9e1d4!important;color:var(--v51-ink)!important}
}