@charset "UTF-8";
:root {
  --c-primary: #4f6ef7;
  --c-primary-light: #eef1ff;
  --c-secondary: #7c5cfc;
  --c-bg: #f5f6fa;
  --c-sidebar: #1e2235;
  --c-sidebar-w: 270px;
  --c-white: #fff;
  --c-text: #2c3e50;
  --c-text-light: #7b8794;
  --c-border: #e4e7ed;
  --c-radius: 10px;
  --c-shadow: 0 2px 12px rgba(80,110,247,.07);
  --c-font: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --c-transition: .2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--c-font);font-size:15px;line-height:1.75;color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased}
a{color:var(--c-primary);text-decoration:none;transition:color var(--c-transition)}
a:hover{color:var(--c-secondary)}
img{max-width:100%}

/* ===== Layout ===== */
.doc-layout{display:flex;min-height:100vh}

/* ===== Sidebar ===== */
.doc-sidebar{position:fixed;top:0;left:0;width:var(--c-sidebar-w);height:100vh;background:var(--c-sidebar);color:#fff;overflow-y:auto;z-index:100;display:flex;flex-direction:column;transition:transform var(--c-transition)}
.doc-sidebar::-webkit-scrollbar{width:4px}
.doc-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px}

.doc-sidebar-header{padding:28px 22px 18px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.doc-sidebar-header h2{font-size:17px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.doc-sidebar-header h2::before{content:"📖";font-size:20px}
.doc-sidebar-header p{font-size:12px;color:rgba(255,255,255,.4)}

.doc-nav{flex:1;padding:10px 0;overflow-y:auto}
.doc-nav-group{margin-bottom:2px}
.doc-nav-group-title{display:flex;align-items:center;justify-content:space-between;padding:10px 22px 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.3);cursor:pointer;user-select:none}
.doc-nav-group-title .arrow{font-size:9px;transition:transform var(--c-transition);opacity:.5}
.doc-nav-group.open .arrow{transform:rotate(90deg)}
.doc-nav-sub{display:none;padding:2px 0 6px}
.doc-nav-group.open .doc-nav-sub{display:block}

.doc-nav-item{display:block;padding:7px 22px 7px 34px;font-size:13.5px;color:rgba(255,255,255,.55);transition:all var(--c-transition);border-left:3px solid transparent;cursor:pointer}
.doc-nav-item:hover{color:#fff;background:rgba(255,255,255,.04)}
.doc-nav-item.active{color:#fff;background:rgba(79,110,247,.18);border-left-color:var(--c-primary)}
.doc-nav-item.sub{padding-left:48px;font-size:13px}

.doc-sidebar-footer{padding:14px 22px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:rgba(255,255,255,.2);flex-shrink:0}

/* ===== Hamburger ===== */
.doc-hamburger{display:none;position:fixed;top:14px;left:14px;z-index:200;width:40px;height:40px;background:var(--c-white);border:1px solid var(--c-border);border-radius:8px;cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--c-shadow);font-size:18px;color:var(--c-text)}
.doc-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90}
.doc-overlay.show{display:block}

/* ===== Main Content ===== */
.doc-main{margin-left:var(--c-sidebar-w);flex:1;min-width:0;padding:36px 40px 80px}
.doc-content{max-width:880px;margin:0 auto}
.doc-content h1{font-size:28px;font-weight:700;color:var(--c-text);margin-bottom:6px;line-height:1.35}
.doc-content h2{font-size:20px;font-weight:600;margin-top:40px;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--c-border)}
.doc-content h3{font-size:17px;font-weight:600;margin-top:28px;margin-bottom:10px}
.doc-content h4{font-size:15px;font-weight:600;margin-top:20px;margin-bottom:8px}
.doc-content p{margin-bottom:14px;color:var(--c-text)}
.doc-content ul,.doc-content ol{margin-bottom:14px;padding-left:22px}
.doc-content li{margin-bottom:5px}
.doc-content code{background:var(--c-primary-light);color:var(--c-secondary);padding:2px 6px;border-radius:4px;font-size:.9em;font-family:Consolas,"Liberation Mono",Menlo,monospace}
.doc-content pre{background:#1e2235;color:#cdd6f4;padding:18px;border-radius:8px;overflow-x:auto;margin-bottom:18px;line-height:1.5;font-size:13px}
.doc-content pre code{background:none;color:inherit;padding:0}

/* ===== Breadcrumb ===== */
.doc-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-text-light);margin-bottom:18px;flex-wrap:wrap}
.doc-breadcrumb a{color:var(--c-text-light)}
.doc-breadcrumb a:hover{color:var(--c-primary)}
.doc-breadcrumb .sep{color:#ccc;user-select:none}

/* ===== Step Card ===== */
.doc-step{background:var(--c-white);border-radius:var(--c-radius);box-shadow:var(--c-shadow);padding:24px 28px;margin-bottom:22px;position:relative;transition:box-shadow var(--c-transition)}
.doc-step:hover{box-shadow:0 4px 20px rgba(80,110,247,.12)}
.doc-step-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.doc-step-number{width:34px;height:34px;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));border-radius:50%;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.doc-step-title{font-size:17px;font-weight:600;color:var(--c-text)}
.doc-step-body{color:var(--c-text-light);line-height:1.75}
.doc-step-body p{margin-bottom:10px}

/* ===== Browser Mock ===== */
.doc-browser{background:var(--c-white);border-radius:var(--c-radius);box-shadow:var(--c-shadow);overflow:hidden;margin-bottom:22px;border:1px solid var(--c-border)}
.doc-browser-bar{background:#f1f3f5;padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--c-border)}
.doc-browser-dots{display:flex;gap:5px;flex-shrink:0}
.doc-browser-dot{width:11px;height:11px;border-radius:50%}
.doc-browser-dot.red{background:#ff5f57}
.doc-browser-dot.yellow{background:#ffbd2e}
.doc-browser-dot.green{background:#28c840}
.doc-browser-url{flex:1;background:#fff;border:1px solid var(--c-border);border-radius:5px;padding:4px 10px;font-size:11.5px;color:var(--c-text-light);font-family:Consolas,monospace}
.doc-browser-body{padding:20px;min-height:80px}

/* ===== Admin Panel Mock ===== */
.doc-admin-layout{display:flex;min-height:180px;border:1px solid var(--c-border);border-radius:8px;overflow:hidden;margin-bottom:16px;background:#fff}
.doc-admin-sidebar{width:160px;background:#f8f9fc;border-right:1px solid var(--c-border);padding:12px 0;flex-shrink:0}
.doc-admin-menu-group{margin-bottom:8px}
.doc-admin-menu-group-title{padding:8px 14px 4px;font-size:11px;font-weight:600;color:var(--c-text-light);text-transform:uppercase;letter-spacing:.5px}
.doc-admin-menu-item{display:block;padding:7px 14px 7px 22px;font-size:12.5px;color:var(--c-text-light);cursor:default}
.doc-admin-menu-item.active{color:var(--c-primary);font-weight:600;background:#fff;border-left:3px solid var(--c-primary)}
.doc-admin-content{flex:1;padding:18px;min-width:0}
.doc-admin-content-header{font-size:14px;font-weight:600;color:var(--c-text);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--c-border)}

/* ===== Form Mock ===== */
.doc-form-group{margin-bottom:14px}
.doc-form-label{display:block;font-size:12.5px;font-weight:600;color:var(--c-text);margin-bottom:5px}
.doc-form-input{width:100%;max-width:340px;padding:8px 11px;border:1px solid var(--c-border);border-radius:6px;font-size:13px;color:var(--c-text);background:#fff;font-family:var(--c-font)}
.doc-form-textarea{width:100%;max-width:440px;padding:8px 11px;border:1px solid var(--c-border);border-radius:6px;font-size:13px;color:var(--c-text);background:#fff;font-family:var(--c-font);resize:vertical;min-height:70px}
.doc-form-select{width:100%;max-width:340px;padding:8px 30px 8px 11px;border:1px solid var(--c-border);border-radius:6px;font-size:13px;color:var(--c-text);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%237b8794' d='M5 7L0 2h10z'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;font-family:var(--c-font);cursor:pointer}
.doc-form-upload{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#fff;border:1px dashed var(--c-border);border-radius:6px;font-size:13px;color:var(--c-text-light);cursor:pointer;transition:all var(--c-transition)}
.doc-form-upload:hover{border-color:var(--c-primary);color:var(--c-primary)}
.doc-form-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 20px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--c-font);transition:all var(--c-transition)}
.doc-form-btn-primary{background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));color:#fff}
.doc-form-btn-primary:hover{opacity:.9;box-shadow:0 4px 12px rgba(79,110,247,.3)}
.doc-form-btn-default{background:#fff;color:var(--c-text);border:1px solid var(--c-border)}
.doc-form-btn-sm{padding:4px 12px;font-size:11.5px}
.doc-form-btn-danger{background:#e74c3c;color:#fff}
.doc-form-btn-warning{background:#f39c12;color:#fff}
.doc-form-btn-success{background:#27ae60;color:#fff}
.doc-form-row{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.doc-form-row .doc-form-group{flex:1;min-width:180px;margin-bottom:0}

/* ===== Table ===== */
.doc-table-wrap{overflow-x:auto;margin-bottom:22px;border-radius:8px;border:1px solid var(--c-border);background:#fff}
.doc-table{width:100%;border-collapse:collapse;font-size:13.5px}
.doc-table th{background:#f8f9fc;padding:10px 14px;text-align:left;font-weight:600;color:var(--c-text);border-bottom:2px solid var(--c-border);white-space:nowrap}
.doc-table td{padding:10px 14px;border-bottom:1px solid var(--c-border);color:var(--c-text)}
.doc-table tr:last-child td{border-bottom:none}
.doc-table tr:hover td{background:rgba(79,110,247,.02)}

/* ===== Alert / Tip ===== */
.doc-alert{padding:14px 18px;border-radius:8px;margin-bottom:18px;font-size:13.5px;line-height:1.65;display:flex;gap:10px;align-items:flex-start}
.doc-alert-icon{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px}
.doc-alert-warning{background:#fef9e7;border:1px solid #f9e2a0;color:#8a6d3b}
.doc-alert-warning .doc-alert-icon{background:#f0ad4e;color:#fff}
.doc-alert-success{background:#eafaf1;border:1px solid #a3d9b1;color:#2d6a4f}
.doc-alert-success .doc-alert-icon{background:#28c840;color:#fff}
.doc-alert-info{background:var(--c-primary-light);border:1px solid #b8c9ff;color:#3b5998}
.doc-alert-info .doc-alert-icon{background:var(--c-primary);color:#fff}
.doc-alert-danger{background:#fef0f0;border:1px solid #fbc4c4;color:#a94442}
.doc-alert-danger .doc-alert-icon{background:#e74c3c;color:#fff}

/* ===== Flow Chart ===== */
.doc-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;margin:22px 0;padding:14px 0}
.doc-flow-step{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;background:#fff;border:2px solid var(--c-primary);border-radius:8px;min-width:90px;text-align:center}
.doc-flow-step-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
.doc-flow-step-text{font-size:12px;font-weight:500;color:var(--c-text)}
.doc-flow-arrow{display:flex;align-items:center;padding:0 6px;color:var(--c-primary);font-size:18px;flex-shrink:0}
.doc-flow-arrow::after{content:"→"}

/* ===== Badge ===== */
.doc-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:16px;font-size:11.5px;font-weight:500;line-height:1.6}
.doc-badge-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.doc-badge-enabled{background:#eafaf1;color:#2d6a4f}
.doc-badge-enabled .doc-badge-dot{background:#28c840}
.doc-badge-disabled{background:#fef0f0;color:#a94442}
.doc-badge-disabled .doc-badge-dot{background:#e74c3c}
.doc-badge-pending{background:#fef9e7;color:#8a6d3b}
.doc-badge-pending .doc-badge-dot{background:#f0ad4e}
.doc-badge-info{background:var(--c-primary-light);color:#3b5998}
.doc-badge-info .doc-badge-dot{background:var(--c-primary)}

/* ===== Size Diagram ===== */
.doc-size-diagram{display:flex;align-items:center;justify-content:center;gap:20px;margin:20px 0;padding:20px;background:#fff;border-radius:8px;border:1px solid var(--c-border)}
.doc-size-box{position:relative;border:2px dashed var(--c-primary);border-radius:6px;background:rgba(79,110,247,.04);display:flex;align-items:center;justify-content:center}
.doc-size-label{font-size:12px;color:var(--c-primary);font-weight:600;text-align:center}

/* ===== TOC ===== */
.doc-toc{background:#fff;border:1px solid var(--c-border);border-radius:8px;padding:16px 20px;margin-bottom:22px}
.doc-toc-title{font-size:13.5px;font-weight:600;color:var(--c-text);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--c-border)}
.doc-toc-list{list-style:none;padding:0;margin:0}
.doc-toc-item{margin-bottom:3px}
.doc-toc-link{display:block;padding:3px 0;font-size:13.5px;color:var(--c-text-light);transition:color var(--c-transition);border-left:2px solid transparent;padding-left:10px}
.doc-toc-link:hover{color:var(--c-primary)}
.doc-toc-link.active{color:var(--c-primary);border-left-color:var(--c-primary);font-weight:500}

/* ===== Page Nav ===== */
.doc-page-nav{display:flex;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid var(--c-border);gap:14px}
.doc-page-nav-item{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid var(--c-border);border-radius:8px;font-size:13px;color:var(--c-text);transition:all var(--c-transition);max-width:45%}
.doc-page-nav-item:hover{border-color:var(--c-primary);color:var(--c-primary);box-shadow:var(--c-shadow)}
.doc-page-nav-item.next{margin-left:auto;text-align:right}
.doc-page-nav-label{font-size:11px;color:var(--c-text-light);display:block}
.doc-page-nav-title{font-weight:500}

/* ===== Quick Cards (index) ===== */
.doc-quick-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:24px 0}
.doc-quick-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--c-radius);padding:20px;transition:all var(--c-transition);display:block;color:var(--c-text)}
.doc-quick-card:hover{border-color:var(--c-primary);box-shadow:0 4px 16px rgba(79,110,247,.12);color:var(--c-text);transform:translateY(-2px)}
.doc-quick-card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.doc-quick-card-icon.blue{background:#eef1ff}
.doc-quick-card-icon.green{background:#eafaf1}
.doc-quick-card-icon.orange{background:#fef9e7}
.doc-quick-card-icon.purple{background:#f3eeff}
.doc-quick-card h4{font-size:15px;font-weight:600;margin-bottom:6px}
.doc-quick-card p{font-size:13px;color:var(--c-text-light);margin:0}

/* ===== Module Table (index) ===== */
.doc-module-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--c-border)}
.doc-module-table th{background:#f8f9fc;padding:12px 16px;text-align:left;font-weight:600;color:var(--c-text);border-bottom:2px solid var(--c-border)}
.doc-module-table td{padding:11px 16px;border-bottom:1px solid var(--c-border)}
.doc-module-table tr:last-child td{border-bottom:none}
.doc-module-table tr:hover td{background:rgba(79,110,247,.02)}

/* ===== Confirm Dialog ===== */
.doc-confirm{background:#fff3e0;border:1px solid #ffcc80;border-radius:8px;padding:18px;margin:16px 0;text-align:center}
.doc-confirm-title{font-size:15px;font-weight:600;color:#e65100;margin-bottom:6px}
.doc-confirm-desc{font-size:13px;color:#666;margin-bottom:12px}

/* ===== Highlight Box ===== */
.doc-highlight{background:linear-gradient(120deg,rgba(79,110,247,.08),rgba(124,92,252,.08));border-left:4px solid var(--c-primary);padding:14px 18px;border-radius:0 8px 8px 0;margin:16px 0;font-size:13.5px}

/* ===== Sort Cards ===== */
.doc-sort-cards{display:flex;gap:12px;margin:16px 0;flex-wrap:wrap}
.doc-sort-card{flex:1;min-width:140px;border-radius:8px;padding:14px;text-align:center}
.doc-sort-card .num{font-size:24px;font-weight:700}
.doc-sort-card .label{font-size:12px;color:#888;margin-top:2px}
.doc-sort-card .result{font-size:13px;font-weight:600;margin-top:4px}

/* ===== Status Compare ===== */
.doc-status-compare{display:flex;gap:16px;margin:16px 0;flex-wrap:wrap}
.doc-status-box{flex:1;min-width:160px;border-radius:8px;padding:16px;text-align:center}
.doc-status-box .icon{font-size:26px;margin-bottom:6px}
.doc-status-box .title{font-size:14px;font-weight:600;margin-bottom:4px}
.doc-status-box .desc{font-size:12px;color:#666}

/* ===== Annotation System ===== */
.doc-annotate{position:relative;display:inline-block;max-width:100%}
.doc-annotate .doc-browser,.doc-annotate .doc-admin-layout{margin-bottom:0}

.doc-target{outline:2.5px solid #e74c3c;outline-offset:2px;border-radius:3px;animation:doc-target-glow 2s infinite;position:relative}
.doc-target:not(.doc-form-btn){background:rgba(231,76,60,.05)}
.doc-target::after{content:attr(data-num);position:absolute;top:-10px;right:-10px;width:20px;height:20px;background:#e74c3c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;box-shadow:0 2px 6px rgba(231,76,60,.4);z-index:30;line-height:1}
@keyframes doc-target-glow{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.25)}50%{box-shadow:0 0 0 5px rgba(231,76,60,0)}}

.doc-callout-box{position:relative;background:#fff;border:2px solid #e74c3c;border-radius:10px;padding:12px 14px 12px 40px;font-size:13px;line-height:1.6;color:var(--c-text);box-shadow:0 2px 10px rgba(231,76,60,.08);transition:box-shadow .2s}
.doc-callout-box:hover{box-shadow:0 4px 16px rgba(231,76,60,.15)}
.doc-callout-box .doc-callout-num{position:absolute;top:-10px;left:-10px;width:22px;height:22px;background:#e74c3c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:0 2px 6px rgba(231,76,60,.4);z-index:5}
.doc-callout-box .doc-callout-title{font-weight:600;color:#c0392b;margin-bottom:2px;font-size:13px}
.doc-callout-box .doc-callout-desc{color:var(--c-text-light);font-size:12px;line-height:1.5}

.doc-step-visual{position:relative;display:flex;gap:24px;align-items:flex-start;margin:16px 0;flex-wrap:wrap}
.doc-step-visual .doc-annotate{flex:1;min-width:300px}
.doc-step-visual .doc-callouts{flex:0 0 250px;display:flex;flex-direction:column;gap:12px}

.doc-guide-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:25;overflow:visible}

.doc-text-muted{font-size:14px;color:var(--c-text-light);margin-bottom:14px}
.doc-form-mock{padding:16px;background:#f8f9fc;border-radius:6px;border:1px solid var(--c-border)}
.doc-browser-address-icon{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--c-border);margin-right:4px;flex-shrink:0;display:inline-block;vertical-align:middle}
.doc-admin-sidebar-icon{width:16px;height:16px;border-radius:3px;background:var(--c-border);margin-right:6px;flex-shrink:0;display:inline-block;vertical-align:middle}
.doc-page-nav-arrow{font-size:16px;color:var(--c-text-light)}
.doc-form-upload-icon{width:32px;height:32px;border:1px dashed var(--c-border);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-text-light);font-size:18px;vertical-align:middle}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .doc-sidebar{transform:translateX(-100%)}
  .doc-sidebar.open{transform:translateX(0)}
  .doc-hamburger{display:flex}
  .doc-main{margin-left:0;padding:60px 20px 60px}
  .doc-admin-layout{flex-direction:column}
  .doc-admin-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--c-border);display:flex;overflow-x:auto;padding:0}
  .doc-admin-menu-group{display:flex;white-space:nowrap}
  .doc-admin-menu-item{padding:8px 12px;border-left:none;border-bottom:3px solid transparent}
  .doc-admin-menu-item.active{border-left:none;border-bottom-color:var(--c-primary)}
  .doc-flow{flex-direction:column}
  .doc-flow-arrow{transform:rotate(90deg);padding:4px 0}
  .doc-size-diagram{flex-direction:column}
  .doc-page-nav{flex-direction:column}
  .doc-page-nav-item{max-width:100%}
}
@media(max-width:640px){
  .doc-main{padding:52px 14px 48px}
  .doc-content h1{font-size:22px}
  .doc-step{padding:16px}
  .doc-step-number{width:28px;height:28px;font-size:12px}
  .doc-step-title{font-size:15px}
  .doc-browser-body{padding:14px}
  .doc-form-input,.doc-form-select,.doc-form-textarea{max-width:100%}
  .doc-quick-cards{grid-template-columns:1fr}
}