@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root{
  --bg:#0b1020;
  --panel:#11172a;
  --line:#1e2740;
  --text:#e7ecf7;
  --muted:#9aa6c7;
  --brand:#7aa0ff;
  --ok:#2ecc71;
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html{
  background:#0b1020;
  overflow-y:scroll;
}
body{
  margin:0;
  font-family:'Open Sans',system-ui,Arial,sans-serif;
  color:var(--text);
  background:transparent;
}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(1400px 800px at 20% -10%, #162048 0%, #0b1020 70%), #0b1020;
  background-repeat:no-repeat;
  background-position:top center;
}

a{ color:inherit; text-decoration:none; }

.btn{
  background:#1a2340;
  border:1px solid var(--line);
  color:#fff;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:var(--shadow);
}
.btn.small{ padding:6px 10px; font-size:12px; }
.btn.ok{ background:#1f3b2b; border-color:#1f5a3f; }
.btnGuideFlash{
  border-color:#2d7a53 !important;
  background:linear-gradient(180deg, #2a6b49, #1f4f37) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(125,235,176,.2) !important;
  font-weight:700;
}
.btnGuideFlash:hover{
  border-color:#3aa06a !important;
}
.btn.danger{ background:#3a1f25; border-color:#5a1f2a; }

.input,.textarea{
  background:linear-gradient(180deg, #101a37, #0e1630);
  border:1px solid #2a3b66;
  color:#f3f6ff;
  border-radius:12px;
  padding:10px 12px;
  width:100%;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.textarea{ resize:vertical; min-height:110px; }
.input::placeholder,.textarea::placeholder{
  color:#8090b9;
}
.input:focus,.textarea:focus{
  border-color:#4f9b66;
  box-shadow:0 0 0 3px rgba(46,204,113,.15), 0 8px 24px rgba(0,0,0,.28);
  background:linear-gradient(180deg, #111f41, #101a37);
}
select.input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:34px;
  background-image:
    linear-gradient(45deg, transparent 50%, #91a4d1 50%),
    linear-gradient(135deg, #91a4d1 50%, transparent 50%),
    linear-gradient(180deg, #101a37, #0e1630);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px),
    0 0;
  background-size:5px 5px, 5px 5px, 100% 100%;
  background-repeat:no-repeat;
}
select.input option{
  background:#101a37;
  color:#f3f6ff;
}

.muted{ color:var(--muted); font-size:13px; }

.container{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(6px);
  background:linear-gradient(180deg, rgba(11,16,32,.85), rgba(11,16,32,.65));
  border-bottom:1px solid var(--line);
}
.topbar .row{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.hero{
  max-width:1100px;
  margin:70px auto 30px;
  padding:0 20px;
}
.hero h1{ font-size:38px; margin:0 0 10px; }
.hero p{ color:var(--muted); font-size:18px; margin:0; }
.homeHeroActions{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.adminFrontBar{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid #2f4f89;
  background:
    radial-gradient(380px 110px at 14% -60%, rgba(115,168,255,.24), transparent 70%),
    linear-gradient(180deg, rgba(14,25,52,.95), rgba(11,19,40,.9));
  backdrop-filter:blur(7px);
  box-shadow:0 12px 32px rgba(0,0,0,.32);
}
.adminFrontBarRow{
  width:100%;
  margin:0;
  padding:9px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.adminFrontBarMeta{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  min-width:0;
  justify-content:center;
}
.adminFrontBarBadge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid #4377d0;
  background:linear-gradient(180deg, rgba(70,126,233,.34), rgba(43,79,156,.34));
  color:#e7f1ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.28px;
  text-transform:uppercase;
}
.adminFrontBarHint{
  color:#d8e6ff;
  font-size:13px;
  font-weight:600;
}
.adminFrontBarPath{
  max-width:340px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:3px 8px;
  border-radius:8px;
  border:1px solid rgba(108,145,210,.35);
  background:rgba(6,10,24,.4);
  color:#a8bfeb;
  font-size:11px;
  line-height:1.2;
}
.adminFrontBarActions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center;
}
.adminFrontBarLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:5px 11px;
  border-radius:10px;
  border:1px solid rgba(111,145,202,.4);
  background:linear-gradient(180deg, rgba(42,65,112,.65), rgba(28,45,81,.65));
  color:#e8efff;
  font-size:12px;
  font-weight:700;
  line-height:1;
  transition:border-color .2s ease, transform .12s ease, background .2s ease;
}
.adminFrontBarLink:hover{
  border-color:rgba(154,190,255,.9);
  background:linear-gradient(180deg, rgba(53,83,142,.8), rgba(33,52,95,.8));
  transform:translateY(-1px);
}
.adminFrontBarLink.isPrimary{
  border-color:#5bb98c;
  background:linear-gradient(180deg, rgba(51,132,92,.78), rgba(35,98,68,.78));
}
.adminFrontBarLink.isPrimary:hover{
  border-color:#8ad2ad;
  background:linear-gradient(180deg, rgba(62,154,107,.85), rgba(39,113,77,.85));
}
.adminFrontBarLink.isDanger{
  border-color:#d56d7f;
  background:linear-gradient(180deg, rgba(130,45,60,.82), rgba(95,31,43,.82));
}
.adminFrontBarLink.isDanger:hover{
  border-color:#f08fa0;
  background:linear-gradient(180deg, rgba(154,54,73,.9), rgba(117,35,51,.9));
}
.adminFrontBarLink.isQuick{
  border-color:#80a7ef;
  background:linear-gradient(180deg, rgba(67,108,187,.84), rgba(46,75,143,.84));
}
.adminFrontBarLink.isQuick:hover{
  border-color:#a7c5ff;
  background:linear-gradient(180deg, rgba(81,128,216,.9), rgba(56,90,169,.9));
}

@media (max-width: 760px){
  .adminFrontBarRow{
    align-items:center;
  }
  .adminFrontBarMeta{
    gap:7px;
  }
  .adminFrontBarPath{
    max-width:100%;
    width:100%;
  }
  .adminFrontBarActions{
    width:100%;
    justify-content:center;
  }
  .adminFrontBarLink{
    flex:1 1 auto;
  }
}
.homeStats{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.langSwitcher{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.langSwitchItem{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:4px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#0f1731;
  color:#e7ecf7;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08px;
}
.langSwitchItem:hover{
  border-color:#3f5c9d;
}
.langSwitchItem.isCurrent{
  background:linear-gradient(180deg, rgba(31,47,94,.92), rgba(21,33,68,.92));
  border-color:rgba(122,160,255,.85);
}
.langSwitchItem.isDisabled{
  opacity:.45;
  pointer-events:none;
}
.homeFilterForm{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 280px) auto;
  gap:10px;
  align-items:end;
}
.homeFilterForm label{
  display:grid;
  gap:6px;
}
.homeFilterActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.homeQuickActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.paginationWrap{
  margin-top:18px;
  display:flex;
  justify-content:center;
}
.pagination{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pageLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:34px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0f1731;
  color:#e8efff;
  font-size:13px;
  text-decoration:none;
}
.pageLink:hover{
  border-color:#3f5c9d;
}
.pageLink.isCurrent{
  background:linear-gradient(180deg, rgba(31,47,94,.92), rgba(21,33,68,.92));
  border-color:rgba(122,160,255,.85);
  font-weight:700;
}
.pageLink.isDisabled{
  opacity:.45;
  pointer-events:none;
}
.pageEllipsis{
  color:var(--muted);
  padding:0 2px;
}
.card{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.cardBody{ padding:14px; display:grid; gap:10px; }
.chip{
  display:inline-flex;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  color:var(--muted);
}
.chipActive{
  color:#fff;
  background:#1f3b2b;
  border-color:#1f5a3f;
}
a.chip.chipActive,
.chip.chipActive{
  color:#fff !important;
  background:#1f3b2b !important;
  border-color:#1f5a3f !important;
}
.cover{
  height:180px;
  border-bottom:1px solid var(--line);
  background: radial-gradient(500px 180px at 20% 0%, rgba(122,160,255,.25), rgba(0,0,0,0)), rgba(255,255,255,.03);
}
.cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.article{
  max-width:900px;
  margin:20px auto 60px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.articleHead{
  position:relative;
  overflow:hidden;
  padding:20px;
  border-bottom:1px solid var(--line);
}
.articleHeadCover{
  min-height:190px;
}
.articleHeadMedia{
  position:absolute;
  inset:0;
  z-index:0;
}
.articleHeadMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(8,12,28,.35), rgba(8,12,28,.78)),
    radial-gradient(900px 260px at 20% 0%, rgba(122,160,255,.25), rgba(0,0,0,0));
}
.articleHeadMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.articleHeadContent{
  position:relative;
  z-index:1;
  display:grid;
  gap:12px;
}
.articleTitleBadge{
  width:100%;
  max-width:100%;
  display:inline-flex;
  align-items:flex-start;
  min-width:0;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0e1430;
}
.articleTitleBadge h1{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:clamp(26px, 3.2vw, 34px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:.1px;
}
.articleTopMeta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.articleCategoryBadge{
  width:max-content;
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0e1430;
}
.articleHomeLink{
  width:max-content;
  color:#fff;
  font-size:13px;
  border:1px solid #2d7a53;
  border-radius:999px;
  padding:4px 12px;
  background:linear-gradient(180deg, #2a6b49, #1f4f37);
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(125,235,176,.2);
  font-weight:700;
}
.articleStepsBadge{
  color:#f3f7ff;
  border-color:rgba(122,160,255,.85);
  background:linear-gradient(180deg, rgba(31,47,94,.92), rgba(21,33,68,.92));
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(122,160,255,.22);
  font-weight:700;
}
.articleBody{ padding:20px; display:grid; gap:18px; }
.articleIntro h2,
.articleToc h2,
.articleConclusion h2{
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:.1px;
}
.articleIntro,.articleConclusion{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.03);
  min-width:0;
  overflow:hidden;
}
.articleToc{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.03);
  min-width:0;
  overflow:hidden;
}
.tocList{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.tocList a{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0e1430;
}
.tocNum{
  color:var(--brand);
  font-weight:700;
  min-width:22px;
}

.stepsList{ display:grid; gap:18px; }
.stepLinkModule{
  border:1px solid rgba(87,225,157,.55);
  border-radius:16px;
  padding:18px;
  background:
    radial-gradient(680px 220px at 0% 0%, rgba(87,225,157,.18), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(26,66,52,.7), rgba(14,26,38,.88));
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}
.stepLinkKicker{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8ee8bf;
  font-weight:700;
}
.stepLinkTitle{
  margin-top:6px;
  font-size:clamp(20px, 2.1vw, 28px);
  line-height:1.12;
  font-weight:800;
}
.stepLinkCta{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(87,225,157,.45);
  border-radius:999px;
  padding:9px 14px;
  background:rgba(10,24,18,.55);
  font-weight:700;
  color:#eafff5;
}
.step{
  border:1px solid rgba(122,160,255,.45);
  border-radius:14px;
  padding:14px;
  background:linear-gradient(180deg, rgba(122,160,255,.16), rgba(14,20,48,.85));
  min-width:0;
  overflow:hidden;
}
.guideSection{
  position:relative;
}
.guideSectionWithCover{
  padding:0;
}
.guideSectionMedia{
  position:absolute;
  inset:0;
  z-index:0;
}
.guideSectionMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(7,11,24,.56), rgba(9,14,28,.86));
}
.guideSectionMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.guideSectionContent{
  position:relative;
  z-index:1;
  padding:16px;
  max-width:74ch;
}
.guideSectionContent .stepText{
  color:#f1f5ff;
  line-height:1.58;
}
.step h3{
  margin:0 0 16px;
  font-size:clamp(18px, 1.8vw, 21px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.08px;
}
.stepNum{
  color:#8fb2ff;
  margin-right:6px;
}
.stepText{ margin:0 0 16px; }
.demoActionsBlock{
  margin-top:16px;
  border:1px solid rgba(122,160,255,.24);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg, rgba(16,24,48,.66), rgba(11,18,36,.78));
  box-shadow:none;
}
.demoActionsHead{
  color:#b7c9ef;
  margin:0 0 10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.demoActionsHeadKicker{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 7px;
  border:1px solid rgba(128,165,238,.35);
  border-radius:999px;
  background:rgba(34,56,104,.35);
  color:#c8dafd;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.demoActionsHeadTitle{
  color:#d8e5ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
}
.demoActionsHeadCount{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(122,160,255,.28);
  background:rgba(20,34,66,.46);
  color:#bdd0f7;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.demoActionsList{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.demoActionItem{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(122,160,255,.2);
  border-radius:10px;
  background:rgba(14,22,42,.52);
  color:#d8e2f6;
  line-height:1.5;
}
.demoActionNum{
  min-width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(143,178,255,.25);
  background:rgba(39,62,116,.5);
  color:#c8d7f3;
  font-weight:600;
  font-size:11px;
  line-height:1;
  flex:0 0 auto;
}
.demoActionText{
  min-width:0;
  overflow-wrap:anywhere;
}
.stepExternalModule{
  width:100%;
  margin-top:6px;
  border:1px solid rgba(124,169,255,.55);
  border-radius:18px;
  padding:16px 18px;
  background:
    radial-gradient(760px 180px at 0% 0%, rgba(124,169,255,.26), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(23,33,66,.9), rgba(14,20,46,.96));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.26), inset 0 0 0 1px rgba(178,206,255,.08);
}
.stepExternalMeta{
  min-width:0;
  display:grid;
  gap:6px;
}
.stepExternalKicker{
  font-size:11px;
  color:#a9c0ff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.stepExternalTitle{
  font-size:clamp(17px, 1.8vw, 22px);
  line-height:1.2;
  font-weight:800;
  color:#eff4ff;
  overflow-wrap:anywhere;
}
.stepExternalLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 20px;
  border-radius:999px;
  border:1px solid rgba(154,190,255,.92);
  background:linear-gradient(180deg, rgba(57,86,160,.95), rgba(32,56,118,.95));
  color:#f4f8ff;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.12);
  width:max-content;
  white-space:nowrap;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.stepExternalLink:hover{
  border-color:#d9e7ff;
  box-shadow:0 14px 28px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.2);
  transform:translateY(-1px);
}
@media (max-width: 760px){
  .demoActionsHeadKicker{
    display:none;
  }
  .demoActionsBlock{
    padding:11px;
  }
  .demoActionsHead{
    margin-bottom:9px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    column-gap:7px;
    row-gap:0;
  }
  .demoActionsList{
    gap:8px;
  }
  .demoActionItem{
    padding:8px 9px;
    gap:8px;
  }
  .demoActionNum{
    min-width:22px;
    width:22px;
    height:22px;
    font-size:11px;
  }
  .demoActionsHeadTitle{
    min-width:0;
    white-space:nowrap;
  }
  .demoActionsHeadCount{
    margin-left:0;
    justify-self:end;
    white-space:nowrap;
  }
  .stepExternalModule{
    padding:14px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    align-items:center;
  }
  .stepExternalMeta{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    align-items:center;
    min-width:0;
    text-align:center;
  }
  .stepExternalKicker{
    white-space:normal;
    line-height:1.2;
    order:2;
  }
  .stepExternalTitle{
    font-size:clamp(17px, 5vw, 21px);
    line-height:1.22;
    min-width:0;
    text-align:center;
    order:1;
  }
  .stepExternalLink{
    width:100%;
    max-width:100%;
    min-height:46px;
    justify-content:center;
    text-align:center;
    white-space:normal;
    margin-inline:auto;
  }
}

.stepSingle{
  border:1px solid rgba(122,160,255,.45);
  background:linear-gradient(180deg, rgba(122,160,255,.16), rgba(14,20,48,.85));
}
.articleSeeAlso{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.03);
}
.contactCtaBar{
  width:100%;
  border:1px solid rgba(91,216,153,.55);
  border-radius:16px;
  padding:16px;
  background:
    radial-gradient(760px 180px at 0% 0%, rgba(91,216,153,.22), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(23,58,47,.88), rgba(13,24,35,.94));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  box-shadow:0 16px 32px rgba(0,0,0,.26);
}
.contactCtaBody{
  display:grid;
  gap:6px;
  min-width:0;
}
.contactCtaBody strong{
  font-size:clamp(20px, 2.2vw, 28px);
  line-height:1.14;
}
.contactCtaBody .muted{
  color:#fff;
}
.contactCtaBar .btn.ok{
  min-height:46px;
  padding:10px 20px;
  border-radius:14px;
  border-color:rgba(126,235,181,.68);
  background:
    linear-gradient(180deg, rgba(61,134,94,.98), rgba(37,94,66,.98));
  color:#f5fff8;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(0,0,0,.34), inset 0 0 0 1px rgba(223,255,238,.12);
  animation:contactPulse 2.4s ease-in-out infinite;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.contactCtaBar .btn.ok:hover{
  border-color:rgba(197,255,226,.88);
  background:
    linear-gradient(180deg, rgba(72,154,108,.98), rgba(43,110,78,.98));
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.36), inset 0 0 0 1px rgba(235,255,244,.18);
}
.contactCtaBar .btn.ok:active{
  transform:translateY(0) scale(.985);
}
.contactCtaBar .btn.ok:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,236,180,.34), 0 10px 24px rgba(0,0,0,.34), inset 0 0 0 1px rgba(223,255,238,.12);
}
@media (prefers-reduced-motion: reduce){
  .contactCtaBar .btn.ok{
    animation:none;
    transition:none;
  }
}
@keyframes contactPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(46,204,113,.0), var(--shadow); }
  50%{ box-shadow:0 0 0 8px rgba(46,204,113,.16), var(--shadow); }
}
.contactSourceInfo{
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px;
  background:rgba(255,255,255,.03);
}
.contactPageContainer{
  padding-top:22px;
  padding-bottom:12px;
}
.contactPageHero{
  margin-top:30px;
  margin-bottom:24px;
}
.contactTopBar{
  margin-top:14px;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.contactTopActions{
  display:flex;
  gap:8px;
}
.contactTopLang .langSwitcher{
  margin-top:0;
}
.contactPageCard .cardBody{
  padding:18px;
  gap:14px;
}
.contactPageCard .adminEditorForm{
  display:grid;
  gap:16px;
}
.contactFormActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.publicPageContainer{
  padding-top:22px;
  padding-bottom:12px;
}
.publicPageHero{
  margin-top:24px;
  margin-bottom:16px;
}
.publicPageHero h1{
  margin-bottom:12px;
}
.publicPageHero p{
  margin:0 0 12px;
}
.publicPageTopBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.publicPageTopBar .langSwitcher{
  margin-top:0;
}
.publicPageCard{
  margin-top:10px;
}
.publicPageCard .cardBody{
  padding:20px;
  gap:14px;
}
.publicPageCard h1{
  margin:0;
}
.publicPageContent{
  margin-top:6px;
  line-height:1.75;
  display:grid;
  gap:14px;
}
.publicPageContent p,
.publicPageContent ul,
.publicPageContent ol{
  margin:0;
}
.publicPageContent h2,
.publicPageContent h3{
  margin:10px 0 2px;
}
.simpleHtmlEditor{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.simpleHtmlEditorToolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #121c3d, #0f1834);
}
.simpleHtmlEditorToolbar .btn{
  box-shadow:none;
}
.simpleHtmlEditorBody{
  padding:10px;
}
.simpleHtmlEditorBody .textarea{
  min-height:280px;
}
.simpleHtmlEditorHint{
  margin-top:8px;
}
.publicFooter{
  margin:26px auto 20px;
  max-width:1100px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}
.publicFooter a{
  color:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 10px;
  background:#101938;
}
.publicFooter a:hover{
  border-color:#3f5c9d;
}
@media (max-width: 760px){
  .contactCtaBar{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:14px;
    gap:14px;
  }
  .contactCtaBody{
    width:100%;
    max-width:420px;
    margin-inline:auto;
    gap:9px;
    justify-items:center;
    text-align:center;
  }
  .contactCtaBody strong,
  .contactCtaBody .muted{ text-align:center; }
  .contactCtaBar .btn{
    display:inline-flex;
    width:min(100%, 280px);
    min-height:46px;
    align-self:center;
    margin-inline:auto;
    justify-content:center;
    text-align:center;
  }
  .contactPageHero{
    margin-top:20px;
    margin-bottom:18px;
  }
  .contactTopBar{
    align-items:flex-start;
  }
  .publicPageHero{
    margin-top:10px;
    margin-bottom:10px;
  }
  .publicPageTopBar{
    align-items:flex-start;
  }
  .simpleHtmlEditorToolbar .btn{
    font-size:12px;
    padding:6px 9px;
  }
}
.seeAlsoGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;
}
.seeAlsoCard{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0e1430;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.seeAlsoCard:hover{
  border-color:rgba(122,160,255,.78);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.24);
}
.seeAlsoCard.hasBg{
  min-height:170px;
  justify-content:flex-end;
}
.seeAlsoBody{
  display:grid;
  gap:7px;
  padding:11px;
  backdrop-filter:blur(1px);
}
.seeAlsoCta{
  margin-top:2px;
  font-size:12px;
  font-weight:700;
  color:#d5e2ff;
}
.demoLink{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.demoEmbed{
  margin-top:12px;
}
.demoEmbedHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.demoNative{
  position:relative;
  width:100%;
  max-width:100%;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  overflow:visible;
  isolation:isolate;
  min-width:0;
}
.demoNative:fullscreen,
.demoNative:-webkit-full-screen{
  width:100vw;
  width:100dvw;
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  max-width:none;
  background:#0b1020;
  box-sizing:border-box;
  padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  gap:10px;
  align-content:stretch;
}
.demoNative.is-pseudo-fullscreen{
  position:fixed;
  inset:0;
  z-index:2147483647;
  width:100vw;
  width:100dvw;
  height:var(--demo-fs-height, 100dvh);
  max-width:none;
  background:#0b1020;
  box-sizing:border-box;
  padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  gap:10px;
  align-content:stretch;
}
.demoNative:fullscreen .demoNativeMeta,
.demoNative:-webkit-full-screen .demoNativeMeta,
.demoNative.is-pseudo-fullscreen .demoNativeMeta{
  display:grid;
}
.demoNative:fullscreen .demoNativeTimeline,
.demoNative:-webkit-full-screen .demoNativeTimeline,
.demoNative.is-pseudo-fullscreen .demoNativeTimeline{
  display:none !important;
}
.demoNative:fullscreen .demoNativeControls,
.demoNative:-webkit-full-screen .demoNativeControls,
.demoNative.is-pseudo-fullscreen .demoNativeControls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  row-gap:6px;
  align-items:center;
}
.demoNative:fullscreen .demoNativeControls [data-role="open-link"],
.demoNative:-webkit-full-screen .demoNativeControls [data-role="open-link"],
.demoNative.is-pseudo-fullscreen .demoNativeControls [data-role="open-link"]{
  display:none !important;
}
.demoNative:fullscreen .demoNativeFrame,
.demoNative:-webkit-full-screen .demoNativeFrame,
.demoNative.is-pseudo-fullscreen .demoNativeFrame{
  min-height:0;
  height:100%;
  aspect-ratio:auto;
  max-height:none;
}
.demoNative:fullscreen .demoNativeControls,
.demoNative:-webkit-full-screen .demoNativeControls,
.demoNative.is-pseudo-fullscreen .demoNativeControls{
  margin-top:0;
  padding-top:0;
}
html.demoFullscreenLock,
body.demoFullscreenLock{
  overflow:hidden;
  overscroll-behavior:none;
}
.demoNativeMeta{
  display:none;
  gap:4px;
  margin-bottom:8px;
}
.demoNativeTitle{
  font-size:28px;
  font-weight:800;
}
.demoNativeDesc{
  color:var(--muted);
  font-size:12px;
}
.demoNativeFrame{
  position:relative;
  background:transparent;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:clip;
  aspect-ratio:16/9;
  width:100%;
  max-height:none;
}
.demoRotateHint{
  display:none;
}
.demoNative:fullscreen .demoRotateHint,
.demoNative:-webkit-full-screen .demoRotateHint,
.demoNative.is-pseudo-fullscreen .demoRotateHint{
  position:absolute;
  left:50%;
  top:max(10px, env(safe-area-inset-top));
  transform:translateX(-50%);
  z-index:30;
  max-width:min(92vw, 420px);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(8,12,24,.84);
  color:#eef3ff;
  font-size:12px;
  line-height:1.25;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  pointer-events:none;
}
.demoNative:fullscreen .demoRotateHint.is-visible,
.demoNative:-webkit-full-screen .demoRotateHint.is-visible,
.demoNative.is-pseudo-fullscreen .demoRotateHint.is-visible{
  display:block;
}
.demoFramePager{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:7;
  width:34px;
  height:72px;
  border:1px solid rgba(122,160,255,.38);
  background:linear-gradient(180deg, rgba(18,27,55,.96), rgba(12,18,38,.96));
  color:#d7e4ff;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.34);
  transition:transform .16s ease, border-color .16s ease, opacity .16s ease;
}
.demoFramePager:hover{
  border-color:rgba(122,160,255,.8);
}
.demoFramePager:active{
  transform:translateY(-50%) scale(.97);
}
.demoFramePager.is-disabled,
.demoFramePager:disabled{
  opacity:.28;
  cursor:default;
  pointer-events:none;
}
.demoFramePagerPrev{ left:8px; }
.demoFramePagerNext{ right:8px; }
.demoNativeLoader{
  position:absolute;
  inset:0;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(11,16,32,.46);
  font-size:13px;
  color:var(--text);
  pointer-events:none;
}
.demoNativeLoader[hidden]{
  display:none !important;
}
.demoNativeSpinner{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:var(--ok);
  animation:demoSpin .8s linear infinite;
}
@keyframes demoSpin{
  to{ transform:rotate(360deg); }
}
.demoNativeSlide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
  transform-origin:center center;
  border-radius:0;
  background:transparent;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.demoNativeVideo{
  background:transparent;
}
.demoNativeProgress{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:rgba(255,255,255,.15);
}
.demoNativeProgressBar{
  height:100%;
  width:0%;
  background:var(--ok);
  transition:width .05s linear;
}
.demoNativeHotspot{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:#ff3b3b;
  border:2px solid #7a0000;
  box-shadow:0 0 0 6px rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.35);
  cursor:pointer;
  z-index:5;
  animation:hotspotPulse 1.8s ease-out infinite;
}
@keyframes hotspotPulse{
  0%{
    box-shadow:0 0 0 0 rgba(255,59,59,.55), 0 8px 20px rgba(0,0,0,.35);
  }
  70%{
    box-shadow:0 0 0 12px rgba(255,59,59,0), 0 8px 20px rgba(0,0,0,.35);
  }
  100%{
    box-shadow:0 0 0 0 rgba(255,59,59,0), 0 8px 20px rgba(0,0,0,.35);
  }
}
.demoNativeBubble{
  position:absolute;
  max-width:min(360px, calc(100% - 16px));
  word-break:break-word;
  z-index:6;
  background:linear-gradient(180deg,#141b2a,#0f1522);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  font-size:13px;
  line-height:1.4;
  box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.demoNativeControls{
  margin-top:6px;
  display:flex;
  gap:8px;
  row-gap:6px;
  align-items:center;
  flex-wrap:wrap;
  border:0;
  border-radius:0;
  padding:4px 0 0;
  background:transparent;
  width:100%;
  overflow:hidden;
}
.demoNativeControls .spacer{
  flex:1;
}
.demoNativeControls .btn{
  min-width:34px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid #2a3b66;
  background:linear-gradient(180deg, #202d57, #172346);
  color:#eef3ff;
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(122,160,255,.12);
  font-weight:700;
}
.demoNativeControls .btn:hover{
  border-color:#3f5c9d;
}
.demoNativeControls .btn.ok{
  border-color:#2d7a53;
  background:linear-gradient(180deg, #2a6b49, #1f4f37);
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(125,235,176,.2);
}
.demoNativeControls [data-role="play"]{
  min-width:92px;
  padding-left:16px;
  padding-right:16px;
}
.demoNativeCount{
  color:var(--text);
  font-size:13px;
  font-weight:700;
}
.demoNativeTimeline{
  margin-top:6px;
  border:0;
  border-radius:0;
  background:transparent;
  max-width:100%;
  overflow:hidden;
  width:100%;
  position:relative;
  padding-top:24px;
  padding-bottom:22px;
}
.demoNativeThumbPage{
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.2px;
  text-align:center;
  white-space:nowrap;
}
.demoNativeThumbs{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:0 34px 2px;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
.demoNativeThumbs::-webkit-scrollbar{
  height:8px;
}
.demoNativeThumbs::-webkit-scrollbar-thumb{
  background:rgba(122,160,255,.35);
  border-radius:999px;
}
.demoNativeThumb{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  width:132px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#0f1731;
  padding:0;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:none;
  display:block;
  scroll-snap-align:start;
}
.demoNativeThumb.active{
  border-color:rgba(122,160,255,.9);
  box-shadow:inset 0 0 0 2px rgba(122,160,255,.22);
}
.demoNativeThumbImg{
  width:100%;
  height:74px;
  object-fit:cover;
  display:block;
}
.demoNativeThumbVideo{
  width:100%;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  background:rgba(255,255,255,.08);
}
.demoNativeThumbTxt{
  padding:6px;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.demoNativeThumbNav{
  position:absolute;
  top:calc(50% + 12px);
  transform:translateY(-50%);
  z-index:3;
  min-width:70px;
  height:34px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid rgba(163,194,255,.62);
  background:linear-gradient(180deg, rgba(29,44,86,.96), rgba(16,28,63,.96));
  color:#f7fbff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.35px;
  text-transform:uppercase;
  text-shadow:none;
  cursor:pointer;
  backdrop-filter:blur(4px);
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(173,206,255,.2);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}
.demoNativeThumbNav:hover{
  border-color:rgba(197,222,255,.92);
  background:linear-gradient(180deg, rgba(42,64,121,.98), rgba(20,35,78,.98));
  box-shadow:0 14px 32px rgba(0,0,0,.48), inset 0 0 0 1px rgba(197,222,255,.26);
}
.demoNativeThumbNav:active{
  transform:translateY(-50%) scale(.96);
}
.demoNativeThumbNav:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(122,160,255,.28), 0 12px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(197,222,255,.26);
}
.demoNativeThumbNav[hidden]{
  display:none !important;
}
.demoNativeThumbNav.is-disabled,
.demoNativeThumbNav:disabled{
  opacity:.24;
  cursor:default;
  pointer-events:none;
}
.demoNativeThumbNavLeft{ left:4px; }
.demoNativeThumbNavRight{ right:4px; }

.adminWrap{
  max-width:1280px;
  margin:0 auto;
  padding:24px 18px 40px;
  display:grid;
  gap:16px;
}
.adminEditorWrap{
  max-width:1280px;
}
.adminPageHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,27,55,.86), rgba(12,18,36,.95));
  box-shadow:var(--shadow);
  min-height:96px;
}
.adminPageHead h1{
  margin:0;
  font-size:30px;
  line-height:1.1;
}
.adminPageHead .muted{
  margin-top:6px;
}
.adminHeadActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.adminEditorCard{
  border-radius:20px;
}
.adminEditorForm{
  display:grid;
  gap:20px;
}
.adminNotice{
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 11px;
  margin-bottom:8px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.adminNotice.success{
  border-color:#2d7a53;
  background:rgba(42,107,73,.16);
  color:#d3ffe3;
}
.adminNotice.error{
  border-color:#8a2d3b;
  background:rgba(138,45,59,.14);
  color:#ffd6dc;
}
.fieldHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
  flex-wrap:wrap;
}
.aiActions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.aiBtn{
  border-color:#2f446f;
  background:linear-gradient(180deg, #1f2d57, #172345);
}
.aiBtn:hover{
  border-color:#496cae;
}
.aiBtn[disabled]{
  opacity:.6;
  cursor:default;
}
.stepsHeadRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px;
}
.adminEditorActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  position:sticky;
  bottom:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(11,16,32,.92);
  backdrop-filter:blur(5px);
}
.adminTable{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--panel);
}
.adminTable th,.adminTable td{
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:left;
  vertical-align:top;
}
.adminTable td code{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.backupsTable{
  table-layout:fixed;
}
.backupsTable th,
.backupsTable td,
.backupsTable .backupDetail,
.backupsTable .backupKey{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.affiliateTable{
  table-layout:fixed;
}
.affiliateTable .affiliateTableLabelCol{
  width:70%;
}
.affiliateTable .affiliateTableMetricCol{
  width:30%;
}
.affiliateTable th{
  font-weight:700;
}
.affiliateTable th.numeric,
.affiliateTable td.numeric{
  text-align:right;
  font-variant-numeric: tabular-nums;
}
.affiliateTable tbody tr:nth-child(odd){
  background:rgba(255,255,255,.01);
}
.affiliateTable tbody tr:hover{
  background:rgba(93, 233, 184, .08);
}
.affiliateTable td:first-child{
  display:flex;
  align-items:center;
  gap:8px;
}
.affiliateTable .tableRank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.affiliateTable .tableEmpty{
  text-align:center;
  color:var(--muted);
  padding:18px 10px;
}
.adminTableActions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  flex-wrap:nowrap;
}
.adminTableActions form{
  margin:0;
}
.adminBackBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.adminCard{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding:18px;
  box-shadow:var(--shadow);
}
.adminCard h1,.adminCard h2{
  letter-spacing:.2px;
}
.formGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  row-gap:18px;
}
.formGrid .full{ grid-column:1 / -1; }
.formGrid > label{
  display:grid;
  gap:6px;
}
.stepsEditor{ display:grid; gap:14px; }
.stepEditor{
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  background:linear-gradient(180deg, #121c3d, #0f1834);
}
.coverUploadGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  align-items:start;
}
.coverPreview{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0d152e;
}
.coverPreviewEmpty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
}
.adminStatsRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.categoryTree{
  display:grid;
  gap:10px;
}
.categoryTreeItem{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg, #121c3d, #0f1834);
}
.categoryTreeHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.categorySubList{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width: 900px){
  .formGrid{ grid-template-columns:1fr; }
  .adminEditorActions{
    position:static;
    padding:0;
    border:0;
    background:transparent;
  }
  .coverUploadGrid{
    grid-template-columns:1fr;
  }
  .hero h1{ font-size:30px; }
  .hero p{ font-size:16px; }
  .article{
    margin:12px;
    border-radius:12px;
  }
  .articleHead,
  .articleBody{
    padding:14px;
  }
  .articleHeadCover{
    min-height:170px;
  }
  .articleTopMeta{
    gap:6px;
  }
  .step{
    padding:12px;
  }
  .demoNativeFrame{ aspect-ratio:16/10; }
  .demoFramePager{
    width:30px;
    height:62px;
    font-size:24px;
  }
  .demoNativeThumb{ width:120px; }
  .demoNativeThumbImg,
  .demoNativeThumbVideo{ height:68px; }
  .demoNativeThumbNav{
    min-width:64px;
    height:32px;
    padding:0 9px;
    font-size:11px;
  }
  .demoNativeControls{
    display:grid;
    grid-template-columns:auto auto minmax(44px,1fr) auto auto;
    column-gap:6px;
    row-gap:6px;
    align-items:center;
  }
  .demoNativeControls [data-role="play"]{
    grid-column:1;
    min-width:72px;
    padding-left:10px;
    padding-right:10px;
  }
  .demoNativeControls [data-role="restart"]{ grid-column:2; }
  .demoNativeCount{
    grid-column:3;
    justify-self:center;
    white-space:nowrap;
  }
  .demoNativeControls [data-role="fullscreen"]{
    grid-column:4;
    justify-self:end;
    min-width:66px;
    padding-left:8px;
    padding-right:8px;
    white-space:nowrap;
  }
  .demoNativeControls a.btn{
    grid-column:5;
    justify-self:end;
    min-width:56px;
    padding-left:8px;
    padding-right:8px;
    white-space:nowrap;
  }
  .demoNativeStatus{
    grid-column:1 / -1;
    min-height:14px;
  }
}

@media (max-width: 640px){
  .article{
    margin:8px;
    border-radius:10px;
  }
  .articleHomeLink{
    font-size:12px;
    padding:4px 9px;
  }
  .articleTopMeta .chip{
    font-size:11px;
    padding:4px 8px;
  }
  .articleIntro,
  .articleConclusion,
  .articleToc,
  .step{
    border-radius:12px;
  }
  .chip{
    font-size:11px;
    padding:4px 8px;
  }
  .demoNativeControls .btn{
    min-width:30px;
    padding:5px 8px;
  }
  .demoNativeControls{
    display:grid;
    grid-template-columns:max-content max-content max-content 1fr max-content max-content;
    column-gap:6px;
    row-gap:6px;
    align-items:center;
    overflow:hidden;
    padding-bottom:2px;
  }
  .demoNativeCount{
    grid-column:3;
    justify-self:center;
    white-space:nowrap;
  }
  .demoNative:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .demoNativeCount{
    display:none;
  }
  .demoNativeControls .spacer{
    display:block;
    grid-column:4;
  }
  .demoNativeStatus{
    display:none;
  }
  .demoNativeControls [data-role="play"]{
    grid-column:1;
    min-width:66px;
    padding-left:8px;
    padding-right:8px;
  }
  .demoNativeControls [data-role="restart"]{
    grid-column:2;
    min-width:28px;
    padding-left:7px;
    padding-right:7px;
  }
  .demoNativeControls [data-role="fullscreen"]{
    grid-column:5;
    justify-self:end;
    min-width:84px;
    white-space:nowrap;
  }
  .demoNativeControls a.btn{
    grid-column:6;
    justify-self:end;
    min-width:62px;
    white-space:nowrap;
  }
  .demoFramePager{
    width:28px;
    height:54px;
    border-radius:10px;
    font-size:22px;
  }
  .demoFramePagerPrev{ left:6px; }
  .demoFramePagerNext{ right:6px; }
  .demoNativeThumb{ width:104px; }
  .demoNativeThumbImg,
  .demoNativeThumbVideo{
    height:58px;
  }
  .demoNativeThumbNav{
    min-width:58px;
    height:30px;
    padding:0 8px;
    font-size:10px;
    border-radius:8px;
  }
  .demoNativeThumbNavLeft{ left:2px; }
  .demoNativeThumbNavRight{ right:2px; }
  .demoNativeTimeline{
    padding-top:22px;
    padding-bottom:20px;
  }
  .demoNativeThumbPage{
    left:50%;
    bottom:2px;
    transform:translateX(-50%);
    font-size:10px;
  }
}
@media (max-width: 980px) and (orientation: landscape){
  .demoNative:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .demoNativeControls{
    display:grid;
    grid-template-columns:max-content max-content max-content 1fr max-content max-content;
    column-gap:6px;
    row-gap:0;
    align-items:center;
    overflow:hidden;
  }
  .demoNative:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .demoNativeControls [data-role="play"]{ grid-column:1; }
  .demoNative:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .demoNativeControls [data-role="restart"]{ grid-column:2; }
  .demoNative:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .demoNativeCount{
    grid-column:3;
    display:inline-flex;
    justify-self:center;
    white-space:nowrap;
  }
  .demoNative:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .demoNativeControls .spacer{
    grid-column:4;
    display:block;
  }
  .demoNative:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .demoNativeControls [data-role="fullscreen"]{
    grid-column:5;
    justify-self:end;
  }
  .demoNative:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .demoNativeControls a.btn{
    grid-column:6;
    justify-self:end;
  }
  .demoNative:fullscreen,
  .demoNative:-webkit-full-screen,
  .demoNative.is-pseudo-fullscreen{
    gap:8px;
    padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .demoNative:fullscreen .demoNativeMeta,
  .demoNative:-webkit-full-screen .demoNativeMeta,
  .demoNative.is-pseudo-fullscreen .demoNativeMeta{
    display:none !important;
  }
  .demoNative:fullscreen .demoNativeTimeline,
  .demoNative:-webkit-full-screen .demoNativeTimeline,
  .demoNative.is-pseudo-fullscreen .demoNativeTimeline{
    display:none !important;
  }
  .demoNative:fullscreen .demoNativeControls,
  .demoNative:-webkit-full-screen .demoNativeControls,
  .demoNative.is-pseudo-fullscreen .demoNativeControls{
    display:grid !important;
    grid-template-columns:max-content max-content max-content 1fr max-content;
    align-items:center;
    column-gap:5px;
    overflow:hidden;
    position:absolute;
    left:max(8px, env(safe-area-inset-left));
    right:max(8px, env(safe-area-inset-right));
    bottom:max(8px, env(safe-area-inset-bottom));
    z-index:40;
    margin:0;
    padding:6px;
    border-radius:10px;
    background:rgba(10,14,28,.88);
  }
  .demoNative:fullscreen .demoNativeControls .btn,
  .demoNative:-webkit-full-screen .demoNativeControls .btn,
  .demoNative.is-pseudo-fullscreen .demoNativeControls .btn{
    padding:5px 8px;
    font-size:12px;
  }
  .demoNative:fullscreen .demoNativeControls [data-role="play"],
  .demoNative:-webkit-full-screen .demoNativeControls [data-role="play"],
  .demoNative.is-pseudo-fullscreen .demoNativeControls [data-role="play"]{
    grid-column:1;
    min-width:72px;
    padding-left:10px;
    padding-right:10px;
  }
  .demoNative:fullscreen .demoNativeControls [data-role="restart"],
  .demoNative:-webkit-full-screen .demoNativeControls [data-role="restart"],
  .demoNative.is-pseudo-fullscreen .demoNativeControls [data-role="restart"]{ grid-column:2; }
  .demoNative:fullscreen .demoNativeCount,
  .demoNative:-webkit-full-screen .demoNativeCount,
  .demoNative.is-pseudo-fullscreen .demoNativeCount{ grid-column:3; }
  .demoNative:fullscreen .demoNativeControls [data-role="fullscreen"],
  .demoNative:-webkit-full-screen .demoNativeControls [data-role="fullscreen"],
  .demoNative.is-pseudo-fullscreen .demoNativeControls [data-role="fullscreen"]{
    grid-column:5;
    justify-self:end;
    margin-right:50px;
  }
  .demoNative:fullscreen .demoNativeControls .spacer,
  .demoNative:-webkit-full-screen .demoNativeControls .spacer,
  .demoNative.is-pseudo-fullscreen .demoNativeControls .spacer{
    display:none !important;
  }
  .demoNative:fullscreen .demoNativeCount,
  .demoNative:-webkit-full-screen .demoNativeCount,
  .demoNative.is-pseudo-fullscreen .demoNativeCount{
    display:inline-flex !important;
    white-space:nowrap;
  }
  .demoNative:fullscreen .demoFramePager,
  .demoNative:-webkit-full-screen .demoFramePager,
  .demoNative.is-pseudo-fullscreen .demoFramePager{
    width:30px;
    height:56px;
    font-size:22px;
    border:1px solid rgba(210,228,255,.9);
    background:linear-gradient(180deg, rgba(39,57,108,.96), rgba(24,39,82,.96));
    color:#ffffff;
    box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.2);
    text-shadow:0 1px 0 rgba(0,0,0,.55);
  }
  .demoNative:fullscreen .demoNativeControls [data-role="fullscreen"],
  .demoNative:-webkit-full-screen .demoNativeControls [data-role="fullscreen"],
  .demoNative.is-pseudo-fullscreen .demoNativeControls [data-role="fullscreen"]{
    min-width:0 !important;
    width:84px;
    max-width:84px;
    padding:6px 8px;
    font-size:12px;
    box-sizing:border-box;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:0 0 auto;
    margin-left:0 !important;
  }
}


.guidesLandingHero{
  background:
    radial-gradient(1100px 280px at 0% 0%, rgba(122,160,255,.18), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(18,27,55,.86), rgba(13,20,42,.9));
}
.guidesLandingTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.guidesLandingStats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.guidesListGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
}
.guidesListCard{
  display:flex;
  min-height:220px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#101938;
  box-shadow:var(--shadow);
  background-size:cover;
  background-position:center;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.guidesListCard:hover{
  border-color:rgba(122,160,255,.8);
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(0,0,0,.32);
}
.guidesListContent{
  width:100%;
  display:grid;
  gap:10px;
  padding:16px;
  align-content:end;
}
.guidesListContent strong{
  font-size:clamp(20px, 2.2vw, 26px);
  line-height:1.14;
}
.articleCardsGrid .guidesListCard{
  min-height:230px;
}
.articleCardsGrid .guidesListContent{
  gap:9px;
}
.articleCardsGrid .guidesListContent strong{
  font-size:clamp(19px, 2vw, 24px);
}
.articleListCard .muted{
  color:#c9d5f3;
}
.guidesListMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.guidesListCta{
  font-size:13px;
  font-weight:700;
  color:#dbe7ff;
}
.guidesListCtaGreen{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:2px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #2d7a53;
  background:linear-gradient(180deg, #2a6b49, #1f4f37);
  color:#eafff5;
}
.guideSectionCta{
  border-color:#2d7a53;
  background:linear-gradient(180deg, #2a6b49, #1f4f37);
  box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(125,235,176,.18);
}

@media (max-width: 900px){
  .homeFilterForm{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .guidesListGrid{
    grid-template-columns:1fr;
  }
  .guidesListCard{
    min-height:190px;
  }
}

/* Guides Complets - Full Redesign */
.guidesShell{
  max-width:1100px;
  padding-top:8px;
  padding-left:20px;
  padding-right:20px;
}
.guidesShell .hero{
  max-width:none;
  margin:70px 0 30px;
  padding:0;
}
.guidesShell .hero h1,
.guidesShell .hero p{
  max-width:820px;
}
.guidesShell .homeHeroActions,
.guidesShell .homeStats{
  justify-content:flex-start;
}
.guidesHero{
  text-align:center;
  max-width:920px;
  margin:26px auto 24px;
  padding:24px 16px 10px;
}
.guidesHero h1{
  margin:0;
  font-size:clamp(34px, 4.2vw, 48px);
}
.guidesHero p{
  margin:10px 0 8px;
  font-size:clamp(18px, 2vw, 23px);
  font-weight:700;
}
.guidesHero .muted{
  max-width:760px;
  margin:0 auto;
  line-height:1.6;
}
.guidesShell .homeStats{
  gap:12px;
}
.guidesShell .grid{
  gap:20px;
  margin-top:0;
  grid-template-columns:repeat(auto-fill, 320px);
  justify-content:start;
}
.guidesShell .grid .card{
  width:320px;
  max-width:100%;
}
.guidesShell .card{
  border-radius:16px;
}
.guidesShell .cardBody{
  padding:16px;
  gap:12px;
}
.guidesShell .cover{
  height:206px;
}
.guidesFeatureCard{
  display:block;
  min-height:260px;
  border:1px solid rgba(122,160,255,.45);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,27,55,.9), rgba(11,18,36,.95));
  background-size:cover;
  background-position:center;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.guidesFeatureBody{
  height:100%;
  display:grid;
  align-content:end;
  gap:10px;
  padding:20px;
}
.guidesFeatureBody strong{
  font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.14;
}
.guidesFeatureCta{
  font-size:13px;
  font-weight:700;
  color:#dce8ff;
}
.guidePage{
  display:grid;
  gap:14px;
}
.guideMasthead{
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(18,27,55,.9), rgba(11,18,36,.95));
}
.guideMasthead.hasCover{
  min-height:240px;
}
.guideMastheadMedia{
  position:absolute;
  inset:0;
}
.guideMastheadMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,12,28,.34), rgba(8,12,28,.86));
}
.guideMastheadMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.guideMastheadContent{
  position:relative;
  z-index:1;
  padding:20px;
  display:grid;
  gap:10px;
}
.guideCrumb{
  font-size:12px;
  color:#c6d7ff;
  letter-spacing:.2px;
}
.guideMasthead h1{
  margin:0;
  font-size:clamp(30px, 3.5vw, 42px);
  line-height:1.1;
}
.guideMastheadMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.guidePageLayout{
  display:grid;
  grid-template-columns:320px minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
.guideSidebar{
  display:grid;
  gap:12px;
  position:sticky;
  top:12px;
}
.guideContent{
  display:grid;
  gap:12px;
}
.guidePanel{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.03);
}
.guidePanel h2{
  margin:0 0 10px;
  font-size:20px;
}
.guidePanel p{
  margin:0;
  color:#d7e3ff;
  line-height:1.55;
}
.guideToc{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.guideToc a{
  display:flex;
  gap:8px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0e1430;
  padding:8px 10px;
}
.guideToc a span:first-child{
  color:#9db9ff;
  min-width:20px;
  font-weight:700;
}
.guideResourceList{
  display:grid;
  gap:12px;
}
.guideResource{
  border:1px solid rgba(122,160,255,.48);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(122,160,255,.12), rgba(14,20,48,.86));
  display:grid;
  grid-template-columns:160px minmax(0, 1fr);
}
.guideResourceThumb{
  border-right:1px solid rgba(122,160,255,.32);
  background:#0e1531;
}
.guideResourceThumb img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  display:block;
}
.guideResourceBody{
  padding:14px;
  display:grid;
  gap:10px;
}
.guideResourceBody h3{
  margin:0;
  font-size:clamp(19px, 2vw, 24px);
  line-height:1.16;
}
.guideResourceBody p{
  margin:0;
  color:#d7e3ff;
  line-height:1.55;
}
.guideAction{
  width:max-content;
  border-color:#2d7a53;
  background:linear-gradient(180deg, #2a6b49, #1f4f37);
}

@media (max-width: 960px){
  .guidesShell{
    padding-top:2px;
    padding-left:16px;
    padding-right:16px;
  }
  .guidesShell .hero{
    margin:14px 0 14px;
  }
  .guidesHero{
    margin:16px auto 16px;
    padding:14px 10px 4px;
  }
  .guidesShell .grid{
    gap:14px;
  }
  .guidePageLayout{
    grid-template-columns:1fr;
  }
  .guideSidebar{
    position:static;
  }
  .guideResource{
    grid-template-columns:1fr;
  }
  .guideResourceThumb{
    border-right:0;
    border-bottom:1px solid rgba(122,160,255,.32);
    max-height:180px;
  }
}

.adminDashboard{
  max-width:1280px;
  margin:0 auto;
  padding:24px 18px 40px;
  display:grid;
  gap:16px;
}
.adminDashboardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,27,55,.86), rgba(12,18,36,.95));
  box-shadow:var(--shadow);
  min-height:96px;
}
.adminDashboardHead h1{
  margin:0;
  font-size:30px;
}
.adminDashboardHead p{
  margin:6px 0 0;
  color:var(--muted);
}
.adminDashboardActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  min-height:34px;
}
.adminTopNav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0;
  align-items:center;
  min-height:34px;
}
.adminUnifiedContent{
  display:grid;
  gap:12px;
}
.adminTopNavLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#0f1731;
  color:#e7ecf7;
  font-size:12px;
  font-weight:700;
}
.adminTopNavLink:hover{
  border-color:#3f5c9d;
}
.adminTopNavLink.isActive{
  border-color:#2d7a53;
  background:linear-gradient(180deg, #2a6b49, #1f4f37);
  color:#fff;
}
.adminTopNavLink.danger{
  border-color:#8a2d3b;
  background:#31161c;
}
.adminTopNavLink.front{
  border-color:#3e7f5b;
  background:linear-gradient(180deg, rgba(33,90,63,.9), rgba(24,68,46,.9));
}
.adminStatGrid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
}
.adminStatCard{
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(122,160,255,.12), rgba(15,23,49,.92));
  padding:12px;
  display:grid;
  gap:4px;
}
.adminStatCard strong{
  font-size:28px;
  line-height:1;
}
.adminStatCard small{
  color:var(--muted);
  font-size:12px;
}
.adminPanelGrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12px;
}
.adminPanel{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,27,55,.86), rgba(12,18,36,.95));
  box-shadow:var(--shadow);
  padding:14px;
}
.adminPanel h2{
  margin:0 0 10px;
  font-size:20px;
}
.adminPanelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.adminMiniList{
  display:grid;
  gap:8px;
}
.adminMiniItem{
  border:1px solid var(--line);
  border-radius:10px;
  background:#0f1731;
  padding:10px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}
.adminMiniItem span{
  font-weight:700;
}
.adminMiniItem small{
  color:var(--muted);
}
.adminTable.compact th,
.adminTable.compact td{
  padding:8px;
  font-size:13px;
}
.adminChart{
  min-height:160px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#0f1731;
  overflow-x:auto;
}
.adminChartBarWrap{
  min-width:34px;
  display:grid;
  gap:5px;
  justify-items:center;
}
.adminChartBar{
  width:22px;
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, #7aa0ff, #4566b8);
}
.adminChartBarWrap small{
  color:var(--muted);
  font-size:10px;
}

@media (max-width: 1180px){
  .adminStatGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px){
  .adminWrap{
    padding:14px 12px 30px;
  }
  .adminDashboard{
    padding:14px 12px 30px;
  }
  .adminDashboardHead h1{
    font-size:28px;
  }
  .adminStatGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .adminPanelGrid{
    grid-template-columns:1fr;
  }
  .adminTableActions{
    flex-wrap:wrap;
  }
}

/* Lead capture form blocks embedded in articles, guides & pages */
.leadFormBlock{
  margin:24px 0;
  padding:20px 22px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(20,28,50,.78), rgba(10,14,30,.88));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.leadFormBlock .leadFormKicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(150,200,255,.85);margin-bottom:6px;font-weight:600;}
.leadFormBlock .leadFormTitle{margin:0 0 6px;font-size:1.2rem;}
.leadFormBlock--post-steps{background:linear-gradient(180deg, rgba(30,40,70,.9), rgba(14,20,42,.95));border-color:rgba(255,200,120,.18);}
.leadFormBlock--post-steps .leadFormKicker{color:rgba(255,200,120,.9);}
.leadFormBlock .leadFormDesc{margin:0 0 14px;color:rgba(255,255,255,.78);}
.leadFormForm{display:flex;flex-direction:column;gap:12px;}
.leadFormRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.leadFormLabel{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:rgba(255,255,255,.8);}
.leadFormLabel input{
  padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,14,28,.6);color:#fff;
  font:inherit;
}
.leadFormLabel input:focus{outline:2px solid rgba(120,180,255,.45);border-color:rgba(120,180,255,.55);}
.leadFormConsent{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;font-size:.78rem;color:rgba(255,255,255,.6);cursor:pointer;line-height:1.45;}
.leadFormConsent input[type="checkbox"]{margin-top:3px;flex-shrink:0;accent-color:#4f9b66;cursor:pointer;}
.leadFormConsent span{flex:1;}
.leadFormActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.leadFormStatus{font-size:.85rem;color:rgba(255,255,255,.7);}
.leadFormStatus.isError{color:#ff9a9a;}
.leadFormSuccess{
  margin-top:6px;padding:10px 12px;border-radius:10px;
  background:rgba(80,160,110,.22);border:1px solid rgba(120,200,140,.4);
  color:#e4fff0;
}
@media (max-width:560px){
  .leadFormRow{grid-template-columns:1fr;}
}