:root{
  --opn-ink:#0B1020;
  --opn-surface:#121A2E;
  --opn-surface-2:#172138;
  --opn-line:#2A3450;
  --opn-violet:#7C5CFC;
  --opn-violet-soft:rgba(124,92,252,.14);
  --opn-teal:#20E3B2;
  --opn-text:#E6EAF5;
  --opn-muted:#9AA6C4;
  --opn-radius:14px;
  --opn-header-h:64px;
  --opn-h2-inset:16px;
  --opn-maxw:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--opn-ink);color:var(--opn-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:var(--opn-violet);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
h1,h2,h3,h4{color:#fff;line-height:1.35;font-weight:700;}
code{font-family:"SFMono-Regular",Consolas,Menlo,monospace;background:var(--opn-surface-2);padding:1px 6px;border-radius:6px;color:var(--opn-teal);font-size:.92em;}

/* ===== Header ===== */
.opn-header{position:fixed;top:0;left:0;right:0;height:var(--opn-header-h);z-index:60;
  background:rgba(11,16,32,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--opn-line);}
.opn-header-inner{max-width:var(--opn-maxw);margin:0 auto;height:100%;padding:0 24px;
  display:flex;align-items:center;gap:18px;}
.opn-brand{font-weight:800;font-size:18px;color:#fff;white-space:nowrap;letter-spacing:.3px;}
.opn-nav-toggle{display:none;background:none;border:1px solid var(--opn-line);color:#fff;font-size:20px;
  width:42px;height:38px;border-radius:10px;cursor:pointer;}
.opn-nav{display:flex;align-items:center;gap:4px;margin-left:auto;height:100%;}
.opn-nav-item{position:relative;color:var(--opn-muted);padding:0 14px;height:100%;display:flex;align-items:center;
  cursor:pointer;font-size:15px;transition:color .15s;}
.opn-nav-item:hover,.opn-nav-item:hover .opn-nav-trigger{color:#fff;}
.opn-nav-trigger{display:inline-block;}
.opn-nav-has .opn-nav-sub{position:absolute;top:var(--opn-header-h);left:0;min-width:180px;
  background:var(--opn-surface);border:1px solid var(--opn-line);border-radius:0 0 12px 12px;
  padding:8px 0;display:none;flex-direction:column;box-shadow:0 12px 30px rgba(0,0,0,.4);}
.opn-nav-has:hover .opn-nav-sub,.opn-nav-has:focus-within .opn-nav-sub{display:flex;}
.opn-nav-sub a{padding:8px 18px;color:var(--opn-muted);font-size:14px;white-space:nowrap;}
.opn-nav-sub a:hover{color:#fff;background:var(--opn-violet-soft);text-decoration:none;}

/* ===== Layout ===== */
.opn-main{padding-top:var(--opn-header-h);min-height:70vh;}
.opn-container{max-width:var(--opn-maxw);margin:0 auto;padding:0 24px;}
.opn-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px;margin-top:24px;align-items:start;}
.opn-list-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;margin-top:24px;align-items:start;}
.opn-content-main{min-width:0;}
.opn-toc-aside{position:sticky;top:calc(var(--opn-header-h) + 16px);max-height:calc(100vh - var(--opn-header-h) - 32px);overflow:auto;}
.opn-page-wrap{max-width:980px;margin:0;}

/* ===== Breadcrumb (aligned with H2 left edge) ===== */
.opn-breadcrumb{margin-top:18px;font-size:13.5px;color:var(--opn-muted);}
.opn-breadcrumb-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;}
.opn-breadcrumb-list li{display:flex;align-items:center;gap:6px;}
.opn-breadcrumb a{color:var(--opn-muted);}
.opn-breadcrumb a:hover{color:var(--opn-teal);}
.opn-breadcrumb-sep{color:var(--opn-line);}
.opn-breadcrumb [aria-current="page"]{color:var(--opn-text);}

/* ===== Title & meta ===== */
.opn-title{font-size:30px;margin:14px 0 10px;padding-left:var(--opn-h2-inset);}
.opn-meta-line{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-left:var(--opn-h2-inset);
  font-size:13.5px;color:var(--opn-muted);margin-bottom:18px;}
.opn-tag-cat{background:var(--opn-violet-soft);color:var(--opn-violet);padding:3px 10px;border-radius:20px;font-size:12.5px;}
.opn-status{background:rgba(32,227,178,.14);color:var(--opn-teal);padding:3px 10px;border-radius:20px;font-size:12.5px;}
.opn-keywords-inline{color:var(--opn-muted);}

/* ===== Body content ===== */
.opn-body{padding-left:var(--opn-h2-inset);}
.opn-body p{margin:0 0 16px;}
.opn-body h2{font-size:22px;margin:30px 0 14px;padding-left:0;color:#fff;
  border-left:3px solid var(--opn-violet);padding-left:12px;}
.opn-body h3{font-size:18px;margin:22px 0 10px;color:#fff;}
.opn-body ul,.opn-body ol{margin:0 0 16px;padding-left:24px;}
.opn-body li{margin:6px 0;}
.opn-body blockquote{margin:16px 0;padding:14px 18px;background:var(--opn-surface);
  border-left:3px solid var(--opn-teal);border-radius:0 10px 10px 0;color:var(--opn-text);}
.opn-body blockquote p{margin:0;}
.opn-body strong{color:#fff;}
.opn-body time{display:inline-block;color:var(--opn-muted);font-size:13px;}

/* ===== Tables (cover all, incl. markdown bare <table>) ===== */
.opn-content-main table,.opn-page-main table,.opn-body table,table.opn-spec{
  width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px;
  border:1px solid var(--opn-line);background:var(--opn-surface);}
.opn-content-main th,.opn-body th,table.opn-spec th{
  background:var(--opn-violet);color:#fff;text-align:left;padding:10px 12px;font-weight:600;}
.opn-content-main td,.opn-body td,table.opn-spec td{
  border:1px solid var(--opn-line);padding:9px 12px;color:var(--opn-text);}
.opn-content-main tbody tr:nth-child(even) td,table.opn-spec tbody tr:nth-child(even) td{background:rgba(255,255,255,.03);}

/* ===== TOC panel ===== */
.opn-toc-panel{background:var(--opn-surface);border:1px solid var(--opn-line);border-radius:var(--opn-radius);padding:14px 16px;}
.opn-toc-summary{cursor:pointer;font-weight:700;color:#fff;list-style:none;display:flex;align-items:center;justify-content:space-between;}
.opn-toc-summary::-webkit-details-marker{display:none;}
.opn-toc-summary::after{content:"▾";color:var(--opn-violet);transition:transform .2s;margin-left:8px;}
.opn-toc-panel:not([open]) .opn-toc-summary::after{transform:rotate(-90deg);}
.opn-toc-list{margin:12px 0 0;padding-left:18px;}
.opn-toc-list li{margin:7px 0;}
.opn-toc-list a{color:var(--opn-muted);font-size:13.5px;}
.opn-toc-list a:hover{color:var(--opn-teal);}

/* ===== Category panel (list pages) ===== */
.opn-cat-panel{background:var(--opn-surface);border:1px solid var(--opn-line);border-radius:var(--opn-radius);padding:14px 16px;}
.opn-cat-summary{cursor:pointer;font-weight:700;color:#fff;list-style:none;display:flex;align-items:center;justify-content:space-between;}
.opn-cat-summary::-webkit-details-marker{display:none;}
.opn-cat-summary::after{content:"▾";color:var(--opn-violet);transition:transform .2s;margin-left:8px;}
.opn-cat-panel:not([open]) .opn-cat-summary::after{transform:rotate(-90deg);}
.opn-category-list{list-style:none;margin:12px 0 0;padding:0;}
.opn-category-list li{margin:2px 0;}
.opn-category-list a{display:block;padding:8px 12px;border-radius:8px;color:var(--opn-muted);font-size:14.5px;}
.opn-category-list a:hover{background:var(--opn-violet-soft);color:#fff;text-decoration:none;}
.opn-category-list a.active{background:var(--opn-violet);color:#fff;}

/* ===== List / cards ===== */
.opn-list-title{font-size:26px;margin:6px 0 8px;}
.opn-list-intro{color:var(--opn-muted);margin:0 0 20px;max-width:760px;}
.opn-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
.opn-card{display:block;background:var(--opn-surface);border:1px solid var(--opn-line);border-radius:var(--opn-radius);
  padding:18px;transition:transform .15s,border-color .15s;color:var(--opn-text);}
.opn-card:hover{transform:translateY(-3px);border-color:var(--opn-violet);text-decoration:none;}
.opn-card-cat{font-size:12px;color:var(--opn-teal);margin-bottom:8px;}
.opn-card-title{font-size:17px;margin:0 0 8px;color:#fff;}
.opn-card-desc{font-size:13.5px;color:var(--opn-muted);margin:0;line-height:1.6;}

/* ===== FAQ ===== */
.opn-faq{margin-top:34px;padding-left:var(--opn-h2-inset);}
.opn-faq-title{font-size:22px;color:#fff;margin:0 0 14px;border-left:3px solid var(--opn-violet);padding-left:12px;}
.opn-faq-item{background:var(--opn-surface);border:1px solid var(--opn-line);border-radius:10px;margin-bottom:10px;padding:0 16px;}
.opn-faq-item summary{cursor:pointer;padding:14px 0;font-weight:600;color:#fff;list-style:none;display:flex;align-items:center;justify-content:space-between;}
.opn-faq-item summary::-webkit-details-marker{display:none;}
.opn-faq-item summary::after{content:"+";color:var(--opn-violet);font-size:20px;}
.opn-faq-item[open] summary::after{content:"−";}
.opn-faq-item p{margin:0 0 14px;color:var(--opn-text);}

/* ===== Float capsule ===== */
.opn-float{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;gap:10px;}
.opn-float-btn{width:auto;min-width:46px;height:46px;padding:0 12px;border:none;border-radius:24px;cursor:pointer;
  background:linear-gradient(135deg,var(--opn-violet),#5B3FE0);color:#fff;font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 8px 22px rgba(124,92,252,.45);}
.opn-float-btn:hover{filter:brightness(1.08);}
.opn-float-ico{font-size:16px;}
.opn-card-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;}
.opn-card-modal[hidden]{display:none;}
.opn-card-mask{position:absolute;inset:0;background:rgba(0,0,0,.7);}
.opn-card-box{position:relative;background:#fff;border-radius:10px;padding:8px;max-height:92vh;}
.opn-card-img{display:block;width:300px;height:500px;object-fit:contain;border-radius:6px;}
.opn-card-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;border:none;
  background:var(--opn-violet);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4);}

/* ===== Home ===== */
.opn-hero{background:radial-gradient(1200px 400px at 70% -10%,rgba(124,92,252,.25),transparent),
  radial-gradient(900px 360px at 10% 10%,rgba(32,227,178,.16),transparent),var(--opn-ink);
  border-bottom:1px solid var(--opn-line);padding:64px 0 56px;}
.opn-hero-inner{max-width:var(--opn-maxw);margin:0 auto;padding:0 24px;}
.opn-hero-kicker{display:inline-block;color:var(--opn-teal);font-size:13.5px;letter-spacing:.5px;margin-bottom:14px;}
.opn-hero-title{font-size:42px;line-height:1.2;margin:0 0 16px;max-width:860px;}
.opn-hero-sub{color:var(--opn-muted);font-size:17px;max-width:720px;margin:0 0 26px;}
.opn-hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
.opn-btn{display:inline-block;padding:12px 22px;border-radius:30px;font-weight:600;font-size:15px;cursor:pointer;}
.opn-btn-primary{background:linear-gradient(135deg,var(--opn-violet),#5B3FE0);color:#fff;}
.opn-btn-primary:hover{text-decoration:none;filter:brightness(1.08);}
.opn-btn-ghost{border:1px solid var(--opn-line);color:#fff;}
.opn-btn-ghost:hover{text-decoration:none;border-color:var(--opn-teal);}
.opn-section{padding:48px 0;}
.opn-section-alt{background:var(--opn-surface);border-top:1px solid var(--opn-line);border-bottom:1px solid var(--opn-line);}
.opn-section-title{font-size:24px;margin:0 0 22px;color:#fff;}
.opn-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.opn-prod-card{display:block;background:var(--opn-surface);border:1px solid var(--opn-line);border-radius:var(--opn-radius);
  padding:20px;color:var(--opn-text);transition:transform .15s,border-color .15s;}
.opn-prod-card:hover{transform:translateY(-3px);border-color:var(--opn-teal);text-decoration:none;}
.opn-prod-card h3{margin:0 0 10px;font-size:18px;color:var(--opn-teal);}
.opn-prod-card p{margin:0;font-size:14px;color:var(--opn-muted);line-height:1.65;}
.opn-kw-cloud{display:flex;flex-wrap:wrap;gap:10px;}
.opn-kw{background:var(--opn-violet-soft);color:var(--opn-violet);padding:7px 14px;border-radius:20px;font-size:14px;}
.opn-baseline{margin:0;padding-left:22px;}
.opn-baseline li{margin:10px 0;color:var(--opn-text);}
.opn-scenario-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.opn-scenario{background:var(--opn-surface);border:1px solid var(--opn-line);border-left:3px solid var(--opn-teal);
  border-radius:0 10px 10px 0;padding:16px;font-size:14.5px;color:var(--opn-text);line-height:1.65;}
.opn-cta{margin-top:26px;}

/* ===== Archive ===== */
.opn-archive-intro{color:var(--opn-muted);max-width:760px;}
.opn-archive-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin:14px 0 34px;}
.opn-archive-col h3{font-size:17px;color:var(--opn-teal);margin:0 0 10px;}
.opn-archive-col ul{list-style:none;padding:0;margin:0;}
.opn-archive-col li{margin:6px 0;}
.opn-archive-col a{color:var(--opn-muted);font-size:14px;}
.opn-archive-col a:hover{color:var(--opn-teal);}

/* ===== Footer ===== */
.opn-footer{margin-top:50px;background:var(--opn-surface);border-top:1px solid var(--opn-line);}
.opn-footer-inner{max-width:var(--opn-maxw);margin:0 auto;padding:40px 24px 24px;display:grid;
  grid-template-columns:1.4fr 2fr;gap:30px;}
.opn-footer-logo{font-weight:800;font-size:18px;color:#fff;margin-bottom:10px;}
.opn-footer-desc{color:var(--opn-muted);font-size:14px;max-width:420px;line-height:1.7;margin:0;}
.opn-footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.opn-footer-col h4{font-size:14px;color:var(--opn-teal);margin:0 0 12px;}
.opn-footer-col a{display:block;color:var(--opn-muted);font-size:14px;margin:7px 0;}
.opn-footer-col a:hover{color:#fff;}
.opn-footer-bar{border-top:1px solid var(--opn-line);text-align:center;color:var(--opn-muted);font-size:13px;padding:16px;}

.opn-404{text-align:center;padding:60px 0;}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .opn-nav-toggle{display:block;}
  .opn-nav{position:absolute;top:var(--opn-header-h);left:0;right:0;background:var(--opn-surface);
    flex-direction:column;align-items:stretch;height:auto;padding:10px 0;display:none;border-bottom:1px solid var(--opn-line);}
  .opn-nav.opn-nav-open{display:flex;}
  .opn-nav-item{height:auto;padding:12px 24px;}
  .opn-nav-has .opn-nav-sub{position:static;display:flex;box-shadow:none;border:none;border-radius:0;
    background:transparent;padding:0 0 6px 12px;}
  .opn-nav-has:hover .opn-nav-sub{display:flex;}
  .opn-layout{grid-template-columns:1fr;}
  .opn-toc-aside{position:static;max-height:none;}
  .opn-list-layout{grid-template-columns:1fr;}
  .opn-footer-inner{grid-template-columns:1fr;}
  .opn-hero-title{font-size:32px;}
  /* 折叠面板在手机端默认收起（由 JS 设置 open=false），但保留可点击入口 */
  .opn-toc-panel,.opn-cat-panel{/* 不得 display:none */}
}
@media (max-width:600px){
  .opn-container{padding:0 16px;}
  .opn-breadcrumb{margin-top:14px;}
  .opn-title,.opn-body,.opn-meta-line,.opn-faq{padding-left:8px;}
  .opn-hero-title{font-size:26px;}
  .opn-footer-cols{grid-template-columns:1fr 1fr;}
  .opn-float{right:10px;}
}