@font-face{font-family:Archivo;font-weight:800;font-display:swap;src:url(/fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

:root{
  --navy:#14213D;--blue:#0A5C8A;--blue-bg:#E6F1F8;--blue-bd:#B7D6EA;--bg:#F3F5F7;--card:#FFFFFF;
  --bd:#DDE2E8;--line:#EEF1F4;--muted:#5A6472;--orange:#B34A0E;--orange-bg:#FBEDE4;--orange-bd:#EBC3A8;
  --wine:#6B1F3A;--wine-bg:#F1E8EB;--wine-bd:#DDC9D0;--track:#E3E7EC;--sky:#9FD3F0;--fog:#C9D3E0;
  --ok:#1E6B45;--danger:#A3231B;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --display:Archivo,'Arial Narrow',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--navy);font-family:var(--sans);-webkit-text-size-adjust:100%}
body{min-height:100dvh}
a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.mono{font-family:var(--mono);font-weight:500}
.muted{color:var(--muted)}
.small{font-size:12px}.s13{font-size:13px}.s14{font-size:14px}.s15{font-size:15px}
.b{font-weight:600}
.blue{color:var(--blue)}.orange{color:var(--orange)}.wine{color:var(--wine)}.danger{color:var(--danger)}
.app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);position:relative}
.screen{flex:1;display:flex;flex-direction:column;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.screen.form{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.pad{padding:14px 16px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:8px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* cabeçalhos */
.hero{background:var(--navy);color:#fff;padding:calc(20px + env(safe-area-inset-top)) 20px 22px;display:flex;flex-direction:column;gap:6px}
.hero .top{display:flex;justify-content:space-between;font-size:13px;color:var(--fog)}
.hero .kicker{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--sky)}
.hero h1{margin:0;font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* cabe em uma linha: tamanho pelo número de letras (--n), entre 22 e 56 px */
  font-size:clamp(22px,calc((min(100vw,560px) - 44px) / (var(--n,8) * 0.7)),56px)}
.hero .sub{font-size:14px;color:var(--fog)}
.bar{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 8px 8px;background:var(--card);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--bd)}
.bar h1{margin:0;font-size:17px;font-weight:600;flex:1}
.bar .step{font-size:13px;color:var(--muted);padding-right:8px}
.citybar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--navy);color:#fff}
.citybar .city{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.02em}
.citybar .rest{font-size:13px;color:var(--fog);flex:1;min-width:0}
.citybar button{background:none;border:0;color:var(--sky);font-weight:600;font-size:13px;min-height:36px}
.pagehead{padding:calc(18px + env(safe-area-inset-top)) 16px 12px;background:var(--card);display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--bd)}
.pagehead h1{margin:0;font-size:24px;font-weight:600}

/* blocos */
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px}
.card.p{padding:12px 14px}
.list>*{border-bottom:1px solid var(--line)}
.list>*:last-child{border-bottom:0}
.item{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;color:inherit;text-decoration:none;background:none;border:0;width:100%;text-align:left}
.item .l{display:flex;flex-direction:column;gap:2px;min-width:0}
.item .r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.item .t{font-size:15px;font-weight:600}
.item .d{font-size:13px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px 16px 0}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px 10px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.stat span:first-child{font-size:12px;color:var(--muted)}
.stat .v{font-family:var(--mono);font-size:15px;font-weight:500;word-break:break-all}
.stat.blue{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)}
.stat.blue span:first-child{color:var(--blue)}
.stat.orange{background:var(--orange-bg);border-color:var(--orange-bd);color:var(--orange)}
.stat.orange span:first-child{color:var(--orange)}
.track{height:8px;border-radius:4px;background:var(--track);overflow:hidden;display:flex}
.track.t10{height:10px;border-radius:5px}
.track>div{height:100%}
.fill-blue{background:var(--blue)}.fill-wine{background:var(--wine)}.fill-over{background:var(--danger)}
h2.sec{margin:0;font-size:16px;font-weight:600}
.secrow{display:flex;justify-content:space-between;align-items:baseline}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--track);color:var(--navy)}
.tag.warn{background:var(--orange-bg);color:var(--orange)}
.tag.ok{background:#E3F2EA;color:var(--ok)}

/* botões */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:14px;background:var(--blue);color:#fff;font-size:16px;font-weight:600;text-decoration:none;border:0;width:100%;padding:0 16px}
.btn.big{min-height:60px;font-size:17px}
.btn.out{background:var(--card);color:var(--blue);border:2px solid var(--blue)}
.btn.ghost{background:none;color:var(--blue);min-height:44px;font-size:15px}
.btn.navy{background:var(--navy)}
.btn.danger{background:var(--card);color:var(--danger);border:2px solid var(--danger)}
.btn:disabled{opacity:.45}
.iconbtn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:0;background:none;color:var(--navy);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--bd);background:var(--card);font-weight:500;font-size:14px}
.chip[aria-pressed=true]{border-color:var(--navy);background:var(--navy);color:#fff;font-weight:600}
.chip.wine[aria-pressed=true]{background:var(--wine);border-color:var(--wine)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:12px;background:var(--track)}
.seg button{min-height:40px;border-radius:9px;border:0;background:transparent;font-weight:500;font-size:15px}
.seg button[aria-pressed=true]{background:var(--card);font-weight:600;box-shadow:0 1px 2px rgba(20,33,61,.12)}
.seg.wine{background:var(--wine-bg)}
.seg.wine button[aria-pressed=true]{background:var(--wine);color:#fff}
.opt{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px}
.opt button{min-height:44px;border-radius:10px;border:1px solid var(--bd);background:var(--card);font-weight:500;font-size:14px;padding:0 6px}
.opt button[aria-pressed=true]{border:2px solid var(--blue);background:var(--blue-bg);color:var(--blue);font-weight:600}
.opt.wine button[aria-pressed=true]{border-color:var(--wine);background:var(--wine-bg);color:var(--wine)}
.radio{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border-radius:10px;border:1px solid var(--bd);background:var(--card);font-size:15px}
.radio.on{border:2px solid var(--blue);background:var(--blue-bg);font-weight:600}
.radio input{width:18px;height:18px;margin:0;accent-color:var(--blue)}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{width:44px;height:44px;border-radius:22px;border:1px solid var(--bd);background:var(--card);font-size:20px;font-weight:600}
.stepper span{min-width:44px;text-align:center;font-family:var(--mono);font-size:22px}

/* campos */
label.f,.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.input{min-height:44px;border-radius:10px;border:1px solid var(--bd);background:var(--card);padding:0 12px;font-size:16px;color:var(--navy);width:100%}
textarea.input{padding:10px 12px;min-height:70px}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.line{border:0;border-bottom:1px solid var(--bd);background:transparent;padding:4px 0;min-height:34px;font-size:16px;font-weight:600;width:100%;color:var(--navy);border-radius:0}
.amount{flex:1;min-width:0;font:500 28px var(--mono);border:0;background:transparent;text-align:right;color:var(--navy);padding:0}
.curbtn{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--blue-bd);background:var(--blue-bg);color:var(--blue);font-weight:600;font-size:15px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-size:12px;color:var(--muted);padding:0;margin-bottom:8px}
legend.strong{font-size:13px;font-weight:600;color:var(--navy)}

/* rodapé de formulário e navegação */
.footer{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--card);border-top:1px solid var(--bd);padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.footer>div{max-width:528px;margin:0 auto;display:flex;gap:10px}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--card);border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs>div{max-width:560px;margin:0 auto;display:flex;justify-content:space-around;align-items:center;height:72px;padding:0 8px}
nav.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:60px;min-height:44px;font-size:12px;color:var(--muted);text-decoration:none}
nav.tabs a[aria-current=page]{color:var(--navy);font-weight:600}
nav.tabs a.plus{width:54px;height:54px;border-radius:27px;background:var(--navy);color:#fff;min-width:0}

/* resultado da divisão */
.result{border-radius:12px;background:var(--blue-bg);border:1px solid var(--blue-bd);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.result .ln{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.result .owe{font-size:15px;font-weight:600}
.result .sep{border-top:1px solid var(--blue-bd);margin-top:2px;padding-top:8px}
.errors{border-radius:12px;background:#FBEAEA;border:1px solid #E7BDBA;color:var(--danger);padding:10px 14px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.notice{border-radius:12px;background:var(--orange-bg);border:1px solid var(--orange-bd);color:var(--navy);padding:10px 14px;font-size:14px;display:flex;flex-direction:column;gap:8px}
.info{border-radius:12px;background:var(--blue-bg);border:1px solid var(--blue-bd);padding:10px 14px;font-size:14px;display:flex;flex-direction:column;gap:8px}

/* histórico */
.cityhead{display:flex;flex-direction:column;gap:2px;padding:14px 16px 6px}
.cityhead .c{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.01em;line-height:1.05}
.dayhead{display:flex;justify-content:space-between;padding:8px 16px 4px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.filters{display:flex;gap:6px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters .chip{flex-shrink:0;min-height:36px;font-size:13px}
.search{display:flex;align-items:center;gap:8px;margin:12px 16px 10px;padding:0 12px;min-height:44px;border-radius:10px;border:1px solid var(--bd);background:var(--card)}
.search input{border:0;flex:1;min-width:0;background:transparent;font-size:16px;min-height:42px}

/* modal / folha inferior */
.sheet-bg{position:fixed;inset:0;background:rgba(20,33,61,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:88dvh;overflow:auto;display:flex;flex-direction:column;gap:12px}
.sheet h2{margin:0;font-size:18px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));background:var(--navy);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:60;max-width:90vw}

.thumbs{display:flex;gap:8px;overflow-x:auto}
.thumb{width:56px;height:72px;border-radius:6px;border:1px solid var(--bd);object-fit:cover;background:#F4F1EA;flex-shrink:0}
.thumb.add{display:flex;align-items:center;justify-content:center;color:var(--blue);background:var(--card)}
.photo-full{width:100%;border-radius:12px;border:1px solid var(--bd)}
.syncpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fog)}
.dot{width:8px;height:8px;border-radius:4px;background:#7BC79B;display:inline-block}
.dot.off{background:#F0A35E}.dot.err{background:#E57373}.dot.busy{background:var(--sky)}
.avatar{width:40px;height:40px;border-radius:20px;background:var(--track);display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.legend{display:flex;gap:16px;padding:0 16px 8px;font-size:12px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:5px;background:var(--blue)}.sw.o{border-radius:2px;background:var(--orange)}
table.rep{width:100%;border-collapse:collapse;font-size:14px}
table.rep th{font-size:12px;color:var(--muted);font-weight:600;text-align:left;padding:6px 14px;border-bottom:1px solid var(--bd)}
table.rep td{padding:8px 14px;border-bottom:1px solid var(--line)}
table.rep td.n,table.rep th.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.login{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:32px 24px;background:var(--navy);color:#fff}
.login h1{font-family:var(--display);font-weight:800;font-size:56px;margin:0}
.hidden{display:none!important}
html,body{overflow-x:hidden}
.row>input,.row>select{min-width:0}
input[type=date],input[type=time]{min-width:0;-webkit-appearance:none;appearance:none}
.dt{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6px;margin-top:6px}
.stat .v{font-size:clamp(12px,3.5vw,15px);white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis}
.nowrap{white-space:nowrap}
.curbtn{min-width:108px}
.catbadge{border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.item.withbadge{align-items:center}
.catchip{flex-shrink:0;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--bd);background:var(--card);color:var(--navy);font-size:13px;font-weight:500}
.catchip .n{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.catchip .n b{font-weight:600}
.catchip .n span{font-family:var(--mono);font-size:11px;opacity:.85}
.catchip[aria-pressed=true]{color:#fff}
.catbar{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px}
.filterbanner{margin:0 16px 6px;padding:10px 12px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px}
.filterbanner button{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--sky);background:transparent;color:var(--sky);font-weight:600;font-size:13px}

/* divisão: "pago por" (quem paga a parte), valores ajustados, extras */
.partrow { border-bottom: 1px solid #EEF1F4; }
.partrow:last-child { border-bottom: 0; }
.partrow > .row { border-bottom: 0 !important; }
.resp { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 14px 10px; margin-top: -6px; font-size: 11px; color: var(--muted); }
.resppill { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--bd); background: #fff; color: var(--navy); font: 600 13px var(--sans); }
.resppill.me { background: #E6F1F8; border-color: #B7D6EA; color: var(--blue); }
.resppill.other { background: #FBEDE4; border-color: #EBC3A8; color: var(--orange); }
.resp .mono { font-size: 11px; }
.shareedit { width: 100px; min-height: 38px; text-align: right; border-style: dashed; background: transparent; }
.shareedit.adj { border: 2px solid var(--orange); background: var(--orange-bg); border-style: solid; font-weight: 600; }
.adjtag { border: 0; background: var(--orange-bg); color: var(--orange); border-radius: 999px; padding: 4px 10px; min-height: 28px; font: 600 12px var(--sans); }
.ratefield { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.extra { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: var(--bg); }
/* vales */
.valetag, .nftag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.valetag { background: #FFF4D6; border: 1px solid #E8CF8A; color: #7A5600; }
.nftag { background: #E5F2EA; border: 1px solid #B9D9C6; color: #1E6B45; letter-spacing: .04em; }
.valebox { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid #E8CF8A; background: #FFF9EA; }
.tabchip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bd); background: #fff; color: var(--navy); font: 500 14px var(--sans); }
.tabchip[aria-pressed="true"] { border: 2px solid #7A5600; background: #FFF4D6; color: #7A5600; font-weight: 600; }
.opt button.valebtn[aria-pressed="true"] { border: 2px solid #7A5600; background: #FFF4D6; color: #7A5600; font-weight: 700; }
.opt button:disabled { opacity: .4; }
.valegroup { padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.valegroup .gh { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.valegroup .gh .n { font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; }
/* budget */
.budgetcard { margin: 8px 16px 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.meter { display: flex; flex-direction: column; gap: 6px; }
.mbar { position: relative; height: 10px; border-radius: 5px; background: var(--track); }
.mfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--blue); }
.mfill.over { background: var(--orange); }
.movf { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 0 5px 5px 0; background: repeating-linear-gradient(45deg, var(--orange) 0 4px, #D9733A 4px 8px); }
.mmark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--navy); }
.btip { border-radius: 10px; background: var(--blue-bg); padding: 8px 10px; font-size: 12px; color: var(--navy); }
.btip.warn { background: var(--orange-bg); color: #7A3108; }
.bsplit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.bsplit > div { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 8px; background: var(--bg); min-width: 0; }
.bsplit > div > span:first-child { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsplit .mono { font-size: 13px; }
.bchart { position: relative; display: flex; align-items: flex-end; gap: 3px; height: calc(var(--h) + 52px); overflow: hidden; }
.bcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: inherit; text-decoration: none; }
.bcol .v { font-size: 9px; color: var(--muted); height: 12px; white-space: nowrap; }
.bcol .b { width: 100%; max-width: 30px; border-radius: 4px 4px 0 0; background: var(--blue); }
.bcol .b.over { background: var(--orange); }
.bcol .b.future { border: 1px dashed var(--blue-bd); background: #F2F8FC; }
.bcol.today .b { outline: 2px solid var(--navy); outline-offset: 1px; }
.bcol .d { font-size: 11px; color: var(--muted); }
.bcol.today .d { color: var(--navy); font-weight: 700; }
.bcol .w { font-size: 9px; color: var(--muted); }
.bline { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--navy); pointer-events: none; z-index: 1; }
.bline span { position: absolute; right: 0; bottom: 2px; font-size: 11px; font-weight: 600; background: #fff; padding: 0 4px; }
.bcol .v { position: relative; z-index: 2; background: #fff; padding: 0 1px; border-radius: 3px; }
/* nota com várias categorias */
.catsplit { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--blue); background: #fff; }
.cattag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cattag.none { border: 1px dashed var(--orange); color: var(--orange); background: #fff; }
.itemshead { padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; border-bottom: 1px solid var(--bd); position: sticky; top: 0; z-index: 3; }
.catsums { display: flex; gap: 6px; overflow-x: auto; }
.catsums > span { flex: 1 0 auto; min-width: 90px; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; font-size: 14px; }
.catsums > span b { font-size: 11px; }
.catsums > span.none { border: 1px dashed var(--orange); }
.catsums > span.none b { color: var(--orange); }
.itemrow { display: flex; gap: 10px; align-items: center; padding: 10px 6px 10px 14px; }
.itemrow > input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.itemrow.on { background: #F2F8FC; }
.assignbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--navy); color: #fff; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; }
.assigngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.assigngrid button { min-height: 44px; border-radius: 10px; border: 0; font: 600 13px var(--sans); }
.linkbtn { background: none; border: 0; color: var(--sky); font: 500 13px var(--sans); text-decoration: underline; min-height: 32px; }
.catline > span + span::before { content: ' · '; color: var(--muted); }
.multibtn { margin-top: 8px; min-height: 44px; font-size: 14px; justify-content: flex-start; gap: 6px; }
.multihint { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--blue-bg); font-size: 13px; color: var(--navy); }
.multihint .chip { white-space: nowrap; flex: 0 0 auto; }
/* volume da garrafa e vinho por item */
.volin { display: flex; align-items: center; gap: 6px; min-height: 44px; width: 130px; border-radius: 10px; border: 1px dashed var(--bd); background: #fff; padding: 0 10px; }
.volin.on { border: 2px solid var(--wine); background: var(--wine-bg); }
.volin input { border: 0; background: transparent; width: 100%; min-width: 0; text-align: right; font: 500 15px var(--mono); color: var(--navy); outline: none; }
.volin span { font-size: 13px; color: var(--muted); }
.opt.compact button { min-height: 38px; font-size: 13px; }
.wineitem { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--wine-bd); }
.wineitem.off { background: var(--bg); border-style: dashed; }
/* reler a foto */
.rereadbtn { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font: 600 14px var(--sans); }
.rereadbtn:disabled { opacity: .5; }
.rrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.rrow > input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.rrow.same { color: var(--muted); }
.rrow .eq { width: 20px; text-align: center; }
.quotacard { color: inherit; text-decoration: none; gap: 8px; }
.winec { color: var(--wine); }
/* fotos e leituras pendentes */
.filanote { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--bd); color: inherit; text-decoration: none; font-size: 15px; }
.filanote.orange { border-left: 4px solid var(--orange); }
.filanote.blue { border-left: 4px solid var(--blue); }
.filanote .ic { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.filanote.orange .ic { background: var(--orange-bg); color: var(--orange); }
.filanote.blue .ic { background: var(--blue-bg); color: var(--blue); }
.filarow { align-items: center; gap: 12px; }
.filarow .thumb, .filarev .thumb { width: 48px; height: 60px; }
.filarev { padding: 12px 14px; gap: 8px; }
.cmp { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.filabtns { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; }
.filabtns .btn { min-height: 42px; font-size: 14px; }