/* ============================================================================
   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; }
}