/* Layout: one phone-width column, cards stacked, fixed bottom tab bar. Dark-first ("azulejo à noite"), light mirror. */
:root{
  --bg:#0D121C; --surface:#151C29; --surface-2:#1D2636; --line:#283346;
  --fg:#EDF1F7; --muted:#93A0B5; --meal:#FF8B4D; --move:#45D3B8;
  --on-meal:#1C0E05; --on-move:#04201A; --ok:#5DD39E; --warn:#F2C14E; --bad:#FF6B6B;
  --fig:#EDF1F7; --fig-far:#5D6A80; --shadow:0 10px 30px rgba(0,0,0,.35);
  --display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#EBEFF5; --line:#D9DFE9;
  --fg:#121826; --muted:#5A6577; --meal:#DD5A17; --move:#0B957D;
  --on-meal:#FFFFFF; --on-move:#FFFFFF; --ok:#16935C; --warn:#A87A06; --bad:#CF3E3E;
  --fig:#1A2232; --fig-far:#A3AEC0; --shadow:0 8px 24px rgba(20,30,50,.10); color-scheme:light;}}
:root[data-theme="light"]{
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#EBEFF5; --line:#D9DFE9;
  --fg:#121826; --muted:#5A6577; --meal:#DD5A17; --move:#0B957D;
  --on-meal:#FFFFFF; --on-move:#FFFFFF; --ok:#16935C; --warn:#A87A06; --bad:#CF3E3E;
  --fig:#1A2232; --fig-far:#A3AEC0; --shadow:0 8px 24px rgba(20,30,50,.10); color-scheme:light;}

*{box-sizing:border-box}
html,body{background:var(--bg);overflow-x:clip;max-width:100%}
body{color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--move);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:30px;font-weight:750}
h2{font-size:21px;font-weight:700}
h3{font-size:16.5px;font-weight:650}
p{margin:0}
.num{font-family:var(--display);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}

.app{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;min-height:100%}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card.flat{background:var(--surface-2);border-color:transparent}
.card.meal{border-color:color-mix(in oklab,var(--meal) 35%,var(--line))}
.card.move{border-color:color-mix(in oklab,var(--move) 40%,var(--line))}

.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;transition:transform .12s ease,filter .12s ease}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default}
.btn.meal{background:var(--meal);color:var(--on-meal)}
.btn.move{background:var(--move);color:var(--on-move)}
.btn.ghost{background:var(--surface-2);color:var(--fg)}
.btn.line{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn.danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.btn.block{width:100%}
.btn.sm{min-height:36px;padding:7px 12px;font-size:13.5px;border-radius:11px}
.link{background:none;border:0;padding:0;color:var(--move);font-weight:600;text-decoration:underline;text-underline-offset:3px}
a{color:var(--move)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:550}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:650;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.meal{background:color-mix(in oklab,var(--meal) 18%,transparent);color:var(--meal)}
.badge.move{background:color-mix(in oklab,var(--move) 18%,transparent);color:var(--move)}
.badge.ok{background:color-mix(in oklab,var(--ok) 18%,transparent);color:var(--ok)}
.badge.warn{background:color-mix(in oklab,var(--warn) 20%,transparent);color:var(--warn)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.input,select.input,textarea.input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;min-height:46px}
textarea.input{min-height:72px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:380px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}

.seg{display:flex;background:var(--surface-2);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;border-radius:10px;padding:9px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}

.daystrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.day{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:7px 0;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;color:var(--muted)}
.day b{font-family:var(--display);font-size:17px;color:var(--fg)}
.day[aria-pressed="true"]{background:var(--fg);border-color:var(--fg)}
.day[aria-pressed="true"],.day[aria-pressed="true"] b{color:var(--bg)}
.day .dot{width:5px;height:5px;border-radius:50%;background:transparent}
.day .dot.on{background:var(--move)}

.mealrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.mealrow:first-child{border-top:0;padding-top:2px}
.mealrow .open{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mealrow .title{font-weight:650;line-height:1.3}
.check{width:34px;height:34px;flex:none;border-radius:50%;border:2px solid var(--line);background:transparent;display:grid;place-items:center}
.check svg{opacity:0}
.check[aria-pressed="true"]{background:var(--meal);border-color:var(--meal);color:var(--on-meal)}
.check.move[aria-pressed="true"]{background:var(--move);border-color:var(--move);color:var(--on-move)}
.check[aria-pressed="true"] svg{opacity:1}

.macros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.macro{background:var(--surface-2);border-radius:12px;padding:8px 10px}
.macro .v{font-family:var(--display);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.macro .l{font-size:11.5px;color:var(--muted)}
.bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--meal);border-radius:6px}

.exrow{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.exrow:first-child{border-top:0}
.thumb{width:56px;height:44px;flex:none;border-radius:10px;background:var(--surface-2)}
.thumb svg{width:100%;height:100%}

.hero{display:flex;gap:16px;align-items:center}
.ring{width:108px;height:108px;flex:none}

.shoprow{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.shoprow:first-child{border-top:0}
.shoprow.done .nm{text-decoration:line-through;color:var(--muted)}
.store{border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:2px;background:var(--surface);text-align:left}
.store[aria-pressed="true"]{border-color:var(--move);box-shadow:inset 0 0 0 1px var(--move)}
.store .t{font-family:var(--display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:600;background:var(--surface-2)}
td input{width:76px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-variant-numeric:tabular-nums}

.nav{position:fixed;left:0;right:0;bottom:0;width:100%;z-index:20;transform:translateZ(0);background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px max(10px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
.nav .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:11.5px;font-weight:600;color:var(--muted)}
.nav button[aria-current="page"]{color:var(--fg)}
.nav button[aria-current="page"] svg{color:var(--meal)}

.modal{position:fixed;inset:0;z-index:40;background:rgba(5,8,14,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);width:100%;max-width:600px;max-height:92%;overflow:auto;border-radius:24px 24px 0 0;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-bottom:0}
.sheet.full{max-height:100%;height:100%;border-radius:0;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.x{width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-2);display:grid;place-items:center;flex:none}

.player-fig{background:var(--surface);border:1px solid var(--line);border-radius:22px;aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;overflow:hidden}
.player-fig svg{width:100%;height:100%}
.figpair{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;height:100%}
.timer{font-family:var(--display);font-size:56px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1}
.dots{display:flex;gap:6px}
.dots i{width:22px;height:6px;border-radius:4px;background:var(--line)}
.dots i.on{background:var(--move)}
ol.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
ol.steps li::marker{font-family:var(--display);font-weight:700;color:var(--meal)}
ul.plain{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.center{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:16px}
.brand{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.03em;line-height:1}
.brand span{color:var(--meal)}
.steps-progress{display:flex;gap:6px}
.steps-progress i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.steps-progress i.on{background:var(--meal)}
.notice{border-radius:14px;padding:12px 14px;background:color-mix(in oklab,var(--warn) 14%,var(--surface));border:1px solid color-mix(in oklab,var(--warn) 40%,var(--line));font-size:14px}
.genlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.genlist li{display:flex;align-items:center;gap:10px;color:var(--muted)}
.genlist li.on{color:var(--fg);font-weight:600}
.genlist li.done{color:var(--fg)}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--meal);animation:spin 0.9s linear infinite;flex:none}
.tick{width:18px;height:18px;border-radius:50%;background:var(--ok);flex:none}
.idle{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:absolute;top:40%;left:50%;width:8px;height:14px;border-radius:2px;animation:burst 1.2s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition:none!important}.confetti{display:none}}

/* Nada pode alargar a página: campos de data/hora e cartões encolhem dentro da grelha */
.input,select.input{min-width:0;max-width:100%}
input[type="time"].input,input[type="date"].input{-webkit-appearance:none;appearance:none;width:100%;min-width:0;display:block}
.field,.grid2>*,.grid3>*,.macro,.store,.card{min-width:0}
.store,.macro,.card p,.card h2,.card h3{overflow-wrap:anywhere}
.chip{max-width:100%}