:root{
      /* Mapa: nós e fundo iguais aos dos vídeos de introdução dos módulos */
      --bg:#0b0f19;        /* fundo geral */
      --brand:#49b6ff;     /* acentos / nós principais */
      --accent:#a78bfa;    /* acentos 2 */
      --success:#34d399;   /* verde */
      --warning:#f59e0b;   /* amarelo */

      /* Barra e painel: identidade da LP */
      --fundo:#020413;
      --texto:#f4f6fb;
      --azul:#2699f7;
      --muted:#96a0b5;     /* texto secundário */
      --linha:rgba(255,255,255,.1);
      --realce:rgba(255,255,255,.06);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:linear-gradient(180deg,var(--bg),#0c1323 50%,#0a0f1c);
      color:var(--texto); font-family:Sora,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
      overflow:hidden;
    }
    button,input{font-family:inherit}
    :focus-visible{outline:2px solid var(--azul); outline-offset:2px}
    .sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

    .app{display:grid; grid-template-columns:minmax(0,1fr) 360px; grid-template-rows:auto minmax(0,1fr); grid-template-areas:
      "toolbar toolbar" "canvas sidebar"; height:100vh; height:100dvh}

    .toolbar{grid-area:toolbar; display:flex; gap:.75rem; align-items:center; padding:.6rem 1rem; background:var(--fundo); border-bottom:1px solid var(--linha)}
    .marca{flex:none; display:block; color:var(--texto)}
    .marca svg{display:block; width:auto; height:20px}
    .marca-icone{display:none}
    .marca-icone svg{height:22px}
    .toolbar input[type="search"]{flex:1; min-width:0; max-width:520px; margin:0 auto; padding:.6rem .8rem .6rem 2.3rem; color:var(--texto); font-size:.9rem; background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396a0b5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat .75rem center / 1rem; border:1px solid var(--linha); border-radius:.6rem}
    .toolbar input[type="search"]::placeholder{color:var(--muted)}
    .toolbar input[type="search"]:focus{border-color:var(--azul); outline:0}
    .acoes{flex:none; display:flex; gap:.25rem}
    .acoes button{padding:.5rem .7rem; color:var(--muted); font-size:.8rem; font-weight:500; white-space:nowrap; background:transparent; border:0; border-radius:.5rem; cursor:pointer}
    .acoes button:hover{color:var(--texto); background:var(--realce)}
    #modulosBtn{display:none; color:var(--azul); font-weight:600}

    .canvas{grid-area:canvas; position:relative; min-height:0}
    #network{position:absolute; inset:0}
    .dica-canvas{display:none}
    .fechar-painel{display:none}

    .sidebar{grid-area:sidebar; display:flex; flex-direction:column; gap:1rem; padding:1.1rem 1rem; overflow:auto; background:var(--fundo); border-left:1px solid var(--linha)}
    .detalhes{flex:1 0 auto}
    .node-title{font-size:1.05rem; font-weight:700; line-height:1.35}
    .node-sub{margin-top:.3rem; color:var(--muted); font-size:.8rem}
    .descricao{margin:.75rem 0 0; color:#d5dcec; font-size:.84rem; line-height:1.6; white-space:pre-line}
    .descricao:empty{display:none}

    .nav-modulos{display:flex; gap:.35rem; margin-top:.8rem}
    .nav-modulos:empty{display:none}
    .nav-modulos button{flex:1; min-width:0; padding:.45rem .4rem; color:var(--texto); font-size:.76rem; font-weight:500; white-space:nowrap; background:var(--realce); border:0; border-radius:.5rem; cursor:pointer}
    .nav-modulos button:hover:enabled{background:rgba(255,255,255,.12)}
    .nav-modulos button:disabled{color:var(--muted); opacity:.45; cursor:default}

    .lista{margin:.7rem -.5rem 0; padding:0; list-style:none}
    .item{display:flex; align-items:flex-start; gap:.55rem; width:100%; padding:.42rem .5rem; color:#d5dcec; font-size:.84rem; line-height:1.4; text-align:left; background:none; border:0; border-radius:.5rem; cursor:pointer}
    .item:hover{color:var(--texto); background:var(--realce)}
    .item .dot{margin-top:.33em}
    .item-texto{flex:1; min-width:0}
    .item-extra{flex:none; margin-top:.1em; color:var(--muted); font-size:.72rem}

    .dot{flex:none; display:inline-block; width:.6rem; height:.6rem; border-radius:50%}
    .dot--module{background:var(--brand)}
    .dot--lesson{background:var(--accent)}
    .dot--project{background:var(--success)}
    .dot--library{background:var(--warning)}

    .rodape-painel{padding-top:.8rem; border-top:1px solid var(--linha)}
    .legend{display:flex; flex-wrap:wrap; gap:.3rem .8rem; color:var(--muted); font-size:.72rem}
    .footer{margin-top:.5rem; color:var(--muted); font-size:.72rem; line-height:1.5}
    .dica-toque{display:none}

    @media (hover: none){
      .dica-mouse{display:none}
      .dica-toque{display:inline}
    }

    @media (max-width: 1024px){
      .app{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:
      "toolbar" "canvas" "sidebar"}
      #modulosBtn{display:block}

      /* O painel só aparece quando pedido; o mapa ocupa o resto da tela */
      .sidebar{display:none; max-height:42dvh; border-left:0; border-top:1px solid var(--linha)}
      .painel-aberto .sidebar{display:flex}
      .dica-canvas{display:block; position:absolute; left:50%; bottom:.75rem; transform:translateX(-50%); width:max-content; max-width:calc(100% - 2rem); padding:.35rem .7rem; color:var(--muted); font-size:.76rem; background:rgba(2,4,19,.85); border:1px solid var(--linha); border-radius:999px; pointer-events:none}
      .painel-aberto .dica-canvas{display:none}
      .fechar-painel{display:block; position:sticky; top:0; z-index:1; flex:none; align-self:flex-end; width:2.25rem; height:2.25rem; margin-bottom:-3.25rem; color:var(--texto); font-size:1.25rem; line-height:1; background:#10152a; border:1px solid var(--linha); border-radius:.6rem; cursor:pointer}
      .detalhes > .node-title{padding-right:2.75rem}
    }

    /* Tablet em pé: o ícone deixa espaço para o texto da busca */
    @media (max-width: 860px){
      .marca-logo{display:none}
      .marca-icone{display:block}
    }

    @media (max-width: 640px){
      .toolbar{flex-wrap:wrap; gap:.4rem .6rem; padding:.5rem .75rem}
      .toolbar input[type="search"]{flex:1 1 0; margin:0}
      .acoes{flex:1 1 100%; justify-content:space-between}
      .acoes button{flex:1; padding:.4rem .2rem; font-size:.76rem}
    }

    /* Celular deitado: o painel fica ao lado, porque embaixo não sobra altura */
    @media (max-width: 1024px) and (max-height: 500px){
      .toolbar{padding:.35rem .75rem}
      .marca-logo{display:none}
      .marca-icone{display:block}
      .app.painel-aberto{grid-template-columns:minmax(0,1fr) min(300px,42vw); grid-template-rows:auto minmax(0,1fr); grid-template-areas:
      "toolbar toolbar" "canvas sidebar"}
      .sidebar{max-height:none; border-top:0; border-left:1px solid var(--linha)}
    }