/* =========================================================================
   fob.css — მანქანის პულტი (CEF.FOB = 20 / page-fob)
   ჩაკეტვა · გაღება · ფარები. კლასები იწყება fb- პრეფიქსით
   ========================================================================= */
#page-fob {
  --red: #ff4747; --amber: #ffb81f; --green: #38d977; --light: #eaeaea; --muted: rgba(234, 234, 234, .55);
  justify-content: flex-end; align-items: center; padding-right: 90px;
  background: none; backdrop-filter: none;
  font-family: 'Noto Sans Georgian', 'Manrope', 'Segoe UI', Arial, sans-serif; color: var(--light);
}
#page-fob * { box-sizing: border-box; }
.fb-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; transform: translateY(60px) scale(.92); opacity: 0; transition: transform .5s cubic-bezier(.2, 1.15, .3, 1), opacity .3s; }
#page-fob.visible .fb-wrap { transform: none; opacity: 1; }

/* ინფო ბარათი */
.fb-info { min-width: 230px; padding: 10px 16px; border-radius: 14px; text-align: center; border: 1px solid rgba(234, 234, 234, .1);
  background: linear-gradient(160deg, rgba(24, 24, 28, .97), rgba(10, 10, 12, .98)); box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
.fb-name { font: 700 19px 'Rajdhani', 'Noto Sans Georgian', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.fb-meta { margin-top: 3px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fb-chip { padding: 1px 9px; border-radius: 8px; border: 1px solid rgba(234, 234, 234, .14); background: rgba(255, 255, 255, .04); font-weight: 600; transition: .25s; }
.fb-chip.locked { color: var(--red); border-color: rgba(255, 71, 71, .5); background: rgba(255, 71, 71, .12); }
.fb-chip.unlocked { color: var(--green); border-color: rgba(56, 217, 119, .5); background: rgba(56, 217, 119, .1); }
.fb-chip.aim { color: #fff; border-color: var(--red); background: rgba(255, 71, 71, .22); }
.fb-chip.lights { color: var(--amber); border-color: rgba(255, 184, 31, .5); background: rgba(255, 184, 31, .1); }

/* გასაღები-პულტი */
.fb-key { position: relative; width: 196px; height: 330px; padding: 54px 20px 22px; border-radius: 98px 98px 84px 84px / 110px 110px 84px 84px;
  background: linear-gradient(155deg, #2b2b31 0%, #101013 45%, #1a1a1e 100%);
  border: 2px solid #3a3a42; box-shadow: 0 26px 60px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -10px 24px rgba(0, 0, 0, .55), 0 0 0 5px rgba(0, 0, 0, .35); }
.fb-key::before { content: ''; position: absolute; left: 14px; top: 14px; width: 60px; height: 140px; border-radius: 50%; background: linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 70%); pointer-events: none; }
.fb-hole { position: absolute; left: 50%; top: 14px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #05050700; border: 3px solid #4a4a54; box-shadow: inset 0 2px 6px #000, 0 0 0 2px #15151a; background: #060608; }
.fb-led { position: absolute; left: 50%; top: 46px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #2a2a2e; transition: background .15s, box-shadow .15s; }
.fb-led.on-lock   { background: var(--red);   box-shadow: 0 0 14px 4px rgba(255, 71, 71, .85); }
.fb-led.on-unlock { background: var(--green); box-shadow: 0 0 14px 4px rgba(56, 217, 119, .85); }
.fb-led.on-lights { background: var(--amber); box-shadow: 0 0 14px 4px rgba(255, 184, 31, .85); }
.fb-brand { position: absolute; left: 0; right: 0; top: 66px; text-align: center; font: 700 10px 'Rajdhani', sans-serif; letter-spacing: .5em; color: rgba(234, 234, 234, .35); }

.fb-grid { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; justify-items: center; }
.fb-btn { position: relative; width: 70px; height: 70px; border-radius: 50%; cursor: pointer; color: var(--light); font: inherit;
  border: 2px solid #3b3b44; background: radial-gradient(circle at 35% 28%, #3a3a43, #17171b 70%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15); transition: transform .08s, box-shadow .08s, border-color .2s, color .2s; display: flex; align-items: center; justify-content: center; outline: none; }
.fb-btn svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-btn:hover { border-color: #6a6a75; }
.fb-btn:active, .fb-btn.press { transform: translateY(3px) scale(.96); box-shadow: 0 2px 4px rgba(0, 0, 0, .7), inset 0 2px 6px rgba(0, 0, 0, .6); }
.fb-btn small { position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 600; color: var(--muted); }
.fb-btn .fb-k { position: absolute; top: -4px; right: -2px; width: 18px; height: 18px; border-radius: 6px; background: #0b0b0d; border: 1px solid #3b3b44; font: 700 10px/16px 'Manrope', sans-serif; text-align: center; color: var(--muted); }
.fb-btn.lock.act   { color: var(--red);   border-color: var(--red);   box-shadow: 0 0 16px rgba(255, 71, 71, .45), 0 6px 12px rgba(0, 0, 0, .6); }
.fb-btn.unlock.act { color: var(--green); border-color: var(--green); box-shadow: 0 0 16px rgba(56, 217, 119, .45), 0 6px 12px rgba(0, 0, 0, .6); }
.fb-btn.lights.act { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 16px rgba(255, 184, 31, .45), 0 6px 12px rgba(0, 0, 0, .6); }
.fb-btn.lights { grid-column: 1 / 3; width: 96px; border-radius: 40px; height: 62px; margin-top: 6px; }
.fb-btn.busy { pointer-events: none; opacity: .55; }
.fb-key.nosig .fb-btn { pointer-events: none; opacity: .35; filter: grayscale(1); }

/* სიგნალის ტალღები დაჭერისას */
.fb-wave { position: absolute; left: 50%; top: 41px; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--light); opacity: 0; pointer-events: none; }
.fb-key.ping .fb-wave { animation: fbWave .8s ease-out both; }
.fb-key.ping .fb-wave.w2 { animation-delay: .18s; }
@keyframes fbWave { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(9); } }
.fb-hint { font-size: 11px; color: rgba(234, 234, 234, .4); letter-spacing: .04em; }