/* =========================================================================
   fuel.css — ბენზინის გადამტვირთავი: ჩატვირთვა / გადმოტვირთვა (CEF.FUEL = 16 / page-fuel)
   ყველა სელექტორი დასკოპულია #page-fuel-ზე, კლასები იწყება fl- პრეფიქსით.
   ========================================================================= */
#page-fuel {
  --red: #ff4747; --amber: #ffb02e; --green: #3ddc84; --fuel: #ffb02e;
  --light: #eaeaea; --muted: #eaeaea8c; --black: #0a0a0a; --line: #eaeaea1f;
  font-family: "Noto Sans Georgian", "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--light); background: var(--black); overflow: hidden; user-select: none;
}
#page-fuel * { box-sizing: border-box; margin: 0; padding: 0; }
#page-fuel .fl-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 50% 0%, #ffb02e26, transparent 70%),
  radial-gradient(45% 45% at 85% 70%, #ff474720, transparent 70%),
  linear-gradient(180deg, #0f0e0b 0%, #060606 100%); }
#page-fuel .fl-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, #000000b3 100%); }

#page-fuel .fl-card { position: relative; z-index: 2; width: min(820px, 96vw); padding: 24px 28px 20px;
  background: #121214f2; border: 1px solid #ffffff14; border-radius: 16px; box-shadow: 0 24px 70px #000000a0; }
#page-fuel .fl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#page-fuel .fl-title { font: 700 26px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .06em; }
#page-fuel .fl-title span { color: var(--fuel); }
#page-fuel .fl-close { background: none; border: 1px solid var(--line); color: var(--light); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; }
#page-fuel .fl-close:hover { border-color: var(--red); color: var(--red); }

#page-fuel .fl-main { display: flex; gap: 18px; }
#page-fuel .fl-stage { flex: 1; min-height: 300px; position: relative; border-radius: 12px; background: #eaeaea08;
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 34px; padding: 16px; }

/* ცისტერნა */
#page-fuel .fl-tank { position: relative; width: 250px; height: 130px; border-radius: 65px / 50px;
  border: 3px solid #cfd3d8; background: #1a1b1e; overflow: hidden; box-shadow: inset 0 0 24px #000000a0; }
#page-fuel .fl-level { position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, #ffc65a, var(--fuel) 40%, #d98a00); transition: height .12s linear; }
#page-fuel .fl-level::before { content: ""; position: absolute; left: -10%; right: -10%; top: -6px; height: 12px;
  background: #ffd98a; border-radius: 50%; opacity: .7; animation: flWave 1.6s ease-in-out infinite alternate; }
@keyframes flWave { from { transform: translateX(-4%) scaleY(.8); } to { transform: translateX(4%) scaleY(1.2); } }
#page-fuel .fl-tank-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 800 32px "Rajdhani", sans-serif; color: #fff; text-shadow: 0 2px 8px #000; z-index: 2; }
#page-fuel .fl-wheels { position: absolute; left: 0; right: 0; bottom: -2px; }
#page-fuel .fl-liters { position: absolute; left: 0; right: 0; top: -26px; text-align: center; font-size: 12.5px; color: var(--muted); }
#page-fuel .fl-liters b { color: var(--fuel); font-size: 14px; }
#page-fuel .fl-tankwrap { position: relative; padding-top: 26px; }

/* წნევის მაჩვენებელი */
#page-fuel .fl-gauge { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#page-fuel .fl-pbar { position: relative; width: 56px; height: 220px; border-radius: 10px; background: #eaeaea10;
  border: 1px solid var(--line); overflow: hidden; }
#page-fuel .fl-zone { position: absolute; left: 0; right: 0; bottom: 45%; height: 30%; background: #3ddc8433;
  border-top: 2px solid var(--green); border-bottom: 2px solid var(--green); }
#page-fuel .fl-danger { position: absolute; left: 0; right: 0; bottom: 85%; top: 0; background: #ff474733; }
#page-fuel .fl-pfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(0deg, #8a8a8a, #eaeaea); opacity: .8; }
#page-fuel .fl-needle { position: absolute; left: -2px; right: -2px; bottom: 0%; height: 4px; background: var(--fuel);
  box-shadow: 0 0 10px var(--fuel); }
#page-fuel .fl-gauge small { font-size: 11px; color: var(--muted); }

#page-fuel .fl-side { width: 190px; display: flex; flex-direction: column; gap: 12px; }
#page-fuel .fl-meter small { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
#page-fuel .fl-bar { height: 10px; border-radius: 6px; background: #eaeaea14; overflow: hidden; }
#page-fuel .fl-bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .1s linear; }
#page-fuel .fl-prog i { background: linear-gradient(90deg, #d98a00, var(--fuel)); }
#page-fuel .fl-spill i { background: linear-gradient(90deg, var(--fuel), var(--red)); }
#page-fuel .fl-btn { width: 100%; padding: 16px 8px; border-radius: 10px; border: 1px solid var(--line); background: #eaeaea0f;
  color: var(--light); font: 700 14px inherit; cursor: pointer; transition: .15s; }
#page-fuel .fl-btn:hover, #page-fuel .fl-btn.hold { border-color: var(--fuel); background: #ffb02e26; }
#page-fuel .fl-btn.hold { transform: scale(.98); }
#page-fuel .fl-hint { margin-top: 12px; font-size: 11.5px; color: var(--muted); text-align: center; }
#page-fuel .fl-hint b { color: var(--fuel); }
#page-fuel .fl-state { font-size: 12px; text-align: center; min-height: 16px; color: var(--muted); }
#page-fuel .fl-state.warn { color: var(--red); }
#page-fuel .fl-state.ok { color: var(--green); }
#page-fuel .fl-done { position: absolute; inset: 0; border-radius: 12px; background: #0a0a0acc; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 5; }
#page-fuel .fl-done.on { display: flex; }
#page-fuel .fl-done h3 { font-size: 18px; color: var(--green); }
#page-fuel .fl-done .fl-big { font: 800 40px "Rajdhani", sans-serif; color: var(--fuel); }