:root {
    --blue: #005fab; --green: #00cd60; --dark: #141937;
    --gray-50: #f7f8fa; --gray-100: #eef0f4; --gray-200: #dde1e8; --gray-300: #b0b8c9;
    --grad: linear-gradient(135deg,#005fab 0%,#00cd60 100%);
    --grad-dark: linear-gradient(135deg,#141937 0%,#1e2a4a 100%);
    --sidebar-w: 280px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Inter',-apple-system,sans-serif; color:var(--dark); background:#f4f6f9; height:100vh; overflow:hidden; }
  a { color:var(--blue); } a:hover { color:var(--green); }
  .app { display:flex; height:100vh; }

  /* MOBILE */
  .menu-toggle { display:none; position:fixed; top:12px; left:12px; z-index:200; width:36px; height:36px; border-radius:10px; background:var(--grad-dark); border:none; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
  .menu-toggle span { display:block; width:18px; height:2px; background:#fff; border-radius:1px; transition:transform .2s; }
  .sidebar-overlay { display:none; position:fixed; inset:0; background:#00000060; z-index:99; }
  @media (max-width: 768px) {
    :root { --sidebar-w: 260px; }
    .menu-toggle { display:flex; }
    .sidebar { position:fixed; left:calc(-1 * var(--sidebar-w)); top:0; height:100vh; z-index:100; transition:left .25s ease; }
    .sidebar.open { left:0; }
    .sidebar-overlay.open { display:block; }
    .main { width:100%; }
    .topbar { padding:0 16px 0 56px; }
    .content-wrap { padding:20px 16px; }
    .panel { padding:24px 20px; }
    .panel-cover { padding:40px 28px; }
    .panel-cover h1 { font-size:28px; }
    .feature-grid { grid-template-columns:repeat(2,1fr); }
    .guide-footer { margin:0 16px 24px; padding:32px 24px; }
  }
  @media (max-width: 480px) {
    .feature-grid { grid-template-columns:1fr; }
    .panel-cover h1 { font-size:24px; }
  }

  /* SIDEBAR */
  .sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); background:var(--grad-dark); display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  .sidebar-logo { padding:24px 20px; border-bottom:1px solid #ffffff10; display:flex; flex-direction:column; gap:10px; }
  .sidebar-logo img { height:36px; width:auto; filter:brightness(0) invert(1); }
  .sidebar-logo img.vitrine { height:auto; width:auto; max-width:200px; filter:none; }
  .sidebar-logo-divider { width:100%; height:1px; background:#ffffff15; }
  .sidebar-title { font-size:11px; font-weight:700; color:#ffffff40; letter-spacing:2px; text-transform:uppercase; padding:16px 20px 8px; }
  .sidebar-nav { flex:1; overflow-y:auto; padding-bottom:16px; }
  .sidebar-nav::-webkit-scrollbar { width:4px; }
  .sidebar-nav::-webkit-scrollbar-thumb { background:#ffffff20; border-radius:2px; }
  .nav-item { display:flex; align-items:center; gap:12px; padding:10px 20px; cursor:pointer; border-left:3px solid transparent; transition:background .15s,border-color .15s; }
  .nav-item:hover { background:#ffffff08; }
  .nav-item.active { background:#ffffff12; border-left-color:var(--green); }
  .nav-item .nav-num { width:28px; height:28px; min-width:28px; border-radius:8px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
  .nav-item.active .nav-num { box-shadow:0 0 0 2px #00cd6060; }
  .nav-item .nav-label { font-size:13px; font-weight:500; color:#ffffff80; line-height:1.3; }
  .nav-item .nav-label small { display:block; font-size:11px; color:#ffffff35; font-weight:400; margin-top:1px; }
  .nav-item.active .nav-label { color:#fff; }
  .nav-group-title { font-size:10px; font-weight:700; color:#ffffff25; letter-spacing:2px; text-transform:uppercase; padding:16px 20px 6px; }

  /* MAIN */
  .main { flex:1; overflow-y:auto; scroll-behavior:smooth; }
  .main::-webkit-scrollbar { width:6px; }
  .main::-webkit-scrollbar-thumb { background:#dde1e8; border-radius:3px; }

  /* TOPBAR */
  .topbar { background:#fff; border-bottom:1px solid var(--gray-100); padding:0 40px; height:52px; display:flex; align-items:center; position:sticky; top:0; z-index:10; gap:8px; }
  .topbar-title { font-size:13px; font-weight:600; color:var(--dark); }
  .topbar-sub { font-size:12px; color:var(--gray-300); }
  .topbar-sep { color:var(--gray-200); font-size:13px; }

  /* SECTIONS */
  .content-wrap { padding:40px; width:100%; }

  .panel-cover { background:var(--grad-dark); border-radius:20px; padding:64px 56px; position:relative; overflow:hidden; margin-bottom:24px; }
  .panel-cover::before { content:''; position:absolute; top:-30%; right:-10%; width:500px; height:500px; background:radial-gradient(circle,#00cd6018 0%,transparent 65%); border-radius:50%; }
  .panel-cover::after { content:''; position:absolute; bottom:-20%; left:-5%; width:400px; height:400px; background:radial-gradient(circle,#005fab15 0%,transparent 65%); border-radius:50%; }
  .panel-cover-logos { display:flex; align-items:center; gap:32px; margin-bottom:40px; position:relative; z-index:1; }
  .panel-cover-logos img { height:44px; width:auto; filter:brightness(0) invert(1); }
  .panel-cover-logos img.vitrine { height:30px; filter:none; }
  .panel-cover-logos .ldiv { width:1px; height:36px; background:linear-gradient(to bottom,transparent,#fff3,transparent); }
  .panel-cover-badge { display:inline-block; background:linear-gradient(135deg,#005fab33,#00cd6033); border:1px solid #ffffff15; color:var(--green); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; padding:6px 18px; border-radius:100px; margin-bottom:20px; position:relative; z-index:1; }
  .panel-cover h1 { font-size:40px; font-weight:900; color:#fff; line-height:1.15; margin-bottom:14px; position:relative; z-index:1; }
  .panel-cover h1 span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .panel-cover-sub { font-size:15px; color:var(--gray-300); position:relative; z-index:1; line-height:1.7; max-width:480px; }
  .panel-cover-version { font-size:12px; color:#ffffff30; position:relative; z-index:1; margin-top:32px; letter-spacing:1px; }

  .section-anchor { padding-top:32px; margin-top:-32px; }
  .panel { background:#fff; border-radius:16px; padding:36px 40px; margin-bottom:20px; border:1px solid var(--gray-100); }
  .panel.intro-panel { background:linear-gradient(135deg,#005fab08,#00cd6008); border-color:#00cd6020; }
  .panel-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--gray-100); }
  .panel-num { width:48px; height:48px; min-width:48px; border-radius:14px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
  .panel-title { font-size:22px; font-weight:800; color:var(--dark); line-height:1.2; }
  .panel-subtitle { font-size:13px; color:var(--gray-300); font-weight:500; margin-top:4px; }
  .panel-body p { font-size:14px; color:#3a4260; line-height:1.8; margin-bottom:14px; }
  .panel-body p:last-child { margin-bottom:0; }

  .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
  .feature-chip { font-size:13px; color:#3a4260; padding:9px 12px; background:var(--gray-50); border-radius:8px; border:1px solid var(--gray-100); display:flex; align-items:center; gap:8px; }
  .feature-chip::before { content:''; width:6px; height:6px; min-width:6px; border-radius:50%; background:var(--grad); }

  .tip-box { background:linear-gradient(135deg,#005fab0a,#00cd600a); border:1px solid #00cd6030; border-radius:10px; padding:14px 18px; margin:16px 0; display:flex; gap:12px; align-items:flex-start; }
  .tip-icon { width:26px; height:26px; min-width:26px; border-radius:7px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
  .tip-box p { font-size:13px; color:#3a4260; margin:0!important; line-height:1.6; }
  .warn-box { background:#fff8f0; border:1px solid #f0d0a0; border-radius:10px; padding:14px 18px; margin:16px 0; display:flex; gap:12px; align-items:flex-start; }
  .warn-icon { width:26px; height:26px; min-width:26px; border-radius:7px; background:#e8860c; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
  .warn-box p { font-size:13px; color:#5a4530; margin:0!important; line-height:1.6; }
  .lock-badge { display:inline-flex; align-items:center; gap:4px; background:var(--dark); color:#fff; font-size:10px; font-weight:600; padding:3px 9px; border-radius:100px; letter-spacing:.5px; margin-left:8px; vertical-align:middle; }
  .lock-badge::before { content:'🔒'; font-size:9px; }
  .callout { background:#fff; border:1px solid var(--gray-200); border-left:4px solid var(--green); border-radius:0 10px 10px 0; padding:18px 22px; margin-top:16px; }
  .callout h3 { font-size:14px; font-weight:700; color:var(--dark); margin-bottom:8px; }
  .callout p { font-size:13px; color:#556; margin:0; }
  .toolbar-row { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
  .toolbar-demo { padding:8px 16px; border-radius:8px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; border:none; }
  .toolbar-demo.primary { background:var(--grad); color:#fff; }
  .toolbar-demo.secondary { background:var(--gray-50); color:var(--dark); border:1px solid var(--gray-200); }
  .toolbar-demo.outline { background:transparent; color:var(--blue); border:1px solid var(--blue); }

  .guide-footer { background:var(--grad-dark); border-radius:20px; margin:0 40px 40px; padding:48px 40px; text-align:center; }
  .guide-footer-logos { display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:20px; }
  .guide-footer-logos img { height:36px; width:auto; filter:brightness(0) invert(1); }
  .guide-footer-logos img.vitrine { height:24px; filter:none; }
  .guide-footer-logos .ldiv { width:1px; height:32px; background:#ffffff25; }
  .guide-footer p { font-size:13px; color:#ffffff55; margin-top:10px; }
  .guide-footer .powered { font-size:11px; color:#ffffff30; margin-top:14px; letter-spacing:1.5px; }