/* Lead Hunter Admin — same "Mission Control" look as the two extensions: dark console, green accent,
   rounded cards, pill buttons, mono numbers. Facebook items use the Meta blue, Maps items the green. */
:root {
  color-scheme: dark;
  --v300: #6FD28F; --v400: #4CC26E; --v500: #34A853; --v600: #1E8E3E; --v700: #187432; --v800: #135A29;
  --bg: #070E0B; --bg-2: #0A140F; --panel: #0E1B15; --panel-2: #13261D;
  --line: #1E382B; --line-soft: #172D22;
  --text: #EAFBF1; --dim: #9FC2AE; --faint: #66897A;
  --ok: #4ADE9E; --ok-bg: rgba(74, 222, 158, .12);
  --warn: #F5B84A; --warn-bg: rgba(245, 184, 74, .13);
  --bad: #FF7A85; --bad-bg: rgba(255, 122, 133, .13);
  --fb: #5B9BFF; --fb-bg: rgba(24, 119, 242, .16);
  --r-xl: 20px; --r-lg: 14px; --r-md: 10px;
  --glow: 0 0 0 1px rgba(76, 194, 110, .35), 0 8px 28px rgba(30, 142, 62, .28);
  --ring: 0 0 0 3px rgba(76, 194, 110, .28);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1000px 520px at 78% -8%, rgba(30, 142, 62, .22), transparent 60%), var(--bg); background-attachment: fixed; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
a { color: var(--v300); }
::selection { background: var(--v600); color: #fff; }
:focus-visible { outline: 2px solid var(--v400); outline-offset: 2px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--v800); border-radius: 99px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* inputs */
input, select, textarea { width: 100%; padding: 10px 12px; outline: none; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s, background .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--v400); box-shadow: var(--ring); background: var(--bg); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--v500); padding: 0; }
textarea { resize: vertical; min-height: 70px; }
select { appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234CC26E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
option { background: var(--panel); color: var(--text); }
label { display: block; color: var(--dim); font-size: 12px; font-weight: 600; margin: 12px 0 5px; }

/* buttons */
button { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-2); color: var(--v300); font-weight: 650; font-size: 13px; transition: .15s; }
button:hover:not(:disabled) { border-color: var(--v500); color: #fff; }
button:disabled { opacity: .4; cursor: default; }
button.pri { background: rgba(76, 194, 110, .16); border-color: var(--v500); color: #DFF9E8; }
button.pri:hover:not(:disabled) { background: var(--v700); border-color: var(--v400); box-shadow: var(--glow); }
button.bad { color: var(--bad); }
button.bad:hover:not(:disabled) { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
button.sm { padding: 3px 11px; font-size: 12px; }

/* login (same look as the extension's license gate) */
.login { max-width: 360px; margin: 14vh auto 0; padding: 30px 26px 26px; background: var(--panel); border: 1px solid rgba(76, 194, 110, .4);
  border-radius: 24px; box-shadow: var(--glow); }
.login .brand { display: flex; justify-content: center; margin-bottom: 14px; }
.login h1 { text-align: center; font-size: 19px; margin-bottom: 4px; }
.login .sub { text-align: center; color: var(--dim); font-size: 12.5px; margin-bottom: 8px; }
.login button { width: 100%; padding: 11px; margin-top: 8px; }
.markBox { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--v300); }
.markBox svg { width: 26px; height: 26px; }

/* shell */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
nav { background: rgba(14, 27, 21, .86); backdrop-filter: blur(8px); border-right: 1px solid var(--line); padding: 18px 12px;
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
nav .brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; }
nav .brand .markBox { width: 38px; height: 38px; border-radius: 12px; }
nav .brand .markBox svg { width: 21px; height: 21px; }
nav .brand b { display: block; font-size: 14.5px; line-height: 1.15; }
nav .brand small { color: var(--faint); font-family: var(--mono); font-size: 10.5px; }
nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-md); color: var(--dim); cursor: pointer;
  font-weight: 600; border: 1px solid transparent; transition: .15s; }
nav a svg { width: 18px; height: 18px; flex: none; }
nav a:hover { background: var(--panel-2); color: var(--text); }
nav a.on { background: rgba(76, 194, 110, .15); border-color: rgba(76, 194, 110, .4); color: #fff; }
nav a.on svg { color: var(--v400); }
nav .grow { flex: 1; }
main { padding: 26px 30px 50px; min-width: 0; max-width: 1280px; }
h2 { font-size: 22px; letter-spacing: -.01em; margin-bottom: 18px; }
h3 { font-size: 14px; margin: 4px 0 10px; color: var(--text); }
.mute { color: var(--dim); }
.mute.small, .small { font-size: 12px; }
p.mute { margin-bottom: 14px; }

/* stat cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; }
.card b { display: block; font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1.1; color: #fff; text-shadow: 0 0 22px rgba(76, 194, 110, .45); }
.card span { color: var(--dim); font-size: 12px; }
.card.warn b { color: var(--warn); text-shadow: 0 0 22px rgba(245, 184, 74, .4); }
.card.bad b { color: var(--bad); text-shadow: 0 0 22px rgba(255, 122, 133, .4); }

.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px; margin-bottom: 16px; }
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { color: var(--faint); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click:hover td { background: rgba(76, 194, 110, .07); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 140px; }
.row > .fit { flex: none; min-width: 0; }
.row label { margin-top: 0; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.empty { color: var(--faint); padding: 8px 0; }

/* chips */
.tag, .chip { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.t-active { background: var(--ok-bg); border-color: rgba(74, 222, 158, .35); color: var(--ok); }
.t-unused { background: rgba(111, 210, 143, .09); color: var(--v300); }
.t-expired, .t-revoked { background: var(--bad-bg); border-color: rgba(255, 122, 133, .35); color: var(--bad); }
.t-suspended { background: var(--warn-bg); border-color: rgba(245, 184, 74, .35); color: var(--warn); }
.chip.p-facebook-ads { background: var(--fb-bg); border-color: rgba(91, 155, 255, .4); color: var(--fb); }
.chip.p-google-maps { background: rgba(76, 194, 110, .14); border-color: rgba(76, 194, 110, .4); color: var(--v300); }
.chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.flag { color: var(--warn); }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(3, 8, 5, .72); backdrop-filter: blur(3px); display: flex; align-items: flex-start;
  justify-content: center; padding: 5vh 14px; overflow: auto; z-index: 5; }
.modal > div { background: var(--panel); border: 1px solid rgba(76, 194, 110, .35); border-radius: 22px; padding: 22px; width: min(780px, 100%); box-shadow: var(--glow); }
.modal h2 { margin-bottom: 10px; }
.msg { padding: 10px 14px; border-radius: var(--r-md); margin: 12px 0; background: var(--ok-bg); color: var(--ok); border: 1px solid rgba(74, 222, 158, .25); }
.msg.err { background: var(--bad-bg); color: var(--bad); border-color: rgba(255, 122, 133, .3); }
.keys { white-space: pre; user-select: all; font-family: var(--mono); font-size: 12.5px; background: var(--bg-2); border: 1px solid var(--line);
  padding: 12px 14px; border-radius: var(--r-md); max-height: 280px; overflow: auto; color: var(--v300); }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px; gap: 4px; }
  nav .brand { width: 100%; padding-bottom: 8px; }
  nav a { padding: 7px 10px; }
  nav a span { display: none; }
  nav .grow { display: none; }
  main { padding: 18px 14px 40px; }
}

td.mono, td .mono { white-space: nowrap; }
a.pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--v300); font-weight: 650; font-size: 13px; text-decoration: none; }
a.pill:hover { border-color: var(--v500); color: #fff; }