/* Visão geral: dados agregados, caixas limitadas e movimento de confirmação. */
#app.odModo main{background:var(--bg);background-image:none}
#app.odModo .topo{margin-bottom:14px;padding-bottom:14px}
#app.odModo .topo h1{font:600 28px/1.15 var(--display);letter-spacing:-.025em}
#app.odModo .topo .sub:empty{display:none}
.odDashboard{--od-radius:10px;display:grid;gap:16px;padding-bottom:16px;color:var(--ink);font-family:var(--body);font-size:13px;min-width:0}
.odDashboard *{box-sizing:border-box}
.odDashboard h2,.odDashboard h3,.odDashboard p{margin:0}
.odDashboard h2{font:600 18px/1.25 var(--display);letter-spacing:-.015em}
.odDashboard button,.odDialog button{font-family:var(--body)}
.odToolbar,.odToolbarActions,.odScope,.odHeader,.odInline,.odFooter,.odActions{display:flex;align-items:center;gap:10px}
.odToolbar,.odHeader,.odFooter{justify-content:space-between}
.odToolbar{flex-wrap:wrap;gap:12px}
.odToolbarActions{flex-wrap:wrap;margin-left:auto;min-width:0;max-width:100%}
.odScope{padding:3px;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;flex-wrap:wrap;min-width:0;max-width:100%}
.odScope button{border:0;background:transparent;color:var(--ink-2);padding:8px 12px;min-height:34px;min-width:0;max-width:100%;border-radius:5px;font-size:12px;font-weight:550;cursor:pointer;white-space:normal;overflow-wrap:anywhere;transition:background .14s,color .14s}
.odScope button[aria-pressed=true]{background:var(--surface);color:var(--accent-ink);box-shadow:0 1px 2px #0000000a}
.odButton{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink);padding:7px 11px;min-height:34px;font-size:12px;font-weight:550;line-height:1.25;cursor:pointer;text-decoration:none;transition:background .14s,border-color .14s,transform .14s}
.odButton:hover{border-color:var(--accent-ink);background:var(--surface-2)}
.odButton:active{transform:translateY(1px)}
.odButton.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.odButton.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--surface)}
.odButton.quiet{border-color:transparent;background:transparent;color:var(--ink-2)}
.odButton.quiet:hover{background:var(--surface-2);color:var(--accent-ink)}
.odButton:disabled{cursor:wait;opacity:.65;transform:none}
.odButton svg{width:15px;height:15px;flex:none}
.odDashboard button:focus-visible,.odDashboard a:focus-visible,.odDashboard summary:focus-visible,.odDialog button:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.odTimestamp{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
.odEyebrow{display:block;font-size:11px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.odContext{color:var(--ink-2);font-size:12px;line-height:1.45}
.odBanner{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--surface);line-height:1.5}
.odBanner>svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--accent-ink)}
.odBanner>div{min-width:0;overflow-wrap:anywhere}
.odBanner p{color:var(--ink-2);font-size:12px;margin-top:3px}
.odBanner.warning{border-left:3px solid var(--warn);background:var(--warn-soft)}
.odBanner.critical{border-left:3px solid var(--crit);background:var(--crit-soft)}
.odBanner.warning>svg{color:var(--warn)}
.odBanner.critical>svg{color:var(--crit)}
.odBanner details{margin-top:6px;font-size:12px;color:var(--ink-2)}
.odBanner summary{cursor:pointer}
.odBanner ul{padding-left:18px;margin:6px 0 0}
.odMetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px}
.odMetric{min-width:0;display:flex;align-items:flex-start;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--od-radius);text-align:left;cursor:pointer;color:var(--ink);position:relative;transition:border-color .15s,transform .15s}
.odMetric:hover{border-color:var(--accent-ink);transform:translateY(-2px)}
.odMetricIcon{width:34px;height:34px;display:grid;place-items:center;flex:none;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--accent-ink)}
.odMetricIcon svg{width:19px;height:19px}
.odMetricInfo{min-width:0;display:grid;gap:7px;flex:1}
.odMetricLabel{font-size:12px;font-weight:550;color:var(--ink-2)}
.odMetricValue{font:550 29px/1 var(--mono);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink)}
.odMetricDetail{font-size:12px;color:var(--ink-3);line-height:1.45;min-height:17px}
.odMetricEvidence{font-size:11px;color:var(--ink-3);line-height:1.45;border-top:1px solid var(--line);padding-top:6px}
.odMetricArrow{width:14px!important;height:14px!important;position:absolute;right:12px;top:16px;color:var(--ink-3)}
.odBad{color:var(--crit)!important}.odWarn{color:var(--warn)!important}
.odMainGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.odMainGrid>.odCard{display:flex;flex-direction:column}
.odMainGrid>.odCard>.odHeader{min-height:84px;align-items:flex-start}
.odMainGrid .odHeader>div{min-width:0;max-width:100%}
.odMainGrid .odHeaderTitle{flex-wrap:wrap}
.odMainGrid .odHeaderTitle h2{min-width:0;overflow-wrap:anywhere}
.odMainGrid .odProjectState{max-width:100%}
.odMainGrid .odState{white-space:normal;max-width:100%;overflow-wrap:anywhere}
.odMainGrid>.odCard>.odFooter{margin-top:auto;min-height:58px}
.odCard{min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--od-radius)}
.odHeader{padding:15px 16px;gap:12px;flex-wrap:wrap}
.odHeaderTitle{display:flex;gap:8px;align-items:center;min-width:0}
.odHeaderTitle>svg{width:18px;height:18px;flex:none;color:var(--accent-ink)}
.odHeader p{color:var(--ink-3);font-size:12px;margin-top:5px;line-height:1.4}
.odCount{background:var(--surface-2);color:var(--ink-2);font:500 11px/1 var(--mono);padding:4px 6px;border:1px solid var(--line);border-radius:5px;white-space:nowrap}
.odList{padding:0 16px;max-height:440px;overflow:auto;scrollbar-gutter:stable}
.odProject{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.odProjectIdentity{display:flex;align-items:flex-start;gap:10px;min-width:0}
.odAvatar{display:grid;place-items:center;width:32px;height:32px;flex:none;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--accent-ink);font:600 13px var(--mono)}
.odProjectText{min-width:0;display:grid;gap:4px}
.odName{border:0;background:transparent;padding:0;text-align:left;color:var(--ink);font:600 13px/1.35 var(--body);cursor:pointer;overflow-wrap:anywhere}
.odSiteTitle,.odPublicActions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;max-width:100%}
.odSiteTitle>.odName{min-width:0;max-width:100%}
.odButton.odPublicLink{font-size:11px;min-height:28px;padding:4px 6px;gap:4px;color:var(--accent-ink);white-space:nowrap}
.odName:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.odMeta{color:var(--ink-3);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.odProjectState{display:grid;justify-items:end;gap:6px;min-width:0}
.odProjectState .odMeta{font-size:11px;text-align:right}
.odState{display:inline-flex;align-items:center;gap:6px;padding:4px 7px;border:1px solid var(--line);border-radius:5px;color:var(--ink-2);background:var(--surface-2);font-size:11px;font-weight:550;line-height:1.3;white-space:nowrap}
.odState:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.odState.good{color:var(--good);background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 22%,var(--line))}
.odState.warning{color:var(--warn);background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 22%,var(--line))}
.odState.critical{color:var(--crit);background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 22%,var(--line))}
.odState.critical:before{border-radius:1px;transform:rotate(45deg)}
.odState.building{color:var(--accent-ink);background:var(--accent-soft)}
.odFooter{padding:11px 16px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12px;flex-wrap:wrap}
.odFooter>span{flex:1;min-width:120px;line-height:1.4}
.odEmpty{padding:15px 16px 20px;color:var(--ink-3);font-size:13px;line-height:1.6}
.odEmpty b{color:var(--ink);display:block;margin-bottom:3px;font-weight:550}
.odEmpty .odButton{margin-top:12px}
.odAlert{padding:12px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px}
.odAlert>svg{width:17px;height:17px;color:var(--warn);margin-top:2px}
.odAlert.critical>svg{color:var(--crit)}
.odAlertInfo{min-width:0}
.odAlertTitle{font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.odAlertInfo .odMeta{margin-top:4px}
.odAlertBottom{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:7px}
.odAlertBottom time{font-size:11px;color:var(--ink-3)}
.odRequest,.odSeo{border-top:1px solid var(--line);padding:12px 0;display:flex;align-items:center;gap:10px;justify-content:space-between}
.odRequest>div,.odSeo>div{min-width:0}
.odRequest strong{font-size:13px;font-weight:550;line-height:1.4;display:block;overflow-wrap:anywhere}
.odRequest .odMeta,.odSeo .odMeta{margin-top:4px}
.odUsageGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding:0 16px}
.odUsage{padding:13px 0;border-top:1px solid var(--line);min-width:0}
.odUsageTop{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12px}
.odUsageTop strong{overflow-wrap:anywhere;font-weight:600}
.odUsageTop span{font-family:var(--mono);flex:none}
.odUsage .odMeta{font-size:11px;margin-top:5px}
.odUsageAccountGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding:0 16px}
.odUsageAccount{min-width:0;padding:14px 0;border-top:1px solid var(--line)}
.odUsageAccountHead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px;min-width:0}
.odUsageAccountHead h3{font:600 13px/1.4 var(--body);margin:0;min-width:0;overflow-wrap:anywhere}
.odUsageAccountHead .odState{flex-shrink:0;font-size:9px;max-width:45%;white-space:normal;overflow-wrap:anywhere}
.odUsageResources{display:grid;gap:7px;margin:0}
.odUsageResource{display:flex;align-items:baseline;justify-content:space-between;gap:6px 10px;font-size:11px;line-height:1.45;flex-wrap:wrap}
.odUsageResource dt{color:var(--ink-3);min-width:0;overflow-wrap:anywhere}
.odUsageResource dd{display:flex;gap:5px 8px;align-items:baseline;flex-wrap:wrap;justify-content:flex-end;margin:0 0 0 auto;min-width:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.odUsageLimit{color:var(--ink-3)}.odUsageResource small{font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.odUsageMore{color:var(--ink-3);font-size:10px;margin-top:8px!important}
.odTrack{height:5px;margin-top:9px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.odTrack i{display:block;height:100%;width:var(--od-width);max-width:100%;border-radius:3px;background:var(--accent-ink);transition:width .22s ease}
.odTrack.warning i{background:var(--warn)}.odTrack.critical i{background:var(--crit)}
.odWelcome{padding:22px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr);gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent-ink);border-radius:var(--od-radius)}
.odWelcome h2{font:600 clamp(23px,2.4vw,30px)/1.2 var(--display);max-width:24ch}
.odWelcome p{color:var(--ink-3);font-size:13px;line-height:1.65;margin:10px 0 15px;max-width:54ch}
.odWelcome ol{list-style:none;display:grid;gap:14px;padding:0;margin:0;counter-reset:passo}
.odWelcome li{counter-increment:passo;display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:13px;line-height:1.5}
.odWelcome li:before{content:counter(passo,decimal-leading-zero);display:grid;place-items:center;width:27px;height:27px;border:1px solid var(--line);border-radius:5px;font:11px var(--mono);color:var(--accent-ink);flex:none}
.odScreenStatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.odLoading{display:grid;gap:16px;min-height:360px}
.odSkeletonRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.odSkeleton{height:112px;background:var(--surface);border:1px solid var(--line);border-radius:10px;position:relative;overflow:hidden}
.odSkeleton:before{content:"";position:absolute;inset:20px;width:45%;height:12px;background:var(--surface-2);border-radius:3px;box-shadow:0 30px 0 4px var(--surface-2)}
.odLoadingBlock{height:200px}
.odEnter>.odMetrics,.odEnter>.odMainGrid,.odEnter>.odWelcome{animation:odEnter .22s ease-out both}
.odEnter>.odMainGrid{animation-delay:45ms}
.odMetricChanged{animation:odChanged .45s ease-out}
@keyframes odEnter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes odChanged{0%{background:var(--accent-soft)}100%{background:transparent}}
.odDialog{width:min(570px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);overflow:auto;box-shadow:var(--elev-3)}
.odDialog::backdrop{background:#081822a8}
.odDialogHead,.odDialogBody,.odDialogFoot{padding:18px 20px}
.odDialogHead{display:flex;gap:16px;align-items:start;justify-content:space-between;border-bottom:1px solid var(--line)}
.odDialogHead h2{margin:4px 0 0;font:600 22px/1.3 var(--display);overflow-wrap:anywhere}
.odDialogBody{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.odDialogBody p{margin:0 0 12px}.odDialogBody dl{margin:12px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.odDialogBody dt{color:var(--ink-3);font-size:12px}.odDialogBody dd{margin:4px 0 0;font-size:13px}
.odDialogFoot{border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-2)}
.odDialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 var(--mono);background:var(--surface-2);padding:12px;border:1px solid var(--line);border-radius:6px;max-height:180px;overflow:auto}
@media(max-width:1080px){.odMainGrid{grid-template-columns:1fr}.odMainGrid>.odCard>.odHeader{min-height:0}.odMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.odMetric{padding:14px}.odProjectIdentity{gap:8px}.odAvatar{display:none}}
@media(max-width:820px){.odWelcome{grid-template-columns:1fr}.odWelcome ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.odWelcome li{align-items:flex-start;font-size:12px}.odToolbarActions{margin-left:0}.odToolbar{align-items:flex-start}.odProjectState .odMeta{max-width:150px}}
@media(max-width:560px){#app.odModo main{padding:14px}#app.odModo .topo h1{font-size:25px}.odDashboard{gap:12px}.odMetrics{gap:9px}.odMetric{gap:8px;padding:12px}.odMetricIcon{display:none}.odMetricValue{font-size:27px}.odMetricArrow{right:10px;top:13px}.odMetricLabel{padding-right:14px}.odMetricDetail{font-size:11px}.odMainGrid{gap:12px}.odHeader{padding:13px}.odList{padding:0 13px}.odFooter{padding:10px 13px}.odUsageGrid{grid-template-columns:1fr;padding:0 13px}.odScope{width:100%}.odScope button{flex:1;padding:8px;min-height:38px}.odToolbarActions{width:100%;justify-content:space-between}.odToolbarActions .odTimestamp{font-size:11px}.odToolbarActions>.odButton{min-height:38px}.odProject{gap:8px}.odProjectState{max-width:137px}.odState{white-space:normal;text-align:right;font-size:10px}.odProjectState .odMeta{font-size:10px}.odWelcome{padding:18px;gap:18px}.odWelcome ol{grid-template-columns:1fr}.odActions{flex-wrap:wrap}.odButton,.odButton.odPublicLink{min-height:38px}.odSkeletonRow{grid-template-columns:repeat(2,minmax(0,1fr))}.odDialogHead,.odDialogBody,.odDialogFoot{padding:16px}.odDialogBody dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.odDashboard,.odDashboard *,.odDashboard *:before,.odDashboard *:after,.odDialog,.odDialog *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:560px){.odUsageAccountGrid{grid-template-columns:1fr;padding:0 13px}.odUsageAccount{padding:12px 0}.odUsageAccountHead h3{font-size:13px}.odUsageResource{font-size:12px}.odUsageResource small{font-size:11px}}
