/* Layer 7 docs content, scoped from wiptor.com/docs */
.html-body{background:var(--bg);color:var(--text);font-family:var(--sans);border-radius:14px;border:1px solid var(--border);padding:32px 36px;line-height:1.6;font-size:15px;}
.html-body a{color:var(--accent);}
.html-body{
    --bg:#f5f5f7; --surface:#ffffff; --border:var(--border2);
    --text:#1d1d1f; --text-soft:#515154; --text-faint:#86868b;
    --success:#1f9d4a; --success-bg:rgba(48,209,88,0.12);
    --offline-bg:var(--surface);
    --accent:#5b47e0; --accent-bg:rgba(154,137,255,0.14);
    --host:#0f8f84; --host-bg:rgba(64,208,196,0.12);
    --danger:#d93025; --danger-bg:rgba(255,90,79,0.13);
    --warn:#b86e00; --warn-bg:rgba(255,169,64,0.13);
    --sans:'Geist', system-ui, -apple-system, sans-serif;
    --display:var(--sans);
    --mono:'IBM Plex Mono', ui-monospace, monospace;
  }
[data-theme="dark"] .html-body{
    --bg:#111114; --surface:#18181c; --border:var(--border2);
    --text:#ececf0; --text-soft:#a7a7b0; --text-faint:#7a7a85;
    --success:#30d158; --success-bg:rgba(48,209,88,0.12);
    --offline-bg:var(--surface);
    --accent:#9a89ff; --accent-bg:rgba(154,137,255,0.14);
    --host:#40d0c4; --host-bg:rgba(64,208,196,0.12);
    --danger:#ff5a4f; --danger-bg:rgba(255,90,79,0.13);
    --warn:#ffa940; --warn-bg:rgba(255,169,64,0.13);
    --sans:'Geist', system-ui, -apple-system, sans-serif;
    --display:var(--sans);
    --mono:'IBM Plex Mono', ui-monospace, monospace;
  }
.html-body a{ color:inherit; text-decoration:none; }
.html-body a:hover{ opacity:0.8; }
.html-body button{ font-family:var(--sans); cursor:pointer; }
.html-body code{ font-family:var(--mono); background:var(--offline-bg); padding:1px 6px; border-radius:5px; font-size:0.92em; }
.html-body .muted{ color:var(--text-soft); }
.html-body .faint{ color:var(--text-faint); }
.html-body .page-wrap{ display:flex; flex-direction:column; min-height:100vh; }
.html-body .logo{ display:flex; align-items:center; gap:9px; padding-right:14px; margin-right:6px; border-right:1px solid var(--border); }
.html-body .logo span{ font-family:var(--display); font-weight:700; font-size:16.5px; letter-spacing:-0.01em; }
.html-body .lang-switch{ display:flex; align-items:center; gap:2px; font-size:12px; font-weight:600; margin-right:2px; }
.html-body .lang-switch a{ padding:6px 7px; border-radius:7px; color:var(--text-faint); }
.html-body .lang-switch a.active{ color:var(--accent); background:var(--accent-bg); }
.html-body .lang-switch .sep{ color:var(--border); }
.html-body .btn-primary{ background:var(--accent); color: var(--text); border:none; border-radius:9px; padding:9px 16px; font-size:13.5px; font-weight:600; box-shadow:0 4px 14px -4px rgba(91,71,224,0.5); transition:box-shadow .15s ease, transform .15s ease; display:inline-block; }
.html-body .btn-primary:hover{ box-shadow:0 6px 18px -4px rgba(91,71,224,0.6); transform:translateY(-1px); opacity:1; }
.html-body .btn-primary.lg{ border-radius:10px; padding:13px 24px; font-size:14.5px; }
.html-body .btn-ghost{ display:inline-block; font-size:13.5px; font-weight:600; color:var(--accent); padding:12px 6px; }
.html-body section.section{ display:flex; flex-direction:column; gap:26px; padding:0 24px 48px 24px; max-width:1280px; margin:0 auto; width:100%; }
.html-body .eyebrow{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); text-align:left; margin:0 0 -24px 0; }
.html-body .section-title{ font-family:var(--display); font-weight:600; font-size:26px; text-align:left; margin:0; max-width:600px; }
.html-body .section-sub{ font-size:14px; color:var(--text-soft); text-align:left; max-width:560px; margin:-22px 0 0 0; line-height:1.6; }
.html-body .eyebrow.centered,.html-body .section-title.centered,.html-body .section-sub.centered{ text-align:center; margin-left:auto; margin-right:auto; }
.html-body .cta-row{ display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; }
.html-body .cta-note{ font-size:13px; color:var(--text-faint); }
@media (max-width: 760px){.html-body .logo{ padding-right:10px; margin-right:2px; }
.html-body .logo span{ font-size:15px; }
.html-body h1{ font-size:32px; }}
.html-body .docs-shell{ display:flex; max-width:1320px; margin:0 auto; width:100%; gap:0; align-items:flex-start; padding:0 24px; }
.html-body .docs-switcher{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.html-body .docs-switcher-label{ font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-faint); display:block; margin:0 0 8px 2px; }
.html-body .docs-switcher-tabs{ display:flex; flex-direction:column; gap:2px; }
.html-body .docs-switcher-tabs a{ font-size:13px; font-weight:600; color:var(--text-soft); padding:8px 10px; border-radius:8px; display:flex; align-items:center; gap:8px; }
.html-body .docs-switcher-tabs a:hover{ background:var(--surface); opacity:1; }
.html-body .docs-switcher-tabs a.active{ background:var(--accent-bg); color:var(--accent); }
.html-body .docs-switcher-tabs a .dot{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex-shrink:0; }
.html-body .docs-switcher-tabs a.active .dot{ background:var(--accent); }
.html-body .docs-main{ flex:1; min-width:0; padding:26px 0 80px 40px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:52px; max-width:760px; }
.html-body .docs-title{ margin-bottom:-28px; }
.html-body .docs-title h1{ font-family:var(--display); font-weight:700; font-size:27px; margin:0 0 6px 0; }
.html-body .docs-title p{ font-size:14px; color:var(--text-soft); line-height:1.6; margin:0; max-width:560px; }
.html-body .doc-section h2{ font-family:var(--display); font-weight:700; font-size:22px; margin:0 0 6px 0; scroll-margin-top:88px; }
.html-body .doc-section .kicker{ font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--accent); margin:0 0 6px 0; }
.html-body .doc-section > p.lead{ font-size:14px; color:var(--text-soft); line-height:1.65; margin:0 0 18px 0; }
.html-body .doc-section h3{ font-family:var(--display); font-weight:600; font-size:15.5px; margin:26px 0 10px 0; }
.html-body .doc-section p{ font-size:13.5px; color:var(--text-soft); line-height:1.7; margin:0 0 12px 0; }
.html-body .doc-section ul{ margin:0 0 12px 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.html-body .doc-section li{ font-size:13px; color:var(--text-soft); line-height:1.6; }
.html-body .warn-block{ display:flex; gap:14px; background:var(--danger-bg); border:1.5px solid var(--danger); border-radius:14px; padding:20px 22px; margin-top:8px; }
.html-body .warn-icon{ width:34px; height:34px; border-radius:10px; background:var(--danger); color: var(--text); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.html-body .warn-icon svg{ width:18px; height:18px; }
.html-body .warn-block strong{ color:var(--danger); }
.html-body .warn-block p{ color:#7a2626; margin:0 0 8px 0; }
.html-body .warn-block p:last-child{ margin-bottom:0; }
.html-body .term-wrap{ position:relative; background:#17161a; border-radius:14px; border:1px solid #2a2930; overflow:hidden; box-shadow:0 16px 36px -16px rgba(28,27,31,0.35); margin:14px 0; }
.html-body .term-titlebar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid #232227; }
.html-body .term-dot{ width:9px; height:9px; border-radius:50%; }
.html-body .term-dot.red{ background:#e0605a; }
.html-body .term-dot.yellow{ background:#e0b355; }
.html-body .term-dot.green{ background:#5cb87a; }
.html-body .term-title{ font-family:var(--mono); font-size:11px; color:#7a7871; margin-left:6px; }
.html-body .term-body{ background:#100f13; padding:18px; font-family:var(--mono); font-size:13px; line-height:1.6; overflow-x:auto; white-space:pre; }
.html-body .term-prompt{ color:#6b8f6f; margin-right:8px; }
.html-body .term-cmd{ color:#e8e6e0; }
.html-body .term-var{ color:#e8a15b; }
.html-body .term-copy{ position:absolute; top:52px; right:12px; width:28px; height:28px; border-radius:7px; border:1px solid #2a2930; background:#1c1b20; color:#9b978e; display:flex; align-items:center; justify-content:center; }
.html-body .term-copy:hover{ color:#e8e6e0; border-color:#3a3940; opacity:1; }
.html-body .term-copy.copied{ color:var(--success); border-color:var(--success); }
.html-body .step-list{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.html-body .step-row{ display:flex; gap:14px; align-items:flex-start; }
.html-body .step-num{ width:24px; height:24px; border-radius:50%; background:var(--accent-bg); color:var(--accent); font-family:var(--mono); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.html-body .step-row h4{ font-family:var(--display); font-weight:600; font-size:14px; margin:0 0 3px 0; }
.html-body .step-row p{ margin:0; }
.html-body .mod-table{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:12px 0; }
.html-body .mod-row{ display:grid; grid-template-columns:1fr 100px 2fr; gap:14px; padding:11px 16px; border-bottom:1px solid var(--border); align-items:center; }
.html-body .mod-row:last-child{ border-bottom:none; }
.html-body .mod-row.head{ background:var(--offline-bg); font-size:10.5px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; }
.html-body .mod-row .name{ font-size:13px; font-weight:600; color:var(--text); }
.html-body .mod-row .grp{ font-family:var(--mono); font-size:10.5px; color:var(--text-faint); background:var(--bg); border-radius:20px; padding:2px 9px; width:fit-content; }
.html-body .mod-row .desc{ font-size:12px; color:var(--text-soft); line-height:1.5; }
.html-body .type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.html-body .type-card{ background:var(--surface); border-radius:12px; padding:14px 16px; box-shadow:0 1px 3px var(--surface); }
.html-body .type-card h5{ font-family:var(--display); font-weight:600; font-size:13px; margin:0 0 8px 0; }
.html-body .type-card ul{ margin:0; padding-left:16px; display:flex; flex-direction:column; gap:5px; }
.html-body .type-card li{ font-size:12px; color:var(--text-soft); line-height:1.5; }
.html-body .type-card li strong{ color:var(--text); font-weight:600; }
.html-body .type-card.empty p{ font-size:12px; color:var(--text-faint); margin:0; line-height:1.5; }
.html-body .thresh-table{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:12px 0; }
.html-body .thresh-cell{ background:var(--surface); padding:12px 14px; }
.html-body .thresh-cell.head{ background:var(--offline-bg); font-size:10.5px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.03em; }
.html-body .thresh-cell .v{ font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text); }
.html-body .purpose-list{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.html-body .purpose-chip{ font-size:12px; font-weight:600; background:var(--surface); border-radius:9px; padding:8px 14px; box-shadow:0 1px 2px var(--surface); }
.html-body .state-list{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.html-body .state-row{ display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--surface); border-radius:9px; }
.html-body .state-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.html-body .state-dot.protected{ background:var(--success); }
.html-body .state-dot.open{ background:var(--accent); }
.html-body .state-dot.closed{ background:var(--text-faint); }
.html-body .state-row .n{ font-size:12.5px; font-weight:600; min-width:90px; }
.html-body .state-row .d{ font-size:12px; color:var(--text-soft); }
.html-body .profile-callout{ display:flex; align-items:center; gap:16px; background:var(--accent-bg); border-radius:14px; padding:20px 22px; margin:12px 0; }
.html-body .profile-count{ font-family:var(--display); font-weight:700; font-size:30px; color:var(--accent); white-space:nowrap; }
.html-body .profile-callout p{ margin:0; }
.html-body .profile-cat{ margin-top:22px; }
.html-body .profile-cat-title{ font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 8px 0; }
.html-body .profile-table{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.html-body .profile-row{ display:grid; grid-template-columns:1.3fr 0.9fr 0.7fr 1fr; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); align-items:center; }
.html-body .profile-row:last-child{ border-bottom:none; }
.html-body .profile-row.head{ background:var(--offline-bg); font-size:10px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.03em; }
.html-body .profile-row .svc{ font-size:12.5px; font-weight:600; }
.html-body .profile-row .port{ font-family:var(--mono); font-size:12px; color:var(--text-soft); }
.html-body .profile-row .proto{ font-family:var(--mono); font-size:10.5px; color:var(--text-faint); background:var(--bg); border-radius:20px; padding:2px 8px; width:fit-content; }
.html-body .profile-row .purp{ font-size:11.5px; color:var(--text-faint); }
.html-body .rule-example{ margin-top:12px; }
.html-body .rule-example-label{ font-size:11.5px; color:var(--text-faint); margin:0 0 6px 0; font-style:italic; }
.html-body .rule-code{ background:#100f13; border-radius:10px; padding:14px 16px; font-family:var(--mono); font-size:12px; line-height:1.7; color:#e8e6e0; overflow-x:auto; white-space:pre; }
.html-body .rule-code .c1{ color:#6b8f6f; }
.html-body .rule-code .c2{ color:#e8a15b; }
.html-body .depth-callout{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 28px; margin:14px 0 22px 0; box-shadow:0 20px 44px -20px rgba(91,71,224,0.45); }
.html-body .depth-callout::before{ content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(91,71,224,0.35) 0%, transparent 70%); pointer-events:none; }
.html-body .depth-callout h3{ font-family:var(--display); font-weight:700; font-size:16.5px; color: var(--text); margin:0 0 10px 0; position:relative; }
.html-body .depth-callout p{ font-size:13px; color:var(--text-soft); line-height:1.7; margin:0 0 10px 0; position:relative; }
.html-body .depth-callout p:last-child{ margin-bottom:0; }
.html-body .depth-callout strong{ color: var(--text); }
.html-body .depth-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; position:relative; }
.html-body .depth-chip{ font-family:var(--mono); font-size:10.5px; color:var(--text-soft); background:var(--bg); border:1px solid var(--border2); border-radius:20px; padding:5px 12px; }
.html-body .layer-arch{ display:flex; flex-direction:column; margin:16px 0 4px 0; }
.html-body .layer-block{ display:flex; gap:16px; align-items:flex-start; padding:18px 20px; background:var(--surface); border-radius:14px; box-shadow:0 1px 3px var(--surface); }
.html-body .layer-connector{ width:2px; height:22px; background:var(--border); margin-left:39px; }
.html-body .layer-num{ width:40px; height:40px; border-radius:11px; background:var(--accent-bg); color:var(--accent); font-family:var(--display); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.html-body .layer-block h4{ font-family:var(--display); font-weight:600; font-size:14.5px; margin:0 0 4px 0; }
.html-body .layer-block p{ font-size:12.5px; margin:0; color:var(--text-soft); line-height:1.55; }
.html-body .layer-block.mesh{ background:var(--accent); }
.html-body .layer-block.mesh .layer-num{ background:var(--line2); color: var(--text); }
.html-body .layer-block.mesh h4{ color: var(--text); }
.html-body .layer-block.mesh p{ color:var(--soft); }
.html-body .mesh-row{ display:flex; align-items:center; gap:6px; margin-top:14px; flex-wrap:wrap; }
.html-body .mesh-node{ width:30px; height:30px; border-radius:8px; background:var(--line2); display:flex; align-items:center; justify-content:center; color: var(--text); flex-shrink:0; }
.html-body .mesh-node svg{ width:14px; height:14px; }
.html-body .mesh-node.you{ background:var(--muted2); }
.html-body .mesh-line{ width:18px; height:0; border-top:1.5px dashed var(--muted2); flex-shrink:0; }
.html-body .mesh-label{ font-size:11px; color:var(--muted); margin-left:8px; }
.html-body .mesh-hub{ width:36px; height:36px; border-radius:10px; background:#fff; color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.html-body .mesh-hub svg{ width:17px; height:17px; }
.html-body .plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:12px 0; }
.html-body .plan-card{ background:var(--surface); border-radius:12px; padding:16px 18px; box-shadow:0 1px 3px var(--surface); }
.html-body .plan-card.plus{ box-shadow:0 4px 16px -8px rgba(91,71,224,0.25); border:1px solid var(--accent); }
.html-body .plan-card h5{ font-family:var(--display); font-weight:600; font-size:14px; margin:0 0 8px 0; }
.html-body .plan-card ul{ margin:0; padding-left:16px; display:flex; flex-direction:column; gap:5px; }
.html-body .plan-card li{ font-size:12px; color:var(--text-soft); line-height:1.5; }
.html-body .next-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.html-body .next-row{ display:flex; gap:12px; align-items:flex-start; background:var(--surface); border-radius:12px; padding:14px 16px; box-shadow:0 1px 2px var(--surface); }
.html-body .next-icon{ width:28px; height:28px; border-radius:8px; background:var(--accent-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.html-body .next-icon svg{ width:14px; height:14px; }
.html-body .next-row h4{ font-family:var(--display); font-weight:600; font-size:13.5px; margin:0 0 2px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.html-body .next-row p{ margin:0; font-size:12.5px; }
.html-body .next-tag{ font-size:9px; font-weight:700; color:var(--text-faint); background:var(--offline-bg); border-radius:20px; padding:2px 8px; letter-spacing:0.03em; }
.html-body .faq-item{ border-bottom:1px solid var(--border); padding:14px 0; }
.html-body .faq-item:last-child{ border-bottom:none; }
.html-body .faq-item h4{ font-family:var(--display); font-weight:600; font-size:14px; margin:0 0 6px 0; }
.html-body .faq-item p{ margin:0; }
@media (max-width:960px){.html-body .docs-main{ border-left:none; padding-left:0; max-width:100%; }
.html-body .type-grid,.html-body .plan-grid{ grid-template-columns:1fr; }
.html-body .thresh-table{ grid-template-columns:1fr 1fr; }}
/* stratul 3 (rețeaua Wiptor): fundal mov deschis, text normal, ca să se citească pe ambele teme */
.html-body .layer-block.mesh{ background:var(--accent-bg); border:1px solid var(--accent); }
.html-body .layer-block.mesh .layer-num{ background:var(--accent); color:#fff; }
.html-body .layer-block.mesh h4{ color:var(--text); }
.html-body .layer-block.mesh p, .html-body .mesh-label{ color:var(--text-soft); }
.html-body .mesh-node{ background:var(--surface); border:1px solid var(--border); color:var(--text-soft); }
.html-body .mesh-node.you{ background:var(--bg); }
.html-body .mesh-hub{ background:var(--accent); color:#fff; }

/* tema neagră: bara de derulare închisă, ca pe wiptor.com */
[data-theme="dark"]{color-scheme:dark}