:root{
    --white: #ffffff;
    --black: #141414;
    --yellow: rgb(255,255,0);
    --green: #1f9d5c;
    --red: #c9202e;
    --blue: #1f5fc7;
    --ink: var(--black);
    --line: rgba(0,0,0,0.12);
    --radius: 4px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    margin:0;
    line-height:1.05;
  }
  a{color:inherit; text-decoration:none;}
  .mono{font-family:'Space Mono', monospace; letter-spacing:0.02em;}
  img,svg{display:block; max-width:100%;}

  /* ---------- Top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:100;
    background:var(--white);
  }
  .topbar-inner{
    max-width:1180px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
  }
  .brand{
    display:flex; align-items:center;
    color:var(--black);
  }
  .brand-logo{
    height:46px; width:auto; display:block;
  }

  nav.main-menu{
    display:none; gap:34px;
  }
  nav.main-menu a{
    color:var(--black);
    font-size:0.95rem;
    font-weight:500;
    position:relative;
    padding:4px 0;
  }
  nav.main-menu a::after{
    content:''; position:absolute; left:0; bottom:-2px;
    width:0; height:2px; background:var(--yellow);
    transition:width 0.25s ease;
  }
  nav.main-menu a:hover::after{width:100%;}

  .nav-dropdown{position:relative; display:flex; align-items:center;}
  .nav-dropdown-trigger::before{
    content:''; display:inline-block; margin-left:6px;
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:5px solid currentColor; vertical-align:middle;
  }
  .nav-submenu{
    display:none;
    position:absolute; top:100%; left:0; padding-top:14px; z-index:150;
  }
  .nav-dropdown:hover .nav-submenu,
  .nav-dropdown:focus-within .nav-submenu{display:block;}
  .nav-submenu-box{
    display:flex; flex-direction:column;
    background:#fff; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,0.14);
    min-width:180px; padding:8px;
  }
  .nav-submenu a{
    color:var(--black); font-size:0.9rem; font-weight:500;
    padding:10px 12px; border-radius:6px; white-space:nowrap;
  }
  .nav-submenu a:hover{background:rgba(0,0,0,0.05);}
  .nav-submenu a::after{display:none;}

  .mobile-menu .mobile-submenu-label{
    padding:12px 0 2px; font-size:0.76rem; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--black); opacity:0.6;
  }
  .mobile-menu a.mobile-submenu-link{padding-left:16px; font-size:0.92rem;}

  .topbar-actions{display:flex; align-items:center; gap:18px;}
  .claim-card-link{
    background:none; border:none; cursor:pointer; font:inherit;
    font-size:0.84rem; color:var(--black); text-decoration:underline;
    padding:0;
  }

  .btn-entrar{
    background:var(--green);
    color:#fff;
    font-weight:700;
    font-size:0.9rem;
    padding:10px 22px;
    border-radius:999px;
    border:none;
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .btn-entrar:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(31,157,92,0.35);
  }

  .burger{
    display:flex;
    flex-direction:column;
    gap:5px;
    background:none; border:none; cursor:pointer;
    padding:6px;
  }
  .burger span{
    width:24px; height:2px; background:var(--black); display:block;
    transition:0.25s ease;
  }
  .mobile-menu{
    display:none;
    flex-direction:column;
    background:var(--white);
    border-bottom:1px solid var(--line);
    padding:8px 24px 20px;
  }
  .mobile-menu a{
    color:var(--black);
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:1rem;
  }
  .mobile-menu a:last-child{border-bottom:none;}
  .mobile-menu.open{display:flex;}

  /* ---------- Estilos partilhados com a barra lateral da app logada (ver .app-sidebar) ---------- */
  .landing-sidebar-section{
    background:var(--white);
    padding:14px;
  }
  .landing-sidebar-title{
    font-family:'Fraunces', serif; font-size:1rem; margin:0 0 10px;
  }
  .landing-cal-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px;
  }
  .landing-cal-label{
    font-family:'Fraunces', serif; font-weight:600; font-size:0.92rem;
    text-transform:capitalize;
  }
  .landing-cal-nav{
    background:none; border:1px solid var(--line); border-radius:6px;
    width:26px; height:26px; cursor:pointer; font-size:1rem; line-height:1;
    color:var(--black);
  }
  .landing-cal-nav:hover{background:rgba(0,0,0,0.05);}
  .landing-cal-grid{
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:3px; text-align:center;
  }
  .landing-cal-dow{
    font-size:0.66rem; color:var(--black); opacity:0.55;
    padding:2px 0; font-weight:600;
  }
  .landing-cal-day{
    font-size:0.76rem; padding:5px 0; border-radius:6px;
    color:var(--black); position:relative;
  }
  .landing-cal-day.has-event{
    background:rgba(31,157,92,0.12); font-weight:700; cursor:pointer;
  }
  .landing-cal-day.has-event:hover{background:rgba(31,157,92,0.24);}
  .landing-cal-day.today{border:1px solid var(--blue);}
  .landing-cal-day.cal-green{background:rgba(31,157,92,0.18); color:var(--green);}
  .landing-cal-day.cal-green:hover{background:rgba(31,157,92,0.3);}
  .landing-cal-day.cal-red{background:rgba(201,32,46,0.14); color:var(--red);}
  .landing-cal-day.cal-red:hover{background:rgba(201,32,46,0.26);}
  .landing-sidebar-agenda-row{
    display:flex; gap:10px; align-items:center;
    padding:8px 0; border-bottom:1px solid var(--line);
  }
  .landing-sidebar-agenda-row:last-child{border-bottom:none;}
  .landing-sidebar-agenda-row img,
  .landing-sidebar-agenda-row .ph{
    width:38px; height:38px; border-radius:6px; object-fit:cover; flex:none;
  }
  .landing-sidebar-agenda-row .ph{
    background:#f2f2f2; display:flex; align-items:center; justify-content:center;
    color:#bbb; font-size:1rem;
  }
  .landing-sidebar-agenda-row h5{
    font-family:'Fraunces', serif; font-size:0.86rem; margin:0 0 2px; font-weight:600;
  }
  .landing-sidebar-agenda-row p{
    font-size:0.7rem; color:var(--black); margin:0;
  }
  .landing-sidebar-more{
    display:block; text-align:center; font-size:0.78rem; font-weight:600;
    color:var(--blue); margin-top:10px; cursor:pointer;
  }
  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:var(--white);
    color:var(--ink);
    overflow:hidden;
    padding:36px 24px 10px;
  }
  .hero-inner{
    position:relative;
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:1fr; gap:32px;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--blue);
    font-family:'Space Mono', monospace;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.14em;
    margin-bottom:18px;
  }
  .eyebrow::before{content:'●'; font-size:0.6rem;}
  .hero h1{
    font-size:clamp(2.4rem, 5vw, 3.7rem);
    font-weight:700;
  }
  .hero h1 em{
    font-style:italic; color:var(--blue); font-weight:500;
  }
  .hero p.lede{
    margin-top:22px;
    font-size:1.08rem;
    color:var(--black);
    line-height:1.6;
  }
  .hero-ctas{
    margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;
  }
  .btn-primary{
    background:var(--green); color:#fff;
    padding:14px 28px; border-radius:999px; font-weight:700;
    border:none; cursor:pointer; font-size:0.95rem;
  }
  .btn-ghost{
    padding:14px 28px; border-radius:999px; font-weight:600;
    border:1px solid rgba(0,0,0,0.25); color:var(--black);
    font-size:0.95rem; background:transparent; cursor:pointer;
  }

  /* foto ilustrativa do hero — largura total da coluna, com altura reduzida
     face à proporção original (4:3) */
  .hero-photo{
    width:100%;
    aspect-ratio:3 / 1;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 30px 60px rgba(0,0,0,0.35);
    display:block;
  }

  section{padding:96px 24px;}
  .section-inner{max-width:1180px; margin:0 auto;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:20px; margin-bottom:52px; flex-wrap:wrap;
  }
  .section-tag{
    font-family:'Space Mono', monospace; font-size:0.78rem;
    text-transform:uppercase; letter-spacing:0.14em; color:var(--blue);
    display:block; margin-bottom:10px;
  }
  .section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--black);}
  .section-head p{max-width:42ch; color:var(--black); line-height:1.55;}

  /* ---------- Quem somos ---------- */
  .sobre{background:var(--white);}
  .sobre-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
  }
  .sobre-grid p{font-size:1.05rem; line-height:1.75; color:var(--black);}
  .sobre-grid p + p{margin-top:18px;}
  .stat-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px;
  }
  .stat{
    border-left:2px solid var(--yellow); padding-left:14px;
  }
  .stat b{
    font-family:'Fraunces', serif; font-size:2.1rem; display:block; color:var(--black);
  }
  .stat span{font-size:0.85rem; color:var(--black);}
  .rank-tiles{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 28px;
  }
  .rank-tile{
    background:#f2f2f2; border-radius:10px; padding:22px 12px; text-align:center;
  }
  .rank-tile b{
    font-family:'Fraunces', serif; font-size:2rem; display:block; color:var(--green); margin-bottom:6px;
  }
  .rank-tile span{font-size:0.85rem; color:var(--black);}
  button.rank-tile{border:none; cursor:pointer; font-family:inherit; width:100%;}
  button.rank-tile.active{background:rgba(31,157,92,0.15);}
  .rank-tiles.cols-4{grid-template-columns:repeat(4,1fr);}
  @media (max-width:700px){
    .rank-tiles.cols-4{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .rank-tiles{grid-template-columns:1fr;}
  }
  .principios-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:20px;
  }
  .principio{
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
    padding:32px 28px;
    text-align:center;
  }
  .principio h3{
    font-family:'Fraunces', serif; font-size:1.4rem;
    text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px;
  }
  .principio p{font-size:0.95rem; color:var(--black); line-height:1.6;}

  /* ---------- Agenda ---------- */
  .agenda{background:var(--white); color:var(--ink);}
  .scoreboard{
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
  }
  .agenda-row{
    display:grid;
    grid-template-columns:120px 1fr auto auto;
    align-items:center;
    gap:20px;
    padding:22px 26px;
    border-bottom:1px solid var(--line);
  }
  .agenda-row:last-child{border-bottom:none;}
  .agenda-date{
    font-family:'Space Mono', monospace;
    background:rgba(255,255,0,0.16);
    color:#7a5800;
    padding:8px 10px;
    border-radius:4px;
    text-align:center;
    font-size:0.85rem;
  }
  .agenda-date b{display:block; font-size:1.3rem; font-family:'Space Mono', monospace;}
  .agenda-title{font-weight:600; font-size:1.05rem;}
  .agenda-title span{
    display:block; font-weight:400; font-size:0.88rem; color:var(--black); margin-top:4px;
  }
  .badge{
    font-family:'Space Mono', monospace; font-size:0.72rem;
    text-transform:uppercase; letter-spacing:0.08em;
    padding:6px 12px; border-radius:999px;
    border:1px solid var(--blue); color:var(--blue);
    white-space:nowrap;
  }
  .badge.full{border-color:var(--red); color:var(--black);}
  .agenda-link{
    font-size:0.88rem; font-weight:600; color:var(--blue);
    white-space:nowrap;
  }

  /* ---------- Programas ---------- */
  .programas{padding-top:32px;}
  .programas-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  }
  .card-programa{
    background:#fff;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:8px;
    overflow:hidden;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    display:block; color:inherit; text-decoration:none; cursor:pointer;
  }
  .card-programa:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.12);}
  .card-programa img{
    width:100%; height:200px; object-fit:cover; display:block;
  }

  /* ---------- Profissionais ---------- */
  .equipa{background:var(--white);}
  .equipa-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  }
  .card-pro{
    background:#fff;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:8px;
    overflow:hidden;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .card-pro:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.12);}
  .card-avatar{
    height:170px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:2.4rem; font-weight:700;
    color:#fff;
  }
  .card-pro:nth-child(1) .card-avatar{background:var(--green);}
  .card-pro:nth-child(2) .card-avatar{background:var(--red);}
  .card-pro:nth-child(3) .card-avatar{background:var(--blue);}
  .card-pro:nth-child(4) .card-avatar{background:var(--yellow); color:var(--black);}
  .card-body{padding:20px;}
  .card-body h3{font-size:1.1rem; margin-bottom:4px;}
  .card-role{
    font-family:'Space Mono', monospace; font-size:0.75rem;
    color:var(--blue); text-transform:uppercase; letter-spacing:0.06em;
    display:block; margin-bottom:10px;
  }
  .card-body p{font-size:0.9rem; color:var(--black); line-height:1.5; margin:0;}

  /* ---------- Contactos ---------- */
  .contactos{background:var(--white); color:var(--ink); border-top:1px solid var(--line);}
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px;
  }
  .info-list{display:flex; flex-direction:column; gap:22px;}
  .info-item b{
    display:block; font-family:'Space Mono', monospace; font-size:0.75rem;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--blue); margin-bottom:6px;
  }
  .info-item span{font-size:1.05rem;}
  form{display:flex; flex-direction:column; gap:14px;}
  form input, form textarea{
    background:#f4f4f4;
    border:1px solid var(--line);
    border-radius:4px;
    padding:14px 16px;
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:0.95rem;
  }
  form input::placeholder, form textarea::placeholder{color:#8a8a8a;}
  form textarea{resize:vertical; min-height:110px;}
  form button{
    align-self:flex-start;
    margin-top:6px;
  }

  footer{
    background:var(--white);
    color:var(--black);
    border-top:1px solid var(--line);
    padding:30px 24px;
    text-align:center;
    font-size:0.85rem;
  }
  .footer-social{
    display:flex; justify-content:center; gap:18px; margin-bottom:16px;
  }
  .footer-social a{
    color:var(--black); display:inline-flex; transition:color 0.2s ease;
  }
  .footer-social a:hover{color:var(--blue);}
  .footer-social svg{width:20px; height:20px; fill:currentColor; display:block;}

  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr;}
    .sobre-grid{grid-template-columns:1fr;}
    .stat-row{grid-template-columns:repeat(3,1fr);}
    .principios-grid{grid-template-columns:1fr;}
    .equipa-grid{grid-template-columns:repeat(2,1fr);}
    .programas-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .agenda-row{
      grid-template-columns:1fr; text-align:left; gap:10px;
    }
    .agenda-date{justify-self:start;}
  }
  @media (max-width:520px){
    .equipa-grid{grid-template-columns:1fr;}
    section{padding:70px 20px;}
    .hero{padding:60px 20px 80px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; scroll-behavior:auto !important;}
  }

  /* ---------- Modais ---------- */
  .overlay{
    position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,0.55);
    display:none; align-items:center; justify-content:center;
    padding:20px;
  }
  .overlay.open{display:flex;}
  .modal{
    background:var(--white); border-radius:10px;
    width:100%; max-width:440px; padding:34px;
    position:relative;
    box-shadow:0 30px 70px rgba(0,0,0,0.28);
    max-height:90vh; overflow-y:hidden !important; /* !important: substitui o overflow-y:auto que alguns popups definem inline — o scroll passa a ser só o de .modal-body, por baixo da barra */
    display:flex; flex-direction:column;
  }
  .modal-close{
    flex:none;
    display:flex; justify-content:flex-end; align-items:center;
    margin:-34px -34px 14px; padding:14px 20px;
    border-top-left-radius:10px; border-top-right-radius:10px;
    background:var(--red); border:none;
    font-size:1.5rem; line-height:1;
    color:#fff; cursor:pointer; width:calc(100% + 68px);
  }
  /* Envolve (via JS, ver wrapModalBody em app.js) tudo o que não é a barra
     .modal-close nem o rodapé .modal-footer — é esta div que tem scroll
     próprio, para a barra ficar sempre fixa por cima e a scrollbar nativa só
     aparecer por baixo dela. */
  .modal-body{
    flex:1; min-height:0; overflow-y:auto;
  }
  /* Rodapé fixo (opcional) para popups grandes com scroll — ex: os botões
     Guardar/Cancelar do formulário de eventos, sempre visíveis mesmo a meio
     do scroll (ver wrapModalBody em app.js, que o mantém fora de .modal-body). */
  .modal-footer{
    flex:none;
    display:flex; gap:12px;
    margin:14px -34px -34px; padding:16px 34px;
    border-top:1px solid var(--line);
    background:var(--white);
    border-bottom-left-radius:10px; border-bottom-right-radius:10px;
  }
  /* Condições financeiras de um programa "Ganhar X" (ver condicoesOverlay) */
  .precos-notes{display:flex; flex-direction:column; gap:14px;}
  .precos-note-row{display:flex; align-items:flex-start; gap:12px; font-size:0.9rem; line-height:1.5; color:var(--black);}
  .precos-note-row svg{width:20px; height:20px; min-width:20px; min-height:20px; flex:none; margin-top:1px; fill:none;}
  .auth-tabs{
    display:flex; gap:4px; background:#f2f2f2; border-radius:999px;
    padding:4px; margin-bottom:22px;
  }
  .auth-tab{
    flex:1; text-align:center; padding:10px; border-radius:999px;
    font-size:0.85rem; font-weight:600; cursor:pointer;
    color:var(--black); border:none; background:none;
  }
  .auth-tab.active{background:var(--green); color:#fff;}
  .auth-form{display:none; flex-direction:column; gap:12px;}
  .auth-form.active{display:flex;}
  .auth-form label{font-size:0.78rem; font-weight:600; color:var(--black); margin-bottom:-6px;}
  .auth-form input{
    padding:12px 14px; border:1px solid var(--line); border-radius:6px;
    font-family:'Work Sans', sans-serif; font-size:0.92rem;
  }
  .auth-form button{margin-top:8px;}
  .auth-hint{
    font-size:0.74rem; color:var(--black); margin-top:18px; line-height:1.6;
    border-top:1px solid var(--line); padding-top:14px;
  }
  .auth-error{
    background:rgba(201,32,46,0.08); color:var(--black); font-size:0.82rem;
    padding:10px 12px; border-radius:6px; display:none; margin-bottom:16px;
  }
  .auth-error.show{display:block;}

  /* ---------- Plataforma ---------- */
  #app{min-height:100vh; background:var(--white);}
  .app-topbar{
    position:sticky; top:0; z-index:100;
    background:var(--white); color:var(--black);
    padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
  }
  .app-user{display:flex; align-items:center; gap:12px;}
  .app-user-avatar{
    width:36px; height:36px; border-radius:50%; background:var(--yellow);
    color:var(--black); display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-weight:700; flex:none;
  }
  .role-badge{
    font-family:'Space Mono', monospace; font-size:0.66rem;
    text-transform:uppercase; letter-spacing:0.06em;
    background:rgba(0,0,0,0.06); color:var(--black); padding:3px 9px; border-radius:999px;
  }
  .btn-sair{
    background:transparent; border:1px solid rgba(0,0,0,0.25); color:var(--black);
    padding:9px 18px; border-radius:999px; font-size:0.85rem; cursor:pointer;
  }
  .app-topbar-actions{display:flex; align-items:center; gap:10px;}
  .btn-historico{
    background:var(--green); border:none; color:#fff;
    padding:9px 18px; border-radius:999px; font-size:0.85rem; font-weight:700; cursor:pointer;
  }
  .stat-row.cols-4{grid-template-columns:repeat(4,1fr);}
  @media (max-width:700px){ .stat-row.cols-4{grid-template-columns:repeat(2,1fr);} }
  .stat-btn{
    border:none; border-left:2px solid var(--yellow); padding:0 0 0 14px;
    background:none; text-align:left; cursor:pointer; font-family:inherit; display:block; width:100%; border-radius:0;
  }
  .stat-btn:hover{background:rgba(0,0,0,0.03);}
  .stat-btn.active{border-left-color:var(--green);}
  .stat-btn b{font-family:'Fraunces', serif; font-size:2.1rem; display:block; color:var(--black);}
  .stat-btn.active b{color:var(--blue);}
  .stat-btn span{font-size:0.85rem; color:var(--black);}
  .app-body{display:flex; align-items:flex-start; max-width:1280px; margin:0 auto;}
  .app-nav{width:220px; flex:none; padding:28px 16px;}
  .app-nav button{
    display:block; width:100%; text-align:left; background:none; border:none;
    padding:12px 14px; border-radius:6px; font-size:0.9rem; font-weight:500;
    color:var(--black); cursor:pointer; margin-bottom:4px;
  }
  .app-nav button.active{background:rgba(31,157,92,0.1); color:var(--blue); font-weight:700;}
  .app-main{flex:1; padding:18px 32px 36px; min-width:0;}
  .app-main h2{font-size:1.6rem; color:var(--black); margin-bottom:6px; font-family:'Fraunces', serif;}
  .app-sub{color:var(--black); font-size:0.92rem; margin-bottom:26px;}
  .app-sidebar{display:none;}
  @media (min-width:1200px){
    .app-body{max-width:1560px;}
    .app-sidebar{
      display:flex; flex-direction:column; gap:16px;
      width:260px; flex:none; padding:18px 24px 36px 0;
    }
    .app-sidebar .landing-sidebar-section{border:1px solid var(--line); border-radius:8px;}
  }

  .card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; margin-bottom:20px;}
  table.data{width:100%; border-collapse:collapse; font-size:0.88rem;}
  table.data th{
    text-align:left; font-family:'Space Mono', monospace; font-size:0.7rem;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--black);
    padding:10px 12px; border-bottom:1px solid var(--line);
  }
  table.data td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
  table.data tr:last-child td{border-bottom:none;}
  .pill{
    font-family:'Space Mono', monospace; font-size:0.68rem; padding:4px 10px;
    border-radius:999px; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap;
  }
  .pill.admin{background:rgba(201,32,46,0.12); color:var(--red);}
  .pill.regional{background:rgba(31,95,199,0.14); color:var(--blue);}
  .pill.monitor{background:rgba(255,255,0,0.18); color:#7a5800;}
  .pill.jogador{background:rgba(31,157,92,0.1); color:var(--green);}
  .pill.facil{background:rgba(31,95,199,0.14); color:var(--blue);}
  .pill.media{background:rgba(255,255,0,0.18); color:#7a5800;}
  .pill.dificil{background:rgba(201,32,46,0.12); color:var(--red);}
  .game-card{display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line);}
  .game-card:last-child{border-bottom:none;}
  .game-photo{
    width:84px; height:84px; border-radius:8px; object-fit:cover; flex:none;
    background:#f2f2f2; border:1px solid var(--line);
  }
  .game-photo-placeholder{
    width:84px; height:84px; border-radius:8px; flex:none;
    background:#f2f2f2; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:#bbb; font-size:1.6rem;
  }
  .game-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
  .game-tag{
    background:#f2f2f2; color:var(--black); font-size:0.72rem; padding:3px 9px; border-radius:999px;
  }
  select.role-select{padding:6px 8px; border-radius:4px; border:1px solid var(--line); font-size:0.8rem;}
  .btn-small{padding:7px 14px; font-size:0.78rem; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer;}
  .builder-row{display:flex; gap:10px; margin-bottom:10px; align-items:center;}
  .builder-row input{flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:6px;}
  .search-box{
    width:100%; padding:10px 14px; border:1px solid var(--line); border-radius:8px;
    font-family:'Work Sans', sans-serif; font-size:0.9rem; margin-bottom:16px;
  }
  .chip-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px;}
  .chip{display:flex; align-items:center; gap:8px; background:#f2f2f2; padding:6px 8px 6px 12px; border-radius:999px; font-size:0.8rem;}
  .chip button{background:none; border:none; cursor:pointer; color:var(--black); font-size:0.9rem;}

  /* ---------- Galeria de fotos (perfil) ---------- */
  .gallery-grid{display:flex; flex-wrap:wrap; gap:14px;}
  .gallery-tile{
    width:110px; height:110px; border-radius:12px; position:relative; overflow:hidden; flex:none;
  }
  .gallery-tile img{width:100%; height:100%; object-fit:cover; display:block;}
  .gallery-tile .gallery-remove{
    position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%;
    background:rgba(0,0,0,0.55); color:#fff; border:none; cursor:pointer;
    font-size:0.85rem; line-height:1; display:flex; align-items:center; justify-content:center;
  }
  .gallery-add-tile{
    width:110px; height:110px; border-radius:12px; flex:none;
    background:var(--green); color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:300;
    transition:filter 0.15s ease;
  }
  .gallery-add-tile:hover{filter:brightness(1.08);}
  .checkbox-list{
    display:flex; flex-direction:column; gap:2px; max-height:230px; overflow-y:auto;
    border:1px solid var(--line); border-radius:8px; padding:10px;
  }
  .checkbox-list label{display:flex; align-items:center; gap:10px; font-size:0.86rem; padding:7px 6px; border-radius:4px;}
  .qr-box{
    display:flex; flex-direction:column; align-items:center; gap:12px;
    padding:24px; border:1px dashed var(--line); border-radius:10px; width:fit-content;
  }
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;}
  .form-grid label{font-size:0.78rem; font-weight:600; color:var(--black); display:block; margin-bottom:6px;}
  .form-grid input, .form-grid select{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-family:'Work Sans', sans-serif;}
  .field-label{font-size:0.78rem; font-weight:600; color:var(--black); display:block; margin:20px 0 8px;}

  @media (max-width:800px){
    .app-topbar{flex-direction:column; align-items:flex-start; gap:10px; padding:14px 16px;}
    .app-topbar-actions{width:100%; flex-wrap:wrap; gap:8px;}
    .btn-historico, .btn-sair{padding:8px 14px; font-size:0.8rem;}
    .app-body{flex-direction:column;}
    .app-nav{
      width:100%; display:flex; overflow-x:auto; gap:6px;
      border-right:none; border-bottom:1px solid var(--line); padding:12px 16px;
    }
    .app-nav button{white-space:nowrap; width:auto; margin-bottom:0;}
    .app-main{padding:28px 20px;}
    .form-grid{grid-template-columns:1fr;}
    .app-sidebar{
      display:flex; flex-direction:column; gap:16px;
      width:100%; flex:none; padding:0 20px 28px;
    }
    .app-sidebar .landing-sidebar-section{border:1px solid var(--line); border-radius:8px;}

    /* Cartão de carimbos (Início > "Entrar" num evento Carimbos) abre em
       ecrã maximizado em telemóvel — ver openStampsCardModal em app.js,
       que adiciona/remove esta classe ao abrir/fechar o popup. */
    .overlay.mobile-maximize{padding:0;}
    .overlay.mobile-maximize .modal{
      width:100vw; max-width:100vw; height:100vh; max-height:100vh;
      border-radius:0; margin:0;
    }
  }

  /* ---------- Tema escuro (aplicado a #app via Definições) ---------- */
  #app.theme-dark{
    --white: #1a1a1a;
    --black: #f2f2f2;
    --ink: #f2f2f2;
    --line: rgba(255,255,255,0.14);
  }
  #app.theme-dark .card,
  #app.theme-dark .btn-small{background:#232323;}
  #app.theme-dark .app-sub,
  #app.theme-dark .stat-btn span,
  #app.theme-dark table.data th{color:#999;}
  #app.theme-dark .app-nav button{color:#bbb;}
  #app.theme-dark .game-photo,
  #app.theme-dark .game-photo-placeholder,
  #app.theme-dark .game-tag,
  #app.theme-dark .chip{background:#2c2c2c;}
  #app.theme-dark .game-tag{color:#ccc;}
  #app.theme-dark input,
  #app.theme-dark select,
  #app.theme-dark textarea{background:#232323; color:var(--ink);}
  #app.theme-dark .card-danger{background:rgba(201,32,46,0.08); border-color:rgba(201,32,46,0.35);}

  /* Folha de impressão dos cartões de jogador temporário (ver "Cartões",
     Definições > Cartões): fica escondida normalmente, só aparece quando se
     imprime (window.print()), escondendo o resto da página nesse momento. */
  #tempCardsPrintArea{display:none;}
  @media print{
    body > *:not(#tempCardsPrintArea){display:none !important;}
    #tempCardsPrintArea{
      display:flex !important; flex-wrap:wrap; gap:16px; padding:16px;
    }
    .print-temp-card{
      width:160px; text-align:center; padding:12px;
      border:1px dashed #999; border-radius:8px;
      page-break-inside:avoid; break-inside:avoid;
    }
    .print-temp-card img{width:100%; height:auto; display:block; margin:0 auto;}
    .print-temp-card p{margin:8px 0 0; font-weight:600; font-family:'Work Sans', sans-serif; font-size:0.85rem;}
  }