/* =========================================================================
   npc.css — NPC საუბარი (CEF.NPC = 34 / page-npc) + პირადობის ხელმოწერა (CEF.IDSIGN = 35 / page-idsign)
   ფერები: #ff4747 · #eaeaea · მუქი შავი. სელექტორები დასკოპულია, კლასები: np- / is-
   ========================================================================= */
#page-npc, #page-idsign {
  --red: #ff4747; --light: #eaeaea; --muted: #eaeaea8c; --black: #0a0a0a; --line: #eaeaea1f; --green: #38d977;
  font-family: "Noto Sans Georgian", "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--light); user-select: none;
}
#page-npc *, #page-idsign * { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- NPC საუბარი: ეკრანის ქვედა ნაწილში, ფონის დაბინდვის გარეშე ---------- */
#page-npc { align-items: flex-end; justify-content: center; background: linear-gradient(0deg, #000000a0 0%, transparent 55%); backdrop-filter: none; padding-bottom: 44px; }
#page-npc .np-box { width: min(760px, 94vw); padding: 18px 22px 16px; border-radius: 16px; background: #101012f2;
  border: 1px solid #ffffff14; box-shadow: 0 20px 60px #000000b0, 0 0 30px #ff474722; animation: npIn .35s cubic-bezier(.2,1.2,.4,1) both; }
#page-npc .np-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#page-npc .np-av { width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--red); color: var(--black); box-shadow: 0 0 16px #ff474788; }
#page-npc .np-av svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#page-npc .np-name { font: 700 20px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .06em; color: var(--red); line-height: 1; }
#page-npc .np-role { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
#page-npc .np-x { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--light); border-radius: 8px; padding: 5px 11px;
  cursor: pointer; font: inherit; font-size: 12px; transition: .15s; }
#page-npc .np-x:hover { border-color: var(--red); color: var(--red); }
#page-npc .np-text { font-size: 15px; line-height: 1.6; min-height: 48px; padding: 4px 2px 12px; }
#page-npc .np-opts { display: flex; flex-direction: column; gap: 8px; }
#page-npc .np-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--light); border: 1px solid var(--line); background: #eaeaea08;
  opacity: 0; transform: translateY(8px); transition: .16s; }
#page-npc .np-opts.ready .np-opt { opacity: 1; transform: none; }
#page-npc .np-opt:hover { border-color: var(--red); background: #ff47470f; box-shadow: inset 0 0 0 1px var(--red); transform: translateX(4px); }
#page-npc .np-opt i { flex: none; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font: 700 14px "Rajdhani", sans-serif; font-style: normal; color: var(--red); border: 1px solid var(--red); background: var(--black); }
@keyframes npIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- პირადობის მოწმობა: ხელმოწერის იმიტაცია ---------- */
#page-idsign { background: radial-gradient(60% 50% at 20% 0%, #ff474724, transparent 70%), linear-gradient(180deg, #0e0b0bf2 0%, #050505f2 100%); }
#page-idsign .is-card { width: min(640px, 94vw); padding: 24px 26px 22px; border-radius: 16px; background: #101012f2;
  border: 1px solid #ffffff14; box-shadow: 0 24px 70px #000000b0; animation: npIn .35s ease both; }
#page-idsign .is-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
#page-idsign .is-title { font: 700 26px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#page-idsign .is-title span { color: var(--red); }
#page-idsign .is-x { background: none; border: 1px solid var(--line); color: var(--light); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; transition: .15s; }
#page-idsign .is-x:hover { border-color: var(--red); color: var(--red); }
#page-idsign .is-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
#page-idsign .is-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
#page-idsign .is-info div { padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: #eaeaea08; }
#page-idsign .is-info small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#page-idsign .is-info b { font: 700 16px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .04em; }
#page-idsign .is-pad { position: relative; height: 170px; border-radius: 12px; border: 1px dashed #eaeaea44; background: #eaeaea0a; overflow: hidden; }
#page-idsign .is-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
#page-idsign .is-line { position: absolute; left: 18px; right: 18px; bottom: 38px; border-bottom: 1px solid #eaeaea55; pointer-events: none; }
#page-idsign .is-hint { position: absolute; left: 20px; bottom: 14px; font-size: 11.5px; color: var(--muted); pointer-events: none; }
#page-idsign .is-pad.has .is-hint { opacity: 0; }
#page-idsign .is-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
#page-idsign .is-note { font-size: 12px; color: var(--muted); }
#page-idsign .is-act { display: flex; gap: 9px; }
#page-idsign .is-btn { padding: 10px 20px; border-radius: 10px; cursor: pointer; font: 700 14px "Noto Sans Georgian", sans-serif; transition: .15s;
  color: var(--black); background: var(--red); border: 1px solid var(--red); }
#page-idsign .is-btn:hover:not(:disabled) { box-shadow: 0 0 18px #ff474788; transform: translateY(-1px); }
#page-idsign .is-btn:disabled { opacity: .35; cursor: not-allowed; }
#page-idsign .is-btn.ghost { color: var(--light); background: none; border-color: var(--line); }
#page-idsign .is-btn.ghost:hover:not(:disabled) { border-color: var(--red); color: var(--red); box-shadow: none; }
#page-idsign .is-done { display: none; text-align: center; padding: 26px 0 8px; }
#page-idsign .is-done b { display: block; font: 700 22px "Rajdhani", "Noto Sans Georgian", sans-serif; color: var(--green); letter-spacing: .05em; }
#page-idsign .is-done p { font-size: 13px; color: var(--muted); margin-top: 6px; }
#page-idsign.signed .is-body { display: none; }
#page-idsign.signed .is-done { display: block; }