:root{
  --bg:#08111f;
  --bg-2:#0d1a36;
  --panel:rgba(10,18,45,.88);
  --panel-soft:rgba(255,255,255,.06);
  --panel-border:rgba(77,108,185,.28);
  --card:#0f1b39;
  --card-2:#122347;
  --accent:#b9d51f;
  --accent-2:#d7f04b;
  --pink:#ff1b8d;
  --text:#f2f6ff;
  --muted:#aeb9d6;
  --blue:#22a8ff;
  --shadow:0 18px 45px rgba(0,0,0,.35);
  --radius:16px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.bg{
  background:
    radial-gradient(circle at left top, #1c2c66 0%, #091537 35%, #020814 100%);
  color:var(--text);
  min-height:100vh;
}

.login-body{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at left top, #1c2c66 0%, #091537 35%, #020814 100%);
  color:var(--text);
}

/* TOPO */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(4,10,24,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:14px 0;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
}

.logo{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:10px;
  background:transparent;
  padding:6px;
}

.logo--only{
  width:180px;
  height:82px;
  padding:6px;
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
}

.navlink{
  color:#fff;
  text-decoration:none;
  opacity:.9;
}

.navlink:hover{
  opacity:1;
  text-decoration:none;
  color:var(--accent-2);
}

.navuser{
  opacity:.85;
  font-size:13px;
  color:var(--muted);
}

.navbtn{
  background:rgba(255,255,255,.10);
  padding:8px 12px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
}

.navbtn:hover{
  background:rgba(255,255,255,.16);
}

.nav.nav-col{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.nav-top{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:24px 18px;
}

/* FEEDBACK */
.flash{
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:12px;
}

.flash.ok{
  background:rgba(34,255,160,.12);
  border:1px solid rgba(34,255,160,.25);
  color:#cbffe9;
}

.flash.err{
  background:rgba(255,70,70,.12);
  border:1px solid rgba(255,70,70,.25);
  color:#ffd2d2;
}

/* ESTRUTURA */
.panel{
  background:transparent;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.month-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.month-title{
  padding:12px 18px;
  background:rgba(255,255,255,.95);
  color:#111827;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:var(--shadow);
}

.iconbtn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:rgba(255,255,255,.95);
  color:#111827;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:var(--shadow);
}

.filters{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.filters > *{
  flex:0 1 auto;
}

.inp,
.sel{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
  backdrop-filter:blur(8px);
}

.inp{
  width:100%;
}

.inp.small{
  width:auto;
  min-width:190px;
}

.inp::placeholder{
  color:rgba(255,255,255,.45);
}

.inp:focus,
.sel:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(185,213,31,.15);
}

.btn{
  padding:12px 14px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-weight:700;
}

.btn:hover{
  filter:brightness(1.04);
}

.btn.primary{
  background:var(--accent);
  color:#08111f;
}

.btn.danger{
  background:rgba(255,60,60,.9);
  color:#fff;
}

.btn.tiny{
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
}

.h2{margin:0 0 12px 0}
.h3{margin:0 0 10px 0}

.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:18px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

/* TABELAS */
.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
}

.table th{
  font-size:12px;
  opacity:.75;
  color:var(--muted);
}

.table td small{
  opacity:.8;
}

/* CALENDÁRIO */
.calendar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.day{
  background:linear-gradient(180deg, rgba(17,31,66,.98) 0%, rgba(12,22,48,.96) 100%);
  color:var(--text);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height:260px;
  height:auto;
  position:relative;
  border:1px solid rgba(77,108,185,.24);
  display:flex;
  flex-direction:column;
}

.day--empty{
  background:transparent;
  border:0;
  box-shadow:none;
  min-height:260px;
}

.day-head{
  position:relative;
  z-index:1;
  background:linear-gradient(90deg, #cfe62c 0%, #b9d51f 100%);
  color:#09111f;
  padding:14px 18px 14px 86px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:900;
  font-size:15px;
  min-height:64px;
}

.day-num{
  position:absolute;
  top:0;
  left:0;
  width:70px;
  height:60px;
  border-radius:0 0 12px 0;
  background:linear-gradient(180deg, #ff2aa0 0%, #ff0f8a 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
  line-height:1;
  z-index:3;
}

.day-body{
  padding:20px 16px 12px 16px;
  text-align:left;
  color:var(--muted);
  flex:1;
}

.day-empty{
  opacity:.75;
  text-align:center;
}

.day-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 16px 16px 16px;
  min-height:58px;
}

.day-footer-spacer{
  flex:1;
}

.plus{
  position:static;
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--pink);
  color:#fff;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:900;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  flex:0 0 auto;
}

.more{
  margin:0 auto 0 0;
  padding:11px 22px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:var(--accent);
  color:#08111f;
  font-weight:900;
  min-width:220px;
  text-align:center;
}

.items{
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:left;
}

.item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.3;
  color:#edf3ff;
}

.item strong{
  display:block;
  font-size:15px;
  line-height:1.25;
  font-weight:800;
  color:#ffffff;
}

.badge{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:4px;
  flex:0 0 auto;
}

.badge.done{background:#23c483}
.badge.in_progress{background:#ff9800}
.badge.not_done{background:#ff3b30}

.item .meta{
  opacity:.9;
  color:var(--muted);
  font-size:13px;
  line-height:1.25;
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  padding:16px;
  z-index:50;
}

.modal.open{
  display:flex;
}

.modal-card{
  width:min(760px, 100%);
  max-height:90vh;
  overflow:auto;
  background:linear-gradient(180deg, #142550 0%, #0d1a36 100%);
  color:#fff;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  border:1px solid rgba(77,108,185,.28);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:linear-gradient(90deg, #cfe62c 0%, #b9d51f 100%);
  color:#09111f;
  font-weight:900;
  position:sticky;
  top:0;
  z-index:2;
}

.modal-body{
  padding:16px;
}

.modal-title{
  font-weight:900;
}

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.links{
  margin-top:10px;
  padding:10px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:14px;
}

.links-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.link-row{
  display:grid;
  grid-template-columns:1fr 1.3fr auto;
  gap:8px;
  margin-bottom:8px;
}

.link-row .inp{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
}

.link-row .btn{
  background:rgba(255,255,255,.14);
  color:#fff;
}

/* AÇÕES DO DIA */
.day-list{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
}

.day-list-head{
  margin-bottom:14px;
  font-size:20px;
  font-weight:800;
  color:#f2f6ff;
}

.day-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
  margin-bottom:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.day-item-top{
  display:block;
}

.day-item-main{
  width:100%;
}

.day-item-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.day-item .title{
  font-weight:900;
  font-size:20px;
  line-height:1.2;
  color:#ffffff;
}

.status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
}

.status-chip-done{
  background:rgba(35,196,131,.18);
  color:#7ff0bb;
  border-color:rgba(35,196,131,.28);
}

.status-chip-progress{
  background:rgba(255,152,0,.18);
  color:#ffd08a;
  border-color:rgba(255,152,0,.28);
}

.status-chip-danger{
  background:rgba(255,59,48,.18);
  color:#ffb3ad;
  border-color:rgba(255,59,48,.28);
}

.day-item-meta-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.day-item .meta{
  color:var(--text);
  opacity:.92;
  line-height:1.35;
  font-size:14px;
}

.meta-notes{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}

.day-item-actions-wrap{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.day-item-actions-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.day-item-actions-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-weight:700;
  transition:.2s ease;
}

.pill:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}

.pill-edit{
  background:rgba(255,255,255,.08);
}

.pill-delete{
  background:rgba(255,255,255,.08);
}

/* STATUS SEGMENTADO */
.status-segment{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

.segment-btn{
  min-width:44px;
  height:38px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:16px;
  font-weight:800;
  transition:.2s ease;
}

.segment-btn:hover{
  background:rgba(255,255,255,.08);
}

.segment-btn.is-active{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.segment-btn.is-done{
  background:#23c483;
  color:#08111f;
}

.segment-btn.is-progress{
  background:#ff9800;
  color:#08111f;
}

.segment-btn.is-danger{
  background:#ff3b30;
  color:#fff;
}

/* ANIMAÇÃO DE STATUS */
.status-flash{
  animation:statusPulse .45s ease;
}

@keyframes statusPulse{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  40%{
    transform:scale(1.015);
    box-shadow:0 0 0 6px rgba(185,213,31,.12);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
}

label{
  display:block;
  font-size:12px;
  opacity:.8;
  margin:10px 0 6px;
}

.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.chip{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}

/* LOGIN */
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

.login-wrap{
  width:100%;
  max-width:440px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.login-logo{
  text-align:center;
}

.login-logo img{
  max-width:220px;
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

.login-card{
  width:100%;
  background:rgba(10,18,45,.88);
  border:1px solid rgba(77,108,185,.28);
  border-radius:20px;
  padding:28px;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
}

.login-brand{
  display:block;
  margin-bottom:0;
}

.login-brand-text{
  width:100%;
}

.login-brand-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  margin-bottom:14px;
  color:#dbe4ff;
}

.login-title{
  font-size:22px;
  line-height:1.2;
  margin:0 0 10px;
  color:#f2f6ff;
  font-weight:800;
}

.login-brand-sub{
  font-size:15px;
  color:#aeb9d6;
  margin-bottom:22px;
}

.login-card label{
  display:block;
  font-size:14px;
  margin-bottom:8px;
  color:#dce5ff;
  opacity:1;
}

.login-card .inp{
  width:100%;
  height:48px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
  margin-bottom:16px;
}

.login-card .inp::placeholder{
  color:rgba(255,255,255,.45);
}

.login-card .inp:focus{
  border-color:#b9d51f;
  box-shadow:0 0 0 3px rgba(185,213,31,.15);
}

.login-btn{
  margin-top:8px;
  width:100%;
  height:50px;
  border:none;
  border-radius:14px;
  background:#b9d51f !important;
  color:#08111f !important;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.login-btn:hover{
  filter:brightness(1.05);
}

.login-foot{
  margin-top:16px;
  color:#97a4c6;
  text-align:left;
  opacity:1;
}

/* MOBILE TOPO E FILTROS */
@media (max-width:700px){
  .topbar{
    padding:20px 0 14px;
  }

  .topbar-inner{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    text-align:center;
  }

  .brand{
    width:100%;
    justify-content:center;
  }

  .logo--only{
    width:190px;
    height:auto;
    padding:0;
  }

  .nav.nav-col{
    width:100%;
    align-items:center;
    gap:10px;
  }

  .nav-top{
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
  }

  .nav-links{
    justify-content:center;
    gap:14px;
  }

  .navuser{
    display:block;
    width:100%;
    text-align:center;
  }

  .panel-head{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }

  .month-nav{
    width:100%;
    justify-content:center;
    gap:10px;
  }

  .month-title{
    text-align:center;
    font-size:15px;
    padding:12px 16px;
  }

  .filters{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
  }

  .filters .sel,
  .filters .inp,
  .filters .inp.small,
  .filters .btn{
    width:100%;
    min-width:0;
  }

  .filters .btn{
    height:48px;
  }

  .container{
    padding:18px 12px;
  }
}

@media (max-width:640px){
  .day-item-title-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .day-item-actions-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .day-item-actions-right{
    width:100%;
  }

  .pill-delete{
    width:100%;
    text-align:center;
  }
}

@media (max-width:560px){
  .calendar{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}

  .container{
    padding:16px 10px;
  }

  .topbar{
    padding:18px 0 12px;
  }

  .logo--only{
    width:170px;
  }

  .nav-links{
    gap:12px;
    font-size:15px;
  }

  .month-nav{
    gap:8px;
  }

  .iconbtn{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }

  .month-title{
    font-size:14px;
    line-height:1.2;
    padding:12px 14px;
  }

  .filters{
    gap:10px;
  }

  .inp,
  .sel{
    height:44px;
    padding:10px 12px;
    font-size:15px;
  }

  .btn{
    height:46px;
    font-size:15px;
  }

  .day{
    min-height:230px;
  }

  .day--empty{
    min-height:230px;
  }

  .day-head{
    padding:12px 12px 12px 76px;
    font-size:14px;
    min-height:58px;
  }

  .day-num{
    width:60px;
    height:58px;
    font-size:18px;
  }

  .day-body{
    padding:16px 14px 12px 14px;
  }

  .day-footer{
    padding:0 14px 14px 14px;
    min-height:54px;
  }

  .more{
    min-width:170px;
    padding:10px 16px;
    font-size:13px;
  }

  .plus{
    width:38px;
    height:38px;
    font-size:22px;
  }

  .login-page{
    padding:24px 16px;
  }

  .login-card{
    padding:22px 18px;
  }

  .login-logo img{
    max-width:190px;
  }
}