html.ui-ig {
  --ink: #0e1420;
  --ink-2: #121a29;
  --card: #161f31;
  --card-2: #1c2740;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --soft: #a7b2c6;
  --cream: #f6f4ef;
  --brand: #2f7fe8;
  --brand-hi: #5b9cff;
  --display: "Outfit", "Segoe UI", sans-serif;
  --body: "Figtree", "Segoe UI", sans-serif;

  --bg: var(--ink);
  --rail: var(--ink-2);
  --panel: var(--ink-2);
  --section: var(--card);
  --section-border: var(--line);
  --accent: var(--brand);
  --accent-light: var(--brand-hi);
  --blue: #ffffff;
  --link: var(--brand-hi);
  --link-hover: #8cbcff;
  --text: #e6ebf3;
  --text-strong: #ffffff;
  --muted: #8994a9;
  --control: #0b111c;
  --control-border: var(--line-2);
  --control-text: #e6ebf3;
  --check: var(--brand);
  --error-bg: rgba(255, 107, 107, .08);
  --error-border: rgba(255, 107, 107, .35);
  --success: #38c793;
}

html.ui-ig body { font-family: var(--body); background: var(--ink); }

html.ui-ig .topbar { background: rgba(14, 20, 32, .86); border-bottom: 1px solid var(--line); font-family: var(--body); }
html.ui-ig .topbar::before { display: none; }
html.ui-ig .logo { border-radius: 9px; background: var(--brand); box-shadow: none; }
html.ui-ig .topbar { backdrop-filter: none; }
html.ui-ig .dropdown, html.ui-ig .modal, html.ui-ig .toast, html.ui-ig .palette, html.ui-ig .subpanel { box-shadow: none; }
html.ui-ig .modal-bg { background: rgba(8, 12, 20, .78); }
html.ui-ig .modal, html.ui-ig .dropdown, html.ui-ig .palette { border-color: var(--line-2); }
html.ui-ig .search-trigger { background: var(--card); border-color: var(--line); border-radius: 10px; }
html.ui-ig .search-trigger .kbd, html.ui-ig .breadcrumb .count { background: var(--card-2); }
html.ui-ig .live-pill { background: var(--card); border: 1px solid var(--line); font-weight: 600; }
html.ui-ig .live-pill.on { background: rgba(56, 199, 147, .14); border-color: rgba(56, 199, 147, .4); }
html.ui-ig .live-pill.on .d { background: var(--success); }
html.ui-ig .user-chip { border-left-color: var(--line); }
html.ui-ig .dropdown { background: var(--card); border-color: var(--line); border-radius: 14px; font-family: var(--body); }
html.ui-ig .dropdown a, html.ui-ig .dropdown .item { border-radius: 10px; color: var(--text); }
html.ui-ig .dropdown a:hover, html.ui-ig .dropdown .item:hover { background: var(--card-2); color: #fff; }

html.ui-ig .nav { background: var(--ink-2); border-right: 1px solid var(--line); font-family: var(--body); }
html.ui-ig .rail { border-right: 1px solid var(--line); }
html.ui-ig .rail-item .ic { border-radius: 12px; }
html.ui-ig .rail-item .lbl { color: var(--soft); font-weight: 500; }
html.ui-ig .rail-item.active .lbl { color: #fff; }
html.ui-ig .rail-item.active::before { background: var(--brand); }
html.ui-ig .sp-item { border-radius: 10px; font-weight: 500; color: var(--soft); }
html.ui-ig .sp-item:hover { background: var(--card); color: #fff; }
html.ui-ig .sp-item.active { background: var(--brand); color: #fff; }
html.ui-ig .sp-sub { border-left-color: var(--line-2); }
html.ui-ig .upgrade { background: var(--card); border-color: var(--line); border-radius: 12px; }
html.ui-ig .upgrade:hover { background: var(--card-2); }
html.ui-ig .pro-badge { font-family: var(--display); font-weight: 800; font-size: 11px; color: var(--ink); background: #fff; border-radius: 5px; padding: 3px 6px; }
html.ui-ig .new-badge { font-family: var(--display); font-weight: 800; font-size: 11px; background: var(--brand); border-radius: 5px; }
html.ui-ig .search-trigger .kbd, html.ui-ig .breadcrumb .count, html.ui-ig .user-chip .l2 { font-size: 12px; }

html.ui-ig .content { padding-top: 8px; }
html.ui-ig h2.blueheading { font: 800 34px/1.1 var(--display); letter-spacing: -.02em; color: #fff; margin: 28px 0 18px; }
html.ui-ig h3.blueheading { font: 700 21px/1.2 var(--display); letter-spacing: -.01em; color: #fff; margin: 0 0 16px; }
html.ui-ig h4.subheading { font: 700 17px var(--display); color: #fff; }
html.ui-ig .section { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-top: 24px; }
html.ui-ig .section + .section { margin-top: 24px; }
html.ui-ig .page p, html.ui-ig .page .desc { color: var(--soft); }
html.ui-ig .info-box { background: rgba(47, 127, 232, .1); border-color: rgba(47, 127, 232, .35); border-radius: 12px; }
html.ui-ig .warn-box { border-radius: 12px; }
html.ui-ig .err-box { border-radius: 12px; color: #ffd0d0; }

html.ui-ig .btn { height: 38px; border-radius: 10px; background: var(--card-2); border-color: var(--line-2); font-family: var(--body); font-weight: 600; }
html.ui-ig .btn:hover { background: #24304b; }
html.ui-ig .btn.primary { background: var(--brand); border-color: var(--brand); }
html.ui-ig .btn.primary:hover { background: #2a71cf; }
html.ui-ig .btn.big { height: 52px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
html.ui-ig .btn.small { height: 30px; border-radius: 8px; }
html.ui-ig .input, html.ui-ig select.input, html.ui-ig textarea.input { border-radius: 10px; height: 38px; font-family: var(--body); }
html.ui-ig textarea.input { height: auto; }
html.ui-ig .input:focus { border-color: var(--brand); box-shadow: none; }
html.ui-ig .check .box { border-radius: 6px; }
html.ui-ig .switch input:checked + .tr { background: var(--brand); }

html.ui-ig .grid-wrap { background: var(--ink-2); border-color: var(--line); border-radius: 14px; }
html.ui-ig table.grid th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-color: var(--line); padding: 12px 10px; }
html.ui-ig table.grid td { border-bottom-color: var(--line); padding: 10px; }
html.ui-ig table.grid tr:hover td { background: rgba(255, 255, 255, .025); }

html.ui-ig .modal { background: var(--card); border-color: var(--line); border-radius: 18px; }
html.ui-ig .modal-head { font: 700 19px var(--display); border-bottom-color: var(--line); padding: 16px 20px; }
html.ui-ig .modal-body { padding: 20px; }
html.ui-ig .modal-foot { border-top-color: var(--line); padding: 14px 20px; }
html.ui-ig .toast { background: var(--card-2); border-radius: 12px; font-family: var(--body); }
html.ui-ig .palette { background: var(--card); border-color: var(--line); border-radius: 16px; font-family: var(--body); }
html.ui-ig #splash { background: var(--ink); }
html.ui-ig .splash-spin path { stroke: var(--brand); }

html.ui-ig .feed .ev { background: var(--ink-2); border-radius: 10px; }
html.ui-ig details.faq { background: none; }
html.ui-ig .start-faq details.faq { border-bottom: 1px solid var(--line); padding: 12px 0; margin: 0; }
html.ui-ig .start-faq details.faq summary { font-weight: 600; color: #fff; }
html.ui-ig .start-faq details.faq p { color: var(--soft); margin: 8px 0 0; }
html.ui-ig .start-news { background: var(--card) !important; }
html.ui-ig .start-vlist a { color: var(--brand-hi); }
html.ui-ig .stat-tile { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
html.ui-ig .stat-tile .v { font: 800 30px/1 var(--display); letter-spacing: -.02em; }
html.ui-ig .stat-tile .k { color: var(--muted); margin-top: 6px; }

html.ui-ig .ig-hero { padding: 56px 0 28px; max-width: 900px; }
html.ui-ig .ig-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
html.ui-ig .ig-tags span {
  display: inline-block; background: #fff; color: var(--ink); border-radius: 10px; padding: 4px 16px 8px;
  font: 800 clamp(36px, 6vw, 68px)/1.05 var(--display); letter-spacing: -.035em;
}
html.ui-ig .ig-tags span:nth-child(odd) { transform: rotate(-1.2deg); }
html.ui-ig .ig-tags span:nth-child(even) { transform: rotate(.8deg); margin-left: 6px; }
html.ui-ig .ig-tags span.blue { background: var(--brand); color: #fff; }
html.ui-ig .ig-sub { margin: 28px 0 0; max-width: 560px; font-size: 19px; line-height: 1.5; color: var(--soft); }
html.ui-ig .ig-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
html.ui-ig .ig-cta .start-cta { background: var(--card-2); border-color: var(--line-2); }

html.ui-ig .ig-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 32px; align-items: center; }
html.ui-ig .ig-live-title { font: 800 clamp(34px, 4.6vw, 52px)/1.05 var(--display); letter-spacing: -.03em; color: #fff; margin: 4px 0 10px; }
html.ui-ig .ig-live-title.on { color: var(--success); }
html.ui-ig .ig-live-title.wait { color: #ffbf3c; }
html.ui-ig .ig-step { font: 800 22px var(--display); color: var(--brand); }
html.ui-ig .ig-live-text { color: var(--soft); font-size: 16px; line-height: 1.5; margin: 0; max-width: 460px; }
html.ui-ig .ig-live-form { display: flex; flex-direction: column; gap: 10px; }
html.ui-ig .ig-live-form .input { height: 52px; font-size: 16px; border-radius: 14px; padding: 0 16px; }
html.ui-ig .ig-live-form .btn { justify-content: center; }
html.ui-ig .ig-live-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; grid-column: 1 / -1; }

html.ui-ig .ig-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
html.ui-ig .ig-steps-t { font: 800 24px/1.1 var(--display); letter-spacing: -.02em; color: #fff; margin: 6px 0 8px; }

html.ui-ig .ig-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
html.ui-ig .ig-quick a { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; color: #fff; transition: border-color .15s, transform .15s; }
html.ui-ig .ig-quick a:hover { border-color: var(--brand); }
html.ui-ig .ig-quick .qi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; background: var(--card-2); }
html.ui-ig .ig-quick .qt { font: 700 17px var(--display); letter-spacing: -.01em; }
html.ui-ig .ig-quick .qd { font-size: 14px; color: var(--soft); line-height: 1.4; }

@media (max-width: 900px) {
  html.ui-ig .ig-live { grid-template-columns: 1fr; gap: 18px; }
  html.ui-ig .ig-hero { padding-top: 32px; }
}
@media (max-width: 640px) {
  html.ui-ig .ig-sub { font-size: 17px; }
  html.ui-ig .section { padding: 18px; border-radius: 14px; }
  html.ui-ig h2.blueheading { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html.ui-ig .ig-quick a { transition: none; }
  html.ui-ig .ig-quick a:hover { transform: none; }
}

html.ui-ig .rail { gap: 6px; padding: 12px 8px; }
html.ui-ig .rail-item { padding: 4px 0; }
html.ui-ig .rail-item .ic { color: var(--soft) !important; width: 40px; height: 36px; border-radius: 10px; font-size: 16px; }
html.ui-ig .rail-item .ic i { color: inherit !important; }
html.ui-ig .rail-item .ic::before { background: transparent; opacity: 1; }
html.ui-ig .rail-item:hover .ic { color: #fff !important; }
html.ui-ig .rail-item:hover .ic::before { background: var(--card); }
html.ui-ig .rail-item.active .ic { color: #fff !important; }
html.ui-ig .rail-item.active .ic::before { background: var(--brand); }
html.ui-ig .rail-item.active.light .ic i { color: #fff !important; }
html.ui-ig .rail-item.active::before { display: none; }
html.ui-ig .rail-item .lbl { font-size: 11px; }
html.ui-ig .subpanel .list { padding-top: 18px; gap: 2px; }
html.ui-ig .sp-item { padding: 8px 12px; font-size: 14px; }
html.ui-ig .sp-sub { margin-left: 16px; padding-left: 8px; }

html.ui-ig .page > h2.blueheading:first-child { margin-top: 36px; font-size: 40px; }
html.ui-ig .ig-lead { font: 500 19px/1.45 var(--body) !important; color: var(--text) !important; max-width: 640px; margin: -6px 0 14px !important; }
html.ui-ig .ig-more { max-width: 820px; margin: 0 0 8px; }
html.ui-ig .ig-more > summary { cursor: pointer; color: var(--brand-hi); font-size: 14px; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
html.ui-ig .ig-more > summary::-webkit-details-marker { display: none; }
html.ui-ig .ig-more > summary::before { content: "+"; font-weight: 700; }
html.ui-ig .ig-more[open] > summary::before { content: "–"; }
html.ui-ig .ig-more[open] > summary { margin-bottom: 10px; }

html.ui-ig .ig-setup-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 20px 8px 0; max-width: 1000px; }
html.ui-ig .ig-setup-step { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: #fff; font-family: var(--body); }
html.ui-ig .ig-setup-step:hover { border-color: var(--brand); }
html.ui-ig .ig-setup-step .n { font: 800 22px/1 var(--display); color: var(--brand); }
html.ui-ig .ig-setup-step .t { font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
html.ui-ig .ig-setup-step .s { font-size: 13px; color: var(--muted); }
html.ui-ig .ig-setup-step.done { border-color: rgba(56, 199, 147, .35); }
html.ui-ig .ig-setup-step.done .n, html.ui-ig .ig-setup-step.done .s { color: var(--success); }
@media (max-width: 640px) { html.ui-ig .ig-setup-steps { margin-right: 0; grid-template-columns: 1fr 1fr; } }