/* ============================================================================
   AI Karyakarta — design system
   Dark-first "control room" look: deep navy ground, one warm accent (amber) for
   action, green/red only for state. Light mode is opt-in via [data-theme=light].
   Sab kuch tokens se — koi bhi color/spacing yahin badalna, templates me nahi.
   ========================================================================= */
:root {
  --ground:#0C1220; --ground-2:#101A2C;
  --surface:#151F33; --surface-2:#1B273E; --surface-3:#22304A;
  --line:rgba(140,170,220,.14); --line-soft:rgba(140,170,220,.08);
  --ink:#EDF3FF; --ink-dim:#9FB2D4; --ink-faint:#6B7E9F;

  --accent:#FFB020; --accent-2:#FF8A3D; --accent-soft:rgba(255,176,32,.13);
  --brand:#4C8DFF; --brand-soft:rgba(76,141,255,.14);
  --good:#15E08C; --good-soft:rgba(21,224,140,.13);
  --bad:#FF4F6B;  --bad-soft:rgba(255,79,107,.13);
  --warn:#FFC53D; --warn-soft:rgba(255,197,61,.13);

  --radius:16px; --radius-sm:11px; --radius-lg:22px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px rgba(0,0,0,.45);
  --shadow-sm:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.28);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sys:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --maxw:1140px;
}
:root[data-theme="light"] {
  --ground:#F4F6FB; --ground-2:#FFFFFF;
  --surface:#FFFFFF; --surface-2:#F5F7FC; --surface-3:#EAEFF8;
  --line:#DEE5F1; --line-soft:#EBF0F8;
  --ink:#0B1424; --ink-dim:#46556F; --ink-faint:#74829B;
  --shadow:0 1px 2px rgba(15,22,38,.05), 0 12px 30px rgba(15,25,45,.09);
  --shadow-sm:0 1px 2px rgba(15,22,38,.05), 0 5px 14px rgba(15,25,45,.07);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink); font-family:var(--sys); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(1200px 620px at 8% -10%, rgba(255,176,32,.10), transparent 62%),
    radial-gradient(1000px 560px at 96% -4%, rgba(76,141,255,.12), transparent 60%),
    var(--ground);
  background-attachment:fixed;
}
img,svg { max-width:100%; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.18; letter-spacing:-.022em; margin:0; }
p { margin:0 0 12px; }
ul { margin:0 0 12px; padding-left:20px; }
li { margin-bottom:7px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.eyebrow { font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
           text-transform:uppercase; color:var(--ink-faint); }
.mut { color:var(--ink-dim); }
.faint { color:var(--ink-faint); font-size:13px; }
.center { text-align:center; }

/* ---------------- header ---------------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.site-header .bar { display:flex; align-items:center; gap:18px; height:64px;
                    max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.brand:hover { text-decoration:none; }
.brand-mark { width:30px; height:30px; flex:none;
  filter:drop-shadow(0 2px 8px rgba(255,176,32,.35)); }
.brand-text { font-size:16.5px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.brand-text span { color:var(--ink-faint); font-weight:600; }
.nav { display:flex; align-items:center; gap:3px; margin-left:auto; flex-wrap:wrap; }
.nav a { color:var(--ink-dim); font-size:13.5px; font-weight:600; padding:8px 12px;
         border-radius:9px; text-decoration:none; transition:.15s; }
.nav a:hover { color:var(--ink); background:var(--surface-2); text-decoration:none; }
.nav a.active { color:var(--ink); background:var(--surface-2); }
.who { font-family:var(--mono); font-size:11px; color:var(--ink-faint);
       max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------------- buttons ---------------- */
.btn, button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  padding:10px 17px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .06s, filter .15s, background .15s;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#1A1102;
  box-shadow:0 6px 18px rgba(255,138,61,.22);
}
.btn:hover, button:hover { filter:brightness(1.07); text-decoration:none; }
.btn:active, button:active { transform:translateY(1px); }
.btn-lg { padding:13px 24px; font-size:15px; border-radius:13px; }
.btn-block { width:100%; }
.btn-ghost, button.btn-ghost {
  background:transparent; color:var(--ink-dim); border-color:var(--line); box-shadow:none; }
.btn-ghost:hover { color:var(--ink); background:var(--surface-2); }
.btn-mut, button.btn-mut {
  background:var(--surface-3); color:var(--ink); border-color:var(--line); box-shadow:none; }
.btn-bad, button.btn-bad { background:var(--bad); color:#fff; box-shadow:none; }
.btn-fb, button.btn-fb {
  background:linear-gradient(135deg,#1877F2,#0C5DC7); color:#fff;
  box-shadow:0 6px 18px rgba(24,119,242,.28); }
button[disabled], .btn[disabled] { opacity:.42; cursor:not-allowed; filter:none; box-shadow:none; }
.inline { display:inline; }

/* ---------------- cards & layout ---------------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
        padding:22px; box-shadow:var(--shadow-sm); }
.card-pad-lg { padding:30px 28px; }
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.section { padding:58px 0; }
.section-head { max-width:660px; margin:0 0 26px; }
.section-head h2 { font-size:27px; margin:9px 0 10px; }
.section-head p { color:var(--ink-dim); font-size:15px; margin:0; }

/* ---------------- hero ---------------- */
.hero { padding:66px 0 48px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  background:var(--brand-soft); border:1px solid rgba(76,141,255,.3);
  color:#A9C7FF; font-size:12px; font-weight:650; margin-bottom:20px; }
.hero h1 { font-size:46px; letter-spacing:-.035em; margin:0 0 16px; max-width:15ch; }
.hero h1 .hl {
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:17px; color:var(--ink-dim); max-width:56ch; margin:0 0 26px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-note { margin-top:20px; font-size:12.5px; color:var(--ink-faint); }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center; }

/* live demo panel in hero */
.demo { background:linear-gradient(180deg,var(--surface),var(--ground-2));
        border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px;
        box-shadow:var(--shadow); }
.demo-head { display:flex; align-items:center; gap:7px; padding:2px 4px 12px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--surface-3); }
.demo-title { margin-left:6px; font-size:11px; font-family:var(--mono); color:var(--ink-faint); }
.cmt { display:flex; gap:10px; padding:11px 12px; border-radius:12px; margin-bottom:9px;
       background:var(--surface-2); border:1px solid var(--line-soft); font-size:13px; }
.cmt .av { width:26px; height:26px; border-radius:50%; flex:none;
           background:linear-gradient(135deg,#31446A,#22304A); }
.cmt .body { flex:1; min-width:0; }
.cmt .who2 { font-weight:700; font-size:12.5px; }
.cmt .txt { color:var(--ink-dim); font-size:12.5px; }
.cmt.hidden-c { opacity:.62; }
.cmt.hidden-c .txt { text-decoration:line-through; }

/* ---------------- pills / tags ---------------- */
.pill { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
        font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
        padding:4px 10px; border-radius:999px; }
.pill-good { background:var(--good-soft); color:var(--good); }
.pill-warn { background:var(--warn-soft); color:var(--warn); }
.pill-bad  { background:var(--bad-soft);  color:var(--bad); }
.pill-mut  { background:var(--surface-3); color:var(--ink-faint); }
.pill-brand{ background:var(--brand-soft); color:#8FB6FF; }

/* ---------------- steps ---------------- */
.step { position:relative; }
.step .num { width:34px; height:34px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:14px; margin-bottom:13px;
  background:var(--accent-soft); color:var(--accent); border:1px solid rgba(255,176,32,.28); }
.step h3 { font-size:16px; margin-bottom:7px; }
.step p { color:var(--ink-dim); font-size:13.5px; margin:0; }

/* ---------------- tables ---------------- */
.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
            background:var(--surface); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th,td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-soft);
        vertical-align:top; }
th { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
     font-weight:700; background:var(--surface-2); }
tr:last-child td { border-bottom:none; }
td code, code { font-family:var(--mono); font-size:12px; color:var(--ink);
  background:var(--surface-3); padding:2px 7px; border-radius:6px; }

/* ---------------- forms ---------------- */
label { display:block; margin:14px 0 6px; font-size:12.5px; font-weight:650; color:var(--ink-dim); }
input[type=text],input[type=email],input[type=password],select,textarea {
  width:100%; padding:11px 13px; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:.15s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.auth-wrap { max-width:430px; margin:52px auto; }
.auth-wrap .card { padding:30px 28px; }
.hint { font-size:12px; color:var(--ink-faint); margin-top:6px; }

/* ---------------- flash ---------------- */
.flash { padding:12px 15px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:13.5px;
         border:1px solid var(--line); background:var(--surface); }
.flash.good { border-color:rgba(21,224,140,.4); background:var(--good-soft); }
.flash.bad  { border-color:rgba(255,79,107,.4); background:var(--bad-soft); }
.flash.warn { border-color:rgba(255,197,61,.4); background:var(--warn-soft); }

/* ---------------- app (logged-in) ---------------- */
.page-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:26px 0 20px; }
.page-head h1 { font-size:25px; }
.page-head .spacer { flex:1; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
        padding:18px 19px; box-shadow:var(--shadow-sm); }
.stat .n { font-size:30px; font-weight:800; letter-spacing:-.035em; margin:8px 0 2px;
           font-variant-numeric:tabular-nums; }
.conn-row { display:flex; align-items:center; gap:15px; flex-wrap:wrap;
            padding:16px 0; border-bottom:1px solid var(--line-soft); }
.conn-row:last-child { border-bottom:none; }
.conn-row .grow { flex:1; min-width:190px; }
.conn-row .name { font-weight:750; font-size:15px; }
.conn-row .meta { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.conn-row .acts { display:flex; gap:8px; flex-wrap:wrap; }
.avatar { width:40px; height:40px; border-radius:12px; flex:none; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:15px;
  background:linear-gradient(135deg,var(--surface-3),var(--surface-2)); color:var(--ink-dim);
  border:1px solid var(--line); }
.empty { text-align:center; padding:46px 24px; }
.empty .ring { width:74px; height:74px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--accent-soft);
  border:1px solid rgba(255,176,32,.3); }
.empty h2 { font-size:21px; margin-bottom:9px; }
.empty p { color:var(--ink-dim); max-width:46ch; margin:0 auto 20px; }

/* picker */
.pick { display:flex; gap:13px; align-items:flex-start; padding:15px; margin-bottom:11px;
        background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
        transition:.15s; }
.pick:hover { border-color:rgba(255,176,32,.35); }
.pick input[type=checkbox] { width:19px; height:19px; margin-top:2px; accent-color:var(--accent);
  flex:none; cursor:pointer; }
.pick .grow { flex:1; min-width:0; }
.opt { display:flex; gap:9px; align-items:flex-start; margin-top:11px; padding-top:11px;
       border-top:1px dashed var(--line); font-size:12.5px; color:var(--ink-dim); }

/* ---------------- footer ---------------- */
.site-footer { border-top:1px solid var(--line); margin-top:56px;
               background:color-mix(in srgb, var(--ground-2) 70%, transparent); }
.site-footer .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px;
                     padding:42px 0 28px; }
.site-footer h4 { font-size:11px; letter-spacing:.13em; text-transform:uppercase;
                  color:var(--ink-faint); margin:0 0 12px; font-weight:700; }
.site-footer a { display:block; color:var(--ink-dim); font-size:13.5px; margin-bottom:9px; }
.site-footer a:hover { color:var(--ink); }
.site-footer .legal { border-top:1px solid var(--line-soft); padding:16px 0 30px;
  font-size:12.5px; color:var(--ink-faint); display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------- responsive ---------------- */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:26px; }
  .hero h1 { font-size:35px; max-width:none; }
  .g3,.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  body { font-size:14.5px; }
  .hero { padding:40px 0 30px; }
  .hero h1 { font-size:29px; }
  .g2,.g3,.g4 { grid-template-columns:1fr; }
  .section { padding:40px 0; }
  .section-head h2 { font-size:22px; }
  .site-header .bar { height:auto; padding:11px 16px; flex-wrap:wrap; gap:10px; }
  .nav { width:auto; margin-left:auto; gap:2px; }
  /* Phone pe sirf action links — section anchors (How it works/Permissions/Security)
     scroll karne ke liye hain, aur mobile pe do-teen line ka header bana dete the. */
  .nav a[href*="#"] { display:none; }
  .nav a { padding:7px 9px; font-size:12.5px; }
  .btn, button { padding:9px 13px; }
  .who { display:none; }
  .wrap { padding:0 16px; }
  .card { padding:18px; }
}


/* Live feed: hidden hote hue comment ka effect (AAP tool jaisa) */
.cmt-hiding { animation: cmt-flash 1.4s ease-out; }
@keyframes cmt-flash {
  0%   { background: rgba(255, 197, 61, .18); }
  100% { background: transparent; }
}
/* Hidden comment padhne layak rahe — line-through hata diya (2026-09-29).
   Pehchan ab laal 'Hidden' pill aur card ke baayein laal patti se hoti hai. */
.txt-gone { opacity: .92; }
.cmt.was-hidden { border-left: 3px solid var(--bad); padding-left: 9px; }


/* ---------------- Radar (dashboard) ---------------- */
.radar-card { position: relative; overflow: hidden; }
.radar {
  position: relative; width: 104px; height: 104px; flex: 0 0 104px;
  border-radius: 50%; background: radial-gradient(circle at 50% 50%,
    rgba(21, 224, 140, .10) 0%, rgba(21, 224, 140, .03) 60%, transparent 70%);
  border: 1px solid rgba(21, 224, 140, .35);
}
.radar .ring {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid rgba(21, 224, 140, .18);
}
.radar .ring.r1 { width: 68%; height: 68%; }
.radar .ring.r2 { width: 36%; height: 36%; }
.radar .dot {
  position: absolute; inset: 0; margin: auto; width: 6px; height: 6px;
  border-radius: 50%; background: var(--good, #15e08c);
  box-shadow: 0 0 10px 2px rgba(21, 224, 140, .55);
}
/* sweep = ek chauthai pie jo ghoomti hai */
.radar .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(21, 224, 140, .35) 0deg,
              rgba(21, 224, 140, .06) 45deg, transparent 90deg, transparent 360deg);
  animation: radar-spin 3.2s linear infinite;
}
.radar.idle .sweep { animation-play-state: paused; opacity: .25; }
.radar.idle { border-color: rgba(255, 255, 255, .16); }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .radar .sweep { animation: none; opacity: .3; }
}


/* Radar blips + rotating feed */
.radar .blip {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--good, #15e08c);
  box-shadow: 0 0 8px 2px rgba(21, 224, 140, .5);
  animation: blip-fade 1.8s ease-out forwards;
}
@keyframes blip-fade {
  0%   { opacity: 0; transform: scale(.4); }
  18%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
.cmt-out { animation: cmt-drop .52s ease-in forwards; }
.cmt-in  { animation: cmt-rise .9s ease-out; }
@keyframes cmt-drop {
  to { opacity: 0; transform: translateY(14px); }
}
@keyframes cmt-rise {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .radar .blip { animation-duration: .01s; }
  .cmt-out, .cmt-in { animation: none; }
}


/* ---------- Radar scan console (live scan ki asli lines) ---------- */
.scan-wrap {
  display: grid; grid-template-columns: 132px 1fr; gap: 12px; margin-top: 14px;
  align-items: stretch;
}
@media (max-width: 720px) { .scan-wrap { grid-template-columns: 1fr; } }
.lanes { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.lane { position: relative; display: flex; align-items: center; gap: 8px; height: 22px; }
.src {
  font: 600 10.5px/1 ui-monospace, monospace; letter-spacing: .5px;
  padding: 5px 7px; border-radius: 6px; flex: 0 0 auto;
}
.src-fb { background: rgba(24, 119, 242, .18); color: #7cb4ff; }
.src-ig { background: rgba(214, 41, 118, .18); color: #ff8fc0; }
.track {
  position: relative; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  overflow: hidden;
}
/* packet = ek chhoti roshni jo post aane par lane me daudti hai */
.packet {
  position: absolute; top: -3px; left: -10px; width: 16px; height: 8px;
  border-radius: 4px; background: var(--good, #15e08c);
  box-shadow: 0 0 10px 2px rgba(21, 224, 140, .45);
  animation: packet-run 1.15s linear forwards;
}
.packet.bad { background: var(--bad, #ff5470); box-shadow: 0 0 10px 2px rgba(255, 84, 112, .5); }
@keyframes packet-run {
  from { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  to   { transform: translateX(var(--run, 260px)); opacity: 0; }
}
.console {
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0, 0, 0, .30); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px; padding: 10px 12px; height: 132px; overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
}
.console .l { opacity: 0; animation: line-in .45s ease-out forwards; }
.console .t { color: rgba(255, 255, 255, .38); }
.console .ok { color: var(--good, #15e08c); }
.console .warn { color: var(--warn, #ffc53d); }
.console .bad { color: var(--bad, #ff5470); }
.console .dim { color: rgba(255, 255, 255, .55); }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .packet { animation-duration: .01s; }
  .console .l { animation: none; opacity: 1; }
}