/* Shared glass material: bright rim, diffuse depth, restrained refraction. */
:root {
  --glass-fill: linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.28));
  --glass-border: rgba(255,255,255,.65);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.18), 0 8px 28px -12px rgba(35,48,60,.19);
  --glass-focus: #0f766e;
}
html[data-theme="dark"] {
  --glass-fill: linear-gradient(145deg, rgba(49,57,66,.68), rgba(22,27,33,.60));
  --glass-border: rgba(224,239,255,.17);
  --glass-shadow: inset 0 1px 0 rgba(235,245,255,.15), inset 0 -1px 0 rgba(255,255,255,.025), 0 12px 32px -12px rgba(0,0,0,.48);
  --glass-focus: #5eead4;
}
html body { background-color: #e8ebe8; }
html[data-theme="dark"] body { background-color: #0b1015; }
html .flashlight-card, html[data-theme="dark"] .flashlight-card {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
html .flashlight-card::before { opacity: .32; }
html .flashlight-card::after { opacity: .36; pointer-events: none; }
html .ambient-blob { opacity: .18; animation: none; }
html[data-theme="dark"] .ambient-blob { opacity: .10; }
html[data-theme="dark"] .ambient-blob:nth-child(1) { background: #67c6ce; }
html[data-theme="dark"] .ambient-blob:nth-child(2) { background: #7c8bb6; }
html .menu-warp { filter: none; }
html #tab-nav-scroll, html[data-theme="dark"] #tab-nav-scroll {
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
html .liquid-btn, html[data-theme="dark"] .liquid-btn {
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  min-height: 44px;
}
html .tab-btn { min-height: 48px; }
html :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--glass-focus) !important;
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  html .flashlight-card:hover {
    border-color: var(--glass-focus);
    box-shadow: var(--glass-shadow), 0 16px 32px -22px rgba(13,148,136,.4);
  }
}
@media (max-width: 768px) {
  html .flashlight-card, html[data-theme="dark"] .flashlight-card {
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-fill: #f1f3f1; }
  html[data-theme="dark"] { --glass-fill: #20282f; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-fill: #f1f3f1; }
  html[data-theme="dark"] { --glass-fill: #20282f; }
  html .flashlight-card, html .liquid-btn, html #tab-nav-scroll {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: var(--glass-fill) !important;
  }
  .ambient-bg, .noise { display: none; }
}

/* Optical controls sit above the calmer content material. */
:root {
  --glass-fill: linear-gradient(155deg, rgba(255,255,255,.42), rgba(255,255,255,.16));
  --glass-border: rgba(255,255,255,.48);
  --glass-shadow: inset 1px 1px 1px rgba(255,255,255,.8), inset -1px -1px 1px rgba(255,255,255,.3), 0 6px 20px -10px rgba(33,43,53,.2);
  --control-glass: linear-gradient(160deg, rgba(255,255,255,.56), rgba(255,255,255,.18) 48%, rgba(255,255,255,.32));
}
html[data-theme="dark"] {
  --glass-fill: linear-gradient(155deg, rgba(72,81,91,.38), rgba(27,33,40,.42));
  --control-glass: linear-gradient(160deg, rgba(135,148,162,.26), rgba(32,40,49,.52) 48%, rgba(96,112,128,.22));
}
html .noise { opacity: .012; }
html .flashlight-card::after {
  opacity: .7;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), transparent 35%, transparent 65%, rgba(255,255,255,.5));
}
html #tab-nav-scroll, html[data-theme="dark"] #tab-nav-scroll,
html .liquid-btn, html[data-theme="dark"] .liquid-btn {
  background: var(--control-glass) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.65), inset -1px -1px 1px rgba(255,255,255,.22), 0 4px 6px -4px rgba(0,0,0,.2), 0 12px 28px -14px rgba(0,0,0,.28) !important;
}
html .menu-warp { backdrop-filter: none; -webkit-backdrop-filter: none; }
html:not([data-theme="dark"]) .tab-glass-pill {
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.38));
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.7), 0 3px 9px rgba(30,45,55,.14);
}
html[data-theme="dark"] .tab-glass-pill {
  background: linear-gradient(160deg, rgba(230,240,255,.24), rgba(220,235,255,.08));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 1px rgba(255,255,255,.16), 0 3px 9px rgba(0,0,0,.3);
}
@media (hover: hover) and (pointer: fine) {
  html .flashlight-card:hover { border-color: var(--glass-border); }
  html .liquid-btn:hover { filter: brightness(1.06); }
}

/* Summary text needs a predictable base in both themes, including offline states. */
html .summary-bar.bg-stone-900.text-white,
html[data-theme="dark"] .summary-bar.bg-stone-900.text-white {
  background: linear-gradient(145deg, #29353e, #172129) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -14px rgba(0,0,0,.45);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html .summary-bar :is(.text-stone-300, .text-stone-400, .text-stone-500, .text-stone-600) {
  color: #cbd5e1 !important;
}
html .summary-bar :is(.text-white, #resumo-total) { color: #f8fafc !important; }
html .summary-bar :is(.text-red-400, .text-red-500, .text-red-600) { color: #fda4af !important; }
html .summary-bar :is(.text-emerald-400, .text-emerald-500) { color: #6ee7b7 !important; }
html .summary-bar :is(.text-amber-400, .text-amber-500) { color: #fcd34d !important; }
html .summary-bar .bg-stone-800 { background: #475569 !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-fill: #f1f3f1; --control-glass: #f1f3f1; }
  html[data-theme="dark"] { --glass-fill: #20282f; --control-glass: #20282f; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass-fill: #f1f3f1; --control-glass: #f1f3f1; }
  html[data-theme="dark"] { --glass-fill: #20282f; --control-glass: #20282f; }
  html #tab-nav-scroll, html .liquid-btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Keep local Docker glyphs legible without losing their service color. */
.docker-icon { color: var(--container-color); display: inline-block; width: 1em; height: 1em; }
html[data-theme="dark"] .docker-icon { color: #a8d8ef; color: color-mix(in srgb, var(--container-color) 58%, white); }
@media (prefers-reduced-transparency: no-preference) {
  html:not([data-theme="dark"]) .flashlight-card { background: linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12)); }
}