:root{
  --bg: #0f1115;
  --panel: #171923;
  --panel-2:#1f2330;
  --text: #eef2ff;
  --muted:#a7b0c0;
  --accent:#7c5cff;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --teal:#14b8a6;
  --gold:#f5d15d;
  --shadow: 0 10px 24px rgba(0,0,0,.3);
}

/* tema claro */
body.light {
  --bg:#eef2ff; --panel:#ffffff; --panel-2:#f6f7ff; --text:#0f1115; --muted:#44506b;
  --shadow: 0 8px 20px rgba(0,0,0,.08);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1200px 700px at 15% -10%, #27314a 0%, #0f1115 60%) no-repeat, var(--bg);
}
body.light { background: var(--bg); }

.topbar{
  padding:16px 16px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.brand h1{ margin:0; font-size:24px; letter-spacing:.5px }
.subtitle{ margin:2px 0 0; color:var(--muted); font-size:13px }

.actions-right{ display:flex; gap:10px; align-items:center }
.btn{
  appearance:none; border:0; border-radius:10px; padding:10px 14px;
  background:var(--accent); color:white; cursor:pointer; box-shadow:var(--shadow);
  font-weight:600;
}
.btn:hover{ filter:brightness(1.05) }
.btn-ghost{ background:transparent; border:1px solid #2e3446; color:var(--text) }
body.light .btn-ghost{ border-color:#d5daf0 }
.btn-danger{ background:var(--danger) }

.file-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
  border:1px solid #2e3446; cursor:pointer; user-select:none;
}
.file-btn input{ display:none }
body.light .file-btn{ border-color:#d5daf0 }

main{ max-width:1280px; margin:0 auto; padding:0 16px 40px }

.breadcrumbs{
  display:flex; align-items:center; gap:8px; color:var(--muted);
  padding:8px 0 10px; font-size:14px;
}
.crumb{ padding:4px 8px; border-radius:8px }
.crumb.active{ background:#22283a; color:#cfd6ea; }
.sep{ opacity:.6 }
.hidden{ display:none !important }

/* === Grid / Cards === */
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
}

/* Desktop: cards maiores */
@media (min-width: 1024px){
  .grid{
    grid-template-columns: repeat( auto-fit, minmax(380px, 1fr) );
  }
}

.card{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-radius:16px; padding:18px;
  box-shadow:var(--shadow);
  border:1px solid #2a3144;
  display:flex; flex-direction:column; gap:12px;
}
.card-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.title{ display:flex; align-items:center; gap:10px; font-weight:700; }
.badge{
  padding:6px 12px; border-radius:999px; background:#262b3d; color:#c8cfdd; font-size:12px;
  border:1px solid #303651;
}
.badge-gold{ background:#3d331d; border-color:#7a5f1a; color:var(--gold) }

.meta{ color:var(--muted); font-size:13px; display:flex; flex-direction:column; gap:6px }
.meta strong{ color:var(--text) }

.progress{ display:flex; align-items:center; justify-content:space-between; }

/* Drawer */
.esfera-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 12px;
}
.esfera-header h2{ margin:0 }

.icon-btn{
  appearance:none; border:0; cursor:pointer; border-radius:10px;
  padding:8px 10px; color:#cfd6ea; background:#242a3b; border:1px solid #303651;
}
.icon-btn:hover{ filter:brightness(1.1) }
body.light .icon-btn{ background:#f1f3ff; color:#233; border-color:#d5daf0 }

.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:420px; max-width:95vw;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-left:1px solid #2d3450; box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.drawer-header{
  display:flex; align-items:center; justify-content:space-between; padding:16px;
  border-bottom:1px solid #303651;
}
.drawer-content{ padding:16px; overflow:auto }

.form-group{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
.form-group.inline{ flex-direction:row; gap:10px; align-items:center }
label{ font-size:13px; color:#cfd5ea }
body.light label{ color:#2a2f42 }
input, select{
  background:#1e2433; border:1px solid #333b57; color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none;
}
body.light input, body.light select{ background:#fff; border-color:#d9def1; color:#131725 }
input::placeholder{ color:#7782a3 }
.hint{ color:var(--muted); font-size:12px }

/* === Semana: chips (com destaque do dia atual) === */
.week-chips{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:10px; align-items:center;
}
.chip{
  display:flex; align-items:center; justify-content:center;
  height:28px; border-radius:8px; font-weight:700; letter-spacing:.5px;
  border:1px solid #3a425d; color:#cfd6ea; background:#2e3446;
  user-select:none; cursor:pointer;
}
.chip.on{
  background:var(--ok); border-color:#2b8b4a; color:#0b2314;
}
.chip.today{ border:2px solid #60a5fa; }
.chip.today.on{ border:2px solid #fff; }

/* ===== Menu flutuante de Status ===== */
.menu{
  position:fixed; z-index:1000; background:#1e2433; border:1px solid #333b57;
  border-radius:10px; box-shadow:var(--shadow); padding:6px;
}
.menu button{
  display:block; width:100%; text-align:left; padding:8px 10px; border:0; background:transparent;
  color:#e9ecfb; cursor:pointer; border-radius:8px;
}
.menu button:hover{ background:#2a3148 }

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px; background:#20263a; color:#e9ecfb; padding:10px 14px; border-radius:10px;
  box-shadow: var(--shadow); border:1px solid #2f3652; font-weight:600;
}

.small{ font-size:12px; color:var(--muted) }