:root{
    --ink:#20242F;
    --paper:#29333B;
    --card:#303A43;
    --ochre:#48A89B;
    --ochre-dark:#2D8176;
    --teal:#48A89B;
    --teal-light:#E4F0EC;
    --line:#4B5862;
    --danger:#FF8178;
    --text:#E4F0EC;
    --muted:#B7CAC4;
    --shadow:0 8px 22px -12px rgba(0,0,0,0.6);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--ink);}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    min-height:100vh;
    padding:28px 20px 60px;
  }
  #app{
    max-width:1080px;
    margin:0 auto;
  }

  
  /* ---------- HEADER ---------- */
  .masthead{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:0 4px 18px;
    border-bottom:2px solid var(--ochre);
    margin-bottom:0;
  }
  .masthead h1{
    font-family:'Newsreader', serif;
    font-weight:600;
    font-size:2.1rem;
    color:var(--paper);
    margin:0;
    letter-spacing:0.2px;
  }
  .masthead .sub{
    font-family:'Space Mono', monospace;
    font-size:0.78rem;
    color:var(--ochre);
    text-transform:uppercase;
    letter-spacing:1.5px;
  }
  .masthead .actions{
    display:flex;
    gap:8px;
  }
  .ghost-btn{
    background:transparent;
    border:1px solid rgba(242,237,225,0.35);
    color:var(--paper);
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.5px;
    text-transform:uppercase;
    padding:7px 12px;
    border-radius:3px;
    cursor:pointer;
    transition:all .15s;
  }
  .ghost-btn:hover{ background:rgba(242,237,225,0.1); border-color:var(--ochre); }

  /* ---------- TABS (rolodex index) ---------- */
  .tabs{
    display:flex;
    gap:4px;
    margin:0;
    padding:0;
    list-style:none;
  }
  .tab-btn{
    font-family:'Space Mono', monospace;
    font-size:0.82rem;
    letter-spacing:0.4px;
    background:#3a3f52;
    color:#b9bfd1;
    border:none;
    border-radius:8px 8px 0 0;
    padding:11px 20px 9px;
    cursor:pointer;
    position:relative;
    top:2px;
    transition:all .15s;
  }
  .tab-btn.active{
    background:var(--paper);
    color:var(--ink);
    font-weight:700;
  }
  .tab-btn:not(.active):hover{ background:#454b62; color:var(--paper); }

  main{
    background:var(--paper);
    border-radius:0 10px 10px 10px;
    padding:28px 28px 34px;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
  }
  section.panel{ display:none; }
  section.panel.active{ display:block; }

  h2.section-title{
    font-family:'Newsreader', serif;
    font-size:1.3rem;
    font-weight:600;
    margin:0 0 4px;
    color:var(--ink);
  }
  p.section-hint{
    font-family:'Inter';
    font-size:0.85rem;
    color:#6b6350;
    margin:0 0 20px;
  }

  /* ---------- FORM CARD ---------- */
  .form-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:20px 22px;
    margin-bottom:26px;
    position:relative;
  }
  .form-card::before{
    content:'';
    position:absolute;
    top:14px; left:14px;
    width:10px; height:10px;
    border-radius:50%;
    background:var(--paper);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
  }
  .form-card .form-title{
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--ochre-dark);
    margin:0 0 14px 22px;
  }
  .form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
    gap:12px 16px;
  }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field.span2{ grid-column:span 2; }
  .field label{
    font-family:'Space Mono', monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:#7a7157;
  }
  .field input[type=text], .field input[type=tel]{
    font-family:'Inter';
    font-size:0.92rem;
    padding:9px 10px;
    border:1px solid var(--line);
    border-radius:5px;
    background:#fff;
    color:var(--ink);
  }
  .field input:focus, .checklist:focus-within{
    outline:2px solid var(--ochre);
    outline-offset:1px;
  }
  .checklist{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    border:1px solid var(--line);
    border-radius:5px;
    padding:8px;
    background:#fff;
    min-height:42px;
  }
  .checklist.empty::after{
    content:'Cria primeiro uma atividade →';
    font-size:0.8rem;
    color:#a39a80;
    font-style:italic;
  }
  .chk-pill{
    display:flex; align-items:center; gap:5px;
    font-size:0.8rem;
    background:var(--teal-light);
    border:1px solid #c7d8d1;
    padding:4px 9px 4px 6px;
    border-radius:20px;
    cursor:pointer;
    user-select:none;
  }
  .chk-pill input{ accent-color:var(--teal); }
  .chk-pill.checked{ background:var(--teal); color:#fff; border-color:var(--teal); }

  .form-actions{
    display:flex; gap:10px; margin-top:16px; align-items:center;
  }
  .btn{
    font-family:'Space Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.4px;
    text-transform:uppercase;
    padding:10px 18px;
    border-radius:5px;
    border:none;
    cursor:pointer;
    transition:transform .1s, box-shadow .15s;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--ochre); color:#fff; }
  .btn-primary:hover{ background:var(--ochre-dark); }
  .btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--line); }
  .btn-secondary:hover{ background:#eee5d2; }
  .btn-danger-link{
    background:none; border:none; color:var(--danger);
    font-family:'Space Mono'; font-size:0.72rem; text-transform:uppercase;
    cursor:pointer; text-decoration:underline; padding:0;
  }
  .form-error{ color:var(--danger); font-size:0.8rem; font-family:'Space Mono'; display:none; margin-top:8px; }

  /* ---------- CARDS LIST (contacts as index cards) ---------- */
  .card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
    gap:14px;
  }
  .contact-card{
    background:var(--card);
    border:1px solid var(--line);
    border-left:4px solid var(--ochre);
    border-radius:8px;
    padding:14px 16px;
    box-shadow: var(--shadow);
    position:relative;
  }
  .contact-card .cc-id{
    position:absolute; top:12px; right:14px;
    font-family:'Space Mono'; font-size:0.68rem; color:#b3a98c;
  }
  .contact-card h3{
    font-family:'Newsreader', serif;
    font-size:1.08rem;
    margin:0 0 2px;
    padding-right:30px;
  }
  .contact-card .cc-meta{
    font-family:'Space Mono', monospace;
    font-size:0.74rem;
    color:#7a7157;
    margin-bottom:10px;
  }
  .cc-row{ margin-bottom:8px; }
  .cc-row .cc-label{
    font-family:'Space Mono'; font-size:0.64rem; text-transform:uppercase;
    letter-spacing:0.5px; color:#a89f85; display:block; margin-bottom:4px;
  }
  .tag{
    display:inline-block;
    font-size:0.76rem;
    background:var(--teal-light);
    color:var(--teal);
    border:1px solid #c7d8d1;
    padding:2px 8px;
    border-radius:20px;
    margin:0 5px 5px 0;
  }
  .tag.act{ background:#f2e4cf; color:var(--ochre-dark); border-color:#e2cda3; }
  .cc-actions{
    margin-top:10px;
    display:flex; gap:14px;
    border-top:1px dashed var(--line);
    padding-top:9px;
  }
  .cc-actions button{
    background:none; border:none; cursor:pointer;
    font-family:'Space Mono'; font-size:0.7rem; text-transform:uppercase;
    letter-spacing:0.4px; color:var(--ink); padding:0;
  }
  .cc-actions button:hover{ color:var(--ochre-dark); }
  .cc-actions .del{ color:var(--danger); }

  /* ---------- ACTIVITIES LIST ---------- */
  .act-list{ display:flex; flex-direction:column; gap:8px; }
  .act-row{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--card); border:1px solid var(--line);
    border-radius:7px; padding:11px 15px;
  }
  .act-row .act-name{ font-family:'Newsreader', serif; font-size:1.02rem; }
  .act-row .act-id{ font-family:'Space Mono'; font-size:0.68rem; color:#a89f85; margin-right:10px; }
  .act-row .act-count{ font-family:'Space Mono'; font-size:0.7rem; color:var(--teal); }
  .act-row .act-actions{ display:flex; gap:12px; }
  .act-row button{
    background:none; border:none; cursor:pointer;
    font-family:'Space Mono'; font-size:0.7rem; text-transform:uppercase; color:var(--ink);
  }
  .act-row button.del{ color:var(--danger); }

  .empty-state{
    text-align:center; padding:40px 20px; color:#a39a80;
    font-family:'Space Mono'; font-size:0.85rem;
    border:1px dashed var(--line); border-radius:10px;
  }

  /* ---------- CRUZAR / SEARCH TAB ---------- */
  .cross-toggle{
    display:flex; gap:8px; margin-bottom:20px;
  }
  .cross-toggle button{
    font-family:'Space Mono'; font-size:0.76rem; text-transform:uppercase;
    padding:9px 16px; border-radius:20px; border:1px solid var(--line);
    background:#fff; cursor:pointer; color:var(--ink);
  }
  .cross-toggle button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  select.select-input{
    font-family:'Inter'; font-size:0.92rem;
    padding:10px 12px; border:1px solid var(--line); border-radius:5px;
    background:#fff; width:100%; max-width:360px; margin-bottom:20px;
  }

  .result-block{
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:16px 18px; margin-bottom:12px;
  }
  .result-block h4{
    font-family:'Newsreader', serif; margin:0 0 8px; font-size:1.05rem;
  }
  .result-block .rb-meta{ font-family:'Space Mono'; font-size:0.72rem; color:#7a7157; margin-bottom:8px;}

  footer.hint{
    text-align:center; color:#6b708a; font-family:'Space Mono'; font-size:0.7rem;
    margin-top:18px; letter-spacing:0.4px;
  }

  @media (max-width:560px){
    .field.span2{ grid-column:span 1; }
    .masthead h1{ font-size:1.6rem; }
  }

  /* ---------- PALETA VERDE E ARDÓSIA ---------- */
  html,body{background:var(--ink);}
  body{color:var(--text);}
  .masthead h1{color:var(--text);}
  .masthead .sub{color:var(--ochre);}
  .ghost-btn{color:var(--text);border-color:rgba(228,240,236,0.35);}
  .ghost-btn:hover{background:rgba(72,168,155,0.14);border-color:var(--ochre);}

  .tab-btn{background:#303944;color:var(--muted);}
  .tab-btn.active{background:var(--card);color:var(--text);}
  .tab-btn:not(.active):hover{background:#35434A;color:var(--text);}
  main{background:#29333B;}
  h2.section-title{color:var(--text);}
  p.section-hint{color:var(--muted);}

  .form-card,.contact-card,.act-row,.result-block{
    background:var(--card);
    border-color:var(--line);
    color:var(--text);
  }
  .form-card::before{background:var(--ink);}
  .form-card .form-title{color:var(--text);}
  .field label,.contact-card .cc-meta,.contact-card .cc-id,
  .cc-row .cc-label,.act-row .act-id,.result-block .rb-meta{color:var(--muted);}
  .field input[type=text],.field input[type=tel],
  .checklist,select.select-input{
    background:var(--teal-light);
    border-color:#B8D2CA;
    color:var(--ink);
  }
  .field input::placeholder{color:#667C75;}
  .field input:focus,.checklist:focus-within,select.select-input:focus{
    outline:2px solid var(--ochre);
    outline-offset:1px;
  }
  .checklist.empty::after{color:#55736A;}
  .field label.chk-pill{background:#D2E7E1;border-color:#A9C9BF;color:#244A42;}
  .field label.chk-pill.checked{background:var(--ochre);border-color:var(--ochre);color:var(--ink);}
  .chk-pill input{accent-color:var(--ochre-dark);}
  .chk-pill.checked{background:var(--ochre);border-color:var(--ochre);color:var(--ink);}

  .btn-primary{background:var(--ochre);color:var(--ink);}
  .btn-primary:hover{background:#63BBAF;}
  .btn-secondary{color:var(--text);border-color:var(--line);}
  .btn-secondary:hover{background:rgba(228,240,236,0.1);}
  .btn-danger-link,.form-error,.cc-actions .del,.act-row button.del{color:var(--danger);}

  .contact-card{border-left-color:var(--ochre);}
  .contact-card h3,.act-row .act-name,.result-block h4{color:var(--text);}
  .tag{background:var(--teal-light);color:#244A42;border-color:#B8D2CA;}
  .tag.act{background:#D2E7E1;color:#244A42;border-color:#8FBDB1;}
  .cc-actions{border-color:var(--line);}
  .cc-actions button,.act-row button{color:var(--text);}
  .cc-actions button:hover{color:var(--ochre);}
  .act-row .act-count{color:var(--ochre);}
  .empty-state{color:var(--muted);border-color:var(--line);}

  .cross-toggle button{background:#303944;color:var(--text);border-color:var(--line);}
  .cross-toggle button.active{background:var(--ochre);color:var(--ink);border-color:var(--ochre);}
  footer.hint{color:var(--muted);}

  ::selection{background:var(--ochre);color:var(--ink);}

  #app[hidden],#authScreen[hidden],#adminGate[hidden]{display:none!important;}
  .auth-screen{
    min-height:calc(100vh - 88px);
    display:grid;
    place-items:center;
  }
  .auth-panel{
    width:min(100%,520px);
    padding:34px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:var(--shadow);
  }
  .auth-panel .sub{
    color:var(--ochre);
    font-family:'Space Mono',monospace;
    font-size:0.76rem;
    text-transform:uppercase;
  }
  .auth-panel h1{
    margin:8px 0 12px;
    color:var(--text);
    font-family:'Newsreader',serif;
    font-size:2rem;
  }
  .auth-panel p{color:var(--muted);line-height:1.6;}
  .auth-login{display:inline-flex;align-items:center;text-decoration:none;}
  .auth-user{color:var(--text);font-size:0.82rem;}
  .ghost-btn:focus-visible,.auth-login:focus-visible{
    outline:2px solid var(--ochre);
    outline-offset:3px;
  }

  .dashboard-home{
    width:min(100%,1080px);
    margin:0 auto;
  }
  .dashboard-heading{
    margin:0 0 24px;
    padding:8px 4px 18px;
    border-bottom:2px solid var(--ochre);
  }
  .dashboard-heading .sub{
    color:var(--ochre);
    font-family:'Space Mono',monospace;
    font-size:0.76rem;
    text-transform:uppercase;
  }
  .dashboard-heading h1{
    margin:8px 0 4px;
    color:var(--text);
    font-family:'Newsreader',serif;
    font-size:2rem;
    font-weight:600;
  }
  .dashboard-heading p{margin:0;color:var(--muted);}
  .project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap:16px;
  }
  .project-tile{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:22px;
    background:var(--paper);
    border:1px solid var(--line);
    border-top:3px solid var(--ochre);
    border-radius:6px;
    box-shadow:var(--shadow);
  }
  .project-index{
    color:var(--ochre);
    font-family:'Space Mono',monospace;
    font-size:0.72rem;
  }
  .project-tile h2{
    margin:16px 0 6px;
    color:var(--text);
    font-family:'Newsreader',serif;
    font-size:1.4rem;
    font-weight:600;
  }
  .project-tile p{margin:0 0 20px;color:var(--muted);line-height:1.55;}
  .project-tile .btn{margin-top:auto;text-decoration:none;}

  @media(max-width:560px){
    .auth-panel{padding:24px;}
    .masthead .actions{flex-wrap:wrap;}
    .project-tile{min-height:190px;padding:18px;}
  }

  .admin-main{margin-top:0;}
  .admin-panel{display:none;}
  .admin-panel.active{display:block;}
  .admin-panel[hidden]{display:none!important;}
  .admin-add-form{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(170px,220px) auto;
    gap:14px;
    align-items:end;
    padding:18px 0;
    border-bottom:1px solid var(--line);
  }
  .admin-add-form select,.admin-table select,.admin-log-heading input{
    min-height:40px;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:4px;
    background:#202B32;
    color:var(--text);
    font:inherit;
  }
  .admin-add-form input{width:100%;}
  .admin-add-form .btn{white-space:nowrap;}
  .admin-message{min-height:1.25rem;color:var(--ochre);font-size:0.85rem;}
  .table-scroll{width:100%;overflow:auto;}
  .admin-table{width:100%;border-collapse:collapse;font-size:0.84rem;}
  .admin-table th,.admin-table td{
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:middle;
    white-space:nowrap;
  }
  .admin-table th{
    color:var(--muted);
    font-family:'Space Mono',monospace;
    font-size:0.67rem;
    font-weight:400;
    text-transform:uppercase;
  }
  .admin-table td strong,.admin-table td small{display:block;}
  .admin-table td small{margin-top:4px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;}
  .admin-table select{min-height:34px;padding:5px 8px;}
  .admin-table .btn{padding:7px 10px;font-size:0.68rem;}
  .access-toggle{display:flex;align-items:center;gap:8px;color:var(--text);}
  .access-toggle input{accent-color:var(--ochre);width:16px;height:16px;}
  .admin-log-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
  .admin-log-heading input{width:min(100%,280px);}
  .log-table td:nth-child(5){white-space:normal;min-width:190px;}

  @media(max-width:720px){
    .admin-add-form{grid-template-columns:1fr;align-items:stretch;}
    .admin-add-form .btn{justify-self:start;}
    .admin-log-heading{display:block;}
    .admin-log-heading input{margin:0 0 14px;width:100%;}
  }

  body.admin-page{
    height:100vh;
    min-height:0;
    padding:14px 20px;
    overflow:hidden;
    display:flex;
  }
  body.admin-page > .auth-screen{
    flex:1 1 100%;
    width:100%;
    max-width:1080px;
    margin:0 auto;
  }
  #adminApp{
    width:100%;
    max-width:1080px;
    height:100%;
    min-height:0;
    margin:0 auto;
    display:flex;
    flex-direction:column;
  }
  #adminApp[hidden]{display:none!important;}
  #adminApp .masthead{flex:0 0 auto;padding-bottom:10px;}
  #adminApp .admin-tabs{flex:0 0 auto;}
  #adminApp .admin-main{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:16px 22px 18px;
  }
  #adminApp .admin-panel.active{min-height:0;overflow:hidden;}
  #admin-users .table-scroll,#admin-logs .table-scroll{flex:1 1 auto;min-height:0;}

  @media(max-width:720px), (max-height:620px){
    body.admin-page{height:auto;min-height:100vh;padding:14px 12px;overflow:auto;}
    #adminApp{height:auto;min-height:calc(100vh - 28px);}
    #adminApp .admin-main{overflow:visible;}
    #adminApp .admin-panel.active{overflow:visible;}
    #admin-users .table-scroll,#admin-logs .table-scroll{max-height:55vh;}
  }