/* ============================================================
   MIROXDEV PRODUCT WIKI
   ============================================================ */

.docs-body{
  background:
    radial-gradient(circle at 0 0,rgba(255,47,132,.055),transparent 26%),
    radial-gradient(circle at 100% 18%,rgba(25,215,255,.045),transparent 30%),
    #070a10;
}
.docs-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:70px;
  border-bottom:1px solid var(--line);
  background:rgba(7,10,16,.90);
  backdrop-filter:blur(18px);
}
.docs-header-inner{
  width:min(1460px,calc(100% - 32px));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.docs-product{
  display:flex;
  align-items:center;
  gap:10px;
  color:#7f8fa4;
  font-size:11px;
}
.docs-product i{
  width:1px;
  height:24px;
  background:var(--line-strong);
}
.docs-product b{
  color:#dce7f2;
  font-family:"Space Grotesk",sans-serif;
  font-size:13px;
}
.docs-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.docs-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(93,226,179,.18);
  border-radius:7px;
  background:rgba(93,226,179,.035);
  color:#72dab9;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
}
.docs-layout{
  width:min(1460px,100%);
  min-height:100vh;
  margin:0 auto;
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 210px;
  padding-top:70px;
}
.docs-sidebar{
  position:sticky;
  top:70px;
  height:calc(100vh - 70px);
  overflow:auto;
  padding:28px 22px 40px;
  border-right:1px solid var(--line);
  background:rgba(7,10,16,.55);
}
.docs-sidebar-label{
  display:block;
  margin:0 8px 8px;
  color:#58677b;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}
.docs-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:24px;
}
.docs-sidebar-nav a{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:0 9px;
  border-radius:7px;
  color:#8d9caf;
  font-size:12px;
  font-weight:600;
  transition:.15s ease;
}
.docs-sidebar-nav a:hover,
.docs-sidebar-nav a.active{
  background:rgba(255,255,255,.035);
  color:#eef5fc;
}
.docs-sidebar-nav a.active{
  border-left:2px solid var(--pink);
}
.docs-sidebar-nav a span{
  margin-left:auto;
  color:#465568;
  font-size:9px;
}
.docs-sidebar-card{
  margin-top:20px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.015);
}
.docs-sidebar-card small{
  display:block;
  color:#5d6c81;
  font-size:8px;
  letter-spacing:.11em;
}
.docs-sidebar-card b{
  display:block;
  margin-top:5px;
  color:#b7c6d7;
  font-size:11px;
}
.docs-sidebar-card p{
  margin:6px 0 0;
  color:#6e7d90;
  font-size:10px;
  line-height:1.5;
}
.docs-main{
  min-width:0;
  padding:50px clamp(28px,5vw,76px) 100px;
}
.docs-article{
  max-width:900px;
  margin:0 auto;
}
.docs-toc{
  position:sticky;
  top:70px;
  height:calc(100vh - 70px);
  overflow:auto;
  padding:34px 22px;
  border-left:1px solid var(--line);
}
.docs-toc b{
  display:block;
  margin-bottom:11px;
  color:#7d8da1;
  font-size:9px;
  letter-spacing:.12em;
}
.docs-toc a{
  display:block;
  padding:5px 0;
  color:#647489;
  font-size:10px;
  line-height:1.4;
}
.docs-toc a:hover{color:#c5d2df}
.docs-crumbs{
  display:flex;
  align-items:center;
  gap:7px;
  color:#5f6e82;
  font-size:10px;
}
.docs-crumbs a:hover{color:white}
.docs-hero{
  padding:34px 0 38px;
  border-bottom:1px solid var(--line);
}
.docs-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.docs-logo{
  display:grid;
  place-items:center;
  width:62px;height:62px;
  border:1px solid rgba(255,47,132,.28);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(255,47,132,.10),rgba(25,215,255,.04));
  color:#ff80b1;
  font-family:"Space Grotesk",sans-serif;
  font-size:18px;
  font-weight:800;
}
.docs-logo.purple{
  border-color:rgba(164,76,255,.30);
  background:linear-gradient(135deg,rgba(164,76,255,.11),rgba(25,215,255,.035));
  color:#d9a4ff;
}
.docs-version{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:7px;
  color:#7f8fa2;
  font-size:9px;
  font-weight:700;
}
.docs-version i{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--green);
}
.docs-hero h1{
  margin:22px 0 10px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(38px,5vw,58px);
  line-height:1;
  letter-spacing:-.035em;
}
.docs-hero>p{
  max-width:760px;
  margin:0;
  color:#91a0b2;
  font-size:15px;
  line-height:1.75;
}
.docs-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}
.docs-section{
  padding:42px 0 6px;
  scroll-margin-top:90px;
}
.docs-section h2{
  margin:0 0 14px;
  font-family:"Space Grotesk",sans-serif;
  font-size:27px;
  letter-spacing:-.02em;
}
.docs-section h3{
  margin:30px 0 10px;
  font-family:"Space Grotesk",sans-serif;
  font-size:18px;
}
.docs-section p,
.docs-section li{
  color:#91a0b2;
  font-size:13px;
  line-height:1.8;
}
.docs-section ul,
.docs-section ol{
  padding-left:20px;
}
.docs-callout{
  margin:20px 0;
  padding:14px 16px;
  border:1px solid rgba(25,215,255,.16);
  border-radius:9px;
  background:rgba(25,215,255,.025);
}
.docs-callout.warning{
  border-color:rgba(255,181,71,.18);
  background:rgba(255,181,71,.028);
}
.docs-callout strong{
  display:block;
  margin-bottom:4px;
  color:#cdd8e4;
  font-size:12px;
}
.docs-callout p{
  margin:0;
  font-size:11px;
}
.docs-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:22px 0;
}
.docs-feature{
  padding:16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(14,20,30,.72),rgba(9,13,20,.78));
}
.docs-feature span{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  margin-bottom:12px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  color:#b7c7d8;
  font-size:13px;
}
.docs-feature b{
  display:block;
  color:#dce5ef;
  font-size:12px;
}
.docs-feature p{
  margin:5px 0 0;
  color:#758599;
  font-size:10px;
  line-height:1.6;
}
.docs-table-wrap{
  margin:18px 0;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
}
.docs-table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}
.docs-table th,
.docs-table td{
  padding:12px 13px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:11px;
}
.docs-table tr:last-child td{border-bottom:0}
.docs-table th{
  background:rgba(255,255,255,.018);
  color:#6f8094;
  font-size:9px;
  letter-spacing:.08em;
}
.docs-table td{color:#91a0b2}
.docs-table td:first-child{color:#d5e0eb;font-weight:700}
.docs-code{
  margin:16px 0;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#070b11;
}
.docs-code-head{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border-bottom:1px solid var(--line);
  color:#5e6e82;
  font-size:9px;
  letter-spacing:.08em;
}
.docs-code pre{
  margin:0;
  padding:16px;
  overflow:auto;
  color:#a7b7ca;
  font:11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.docs-code .pink{color:#ff77ad}
.docs-code .cyan{color:#77e8ff}
.docs-code .green{color:#6ee3b8}
.docs-architecture{
  margin:22px 0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#080d14;
  overflow:auto;
}
.docs-architecture pre{
  margin:0;
  color:#7f90a4;
  font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.docs-next{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:50px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.docs-next a{
  padding:15px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.012);
}
.docs-next small{display:block;color:#59697d;font-size:9px}
.docs-next b{display:block;margin-top:5px;color:#bdcbd9;font-size:12px}
.docs-mobile-menu{
  display:none;
  width:38px;height:38px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.02);
  color:#c6d3df;
}

/* product preview */
.product-showcase{
  margin:28px 0;
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  background:#080d14;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.product-showcase-head{
  height:44px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  color:#647489;
  font-size:9px;
}
.product-showcase-head div{display:flex;gap:5px}
.product-showcase-head i{width:6px;height:6px;border-radius:50%;background:#283545}
.product-showcase-body{
  display:grid;
  grid-template-columns:150px 1fr;
  min-height:300px;
}
.product-mini-nav{
  padding:13px;
  border-right:1px solid var(--line);
  background:#090e16;
}
.product-mini-brand{
  margin-bottom:15px;
  color:#d8e3ee;
  font-family:"Space Grotesk";
  font-size:11px;
}
.product-mini-brand span{color:var(--pink-soft)}
.product-mini-nav a{
  display:block;
  margin:3px 0;
  padding:8px 9px;
  border-radius:6px;
  color:#66758a;
  font-size:9px;
}
.product-mini-nav a.active{
  background:rgba(255,47,132,.06);
  color:#df9bb7;
}
.product-mini-main{padding:16px}
.product-mini-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.product-mini-top b{font-size:12px}
.product-mini-top span{
  color:#62dcb6;
  font-size:8px;
}
.product-mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.product-mini-stats div{
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.012);
}
.product-mini-stats small{display:block;color:#59697d;font-size:7px}
.product-mini-stats b{display:block;margin-top:4px;color:#c3cfdd;font-size:10px}
.product-mini-panels{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:7px;
  margin-top:7px;
}
.product-mini-panel{
  min-height:145px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
}
.product-mini-panel>small{color:#617185;font-size:7px}
.product-mini-chat{margin-top:9px}
.product-mini-chat p{
  margin:5px 0;
  color:#8796a9;
  font-size:8px;
}
.product-mini-chat p b{color:#d2dce7}
.product-mini-log{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:9px;
}
.product-mini-log span{
  padding:6px;
  border-left:2px solid rgba(25,215,255,.25);
  color:#77879a;
  font-size:8px;
}

/* command cards */
.command-list{
  display:grid;
  gap:7px;
  margin:18px 0;
}
.command-row{
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(255,255,255,.012);
}
.command-row code{
  color:#ff86b5;
  font-size:11px;
}
.command-row span{
  color:#8291a5;
  font-size:10px;
}
.command-row em{
  padding:4px 6px;
  border:1px solid rgba(93,226,179,.15);
  border-radius:5px;
  color:#64cba9;
  font-size:8px;
  font-style:normal;
}

@media(max-width:1160px){
  .docs-layout{grid-template-columns:235px minmax(0,1fr)}
  .docs-toc{display:none}
}
@media(max-width:820px){
  .docs-header-inner{width:calc(100% - 24px)}
  .docs-mobile-menu{display:block}
  .docs-top-actions .docs-badge{display:none}
  .docs-layout{display:block}
  .docs-sidebar{
    position:fixed;
    z-index:90;
    top:70px;left:0;
    width:min(300px,88vw);
    transform:translateX(-105%);
    transition:.2s ease;
    box-shadow:24px 0 60px rgba(0,0,0,.42);
  }
  .docs-sidebar.open{transform:none}
  .docs-main{padding:38px 20px 80px}
  .docs-grid{grid-template-columns:1fr}
  .docs-next{grid-template-columns:1fr}
  .product-showcase-body{grid-template-columns:1fr}
  .product-mini-nav{display:none}
}
@media(max-width:560px){
  .docs-product{display:none}
  .docs-top-actions .btn{display:none}
  .docs-main{padding-left:14px;padding-right:14px}
  .docs-hero h1{font-size:36px}
  .docs-hero-top{align-items:flex-start}
  .product-mini-stats{grid-template-columns:1fr}
  .product-mini-panels{grid-template-columns:1fr}
  .command-row{grid-template-columns:1fr;gap:5px}
}

.docs-header .brand-image img{width:180px;height:auto}.docs-header .brand-image{display:flex;align-items:center}@media(max-width:700px){.docs-header .brand-image img{width:150px}}