:root{
    --petroleo:#183641;
    --petroleo-esc:#102630;
    --grafite:#2B2B2B;
    --areia:#D8C7A7;
    --marfim:#F5F1E8;
    --papel:#FCFAF5;
    --dourado:#A6854D;
    --linha:#E4DCCB;
    --linha-forte:#D3C8B2;
    --texto:#22323A;
    --suave:#63717A;
    --vinho:#6B3A42;
    --musgo:#5C6B52;
    --ardosia:#415A6B;
    --terracota:#8A5A44;
    --sombra:0 1px 2px rgba(24,54,65,.06), 0 8px 24px rgba(24,54,65,.05);
    --raio:10px;
    --serif:"Playfair Display", Georgia, "Times New Roman", serif;
    --sans:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--marfim); color:var(--texto);
    font-family:var(--sans); font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  button,input,select,textarea{font:inherit; color:inherit}
  a{color:var(--petroleo)}
  h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:600; letter-spacing:.1px; text-wrap:balance}

  #app{display:grid; grid-template-columns:246px 1fr; min-height:100vh;
    background:linear-gradient(90deg, var(--petroleo) 0 246px, var(--marfim) 246px 100%)}
  .lateral{
    background:var(--petroleo); color:#EDE7DA; padding:22px 18px 18px;
    display:flex; flex-direction:column; gap:26px; position:sticky; top:0; height:100vh;
  }
  .marca{display:flex; flex-direction:column; gap:2px; padding-bottom:18px; border-bottom:1px solid rgba(216,199,167,.22)}
  .marca .nome{font-family:var(--serif); font-size:22px; color:#F5F1E8; line-height:1.15}
  .marca .sub{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--areia)}
  .menu{display:flex; flex-direction:column; gap:2px}
  .menu button{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    background:none; border:0; color:#D9D2C4; padding:9px 11px; border-radius:8px; cursor:pointer;
    font-size:14px; font-weight:500;
  }
  .menu button:hover{background:rgba(216,199,167,.10); color:#F5F1E8}
  .menu button[aria-current="true"]{background:rgba(216,199,167,.16); color:#F5F1E8; font-weight:600; box-shadow:inset 2px 0 0 var(--dourado)}
  .menu .cont{margin-left:auto; font-size:11.5px; color:var(--areia); font-variant-numeric:tabular-nums}
  .lateral .rodape{margin-top:auto; display:flex; flex-direction:column; gap:10px}
  .quem{display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.16); border-radius:9px; padding:10px 11px}
  .avatar{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-size:15px; color:var(--petroleo); background:var(--areia); flex:none}
  .quem .txt{line-height:1.25; min-width:0}
  .quem .txt b{font-size:13.5px; color:#F5F1E8; font-weight:600; display:block}
  .quem .txt span{font-size:11px; color:var(--areia)}
  .quem button{margin-left:auto; background:none; border:1px solid rgba(216,199,167,.35); color:var(--areia); border-radius:6px; padding:4px 7px; font-size:11px; cursor:pointer}
  .quem button:hover{background:rgba(216,199,167,.14)}
  .sinc{font-size:11px; color:rgba(216,199,167,.75); display:flex; align-items:center; gap:6px}
  .ponto{width:7px; height:7px; border-radius:50%; background:var(--areia); flex:none}
  .ponto.off{background:var(--terracota)}

  main{padding:30px 34px 90px; max-width:1180px; width:100%}
  .topo{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:24px}
  .topo h1{font-size:29px}
  .topo p{margin:4px 0 0; color:var(--suave); font-size:14px; max-width:62ch}

  .btn{
    display:inline-flex; align-items:center; gap:7px; border:1px solid var(--petroleo); background:var(--petroleo);
    color:#F5F1E8; padding:9px 15px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer;
  }
  .btn:hover{background:var(--petroleo-esc)}
  .btn.sec{background:transparent; color:var(--petroleo); border-color:var(--linha-forte)}
  .btn.sec:hover{background:#fff; border-color:var(--petroleo)}
  .btn.ouro{background:var(--dourado); border-color:var(--dourado); color:#fff}
  .btn.ouro:hover{filter:brightness(.94)}
  .btn.peq{padding:6px 11px; font-size:12.5px}
  .btn.perigo{background:transparent; border-color:#DCC7C7; color:var(--vinho)}
  .btn.perigo:hover{background:#F7EFEF}
  .btn[disabled]{opacity:.55; cursor:default}
  .btn.largo{width:100%; justify-content:center}
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--dourado); outline-offset:2px
  }

  .cartao{background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra)}
  .grade{display:grid; gap:14px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
  .tile{padding:15px 16px; background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio)}
  .tile .n{font-family:var(--serif); font-size:30px; line-height:1.1; color:var(--petroleo); font-variant-numeric:tabular-nums}
  .tile .r{font-size:12.5px; color:var(--suave); margin-top:2px}
  .tile.destaque{border-color:var(--dourado); box-shadow:inset 0 0 0 1px rgba(166,133,77,.18)}

  .selo{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.04em;
    padding:3px 8px; border-radius:999px; border:1px solid; white-space:nowrap}
  .s-rascunho{color:var(--suave); border-color:var(--linha-forte); background:#F2EEE4}
  .s-analise{color:var(--ardosia); border-color:#BFCCD6; background:#EDF2F6}
  .s-aprovado{color:var(--musgo); border-color:#C3CDB8; background:#EFF3EA}
  .s-ajustes{color:var(--vinho); border-color:#DCC2C6; background:#F8EEEF}
  .nivel{display:inline-block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--dourado)}

  .bloco-nivel{margin-bottom:26px}
  .bloco-nivel > header{display:flex; align-items:baseline; gap:10px; padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid var(--linha)}
  .bloco-nivel h2{font-size:18px}
  .bloco-nivel header span{font-size:12.5px; color:var(--suave)}
  .cards{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
  .prod{
    text-align:left; background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
    padding:14px 15px 13px; cursor:pointer; display:flex; flex-direction:column; gap:9px; box-shadow:var(--sombra);
  }
  .prod:hover{border-color:var(--linha-forte)}
  .prod .lin1{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
  .prod h3{font-size:17px; line-height:1.25}
  .prod .prom{font-size:12.5px; color:var(--suave); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .prod .pe{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--suave); margin-top:auto}
  .barra{height:4px; background:#EAE3D4; border-radius:999px; overflow:hidden}
  .barra i{display:block; height:100%; background:var(--dourado)}

  .trilha{display:flex; flex-wrap:wrap}
  .trilha .f{flex:1 1 0; min-width:96px; padding:9px 10px; border-top:3px solid var(--linha-forte)}
  .trilha .f.ok{border-top-color:var(--petroleo)}
  .trilha .f .nm{font-size:12.5px; font-weight:600; color:var(--suave)}
  .trilha .f.ok .nm{color:var(--texto)}
  .trilha .f .qt{font-size:11px; color:var(--suave)}

  .voltar{background:none; border:0; color:var(--suave); cursor:pointer; padding:0; font-size:13px; margin-bottom:12px}
  .voltar:hover{color:var(--petroleo)}
  .cabec{background:var(--petroleo); color:#EFE9DC; border-radius:var(--raio); padding:20px 22px; margin-bottom:18px}
  .cabec h1{color:#F5F1E8; font-size:26px}
  .cabec .prom{margin:6px 0 0; color:var(--areia); font-size:14px; max-width:64ch}
  .cabec .meta{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:12px; color:#CFC7B6}
  .cabec .meta b{display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--areia); font-weight:600}
  .acoes{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid rgba(216,199,167,.22)}
  .acoes .btn.sec{color:var(--areia); border-color:rgba(216,199,167,.4); background:transparent}
  .acoes .btn.sec:hover{background:rgba(216,199,167,.12); border-color:var(--areia)}

  .abas{display:flex; gap:4px; border-bottom:1px solid var(--linha); margin-bottom:18px; overflow-x:auto}
  .abas button{background:none; border:0; padding:10px 14px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--suave); border-bottom:2px solid transparent; white-space:nowrap}
  .abas button[aria-selected="true"]{color:var(--petroleo); border-bottom-color:var(--dourado)}

  .campos{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .campo{display:flex; flex-direction:column; gap:5px}
  .campo label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); font-weight:600}
  .campo input, .campo select, .campo textarea{
    background:var(--papel); border:1px solid var(--linha-forte); border-radius:8px; padding:9px 11px; font-size:14px; width:100%;
  }
  .campo textarea{min-height:78px; resize:vertical; line-height:1.5}
  .campo.largo{grid-column:1/-1}

  .item{display:flex; gap:11px; align-items:flex-start; padding:10px 12px; border:1px solid var(--linha); border-radius:9px; background:var(--papel)}
  .item + .item{margin-top:7px}
  .item input[type=checkbox]{width:17px; height:17px; margin-top:2px; accent-color:var(--petroleo); flex:none; cursor:pointer}
  .item .txt{flex:1; min-width:0}
  .item .txt p{margin:0; font-size:14px}
  .item .txt small{color:var(--suave); font-size:11.5px}
  .item.feito .txt p{color:var(--suave); text-decoration:line-through}
  .item .x{background:none; border:0; color:#B9AE99; cursor:pointer; font-size:16px; line-height:1; padding:2px 4px}
  .item .x:hover{color:var(--vinho)}
  .item .tag{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dourado); font-weight:700}

  .grupo-fase{margin-bottom:20px}
  .grupo-fase > h3{font-size:16px; margin-bottom:4px; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
  .grupo-fase > p{margin:0 0 10px; font-size:12.5px; color:var(--suave)}
  .num{width:22px; height:22px; border-radius:50%; background:var(--areia); color:var(--petroleo); display:grid; place-items:center; font-size:11.5px; font-weight:700; flex:none}
  .grupo-fase.atual .num{background:var(--dourado); color:#fff}

  .linha-add{display:flex; gap:8px; margin-top:9px; flex-wrap:wrap}
  .linha-add input, .linha-add select{background:var(--papel); border:1px solid var(--linha-forte); border-radius:8px; padding:8px 10px; font-size:13.5px}
  .linha-add input{flex:1; min-width:180px}

  .entreg{display:grid; grid-template-columns:1.6fr .9fr .8fr .9fr auto; gap:10px; align-items:center; padding:11px 12px; border:1px solid var(--linha); border-radius:9px; background:var(--papel)}
  .entreg + .entreg{margin-top:7px}
  .entreg .nm{font-weight:600; font-size:14px}
  .entreg .nm small{display:block; font-weight:400; color:var(--suave); font-size:11.5px}
  .entreg select, .entreg input{border:1px solid var(--linha-forte); border-radius:7px; padding:6px 8px; font-size:12.5px; background:#fff; width:100%}

  .fala{display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--linha)}
  .fala:last-child{border-bottom:0}
  .fala .corpo{flex:1; min-width:0}
  .fala .cab{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px}
  .fala .cab b{font-size:13.5px}
  .fala .cab time{font-size:11.5px; color:var(--suave)}
  .fala p{margin:0; font-size:14px; white-space:pre-wrap}
  .t-insight{color:var(--dourado); border-color:#E0CFAC; background:#FAF4E9}
  .t-ajuste{color:var(--vinho); border-color:#DCC2C6; background:#F8EEEF}
  .t-aprovacao{color:var(--musgo); border-color:#C3CDB8; background:#EFF3EA}
  .t-comentario{color:var(--ardosia); border-color:#BFCCD6; background:#EDF2F6}

  .ideia{padding:14px 15px; border:1px solid var(--linha); border-left:3px solid var(--areia); border-radius:9px; background:var(--papel); display:flex; flex-direction:column; gap:8px}
  .vazio{padding:26px; text-align:center; color:var(--suave); border:1px dashed var(--linha-forte); border-radius:var(--raio); font-size:14px}
  .aviso{padding:11px 13px; border-radius:9px; font-size:13px; border:1px solid}
  .aviso.erro{color:var(--vinho); border-color:#DCC2C6; background:#F8EEEF}
  .aviso.ok{color:var(--musgo); border-color:#C3CDB8; background:#EFF3EA}
  .aviso.neutro{color:var(--suave); border-color:var(--linha-forte); background:#F2EEE4}

  .fundo{position:fixed; inset:0; background:rgba(16,38,48,.55); display:grid; place-items:center; padding:20px; z-index:40}
  .caixa{background:var(--marfim); border-radius:14px; width:min(680px,100%); max-height:90vh; overflow:auto; padding:26px; box-shadow:0 24px 60px rgba(16,38,48,.3)}
  .caixa h2{font-size:22px; margin-bottom:4px}
  .caixa > p{margin:0 0 18px; color:var(--suave); font-size:13.5px}
  .caixa .pe{display:flex; gap:9px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap}

  .porta{position:fixed; inset:0; background:var(--petroleo); display:grid; place-items:center; padding:24px; z-index:50; overflow:auto}
  .porta .miolo{width:min(460px,100%); text-align:center; color:#EFE9DC}
  .porta .miolo h1{font-family:var(--serif); font-size:34px; color:#F5F1E8}
  .porta .miolo .sub{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--areia); margin-bottom:8px}
  .porta .miolo p{color:#C9C1B0; font-size:13.5px; margin:0 auto 24px; max-width:44ch}
  .perfis{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .perfil{background:rgba(245,241,232,.06); border:1px solid rgba(216,199,167,.3); border-radius:12px; padding:20px 16px; cursor:pointer; color:#EFE9DC; display:flex; flex-direction:column; align-items:center; gap:8px}
  .perfil:hover{background:rgba(245,241,232,.13); border-color:var(--areia)}
  .perfil .avatar{width:46px; height:46px; font-size:20px; color:var(--petroleo)}
  .perfil b{font-family:var(--serif); font-size:19px; font-weight:600}
  .perfil span{font-size:12px; color:var(--areia)}
  .porta .form{display:flex; flex-direction:column; gap:11px; text-align:left; background:rgba(0,0,0,.16); padding:20px; border-radius:12px}
  .porta .form label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--areia); font-weight:600}
  .porta .form input{background:rgba(245,241,232,.95); border:1px solid rgba(216,199,167,.4); border-radius:8px; padding:10px 12px; font-size:15px; color:var(--texto); width:100%}
  .porta .erro{color:#F0C9CC; font-size:13px; margin:0}
  .porta .voltar2{background:none; border:0; color:var(--areia); font-size:12.5px; cursor:pointer; text-decoration:underline; padding:6px}
  .porta .nota{font-size:11.5px; color:rgba(216,199,167,.75); margin:14px auto 0; max-width:42ch}

  .rodape-nav{display:none}
  @media (max-width:880px){
    #app{grid-template-columns:1fr; background:var(--marfim)}
    .lateral{position:static; height:auto; flex-direction:row; align-items:center; gap:14px; padding:12px 16px}
    .lateral .marca{border-bottom:0; padding-bottom:0}
    .lateral .menu{display:none}
    .lateral .rodape{margin-top:0; margin-left:auto; flex-direction:row; align-items:center; gap:10px}
    .lateral .sinc{display:none}
    .quem{padding:6px 8px}
    .quem .txt span{display:none}
    main{padding:20px 16px 96px}
    .topo h1{font-size:24px}
    .rodape-nav{
      display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--papel); border-top:1px solid var(--linha);
      z-index:30; padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    }
    .rodape-nav button{flex:1; background:none; border:0; padding:8px 4px; cursor:pointer; color:var(--suave); font-size:11.5px; font-weight:600; border-radius:8px}
    .rodape-nav button[aria-current="true"]{color:var(--petroleo); background:#F1EBDE}
    .entreg{grid-template-columns:1fr 1fr}
    .entreg .nm{grid-column:1/-1}
    .cards{grid-template-columns:1fr}
    .perfis{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

  /* ---- ajustes da versão instalada ---- */
  .login-pagina{min-height:100vh; display:grid; place-items:center; background:var(--petroleo); padding:24px}
  .login-caixa{width:min(420px,100%); text-align:center; color:#EFE9DC}
  .login-caixa h1{font-family:var(--serif); font-size:32px; color:#F5F1E8}
  .login-caixa .sub{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--areia); margin-bottom:8px}
  .login-caixa form{display:flex; flex-direction:column; gap:12px; text-align:left; background:rgba(0,0,0,.18); padding:22px; border-radius:12px; margin-top:20px}
  .login-caixa label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--areia); font-weight:600}
  .login-caixa input{background:rgba(245,241,232,.95); border:1px solid rgba(216,199,167,.4); border-radius:8px; padding:11px 12px; font-size:15px; color:var(--texto); width:100%}
  .login-caixa .erro{color:#F0C9CC; font-size:13px; margin:0}
  .login-caixa .nota{font-size:11.5px; color:rgba(216,199,167,.7); margin-top:16px}
  .tabela{width:100%; border-collapse:collapse; font-size:14px}
  .tabela th{text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--linha)}
  .tabela td{padding:10px; border-bottom:1px solid var(--linha)}
  .tabela tr:last-child td{border-bottom:0}
  .rolagem{overflow-x:auto}
  .chave{font-family:ui-monospace, "Courier New", monospace; font-size:12.5px; letter-spacing:.02em}