/* ===================================================================
   LA/BS® — Folha de estilo da plataforma
   -------------------------------------------------------------------
   COMO USAR:
   • Para ajustes rápidos, mude só os TOKENS no "PAINEL DE CONTROLE"
     (bloco 1). Uma variável muda o site inteiro.
   • Os COMPONENTES (blocos 3 e 4) usam esses tokens; só mexa neles
     se quiser mudar a estrutura de um elemento específico.
   • Depois de salvar e subir, atualize a página (a quebra de cache
     é automática, então não precisa forçar refresh).

   ÍNDICE
   1) PAINEL DE CONTROLE (tokens)      3) HOME (topbar, hero, seções, folder cards)
   2) BASE                             4) PÁGINAS INTERNAS (breadcrumb, cover, conteúdo)
   =================================================================== */

/* Fonte da marca (arquivo em ../../fonts/) */
@font-face{
  font-family:'Maison Neue';
  src:url('../../fonts/MaisonNeueMono.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

/* ===================================================================
   1) PAINEL DE CONTROLE  —  mude aqui
   =================================================================== */
.labs-root{
  /* ---- Cores ---- */
  --bg:#ffffff;            /* fundo da plataforma */
  --surface:#ffffff;       /* superfícies claras */
  --surface2:#fafafa;      /* hover */
  --surface3:#f4f4f7;      /* miniaturas/placeholder */
  --paper-back:#e7e6ee;    /* fundo da pasta (camada de trás) */
  --line:#111111;          /* traço/contorno (pasta, número) */
  --title:#111111;         /* títulos */
  --text:#3f3f4a;          /* corpo */
  --muted:#55555f;         /* secundário */
  --muted2:#6b6b78;        /* apagado */
  --violet:#8b5cf6;        /* roxo da marca */
  --vbright:#7c3aed;       /* roxo de destaque */
  --border:rgba(17,17,17,.10);
  --border2:rgba(139,92,246,.45);
  --grad:linear-gradient(135deg,#7c3aed,#a855f7 55%,#6366f1);

  /* ---- Tipografia ---- */
  --head:'Maison Neue','Space Grotesk',monospace;  /* títulos e cards */
  --body:'Inter',system-ui,sans-serif;             /* textos */

  /* ---- Folder card (pasta) ---- */
  --card-h:392px;          /* altura do card */
  --card-line:2px;       /* espessura do traço da pasta */
  --card-radius:16px;      /* arredondamento da pasta */
  --file-radius:12px;      /* arredondamento da imagem */
  --hatch-size:17px;       /* tamanho da hachura */

  /* ---- Layout ---- */
  --pad:30px;              /* respiro lateral geral */
  --gap:26px;              /* espaço entre cards */

  /* (base — normalmente não mexe) */
  background:var(--bg);color:var(--text);font-family:var(--body);
  border-radius:0;line-height:1.55;overflow:hidden;padding:0 0 40px;
}

/* ===================================================================
   2) BASE
   =================================================================== */
.labs-root *{box-sizing:border-box}
.labs-topbar{display:flex;align-items:center;padding:16px var(--pad);border-bottom:1px solid var(--border)}
.labs-logo img{height:26px;width:auto;display:block}

/* ===================================================================
   3) HOME
   =================================================================== */
/* hero */
.labs-hero{position:relative;overflow:hidden;padding:34px var(--pad);border-bottom:1px solid var(--border);}
.labs-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(620px 280px at 82% -40%,rgba(139,92,246,.16),transparent 62%);pointer-events:none}
.labs-eyebrow{font-family: var(--head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #e1ff00;
    position: relative;
    background-color: black;
    width: max-content;
    border-radius: 100px;
    padding: 7px 20px 4px 20px;
    margin-top: 31px;
}
.labs-hero h1{font-family:var(--head);font-weight:600;font-size:34px;line-height:1.1;letter-spacing:-.6px;margin:0 0 10px;position:relative;color:var(--title)}
.labs-hero h1 span{color:var(--title)}
.labs-hero p{color:var(--muted);font-size:14.5px;max-width:560px;margin:0;position:relative}

/* seções + grade */
.labs-section{margin:30px var(--pad) 0}
.labs-section h2{font-family:var(--head);font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--title);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.labs-section h2::after{content:'';height:1px;flex:1;background:var(--border)}
.labs-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ---- FOLDER CARD (pasta) ---- */
.labs-folder{display:block;text-decoration:none;color:inherit;position:relative;height:var(--card-h);cursor:pointer}
.labs-folder .folder-stage{position:absolute;inset:0}
/* camada de trás (fundo da pasta) */
.lf-back{    position: absolute;
    /* top: 0; */
    left: 14px;
    right: 14px;
    bottom: 27px;
    background: var(--paper-back);
    border: var(--card-line) solid var(--line);
    border-radius: var(--card-radius);
    z-index: 0;
    height: 260px;}
/* o "arquivo" (imagem) */
.lf-file{position: absolute;
    top: 30px;
    left: 28px;
    right: 28px;
    height: 196px;
    border-radius: var(--file-radius);
    border: var(--card-line) solid var(--line);
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform-origin: 50% 100%;
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .45);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s;
    width: 84%;
}
.lf-file--empty{background:linear-gradient(135deg,#efeaf9,#f6f4fb 60%,#eef0fb);display:grid;place-items:center;font-size:44px}
/* frente da pasta (SVG) */
.lf-front{position:absolute;inset:0;z-index:2;pointer-events:none}
.lf-front svg{width:100%;height:100%;display:block}
/* número //01 */
.lf-num{position:absolute;top:150px;right:34px;z-index:3;background:var(--line);color:#fff;font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:1px;padding:9px 13px;border-radius:12px}
/* texto */
.lf-body{position:absolute;left:44px;right:44px;top:210px;z-index:3}
.lf-body h3{font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:-.4px;text-transform:uppercase;line-height:1.1;color:var(--title)}
.lf-body p{font-family:var(--head);font-size:12px;color:var(--muted);margin-top:10px;line-height:1.55}
/* hachura */
.lf-hatch{position:absolute;left:44px;right:60px;bottom:24px;z-index:3;font-family:var(--head);font-weight:600;font-size:var(--hatch-size);letter-spacing:2px;color:var(--line);white-space:nowrap;overflow:hidden}
/* hover: o arquivo sobe e gira */
.labs-folder:hover .lf-file{transform:translateY(-16px);box-shadow:0 22px 32px -16px rgba(0,0,0,.45)}
.labs-folder:active .lf-file{transform:translateY(-16px)}

/* ===================================================================
   4) PÁGINAS INTERNAS
   =================================================================== */
.labs-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:14px var(--pad) 0;font-size:13px;color:var(--muted)}
.labs-crumb a{color:var(--muted);text-decoration:none}
.labs-crumb a:hover{color:var(--title)}
.labs-crumb i{color:var(--muted2);font-style:normal}
.labs-crumb .cur{color:var(--title);font-weight:600}

.labs-cover{height:200px;margin:16px var(--pad) 0;border-radius:16px;background:var(--surface3) center/cover no-repeat;border:1px solid var(--border)}
.labs-cover[data-empty]{background:linear-gradient(120deg,#efeaf9,#f6f4fb 60%,#eef0fb)}

.labs-page-head{padding:22px var(--pad) 6px;position:relative}
.labs-avatar{width:110px;height:110px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:0 6px 18px rgba(17,17,17,.08);display:grid;place-items:center;font-size:34px;margin:-52px 0 14px}
.labs-page-head h1{font-family:var(--head);font-weight:600;font-size:38px;letter-spacing:-.8px;color:var(--title);margin:0}
.labs-page-sub{color:var(--muted);font-size:15px;margin-top:6px}

/* conteúdo rico */
.labs-content{padding:8px var(--pad) 10px;max-width:820px;color:var(--text);font-size:16px;line-height:1.7}
.labs-content h1,.labs-content h2,.labs-content h3,.labs-content h4{font-family:var(--head);color:var(--title);line-height:1.25;margin:1.4em 0 .5em;letter-spacing:-.3px}
.labs-content h2{font-size:24px}
.labs-content h3{font-size:19px}
.labs-content p{margin:0 0 1em}
.labs-content a{color:var(--vbright);text-decoration:underline}
.labs-content ul,.labs-content ol{margin:0 0 1em;padding-left:1.4em}
.labs-content li{margin:.3em 0}
.labs-content img{max-width:100%;height:auto;border-radius:12px;margin:.6em 0}
.labs-content iframe,.labs-content video{max-width:100%;border-radius:12px;margin:.6em 0}
.labs-content blockquote{margin:1em 0;padding:.6em 1.1em;border-left:3px solid var(--violet);background:var(--surface2);border-radius:0 10px 10px 0;color:var(--muted)}
.labs-content hr{border:none;border-top:1px solid var(--border);margin:2em 0}

.labs-empty{color:var(--muted2);font-size:13px;padding:14px;border:1px dashed var(--border2);border-radius:12px;background:var(--surface2);margin:0 var(--pad)}

/* celular */
@media(max-width:640px){
  .labs-hero h1{font-size:26px}
  .labs-page-head h1{font-size:28px}
  .labs-cover{height:150px}
}


/* ---- Header estilo Notion (home) ---- */
.labs-hd{position:relative}
.labs-hd-cover{position:relative;z-index:1;height:220px;background:var(--surface3) center/cover no-repeat}
.labs-hd-cover[data-empty]{background:var(--grad)}
.labs-hd-info{padding:0 var(--pad) 18px;position:relative;z-index:2}
.labs-hd-avatar{width:92px;height:92px;border-radius:18px;margin:-46px 0 16px;background:#111 center/cover no-repeat;border:3px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.18);display:grid;place-items:center;overflow:hidden}
.labs-hd-avatar--logo img{width:62%;height:auto}
.labs-hd-info h1{font-family:var(--head);font-weight:600;font-size:34px;letter-spacing:-.6px;color:var(--title);margin:0;margin-top: 18px;}
.labs-hd-info .labs-eyebrow{margin-bottom:10px}
.labs-hd-sub{color:var(--muted);font-size:14.5px;margin:8px 0 0;max-width:600px}
@media(max-width:640px){.labs-hd-cover{height:150px}.labs-hd-info h1{font-size:26px}.labs-hd-avatar{width:74px;height:74px;margin-top:-38px}}


/* ---- Reposicionar capa (ícone discreto no hover) ---- */
.labs-hd-cover.repo-mode{cursor:grab}
.labs-hd-cover.repo-mode:active{cursor:grabbing}
.labs-repo-ui{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:6;opacity:0;transition:opacity .2s}
.labs-hd-cover:hover .labs-repo-ui,.labs-hd-cover.repo-mode .labs-repo-ui{opacity:1}
.labs-repo-ico{width:30px;height:30px;display:grid;place-items:center;border:none;border-radius:8px;cursor:pointer;background:rgba(17,17,17,.42);color:#fff;font-size:14px;line-height:1}
.labs-repo-ico:hover{background:rgba(17,17,17,.72)}
.labs-repo-actions{display:none;gap:6px}
.labs-repo-save{background:rgba(124,58,237,.85)!important}

/* ---- Menu lateral direito (seções) ---- */
.labs-sidenav{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:40}
.labs-sidenav a{font-family:var(--head);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);text-decoration:none;padding:5px 12px;border-right:2px solid var(--border);transition:color .15s,border-color .15s;white-space:nowrap;text-align:right}
.labs-sidenav a:hover,.labs-sidenav a.on{color:var(--title);border-color:var(--vbright)}
.labs-section{scroll-margin-top:24px}
@media(max-width:1200px){.labs-sidenav{display:none}}

/* ---- Footer ---- */
.labs-footer{text-align:center;font-size:10px;color:var(--muted2);margin-top:46px;font-family:var(--body);}
.labs-footer .h{color:var(--vbright)}


/* ---- Marquee (slider das pastas: auto + arrastar) ---- */
.labs-marquee{overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    margin: 10px 0px 40px 0px;
    padding: 6px 0;
    ;}
.labs-marquee::-webkit-scrollbar{display:none}
.labs-marquee.dragging{cursor:grabbing}
.labs-marquee-track{display: flex;
    width: max-content;
    gap: 10px;}
.labs-mq-item{display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 18px 6px 6px;
    background: transparent;
    border: none;
    flex: 0 0 auto;
    text-decoration: none;
    background-color: black;
    border-radius: 16px;}
.labs-mq-img{width:88px;height:66px;border-radius:12px;background-size:cover;background-position:center;flex:0 0 auto}
.labs-mq-img--empty{background:linear-gradient(135deg,#efeaf9,#f6f4fb 60%,#eef0fb)}
.labs-mq-title{font-family: var(--head);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;}
@media(max-width:640px){.labs-mq-img{width:70px;height:54px}.labs-mq-title{font-size:14px}}