:root{
  --cbl-ink:#070B14;
  --cbl-surface:#0E1626;
  --cbl-surface-2:#13203A;
  --cbl-signal:#1FD1C4;
  --cbl-sweep:#FF9F1C;
  --cbl-link:#6C8CFF;
  --cbl-text:#E6EDF5;
  --cbl-muted:#8A99AD;
  --cbl-line:#223044;
  --cbl-radius:14px;
  --cbl-maxw:1200px;
  --cbl-h2-inset:0px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--cbl-ink);
  color:var(--cbl-text);
  line-height:1.75;
  font-size:16px;
}
a{color:var(--cbl-link);text-decoration:none;}
a:hover{color:var(--cbl-signal);}
img{max-width:100%;}

/* ===== Header ===== */
.cbl-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(7,11,20,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cbl-line);
}
.cbl-header-inner{
  max-width:var(--cbl-maxw);margin:0 auto;
  display:flex;align-items:center;gap:18px;
  padding:12px 24px;
}
.cbl-logo{
  font-weight:800;font-size:18px;color:var(--cbl-text);
  letter-spacing:.3px;white-space:nowrap;
}
.cbl-logo:hover{color:var(--cbl-signal);}
.cbl-nav-toggle{
  display:none;background:none;border:1px solid var(--cbl-line);
  color:var(--cbl-text);font-size:20px;border-radius:8px;
  width:42px;height:38px;cursor:pointer;margin-left:auto;
}
.cbl-nav{
  display:flex;align-items:center;gap:20px;margin-left:auto;
  flex-wrap:wrap;
}
.cbl-nav>a{color:var(--cbl-muted);font-weight:600;font-size:15px;}
.cbl-nav>a:hover{color:var(--cbl-signal);}
.cbl-nav-cat-panel{position:relative;}
.cbl-nav-cat-panel>summary{
  display:none;list-style:none;cursor:pointer;
  color:var(--cbl-muted);font-weight:600;font-size:15px;padding:6px 0;
}
.cbl-nav-cat-panel>summary::-webkit-details-marker{display:none;}
.cbl-nav-cat-panel>ul{
  display:flex;gap:12px;list-style:none;margin:0;padding:0;flex-wrap:wrap;
}
.cbl-nav-cat-panel>ul li a{color:var(--cbl-muted);font-size:13px;}
.cbl-nav-cat-panel>ul li a:hover{color:var(--cbl-signal);}

/* ===== Main container ===== */
.cbl-main{
  max-width:var(--cbl-maxw);margin:0 auto;
  padding:88px 24px 48px;
}
.cbl-breadcrumb{
  font-size:13px;color:var(--cbl-muted);
  padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.cbl-breadcrumb a{color:var(--cbl-muted);}
.cbl-breadcrumb a:hover{color:var(--cbl-signal);}
.cbl-breadcrumb .cbl-sep{color:var(--cbl-line);}
.cbl-breadcrumb [aria-current="page"]{color:var(--cbl-text);}

/* ===== Hero ===== */
.cbl-hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1200px 400px at 70% -10%,rgba(31,209,196,.16),transparent 60%),
             linear-gradient(180deg,var(--cbl-surface),var(--cbl-ink));
  border:1px solid var(--cbl-line);border-radius:var(--cbl-radius);
  padding:56px 40px;margin-bottom:36px;
}
.cbl-hero-inner{position:relative;z-index:2;max-width:760px;}
.cbl-hero h1{font-size:34px;margin:0 0 14px;line-height:1.3;}
.cbl-hero-sub{color:var(--cbl-muted);font-size:16px;margin:0 0 22px;}
.cbl-hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.cbl-btn{
  display:inline-block;padding:11px 22px;border-radius:10px;font-weight:700;
  background:linear-gradient(135deg,var(--cbl-signal),#13a89d);
  color:#04121a;border:0;
}
.cbl-btn:hover{color:#04121a;filter:brightness(1.08);}
.cbl-btn-ghost{background:transparent;border:1px solid var(--cbl-signal);color:var(--cbl-signal);}
.cbl-hero-beam{
  position:absolute;right:-80px;top:-80px;width:360px;height:360px;z-index:1;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at center,transparent 0 26px,rgba(31,209,196,.10) 26px 27px);
  animation:cb-beam 9s linear infinite;
}
@keyframes cb-beam{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* ===== Sections ===== */
.cbl-section{margin:36px 0;}
.cbl-sec-title{
  font-size:22px;margin:0 0 18px;padding-left:12px;
  border-left:4px solid var(--cbl-signal);
}
.cbl-baseline p{color:var(--cbl-muted);font-size:16px;}
.cbl-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
.cbl-cat-card{
  display:block;background:var(--cbl-surface);border:1px solid var(--cbl-line);
  border-radius:var(--cbl-radius);padding:20px;color:var(--cbl-text);
  transition:.18s;
}
.cbl-cat-card:hover{border-color:var(--cbl-signal);transform:translateY(-3px);}
.cbl-cat-card h3{margin:0 0 8px;color:var(--cbl-signal);font-size:18px;}
.cbl-cat-card p{margin:0;color:var(--cbl-muted);font-size:14px;}
.cbl-kw-cloud{display:flex;flex-wrap:wrap;gap:10px;}
.cbl-kw{
  display:inline-block;background:var(--cbl-surface-2);border:1px solid var(--cbl-line);
  color:var(--cbl-text);border-radius:999px;padding:6px 14px;font-size:13px;
}
.cbl-scenario-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.cbl-scenario{background:var(--cbl-surface);border:1px solid var(--cbl-line);border-radius:var(--cbl-radius);padding:18px;}
.cbl-scenario h3{margin:0 0 8px;color:var(--cbl-sweep);font-size:16px;}
.cbl-scenario p{margin:0;color:var(--cbl-muted);font-size:14px;}
.cbl-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.cbl-prod-card{display:block;background:var(--cbl-surface);border:1px solid var(--cbl-line);border-radius:var(--cbl-radius);padding:18px;color:var(--cbl-text);transition:.18s;}
.cbl-prod-card:hover{border-color:var(--cbl-signal);transform:translateY(-3px);}
.cbl-prod-card h3{margin:0 0 8px;font-size:16px;}
.cbl-prod-card p{margin:0;color:var(--cbl-muted);font-size:14px;}
.cbl-link-list{list-style:none;margin:0;padding:0;}
.cbl-link-list li{padding:12px 0;border-bottom:1px solid var(--cbl-line);}
.cbl-link-list a{font-weight:600;}
.cbl-link-list span{display:block;color:var(--cbl-muted);font-size:14px;margin-top:4px;}

/* ===== Detail layout ===== */
.cbl-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:36px;align-items:start;}
.cbl-content-main h1{font-size:30px;margin:0 0 18px;line-height:1.3;}
.cbl-page-main h1{font-size:30px;margin:0 0 20px;}
.cbl-page-wrap{padding:0;}
.cbl-content-main h2{
  font-size:22px;margin:34px 0 14px;padding-left:12px;
  border-left:4px solid var(--cbl-signal);scroll-margin-top:90px;
}
.cbl-content-main h3{font-size:18px;margin:24px 0 10px;color:var(--cbl-signal);}
.cbl-content-main p{margin:0 0 16px;color:#d4dde8;}
.cbl-content-main ul,.cbl-content-main ol{margin:0 0 16px;padding-left:22px;color:#d4dde8;}
.cbl-content-main li{margin:6px 0;}
.cbl-content-main blockquote{
  margin:16px 0;padding:14px 18px;background:var(--cbl-surface);
  border-left:4px solid var(--cbl-sweep);border-radius:8px;color:var(--cbl-muted);
}
.cbl-content-main strong{color:var(--cbl-text);}
.cbl-content-main code{background:var(--cbl-surface-2);padding:2px 6px;border-radius:5px;font-size:14px;color:var(--cbl-signal);}

/* Tables (M26: cover all .content-main tables) */
.cbl-content-main table,.cbl-page-main table,table.cbl-spec{
  width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;
  border:1px solid #cbd5e1;
}
.cbl-content-main table th,.cbl-content-main table td,
.cbl-page-main table th,.cbl-page-main table td,
table.cbl-spec th,table.cbl-spec td{
  border:1px solid #cbd5e1;padding:9px 12px;text-align:left;
}
.cbl-content-main table th,.cbl-page-main table th,table.cbl-spec th{
  background:var(--cbl-signal);color:#04121a;font-weight:700;
}
.cbl-content-main table tr:nth-child(even) td,
.cbl-page-main table tr:nth-child(even) td,
table.cbl-spec tr:nth-child(even) td{background:rgba(31,209,196,.06);}

/* Summary block + keywords + time */
.cbl-summary{background:var(--cbl-surface);border:1px solid var(--cbl-line);border-radius:10px;padding:14px 18px;color:var(--cbl-muted);margin:0 0 16px;}
.cbl-keywords{margin:0 0 12px;}
.cbl-update{display:inline-block;color:var(--cbl-muted);font-size:13px;margin:0 0 8px;}

/* FAQ */
.cbl-faq{margin-top:34px;border-top:1px solid var(--cbl-line);padding-top:18px;}
.cbl-faq h2{font-size:20px;color:var(--cbl-signal);}
.cbl-faq details{border:1px solid var(--cbl-line);border-radius:10px;margin:10px 0;background:var(--cbl-surface);}
.cbl-faq summary{cursor:pointer;padding:12px 16px;font-weight:600;color:var(--cbl-text);}
.cbl-faq summary::-webkit-details-marker{color:var(--cbl-signal);}
.cbl-faq-a{padding:0 16px 14px;color:#d4dde8;}

/* TOC */
.cbl-toc-aside{position:sticky;top:88px;max-height:calc(100vh - 110px);overflow:auto;}
.cbl-toc-panel{border:1px solid var(--cbl-line);border-radius:12px;background:var(--cbl-surface);padding:6px 0;}
.cbl-toc-panel>summary{cursor:pointer;padding:12px 16px;font-weight:700;color:var(--cbl-signal);list-style:none;}
.cbl-toc-panel>summary::-webkit-details-marker{display:none;}
.cbl-toc-panel>summary::after{content:"▾";float:right;color:var(--cbl-muted);}
.cbl-toc-panel[open]>summary::after{content:"▴";}
.cbl-toc-panel nav ul{list-style:none;margin:0;padding:0 16px 12px;}
.cbl-toc-panel nav a{display:block;padding:5px 0;color:var(--cbl-muted);font-size:14px;border-bottom:1px solid var(--cbl-line);}
.cbl-toc-panel nav a:hover{color:var(--cbl-signal);}

/* ===== List layout (M27: 240px minmax(0,1fr)) ===== */
.cbl-list-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start;}
.cbl-cat-side{}
.cbl-cat-panel{border:1px solid var(--cbl-line);border-radius:12px;background:var(--cbl-surface);}
.cbl-cat-panel>summary{cursor:pointer;padding:12px 16px;font-weight:700;color:var(--cbl-signal);list-style:none;}
.cbl-cat-panel>summary::-webkit-details-marker{display:none;}
.cbl-cat-panel>summary::after{content:"▾";float:right;color:var(--cbl-muted);}
.cbl-cat-panel[open]>summary::after{content:"▴";}
.cbl-category-list{list-style:none;margin:0;padding:6px 16px 14px;}
.cbl-category-list li{margin:4px 0;}
.cbl-category-list a{display:block;padding:7px 10px;border-radius:8px;color:var(--cbl-muted);font-size:14px;}
.cbl-category-list a:hover,.cbl-category-list a.active{background:var(--cbl-surface-2);color:var(--cbl-signal);}
.cbl-cat-content h1{font-size:28px;margin:0 0 8px;}
.cbl-cat-desc{color:var(--cbl-muted);margin:0 0 20px;}
.cbl-list-items{list-style:none;margin:0;padding:0;}
.cbl-list-items li{padding:16px 0;border-bottom:1px solid var(--cbl-line);}
.cbl-list-title{font-size:18px;font-weight:700;color:var(--cbl-text);}
.cbl-list-title:hover{color:var(--cbl-signal);}
.cbl-list-items p{margin:6px 0 0;color:var(--cbl-muted);font-size:14px;}

/* ===== Floating capsule ===== */
.cbl-float{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:10px;
}
.cbl-float-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:54px;height:54px;border-radius:16px;border:0;cursor:pointer;
  background:linear-gradient(160deg,var(--cbl-signal),var(--cbl-sweep));
  color:#04121a;font-weight:700;font-size:11px;box-shadow:0 6px 18px rgba(31,209,196,.25);
}
.cbl-float-btn:hover{filter:brightness(1.08);}
.cbl-float-ico{font-size:18px;line-height:1;}
.cbl-card-mask{
  position:fixed;inset:0;z-index:70;background:rgba(4,8,16,.7);
  display:flex;align-items:center;justify-content:center;
}
.cbl-card-mask[hidden]{display:none;}
.cbl-card-box{position:relative;background:#fff;border-radius:12px;padding:8px;box-shadow:0 12px 40px rgba(0,0,0,.5);}
.cbl-card-box img{display:block;border-radius:8px;}
.cbl-card-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--cbl-sweep);color:#04121a;font-size:20px;cursor:pointer;line-height:1;}

/* ===== Footer ===== */
.cbl-footer{border-top:1px solid var(--cbl-line);background:var(--cbl-surface);margin-top:48px;}
.cbl-footer-inner{max-width:var(--cbl-maxw);margin:0 auto;padding:34px 24px;display:flex;gap:40px;flex-wrap:wrap;}
.cbl-footer-logo{font-weight:800;color:var(--cbl-signal);margin-bottom:10px;}
.cbl-footer-brand p{color:var(--cbl-muted);font-size:14px;max-width:420px;margin:0;}
.cbl-footer-cols{display:flex;gap:48px;flex-wrap:wrap;margin-left:auto;}
.cbl-footer-cols h4{margin:0 0 10px;font-size:15px;color:var(--cbl-text);}
.cbl-footer-cols ul{list-style:none;margin:0;padding:0;}
.cbl-footer-cols li{margin:6px 0;}
.cbl-footer-cols a{color:var(--cbl-muted);font-size:14px;}
.cbl-footer-cols a:hover{color:var(--cbl-signal);}
.cbl-footer-bottom{border-top:1px solid var(--cbl-line);text-align:center;color:var(--cbl-muted);font-size:13px;padding:14px;}
.cbl-404{text-align:center;padding:60px 0;}
.cbl-404 h1{font-size:64px;color:var(--cbl-signal);margin:0;}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .cbl-nav-toggle{display:block;}
  .cbl-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:6px;
    background:var(--cbl-surface);border-bottom:1px solid var(--cbl-line);
    padding:14px 24px;
  }
  .cbl-nav.open{display:flex;}
  .cbl-nav>a{padding:8px 0;}
  .cbl-nav-cat-panel>summary{display:block;}
  .cbl-nav-cat-panel:not([open])>ul{display:none;}
  .cbl-nav-cat-panel>ul{flex-direction:column;gap:4px;padding:4px 0 10px;}
  .cbl-article-layout{grid-template-columns:1fr;}
  .cbl-toc-aside{position:static;max-height:none;order:2;}
  .cbl-list-layout{grid-template-columns:1fr;}
  .cbl-cat-side{order:1;}
}
@media (max-width:560px){
  .cbl-main{padding:80px 16px 40px;}
  .cbl-hero{padding:36px 22px;}
  .cbl-hero h1{font-size:26px;}
  .cbl-float{right:10px;}
  .cbl-float-btn{width:48px;height:48px;}
}
