/* =========================================================================
   family.css — ოჯახი / FAMILY (CEF.FAMILY = 33 / page-family)
   ფერები: #ff4747 · #eaeaea · მუქი შავი. ყველა სელექტორი დასკოპულია #page-family-ზე, კლასები იწყება fm- პრეფიქსით.
   ========================================================================= */
#page-family {
  --red: #ff4747; --light: #eaeaea; --muted: #eaeaea8c; --black: #0a0a0a; --panel: #141416; --line: #eaeaea1f;
  --ok: #30d158; --err: #ff453a; --fc: #ff4747;
  font-family: "Noto Sans Georgian", "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--light); background: var(--black); overflow: hidden; user-select: none;
}
#page-family * { box-sizing: border-box; margin: 0; padding: 0; }
#page-family button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
#page-family button:disabled { cursor: not-allowed; }
#page-family .fm-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 45% at 50% 100%, #ff474730, transparent 70%),
  radial-gradient(50% 50% at 10% 0%, #eaeaea1c, transparent 70%),
  linear-gradient(180deg, #0e0b0b 0%, #050505 100%); }
#page-family .fm-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, #000000b8 100%); }

#page-family .fm-win { position: relative; z-index: 2; width: min(1000px, 96vw); max-height: 94vh; display: flex; flex-direction: column;
  padding: 22px 26px 24px; background: #101012f2; border: 1px solid #ffffff14; border-radius: 16px; box-shadow: 0 24px 70px #000000b0; overflow: hidden; }
#page-family .fm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex: none; }
#page-family .fm-brand { display: flex; align-items: center; gap: 12px; }
#page-family .fm-bico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--red); color: #fff; box-shadow: 0 6px 18px #ff474755; }
#page-family .fm-bico svg { width: 24px; height: 24px; }
#page-family .fm-title { font: 700 26px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .12em; }
#page-family .fm-title span { color: var(--red); }
#page-family .fm-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
#page-family .fm-close { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 13px; transition: .15s; white-space: nowrap; }
#page-family .fm-close:hover { border-color: var(--red); color: var(--red); }
#page-family .fm-body { min-height: 0; overflow: auto; }

/* ---------- ბანერი ---------- */
#page-family .fm-banner { position: relative; overflow: hidden; border-radius: 14px; padding: 18px 20px; border: 1px solid #ffffff1c;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fc) 38%, #0a0a0a) 0%, #0d0d0d 62%); box-shadow: 0 12px 30px #000000a0; }
#page-family .fm-banner::after { content: ""; position: absolute; right: -12%; top: -50%; width: 55%; height: 200%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--fc) 55%, transparent), transparent 70%); pointer-events: none; }
#page-family .fm-bt, #page-family .fm-bn, #page-family .fm-bd, #page-family .fm-bm { position: relative; z-index: 1; }
#page-family .fm-tag { display: inline-block; padding: 3px 11px; border-radius: 7px; background: var(--fc); color: #0a0a0a; font: 800 15px "Rajdhani", sans-serif; letter-spacing: .16em; }
#page-family .fm-bn { margin-top: 10px; font: 800 clamp(22px, 3.6vh, 32px) "Noto Sans Georgian", "Rajdhani", sans-serif; line-height: 1.15; word-break: break-word; }
#page-family .fm-bn em { font-style: normal; color: #eaeaea55; font-weight: 600; }
#page-family .fm-bd { margin-top: 6px; font-size: 13px; color: #eaeaeab0; word-break: break-word; }
#page-family .fm-bm { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); }
#page-family .fm-bm b { color: var(--light); }

/* ---------- ღილაკები / ველები ---------- */
#page-family .fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 20px; border-radius: 10px; background: var(--red); color: #fff;
  font: 800 14px "Noto Sans Georgian", sans-serif; box-shadow: 0 4px 0 #b82828; transition: .1s; }
#page-family .fm-btn svg { width: 16px; height: 16px; }
#page-family .fm-btn:hover:not(:disabled) { filter: brightness(1.08); }
#page-family .fm-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #b82828; }
#page-family .fm-btn:disabled { background: #eaeaea1a; color: #eaeaea55; box-shadow: none; }
#page-family .fm-btn.ghost { background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--light); }
#page-family .fm-btn.ghost:hover { border-color: var(--red); color: var(--red); }
#page-family .fm-btn.ghost.bad { color: #ff8a84; }
#page-family .fm-btn.bad:not(.ghost) { background: var(--err); box-shadow: 0 4px 0 #a52520; }
#page-family input[type=text], #page-family textarea { width: 100%; margin-top: 6px; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--line); background: #0a0a0a; color: var(--light);
  font: 600 15px "Noto Sans Georgian", "Manrope", sans-serif; outline: none; transition: .15s; user-select: text; resize: none; }
#page-family input.up { text-transform: uppercase; letter-spacing: .2em; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 17px; }
#page-family input::placeholder, #page-family textarea::placeholder { color: #eaeaea40; font-weight: 500; letter-spacing: 0; text-transform: none; }
#page-family input:focus, #page-family textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px #ff474726; }

/* ---------- შექმნა ---------- */
#page-family .fm-create { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; }
#page-family .fm-left { display: flex; flex-direction: column; gap: 16px; }
#page-family .fm-left .fm-banner { min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
#page-family .fm-rules { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--muted); }
#page-family .fm-rules li { padding-left: 16px; position: relative; }
#page-family .fm-rules li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--red); }
#page-family .fm-rules b { color: var(--light); }
#page-family .fm-right { display: flex; flex-direction: column; gap: 13px; }
#page-family .fm-lab { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
#page-family .fm-sw { display: flex; gap: 9px; margin-top: 7px; flex-wrap: wrap; }
#page-family .fm-sw button { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid transparent; box-shadow: 0 0 0 2px #0a0a0a inset; transition: .12s; }
#page-family .fm-sw button:hover { transform: scale(1.12); }
#page-family .fm-sw button.on { border-color: #fff; box-shadow: 0 0 0 3px var(--c) , 0 0 0 5px #0a0a0a inset; }
#page-family .fm-fee { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; background: #eaeaea0d; border: 1px solid var(--line); }
#page-family .fm-fee small { display: block; font-size: 10.5px; color: var(--muted); }
#page-family .fm-fee b { font: 700 19px "Rajdhani", sans-serif; letter-spacing: .02em; }
#page-family .fm-have.low b { color: var(--err); }
#page-family .fm-pay, #page-family .fm-tabs { display: flex; border-radius: 9px; overflow: hidden; border: 1.5px solid var(--line); }
#page-family .fm-pay button { padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
#page-family .fm-pay button.on { background: var(--light); color: var(--black); }
#page-family .fm-right > .fm-btn { margin-top: 4px; }

/* ---------- მართვა ---------- */
#page-family .fm-manage { display: flex; flex-direction: column; gap: 14px; }
#page-family .fm-tabs { align-self: flex-start; }
#page-family .fm-tabs button { padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--muted); }
#page-family .fm-tabs button i { font-style: normal; margin-left: 5px; padding: 1px 7px; border-radius: 9px; background: #eaeaea1a; font-size: 11px; }
#page-family .fm-tabs button.on { background: var(--red); color: #fff; }
#page-family .fm-tabs button.on i { background: #00000030; }
#page-family .fm-list { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; padding-right: 4px; }
#page-family .fm-list::-webkit-scrollbar { width: 6px; }
#page-family .fm-list::-webkit-scrollbar-thumb { background: #eaeaea30; border-radius: 3px; }
#page-family .fm-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: #eaeaea09; border: 1px solid #eaeaea10; }
#page-family .fm-row:hover { background: #eaeaea12; }
#page-family .fm-dot { width: 9px; height: 9px; border-radius: 50%; background: #eaeaea30; flex: none; }
#page-family .fm-dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
#page-family .fm-mn { flex: 1; min-width: 0; }
#page-family .fm-mn b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-family .fm-mn small { font-size: 11px; color: var(--muted); }
#page-family .fm-rk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 800; background: #eaeaea14; color: var(--muted); }
#page-family .fm-rk svg { width: 13px; height: 13px; }
#page-family .fm-rk.r2 { background: #eaeaea26; color: var(--light); }
#page-family .fm-rk.r3 { background: var(--fc); color: #0a0a0a; }
#page-family .fm-acts { display: flex; gap: 5px; min-width: 100px; justify-content: flex-end; }
#page-family .fm-ib { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; transition: .12s; }
#page-family .fm-ib svg { width: 15px; height: 15px; }
#page-family .fm-ib:hover { border-color: var(--light); }
#page-family .fm-ib.up:hover { border-color: var(--ok); color: var(--ok); }
#page-family .fm-ib.bad:hover { border-color: var(--err); color: var(--err); background: #ff453a18; }
#page-family .fm-inv { padding: 20px; border-radius: 12px; background: #eaeaea09; border: 1px solid var(--line); }
#page-family .fm-inv h3 { font-size: 16px; margin-bottom: 4px; }
#page-family .fm-inv p { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
#page-family .fm-invrow { display: flex; gap: 10px; align-items: flex-start; }
#page-family .fm-invrow input { margin-top: 0; }
#page-family .fm-foot { display: flex; justify-content: flex-end; }

/* ---------- მოწვევა ---------- */
#page-family .fm-invite { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; text-align: center; }
#page-family .fm-invite .fm-banner { text-align: left; }
#page-family .fm-ip { font-size: 15px; line-height: 1.5; color: var(--muted); }
#page-family .fm-ip b { color: var(--light); }
#page-family .fm-ip span { font: 800 20px "Noto Sans Georgian", sans-serif; color: var(--red); }
#page-family .fm-ir { display: flex; gap: 10px; justify-content: center; }

/* ---------- დადასტურება ---------- */
#page-family .fm-modal { position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; background: #000000b8; }
#page-family .fm-modal.on { display: flex; }
#page-family .fm-mbox { width: min(400px, 90%); padding: 22px; border-radius: 14px; background: #17171a; border: 1px solid #ffffff1a; text-align: center; box-shadow: 0 20px 50px #000; }
#page-family .fm-mbox h3 { font-size: 18px; margin-bottom: 8px; }
#page-family .fm-mbox p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }

#page-family .fm-toast { position: absolute; z-index: 9; left: 50%; bottom: 5vh; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; padding: 11px 20px; border-radius: 10px;
  background: #121214; color: var(--light); border: 1.5px solid var(--line); font-size: 13.5px; font-weight: 700; transition: .2s; white-space: nowrap; }
#page-family .fm-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#page-family .fm-toast.ok { border-color: var(--ok); color: var(--ok); }
#page-family .fm-toast.err { border-color: var(--err); color: var(--err); }

/* ---------- ორგანიზაციის ტიპი ---------- */
#page-family .fm-bt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#page-family .fm-type { display: inline-block; padding: 3px 10px; border-radius: 7px; border: 1px solid #ffffff30; background: #00000055; color: var(--light); font: 700 11.5px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .12em; }
#page-family .fm-ty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
#page-family .fm-ty button { padding: 7px 12px; border-radius: 9px; border: 1.5px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted); transition: .12s; }
#page-family .fm-ty button:hover { border-color: var(--light); color: var(--light); }
#page-family .fm-ty button.on { background: var(--red); border-color: var(--red); color: #fff; }
#page-family .fm-tdesc { margin-top: 7px; font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.45; }

@media (max-width: 760px) { #page-family .fm-create { grid-template-columns: 1fr; } }

/* ---------- პანელი: კომპაქტური ბანერი, ტაბები, პანე ---------- */
#page-family .fm-banner.fm-compact { padding: 11px 18px; }
#page-family .fm-banner.fm-compact .fm-bn { margin-top: 6px; font-size: 20px; }
#page-family .fm-tabs { flex-wrap: wrap; }
#page-family .fm-pane { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
#page-family .fm-empty { font-size: 12.5px; color: var(--muted); }
#page-family .fm-empty.pad { padding: 22px 8px; text-align: center; }

/* მიმოხილვა */
#page-family .fm-ov { display: flex; flex-direction: column; gap: 14px; }
#page-family .fm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#page-family .fm-stat { padding: 11px 14px; border-radius: 12px; background: #eaeaea0d; border: 1px solid var(--line); min-width: 0; }
#page-family .fm-stat small { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
#page-family .fm-stat b { display: block; font: 700 19px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-family .fm-stat b span { color: var(--muted); font-size: 14px; }
#page-family .fm-cap { display: flex; flex-direction: column; gap: 5px; }
#page-family .fm-cap small { font-size: 11px; color: var(--muted); }
#page-family .fm-capbar { height: 7px; border-radius: 4px; background: #eaeaea14; overflow: hidden; }
#page-family .fm-capbar i { display: block; height: 100%; border-radius: 4px; background: var(--fc); transition: width .3s; }
#page-family .fm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
#page-family .fm-card { padding: 14px 16px; border-radius: 12px; background: #eaeaea09; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#page-family .fm-card h4 { font: 700 12px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#page-family .fm-motd { font-size: 13.5px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
#page-family .fm-rl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#page-family .fm-rl b { font: 700 17px "Rajdhani", sans-serif; }
#page-family .fm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#page-family .fm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; background: #eaeaea10; font-size: 12px; font-weight: 600; }
#page-family .fm-chip .fm-dot { width: 7px; height: 7px; }

/* წევრები: ძებნა/ფილტრი */
#page-family .fm-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#page-family .fm-search { position: relative; flex: 1; min-width: 180px; }
#page-family .fm-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
#page-family .fm-search input { margin-top: 0; padding-left: 36px; }
#page-family .fm-flt { display: flex; border-radius: 9px; overflow: hidden; border: 1.5px solid var(--line); }
#page-family .fm-flt button { padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
#page-family .fm-flt button.on { background: var(--light); color: var(--black); }
#page-family .fm-slots { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
#page-family .fm-slots b { color: var(--light); }

/* ჟურნალი */
#page-family .fm-lg { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: #eaeaea09; border: 1px solid #eaeaea10; }
#page-family .fm-lk { flex: none; min-width: 92px; text-align: center; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; background: #eaeaea14; color: var(--muted); }
#page-family .fm-lk.ok { background: #30d15822; color: var(--ok); }
#page-family .fm-lk.bad { background: #ff453a22; color: #ff8a84; }
#page-family .fm-lt { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
#page-family .fm-lt i { font-style: normal; color: var(--muted); margin: 0 3px; }
#page-family .fm-lg small { flex: none; font-size: 11px; color: var(--muted); }

/* პარამეტრები */
#page-family .fm-set { display: flex; flex-direction: column; gap: 14px; }
#page-family .fm-card .fm-lab { display: block; }
#page-family .fm-card textarea, #page-family .fm-card input[type=text] { margin-top: 5px; }
#page-family .fm-hint { font-size: 11px; color: var(--muted); }
#page-family .fm-tg { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
#page-family .fm-tg b { display: block; font-size: 13px; }
#page-family .fm-tg small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
#page-family .fm-sw2 { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px; background: #eaeaea26; transition: .15s; }
#page-family .fm-sw2 i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; }
#page-family .fm-sw2.on { background: var(--ok); }
#page-family .fm-sw2.on i { transform: translateX(20px); }
#page-family .fm-setfoot { display: flex; gap: 10px; }
#page-family .fm-danger { border-color: #ff453a40; background: #ff453a0b; align-items: flex-start; }
#page-family .fm-danger p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
#page-family .fm-danger p svg { width: 13px; height: 13px; vertical-align: -2px; }

@media (max-width: 760px) { #page-family .fm-stats { grid-template-columns: repeat(2, 1fr); } #page-family .fm-cols { grid-template-columns: 1fr; } }