/*
  Estilos só da tela inicial (index.html): login, atalhos, ferramentas, conta.
  Tokens, base, topo, botões e cartões vêm de css/core.css (carregue antes deste).
*/
.boot{text-align:center;margin-top:30vh;color:var(--mut)}

/* estrutura */
main{max-width:760px;margin:0 auto;padding:1.2rem 1rem calc(5.5rem + env(safe-area-inset-bottom))}
.nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom);z-index:5}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem 0 .5rem;text-decoration:none;color:var(--mut);font-size:.72rem;font-weight:600;border-top:2px solid transparent;margin-top:-1px}
.nav a.on{color:var(--brand);border-top-color:var(--brand)}
@media (prefers-color-scheme: dark){ .nav a.on{color:var(--accent);border-top-color:var(--accent)} }

/* cartões e atalhos */
.hello{margin:.2rem 0 1.1rem}
.hello h1{font-size:1.6rem}
.hello p{color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.75rem}
.tool{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s}
.tool:hover{border-color:var(--bd-strong);box-shadow:0 2px 8px rgba(16,33,24,.07)}
.tool:active{background:var(--tint)}
.tool .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--tint);color:var(--tint-tx);margin-bottom:.55rem}
.tool b{font-size:.98rem;font-weight:650}
.tool small{color:var(--mut);font-size:.82rem;line-height:1.4}
.sec-title{margin:1.6rem 0 .6rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);font-weight:700}

/* formulários */
.f{display:block;margin:.7rem 0}
.f>span{display:block;font-size:.82rem;font-weight:600;margin-bottom:.3rem;color:var(--tx)}
.inp{display:flex;align-items:center;border:1px solid var(--bd-strong);border-radius:9px;background:var(--card);overflow:hidden;transition:border-color .12s,box-shadow .12s}
.inp:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.inp input,.inp select{flex:1;min-width:0;border:0;background:transparent;color:var(--tx);padding:.72rem .8rem;font:inherit;outline:none}
.inp em{font-style:normal;color:var(--mut);padding-right:.8rem;font-size:.82rem;white-space:nowrap}
select{appearance:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.msg{border-radius:9px;padding:.65rem .85rem;margin:.7rem 0;font-size:.9rem;border:1px solid transparent}
.msg.err{background:var(--errbg);color:var(--err);border-color:color-mix(in srgb,var(--err) 25%,transparent)}
.msg.info{background:var(--tint);color:var(--tint-tx)}

/* resultados */
.res{background:var(--card);border:1px solid var(--bd);border-left:3px solid var(--brand);border-radius:var(--r);padding:.95rem 1.05rem;margin:.8rem 0;box-shadow:var(--shadow)}
.res .big{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;color:var(--brand);font-variant-numeric:tabular-nums;margin-bottom:.3rem}
@media (prefers-color-scheme: dark){ .res .big{color:var(--accent)} }
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--bd);font-size:.92rem}
.kv:last-child{border-bottom:0}
.kv span{color:var(--mut)}
.kv b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.warn{background:var(--warnbg);color:var(--warn);border:1px solid var(--warnbd);border-left-width:3px;border-radius:9px;padding:.65rem .85rem;font-size:.86rem;margin:.7rem 0}

/* abas */
.tabs{display:flex;gap:.2rem;margin:.6rem 0 .9rem;overflow-x:auto;border-bottom:1px solid var(--bd)}
.tabs button{flex:1;white-space:nowrap;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--mut);padding:.65rem .9rem;font-weight:600;font-size:.88rem}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
@media (prefers-color-scheme: dark){ .tabs button.on{color:var(--accent);border-bottom-color:var(--accent)} }

/* tabelas e ingredientes */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.5rem .35rem;border-bottom:1px solid var(--bd);vertical-align:top;font-variant-numeric:tabular-nums}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700}
.ing{border:1px solid var(--bd);border-radius:10px;padding:.75rem;margin:.6rem 0;background:var(--bg)}
.ing header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.ing .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.ing .grid4 label span{display:block;font-size:.68rem;color:var(--mut);margin-bottom:.15rem}
.ing .grid4 input{width:100%;padding:.45rem;border:1px solid var(--bd-strong);border-radius:7px;background:var(--card);color:var(--tx);font:inherit}
.ing .qty input{width:100%;padding:.6rem;border:1px solid var(--brand);border-radius:8px;background:var(--card);color:var(--tx);font:inherit;font-size:1.05rem}
.list-item{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.75rem 0;border-bottom:1px solid var(--bd)}
.list-item:last-child{border-bottom:0}
.list-item small{color:var(--mut);display:block}
.actions{display:flex;gap:.45rem}

/* login */
.auth{max-width:400px;margin:0 auto;padding:calc(2rem + env(safe-area-inset-top)) 1.2rem 2rem}
.auth .logo{display:flex;flex-direction:column;align-items:center;margin:1rem 0 1.6rem}
.auth .logo img{width:200px;max-width:70%;height:auto}
.auth .logo small{margin-top:.6rem;color:var(--mut);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:600}
.seg{display:flex;border-bottom:1px solid var(--bd);margin:-.2rem 0 .6rem}
.seg button{flex:1;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;padding:.7rem;font-weight:650;color:var(--mut)}
.seg button.on{color:var(--brand);border-bottom-color:var(--brand)}
@media (prefers-color-scheme: dark){ .seg button.on{color:var(--accent);border-bottom-color:var(--accent)} }

/* celular: atalhos compactos em linha */
@media (max-width:560px){
  .grid{grid-template-columns:1fr;gap:.6rem}
  .tool{display:grid;grid-template-columns:40px 1fr;column-gap:.85rem;align-items:center;padding:.85rem 1rem}
  .tool .ic{grid-row:span 2;margin-bottom:0}
}

/* seta nos campos de seleção */
.inp select{padding-right:2.2rem;background-repeat:no-repeat;background-position:right .8rem center;background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6c62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}