:root{
  --bg: #0a0a0a;
  --bg-card: #151515;
  --bg-card-2: #1c1c1c;
  --border: #2a2a2a;
  --text: #f2f2f2;
  --text-dim: #9a9a9a;
  --accent: #c6ff1a;
  --accent-dim: #8fbf00;
  --danger: #ff5a5a;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(0,0,0,.45);
  --page-bg: radial-gradient(1200px 600px at 50% -10%, #161c00 0%, var(--bg) 55%);
  --check-mark: #0a0a0a;
  --input-bg: #0e0e0e;
}

html[data-theme="light"]{
  --bg: #eef2ee;
  --bg-card: #ffffff;
  --bg-card-2: #f3f6f2;
  --border: #d3dbd1;
  --text: #17251c;
  --text-dim: #66756a;
  --accent: #1f9254;
  --accent-dim: #167140;
  --danger: #d64545;
  --shadow: 0 4px 16px rgba(20,40,25,.10);
  --page-bg: radial-gradient(1200px 600px at 50% -10%, #e2f3e7 0%, var(--bg) 55%);
  --check-mark: #ffffff;
  --input-bg: #f4f7f3;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--page-bg);
  color: var(--text);
  transition: background .25s ease, color .25s ease;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  padding-bottom: 60px;
}

a{color:var(--accent);}

.wrap{
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* ===== HEADER ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding: 14px 4px 20px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-weight:800;
  letter-spacing:.5px;
  font-size: 22px;
}
.brand .zion{color:var(--text);}
.brand .eletric{color:var(--accent);}
.brand-sub{
  font-size:11px;
  color:var(--text-dim);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-top:2px;
}

.sync-pill{
  display:flex;
  align-items:center;
  gap:8px;
  background: var(--bg-card);
  border:1px solid var(--border);
  padding:5px 14px 5px 5px;
  border-radius: 999px;
  font-size:12.5px;
  color:var(--text-dim);
}
.sync-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}

.hero{
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.hero h1{
  margin:0 0 4px;
  font-size: 20px;
  letter-spacing:.3px;
}
.hero .obj{
  color: var(--text-dim);
  font-size: 13.5px;
  margin-top:8px;
}

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:16px;
}
.meta-field{
  flex:1 1 200px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.meta-field label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--text-dim);
}
.meta-field input, .meta-field select, .meta-field textarea{
  background: var(--input-bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  padding:9px 10px;
  font-size:14px;
  font-family:inherit;
}
.meta-field input:focus, .meta-field select:focus, .meta-field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(198,255,26,.15);
}

.whoami{
  display:flex;
  gap:8px;
  margin-top:16px;
  flex-wrap:wrap;
  align-items:center;
}
.whoami span{font-size:12px;color:var(--text-dim);}
.who-btn{
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  padding:7px 16px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
  transition:.15s;
}
.who-btn.active{
  background:var(--accent);
  color:#0a0a0a;
  border-color:var(--accent);
  font-weight:700;
}

/* ===== PROGRESS ===== */
.progress-wrap{margin: 4px 0 20px;}
.progress-label{
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
  color:var(--text-dim);
  margin-bottom:6px;
}
.progress-bar{
  height:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  width:0%;
  transition: width .4s ease;
}

/* ===== SECTIONS ===== */
.section{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom:14px;
  overflow:hidden;
  transition: border-color .2s;
}
.section.current{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow);
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background: var(--bg-card-2);
}
.section-time{
  font-size:12px;
  color: var(--accent);
  font-weight:700;
  letter-spacing:.5px;
}
.section-title{
  font-size:15.5px;
  font-weight:700;
  margin-top:2px;
}
.section.obrigatorio .section-title{color:var(--danger);}
.section-count{
  font-size:12px;
  color:var(--text-dim);
  white-space:nowrap;
}
.section-badge-current{
  font-size:10.5px;
  background:var(--accent);
  color:#0a0a0a;
  padding:2px 8px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.items{padding: 6px 8px;}
.item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 10px;
  border-radius:10px;
  cursor:pointer;
  transition: background .15s;
}
.item:hover{background:rgba(255,255,255,.03);}
.item.checked .item-label{
  color:var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--accent-dim);
}
.checkbox{
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:7px;
  border:2px solid var(--border);
  background:var(--input-bg);
  display:flex;align-items:center;justify-content:center;
  transition: all .15s;
  margin-top:1px;
}
.item.checked .checkbox{background:var(--accent); border-color:var(--accent);}
.checkbox svg{
  width:14px;height:14px;
  opacity:0;
  transform: scale(.6);
  transition: all .15s;
  stroke: var(--check-mark);
}
.item.checked .checkbox svg{opacity:1;transform:scale(1);}
.item-label{flex:1; font-size:14.5px; padding-top:1px;}

.note-btn{
  flex:0 0 auto;
  width:26px;height:26px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  cursor:pointer;
  padding:0;
  margin-top:-1px;
  transition: all .15s;
}
.note-btn:hover{border-color:var(--accent);}
.note-btn.has-note{
  background: var(--accent);
  border-color: var(--accent);
  color:#0a0a0a;
}

.item-meta{
  flex:0 0 auto;
  font-size:10.5px;
  color:var(--text-dim);
  text-align:right;
  min-width:64px;
  padding-top:2px;
}

/* ===== MISSAO ===== */
.missao-grid{display:grid; grid-template-columns: 1fr; gap:0;}

/* ===== OBS ===== */
.card{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:16px 18px;
  margin-bottom:14px;
}
.card h2{
  font-size:14px;
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--accent);
}
.card textarea{
  width:100%;
  min-height:90px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  padding:10px;
  font-family:inherit;
  font-size:14px;
  resize:vertical;
}
.card textarea:focus{outline:none;border-color:var(--accent);}

.sign-row{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-size:13px;
  color:var(--text-dim);
  margin-top:6px;
}

.footer-actions{display:flex; gap:10px; justify-content:center; margin-top: 24px;}
.btn{
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text);
  padding:10px 18px;
  border-radius:10px;
  font-size:13.5px;
  cursor:pointer;
}
.btn.primary{
  background:var(--accent);
  color:#0a0a0a;
  border-color:var(--accent);
  font-weight:700;
}

.last-update-line{
  text-align:center;
  font-size:11.5px;
  color:var(--text-dim);
  margin-top:10px;
}

@media (max-width:520px){
  .hero{padding:16px;}
  .brand{font-size:19px;}
  .item-label{font-size:14px;}
}

/* ===== PRINT ===== */
@media print{
  body{background:#fff !important;color:#000 !important;}
  .sync-pill,.whoami,.footer-actions,.last-update-line,.section-badge-current,.note-btn{display:none !important;}
  .hero,.section,.card{background:#fff !important; border:1px solid #999 !important; box-shadow:none !important; color:#000 !important;}
  .section-head{background:#f0f0f0 !important;}
  .brand .eletric{color:#000 !important;}
  .checkbox{border-color:#000 !important;background:#fff !important;}
  .item.checked .checkbox{background:#000 !important;}
  .item-meta{color:#555 !important;}
}

/* ===== HISTORICO ===== */
.hist-toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:18px;}
.hist-toolbar .meta-field{flex:0 0 auto; min-width:150px;}
.range-btns{display:flex;gap:8px;flex-wrap:wrap;}
.range-btn{
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
}
.range-btn.active{background:var(--accent); color:#0a0a0a; border-color:var(--accent); font-weight:700;}
.hist-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:18px;}
.hist-card{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px;}
.hist-card .label{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-bottom:6px;}
.hist-card .value{font-size:24px; font-weight:800; color:var(--accent);}
.hist-card .sub{font-size:12px; color:var(--text-dim); margin-top:2px;}
.hist-table-wrap{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:18px;}
table.hist-table{width:100%; border-collapse:collapse; font-size:13px;}
table.hist-table th{
  text-align:left; padding:10px 12px; background:var(--bg-card-2); color:var(--text-dim);
  font-size:11px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border);
}
table.hist-table td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
table.hist-table tr:last-child td{border-bottom:none;}
table.hist-table tr.no-data td{color:var(--text-dim); font-style:italic;}
.mini-bar{width:100%; max-width:120px; height:8px; background:var(--input-bg); border:1px solid var(--border); border-radius:999px; overflow:hidden; margin-top:4px;}
.mini-bar-fill{height:100%; background:linear-gradient(90deg, var(--accent-dim), var(--accent));}
.pct-cell{white-space:nowrap;font-weight:700;}
.nav-link{display:inline-block; margin-bottom:16px; color:var(--text-dim); font-size:13px; text-decoration:none;}
.nav-link:hover{color:var(--accent);}

/* ===== TOP ACTIONS / THEME TOGGLE ===== */
.top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.theme-toggle-icon{
  width:26px; height:26px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--border); background:var(--input-bg); color:var(--text);
  display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
  cursor:pointer; padding:0; transition: all .15s;
}
.theme-toggle-icon:hover{border-color:var(--accent);}

/* ===== TABS DE NAVEGAÇÃO ===== */
.tabs-nav{
  display:flex; background: var(--bg-card); border:1px solid var(--border);
  border-radius: 999px; padding:4px; margin: 4px 0 20px; gap:4px;
}
.tab-link{
  flex:1; text-align:center; padding:10px 14px; border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--text-dim); text-decoration:none; transition: all .15s;
}
.tab-link:hover{color:var(--text);}
.tab-link.active{background:var(--accent); color:#0a0a0a;}

/* ===== TEMA CLARO: banner de topo estilo faixa verde ===== */
html[data-theme="light"] .topbar{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow);
}
html[data-theme="light"] .topbar .zion,
html[data-theme="light"] .topbar .eletric,
html[data-theme="light"] .topbar .brand-sub{color:#ffffff;}
html[data-theme="light"] .topbar .sync-pill{background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color:#ffffff;}
html[data-theme="light"] .topbar .sync-dot{background:#ffffff; box-shadow:0 0 8px #ffffff;}
html[data-theme="light"] .topbar .theme-toggle-icon{background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); color:#ffffff;}
html[data-theme="light"] .who-btn.active,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .range-btn.active,
html[data-theme="light"] .section-badge-current,
html[data-theme="light"] .tab-link.active{color:#ffffff;}

/* ===== EDITAR (PIN + edicao de topicos) ===== */
.pin-gate{max-width:380px; margin: 60px auto;}
.pin-gate .card{text-align:center;}
.pin-gate input{
  width:100%; text-align:center; letter-spacing:4px; font-size:20px;
  background: var(--input-bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:12px 10px; font-family:inherit; margin:14px 0;
}
.pin-gate input:focus{outline:none;border-color:var(--accent);}
.pin-error{color:var(--danger); font-size:13px; min-height:18px; margin-top:4px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.edit-section{background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius); margin-bottom:16px; overflow:hidden;}
.edit-section-head{
  padding:12px 16px; background: var(--bg-card-2); border-bottom:1px solid var(--border);
  font-size:13px; font-weight:700; color:var(--accent);
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
.edit-section-head .head-left{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.edit-section-head .head-actions{display:flex; gap:6px; flex-wrap:wrap;}
.edit-item-row{display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border);}
.edit-item-row:last-child{border-bottom:none;}
.edit-item-row.inactive{opacity:.5;}
.edit-item-row input[type="text"]{
  flex:1; background: var(--input-bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:8px 10px; font-size:13.5px; font-family:inherit;
}
.edit-item-row input[type="text"]:focus{outline:none;border-color:var(--accent);}
.edit-actions-row{display:flex; gap:4px; flex:0 0 auto; flex-wrap:wrap; align-items:center;}
.btn.small{padding:6px 10px; font-size:12px; border-radius:8px;}
.btn.icon-only{padding:6px 9px; font-size:12px; line-height:1;}
.btn.danger{border-color: var(--danger); color: var(--danger);}
.btn.danger:hover{background: var(--danger); color:#fff;}
.add-item-row{display:flex; gap:8px; padding:12px 16px; flex-wrap:wrap;}
.add-item-row input[type="text"]{
  flex:1; min-width:180px; background: var(--input-bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:8px 10px; font-size:13.5px; font-family:inherit;
}
.block-edit-form{
  padding:14px 16px; background: var(--bg-card-2); border-bottom:1px solid var(--border);
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap:8px;
}
.block-edit-form input{
  background: var(--input-bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:8px 10px; font-size:13.5px; font-family:inherit;
}
.block-edit-form .full{grid-column: 1 / -1; display:flex; gap:8px; flex-wrap:wrap;}
.block-merge-row{
  padding:12px 16px; background: var(--bg-card-2); border-bottom:1px solid var(--border);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.block-merge-row select{
  background: var(--input-bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:8px 10px; font-size:13px; font-family:inherit; flex:1; min-width:180px;
}
.new-section-form{
  background: var(--bg-card); border:1px dashed var(--border); border-radius: var(--radius);
  padding:16px; display:grid; grid-template-columns: 2fr 1fr 1fr; gap:10px;
}
.new-section-form input{
  background: var(--input-bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:9px 10px; font-size:13.5px; font-family:inherit;
}
.new-section-form .full{grid-column: 1 / -1;}
.footer-note-link{text-align:center; margin-top:14px;}
.footer-note-link a{color:var(--text-dim); font-size:11.5px; text-decoration:none;}
.footer-note-link a:hover{color:var(--accent);}

/* ===== MODAL DE OBSERVAÇÃO ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000;
}
.modal-overlay.hidden{display:none;}
.modal-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:20px; width:100%; max-width:420px;
}
.modal-card h3{margin:0 0 4px; font-size:15px;}
.modal-card .modal-sub{font-size:12px; color:var(--text-dim); margin-bottom:10px;}
.modal-card textarea{
  width:100%; min-height:100px; background: var(--input-bg); border:1px solid var(--border);
  border-radius:8px; color:var(--text); padding:10px; font-family:inherit; font-size:14px; resize:vertical;
}
.modal-card textarea:focus{outline:none;border-color:var(--accent);}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px;}

/* ===== bloco excluido (colapsado) no modo de edicao ===== */
.edit-section.deleted{opacity:0.6; border-style:dashed;}
.edit-section.deleted .edit-section-head{padding:12px 16px;}
.edit-section.deleted .head-left span:last-child{color: var(--danger);}

/* ===== aviso de visualizacao de dia passado ===== */
.past-day-banner{background: rgba(255,193,7,0.12); border:1px solid #ffc107; color: #ffc107; border-radius: var(--radius); padding:10px 14px; font-size:13px; margin-bottom:16px;}
.past-day-banner a{color:inherit; text-decoration:underline; font-weight:600;}
html[data-theme="light"] .past-day-banner{background: #fff7e0; color:#8a6500;}

/* ===== admin no historico ===== */
.admin-hist-hint{font-size:12px; color:var(--text-dim); margin-top:6px;}
.admin-hist-hint a{color:var(--accent); font-weight:600;}
.hist-table .btn.small{padding:5px 9px; font-size:11px;}

/* ===== toggle "conta no %" por tarefa ===== */
.count-pct-toggle{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--text-dim);
  border:1px solid var(--border); background:var(--input-bg);
  padding:6px 10px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.count-pct-toggle input[type="checkbox"]{ margin:0; cursor:pointer; accent-color: var(--accent); }